/* Černá scéna na stránce elektrických grilů.

   Roman 13. 9. 2026: „najít nějaké fotky grilů na elektriku styl lifestyle
   a připravit k tomu povídání na černém podkladu, stejný styl jako u uhlí",
   k tomu odkaz na stránku elektrických grilů na weber.com.

   Stavba i chování jsou stejné jako u scén plynu, uhlí a planchy, styl je
   ale zase vlastní: jsou to samostatné sekce různých způsobů grilování
   a společný zápis by nutil hlídat každou úpravu na všech stránkách.

   Všechny selektory drží třídu body.stranka-elektrina; na ostatních
   stránkách se scéna nezobrazuje. */

/* ---- Kde se scéna ukáže a kde ne ----------------------------------- */

.elektrina-proc { display: none; }
body.stranka-elektrina .elektrina-proc { display: block; }

/* Peletový gril patří na titulku a k peletám, ne k elektrickým grilům. */
body.stranka-elektrina .searwood,
body.stranka-elektrina .searwood-nabidka { display: none; }

/* ---- Plocha scény --------------------------------------------------- */

/* Scéna vystupuje z obalu přes celou šířku okna — tmavá plocha useknutá
   do sloupce textu by vypadala jako omylem obarvený blok. */
.elektrina-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;
}

.elektrina-proc .elektrina-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 zbozi-elektrina.js jen tam, kde je opravdová myš. */
.elektrina-proc .elektrina-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;
}

/* Obsah leží nad plátnem. */
.elektrina-proc .elektrina-proc-hlava,
.elektrina-proc .elektrina-proc-blok { position: relative; z-index: 1; }

/* ---- Hlavička ------------------------------------------------------- */

/* Hlavička je dvousloupcová: text vlevo v původní šířce, logo Weber vpravo
   vedle nadpisu — stejně jako na scéně plynu. */
.elektrina-proc .elektrina-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);
}

.elektrina-proc .elektrina-proc-kicker,
.elektrina-proc .elektrina-proc-nadpis,
.elektrina-proc .elektrina-proc-perex { grid-column: 1; }

/* Logo sedí ve druhém sloupci přes všechny řádky hlavičky, takže stojí
   naproti nadpisu a drží se u pravého kraje scény. */
.elektrina-proc .elektrina-proc-logo {
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: end;
  align-self: center;
  width: clamp(150px, 15vw, 210px);
  height: auto;
  margin: 0;
}

.elektrina-proc .elektrina-proc-kicker {
  margin: 0 0 14px;
  color: var(--red, #e01820);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.elektrina-proc .elektrina-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. */
.elektrina-proc .elektrina-proc-nadpis span {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.elektrina-proc .elektrina-proc-perex {
  margin: 26px 0 0;
  max-width: 56ch;
  color: #b9b9bd;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
}

/* ---- Bloky s fotkou a textem ---------------------------------------- */

.elektrina-proc .elektrina-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);
}

.elektrina-proc .elektrina-proc-blok:last-child { margin-bottom: 0; }

/* Každý druhý blok má fotku vpravo, aby stránka nešla jen jedním sloupcem. */
.elektrina-proc .elektrina-proc-blok.je-obracene .elektrina-proc-obraz { order: 2; }

/* Rám drží poměr 16:10 pro všechny fotky bez ohledu na to, jak je která
   vysoká, a ořízne je na střed. Tmavý podklad zůstává pod nimi, aby při
   načítání nevznikla na černé scéně světlá díra. */
.elektrina-proc .elektrina-proc-obraz {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid #26262a;
  border-radius: 4px;
  background: linear-gradient(140deg, #151517, #1b1b1f);
}

.elektrina-proc .elektrina-proc-obraz img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.elektrina-proc .elektrina-proc-text h3 {
  margin: 0 0 18px;
  font-size: clamp(21px, 2.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* Krátká červená linka pod nadpisem bloku — tentýž znak, jaký má scéna
   plynu, takže obě stránky mluví stejným jazykem. */
.elektrina-proc .elektrina-proc-text h3::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 16px;
  background: var(--red, #e01820);
}

.elektrina-proc .elektrina-proc-text p {
  margin: 0;
  max-width: 52ch;
  color: #b9b9bd;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
}

/* ---- 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()) {
  .elektrina-proc [data-nabehne] {
    opacity: 0;
    translate: 0 26px;
    animation: elektrina-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. */
  .elektrina-proc .elektrina-proc-nadpis span {
    animation: elektrina-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. */
  .elektrina-proc .elektrina-proc-obraz {
    animation: elektrina-proc-obraz linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 38%;
  }
}

@keyframes elektrina-proc-nabeh { to { opacity: 1; translate: 0 0; } }
@keyframes elektrina-proc-slovo {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
@keyframes elektrina-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) {
  .elektrina-proc [data-nabehne],
  .elektrina-proc .elektrina-proc-nadpis span,
  .elektrina-proc .elektrina-proc-obraz {
    opacity: 1;
    translate: none;
    transform: none;
    scale: 1;
    clip-path: none;
    animation: none;
  }
}

/* ---- Mobil ---------------------------------------------------------- */

@media (max-width: 760px) {
  .elektrina-proc .elektrina-proc-scena { padding: 64px 18px 72px; }
  /* Na úzké obrazovce není vedle nadpisu místo, logo jde nad text. */
  .elektrina-proc .elektrina-proc-hlava {
    grid-template-columns: 1fr;
    margin-bottom: 54px;
  }
  .elektrina-proc .elektrina-proc-logo {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: 132px;
    margin-bottom: 26px;
  }
  .elektrina-proc .elektrina-proc-blok {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 64px;
  }
  /* Na jednom sloupci má fotka stát vždycky nad textem; střídání stran
     dává smysl jen tam, kde jsou vedle sebe. */
  .elektrina-proc .elektrina-proc-blok.je-obracene .elektrina-proc-obraz { order: 0; }
}