/* Sekce „Čím jsou plynové grily výjimečné" na /zbozi?typ=plyn.

   Roman 11. 9. 2026: „černé pozadí, efekt kurzoru, a místo peletáku
   informace o plynových grilech — rolujeme a přichází text, pak video
   a fotky postupně." Předlohou je chanel.com/bleu-de-chanel
   a bkkdw26.greydientlab.com: na tmavé ploše se obsah neodkrývá naráz,
   ale kus po kuse, jak se posouváš dolů.

   Všechno visí pod .plyn-proc a soubor si načítá jen stránka zboží,
   takže se to nemá jak dostat do jiné sekce. Scéna peletového grilu na
   titulce zůstává, jak byla — Roman 11. 9. 2026: „každá sekce musí být
   samostatná, nemohou se navzájem ovlivňovat."

   Obrazová místa jsou zatím prázdné rámečky; fotky a videa se do nich
   doplní z naší databáze. */

/* Scéna vystupuje z obalu přes celou šířku okna — tmavá plocha useknutá
   do sloupce textu by vypadala jako omylem obarvený blok. */
/* Scéna stála uvnitř rozcestníku plynu a tím se sama zobrazovala jen tam.
   Od 12. 9. 2026 leží až pod žlutým pruhem, vedle scény Searwood, takže si
   o zobrazení musí říct sama — jinde na webu nemá co dělat. */
.plyn-proc { display: none; }
body.stranka-plyn .plyn-proc { display: block; }

.plyn-proc {
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  background: #0c0c0d;
  color: #fff;
  /* Roman 13. 9. 2026: „efekt kurzoru nesmí být v sekci zboží, jen v černém
     prostředí reklamního černého pruhu." Plátno stopy je sticky se záporným
     okrajem a na konci scény přečnívalo až o výšku okna do katalogu, kde
     stopa svítila přes tmavé fotky produktů. Ořez to drží v černé ploše;
     clip na rozdíl od hidden nezakládá posuvnou oblast, takže sticky dál funguje. */
  overflow: clip;
}

.plyn-proc .plyn-proc-scena {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 150px) 24px clamp(90px, 14vh, 170px);
}

/* Plátno se žhavou stopou kurzoru. Drží se v okně (sticky) a záporný
   spodní okraj mu bere místo v toku, takže obsah scény leží na něm,
   ne pod ním. Zakládá ho skript jen tam, kde je opravdová myš. */
.plyn-proc .plyn-proc-stopa {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.plyn-proc .plyn-proc-hlava,
.plyn-proc .plyn-proc-blok { position: relative; z-index: 1; }

/* Hlavička je dvousloupcová: text vlevo v původní šířce, logo Weber vpravo
   vedle nadpisu. Roman 12. 9. 2026 to ukázal na snímku — logo má stát
   naproti nadpisu, ne nad ním. */
.plyn-proc .plyn-proc-hlava {
  display: grid;
  grid-template-columns: minmax(0, 720px) 1fr;
  align-items: center;
  column-gap: clamp(24px, 4vw, 70px);
  margin-bottom: clamp(70px, 11vh, 130px);
}

.plyn-proc .plyn-proc-kicker,
.plyn-proc .plyn-proc-nadpis,
.plyn-proc .plyn-proc-perex { grid-column: 1; }
/* Logo Weber napravo od nadpisu, svisle na jeho úrovni. Sedí ve druhém
   sloupci hlavičky přes všechny její řádky, takže se veze s textem a drží
   se u pravého kraje scény. */
.plyn-proc .plyn-proc-logo {
  grid-column: 2;
  grid-row: 1 / -1;
  z-index: 1;
  justify-self: end;
  align-self: center;
  width: clamp(150px, 15vw, 210px);
  height: auto;
  margin: 0;
}

.plyn-proc .plyn-proc-kicker {
  margin: 0 0 14px;
  color: var(--red, #e01820);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.plyn-proc .plyn-proc-nadpis {
  margin: 0;
  font-size: clamp(34px, 6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
/* Slova mají vlastní řádek s výřezem, aby se dala vysunout zespoda jako
   u Chanelu — text nevybledne, on přijede. */
.plyn-proc .plyn-proc-nadpis span {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.plyn-proc .plyn-proc-perex {
  margin: 26px 0 0;
  max-width: 56ch;
  color: #b9b9bd;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
}

.plyn-proc .plyn-proc-blok {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 76px);
  margin-bottom: clamp(90px, 15vh, 180px);
}
.plyn-proc .plyn-proc-blok:last-child { margin-bottom: 0; }
/* Každý druhý blok má obraz vpravo — jinak by sloupec médií četl jako
   jeden dlouhý pruh u kraje. */
.plyn-proc .plyn-proc-blok.je-obracene .plyn-proc-obraz { order: 2; }

/* Rám s fotkou nebo videem. Médium ho vyplní celé a ořízne se na střed,
   takže všechny čtyři obrazy drží stejný tvar bez ohledu na to, jak je
   která fotka vysoká. Tmavý podklad pod ním svítí jen do chvíle, než se
   obraz načte — na černé scéně tak nevznikne bílá díra. */
.plyn-proc .plyn-proc-obraz {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid #26262a;
  border-radius: 4px;
  background: linear-gradient(140deg, #151517, #1b1b1f);
}
.plyn-proc .plyn-proc-obraz img,
.plyn-proc .plyn-proc-obraz video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plyn-proc .plyn-proc-text h3 {
  margin: 0 0 14px;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.plyn-proc .plyn-proc-text h3:after {
  content: "";
  display: block;
  width: 74px;
  height: 4px;
  margin: 16px 0;
  background: var(--red, #e01820);
  transform: skewX(-28deg);
}
.plyn-proc .plyn-proc-text p {
  margin: 0 0 12px;
  color: #b9b9bd;
  font-size: 15px;
  line-height: 1.68;
}
.plyn-proc .plyn-proc-poznamka { color: #74747c; font-size: 12px; }

/* ----------------------------------------------- postupné odkrývání

   Jede na scroll-driven animaci, tedy bez skriptu: prohlížeč sám váže
   průběh na to, kde prvek je v okně. Kde to prohlížeč neumí, je obsah
   rovnou vidět — proto je celý efekt uzavřený v @supports. */
@supports (animation-timeline: view()) {
  .plyn-proc [data-nabehne] {
    opacity: 0;
    translate: 0 26px;
    animation: plyn-proc-nabeh linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 32%;
  }

  /* Slova nadpisu jedou zespoda za sebou: každé další má okno posunuté
     o kousek dál, takže dobíhají postupně, ne všechna naráz. */
  .plyn-proc .plyn-proc-nadpis span {
    animation: plyn-proc-slovo linear both;
    animation-timeline: view();
    animation-range: entry calc(6% + var(--i) * 7%) entry calc(62% + var(--i) * 7%);
  }

  /* Obraz se odkrývá zdola a zároveň dojíždí do plné velikosti — stejný
     pohyb, jakým na předloze přicházejí fotky a videa. */
  .plyn-proc .plyn-proc-obraz {
    animation: plyn-proc-obraz linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 38%;
  }
}

@keyframes plyn-proc-nabeh { to { opacity: 1; translate: 0 0; } }
@keyframes plyn-proc-slovo {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
@keyframes plyn-proc-obraz {
  from { opacity: 0; scale: .92; clip-path: inset(100% 0 0 0); }
  to { opacity: 1; scale: 1; clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .plyn-proc [data-nabehne],
  .plyn-proc .plyn-proc-nadpis span,
  .plyn-proc .plyn-proc-obraz {
    opacity: 1;
    translate: none;
    transform: none;
    scale: 1;
    clip-path: none;
    animation: none;
  }
}

@media (max-width: 860px) {
  .plyn-proc { margin-top: 48px; }
  .plyn-proc .plyn-proc-scena { padding: 64px 18px 72px; }
  /* Na úzké obrazovce nemá logo vedle nadpisu kam — narazilo by do
     „ČÍM JSOU". Jde proto do toku nad nadřádkový popisek. */
  .plyn-proc .plyn-proc-logo {
    position: static;
    width: 112px;
    margin: 0 0 24px;
  }
  /* Na úzké obrazovce není vedle nadpisu místo, logo jde nad text. */
  .plyn-proc .plyn-proc-hlava {
    grid-template-columns: 1fr;
    margin-bottom: 54px;
  }
  .plyn-proc .plyn-proc-logo {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: 132px;
    margin-bottom: 24px;
  }
  .plyn-proc .plyn-proc-blok { grid-template-columns: 1fr; gap: 20px; margin-bottom: 64px; }
  .plyn-proc .plyn-proc-blok.je-obracene .plyn-proc-obraz { order: 0; }
}

/* --------------------------------------- co na stránce plynu být nemá

   Roman 11. 9. 2026: „žlutý banner dej k černému nad ním a peletový gril
   i peletky dej pryč — jen na plynu."

   Peletový gril je doma na titulce a u pelet; na stránce plynových grilů
   plete. A žlutý pruh visel 259 px pod černou scénou, takže mezi nimi
   svítil bílý pás. Obojí platí jen tady: pravidla visí na těle stránky
   plynu, na ostatních palivech zůstává vše, jak bylo. */
body.stranka-plyn .searwood,
body.stranka-plyn .searwood-nabidka { display: none; }

/* Odstup žlutého pruhu od řady grilů se tu schválně nenastavuje.

   Roman 11. 9. 2026 chtěl pruh přilepený k černé scéně, protože pod ní
   svítil bílý pás; od 12. 9. je pořadí obrácené a pruh stojí nad scénou.
   Roman 12. 9.: „rozestup mezi produkty a žlutým rámečkem musí být
   stejný." Platí tedy společné pravidlo pro všechny stránky paliv
   (clamp(180px, 18vw, 260px) v zbozi-weber.css) a plyn drží stejný
   odstup jako uhlí. Vlastní hodnota by se od uhlí zase rozešla. */