/* ════════════════════════════════════════════════════════════════════════
   09-hero.css — VOALA hlavní banner (hero / slider)

   Zdroj: Figma VOALA_WEB_2025 → HOMEPAGE 2157:880 (verze z 2. 9. 2026).
   - fotka V ŠÍŘCE TĚLA STRÁNKY (1222 × 650, x = 109), ne přes celý
     prohlížeč — změna na přání klienta (e-mail 2. 9. 2026); platí i pro
     [vo_page_hero] na podstránkách (21-page-hero.css)
   - text 77 px od levé hrany fotky (Figma x = 186), verzálky nadpisu
     71 px pod horní hranou; tlačítko ukotvené ke DNU (73 px nad spodní
     hranou), šipky svisle na středu, zarovnané s levou hranou textu
   - nadpis 64/120 %: 1. řádek regular, 2. řádek bold
   - podnadpis 32/120 % RED_VOALA (nový frame ho nemá, ale pole zůstává)
   - tlačítko: červený pill 40 px, Inter 600 16/18
   - šipky: rohová závorka 49,9 (stroke 2, VOALA_DARK_GRAY), rotace 45°

   Markup: template-parts/hero.php → [vo_hero]
   Sekce v Divi dostává CSS Class „vo-hero-section".
   ════════════════════════════════════════════════════════════════════════ */

/* ── Divi sekce — reset ──────────────────────────────────────────────── */
.vo-hero-section.et_pb_section {
  padding: 0 !important;
  background: transparent !important;
  gap: 0 !important;
  position: relative;
  z-index: 1;              /* pod sticky headerem (200) */
}
.vo-hero-section > .et_pb_row {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Fluidní hodnoty ─────────────────────────────────────────────────────
   Lineární interpolace mezi mobilním (390) a desktopovým (1440) framem
   (mobilní frame je starší, full-bleed 390 × 420 — jeho rytmus přebíráme,
   šířku ne):

                     390 px      1440 px
   výška fotky       420         650
   nadpis             34          64
   podnadpis          18          32
   mezera nadpis→pod  18          57   (opticky mezi verzálkami)
   mezera pod→button  24 *        70   (* mobil tlačítko v designu nemá)
   odsazení textu     16          77   (od levé hrany FOTKY; Figma x = 186)
   padding nahoře     26          49   (verzálky nadpisu 34 / 71 od hrany)
   padding dole       28          73   (dno tlačítka od spodní hrany)
   ──────────────────────────────────────────────────────────────────────── */
.vo-hero {
  --vo-hero-h:          clamp(420px, calc(334.6px + 21.9vw), 650px);
  --vo-hero-pad-top:    clamp(26px,  calc(17.46px + 2.19vw), 49px);
  --vo-hero-pad-bottom: clamp(28px,  calc(11.3px + 4.29vw),  73px);
  --vo-hero-inset:      clamp(16px,  5.35vw,                 77px);
  --vo-hero-title:      clamp(34px,  calc(22.86px + 2.857vw), 64px);
  --vo-hero-subtitle:   clamp(18px,  calc(12.8px + 1.333vw),  32px);
  --vo-hero-gap-sub:    clamp(4.8px, calc(-6.6px + 2.91vw),   35.4px);
  --vo-hero-gap-btn:    clamp(20px,  calc(1.4px + 4.76vw),    70px);

  position: relative;
  /* Fotka drží tělo stránky (1222), na užším okně stejné boční okraje
     jako ostatní obsah (24 px, na mobilu 16 px). */
  width: min(var(--container), 100% - 48px);
  margin: 0 auto;
  background: var(--white-voala);
  font-family: var(--font-base);
  overflow: hidden;
}

.vo-hero__viewport { overflow: hidden; }

.vo-hero__track {
  display: flex;
  will-change: transform;
  transition: transform var(--t-slow);
}

/* ── Snímek ──────────────────────────────────────────────────────────── */
/* Nadpis je ukotvený k horní hraně (Figma: verzálky 71 px od hrany na
   1440, 34 px na 390), tlačítko ke spodní (73 px) — proto padding nahoře
   i dole a flex sloupec se space-between. min-height místo height: dlouhý
   nadpis od klienta sekci natáhne, nepřeteče ji. */
.vo-hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  min-height: var(--vo-hero-h);
  padding: var(--vo-hero-pad-top) 0 var(--vo-hero-pad-bottom);
  display: flex;
  align-items: stretch;
}

.vo-hero__img,
.vo-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* Video-loop: stejné chování jako fotka (cover), bez nativního ovládání */
.vo-hero__video { pointer-events: none; background: var(--gray-voala); }
.vo-hero__video::-webkit-media-controls { display: none !important; }

/* Vnitřek: sekce sama je už kontejner, tak jen plná výška snímku */
.vo-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
}

/* Textový sloupec — nadpis nahoře, tlačítko u dna, obojí odsazené od
   levé hrany fotky o --vo-hero-inset (stejně jako levá šipka) */
.vo-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: var(--vo-hero-gap-btn);
  max-width: 620px;
  margin-left: var(--vo-hero-inset);
  margin-right: var(--vo-hero-inset);
}

/* ── Nadpis ──────────────────────────────────────────────────────────── */
.vo-hero .vo-hero__title {
  margin: 0;
  padding: 0;
  font-size: var(--vo-hero-title);
  font-weight: 400;          /* základ je tenký řez */
  line-height: 1.2;
  color: var(--black-voala);
  letter-spacing: -.5px;
}
/* Tučnou část si klient označí v administraci pomocí <strong> */
.vo-hero__title strong,
.vo-hero__title b { font-weight: 700; }
.vo-hero__title em,
.vo-hero__title i { font-style: italic; }

/* ── Podnadpis ───────────────────────────────────────────────────────── */
.vo-hero .vo-hero__subtitle {
  margin: var(--vo-hero-gap-sub) 0 0;
  max-width: 356px;   /* šířka textového bloku z Figmy (mobil 358) */
  font-size: var(--vo-hero-subtitle);
  font-weight: 400;
  line-height: 1.2;
  color: var(--red-voala);
}

/* ── Tlačítko ────────────────────────────────────────────────────────── */
/* Mezeru od textu dělá row-gap sloupce; align-self, aby se pill
   neroztáhl na šířku sloupce */
.vo-hero .vo-hero__btn,
.vo-hero a.vo-hero__btn {
  align-self: flex-start;
  min-height: 40px;
  padding: 11px 26px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  border-radius: 30px !important;
}

/* ── Světlý text (tmavé fotky) ───────────────────────────────────────── */
.vo-hero__slide--light .vo-hero__title { color: var(--white-voala); }
.vo-hero__slide--light .vo-hero__subtitle { color: var(--white-voala); }
.vo-hero__slide--light .vo-hero__title,
.vo-hero__slide--light .vo-hero__subtitle { text-shadow: 0 1px 12px rgba(0, 0, 0, .28); }

/* ── Šipky ───────────────────────────────────────────────────────────── */
.vo-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 69px;
  height: 69px;
  margin-top: -34.5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gray-voala);
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast);
}
.vo-hero__arrow:hover { color: var(--red-voala); }
.vo-hero__arrow:focus-visible {
  outline: 2px solid var(--red-voala);
  outline-offset: 4px;
  border-radius: 6px;
}
/* Bez stínu — čára má být ostrá jako v designu. Čitelnost na světlé fotce
   se řeší volbou barvy u snímku, ne stínem. */
.vo-hero__arrow svg {
  display: block;
  width: 50px;
  height: 50px;
}

/* ── Barevné varianty šipek ──────────────────────────────────────────────
   Výchozí je šedá #EAEAEA z Figmy. Pod levou a pravou šipkou bývá jinak
   světlé místo fotky, proto se barva nastavuje u snímku zvlášť pro každou
   stranu (Šablona nastavení → Hlavní banner) a vo-hero.js ji při přepnutí
   snímku přehodí.
   ──────────────────────────────────────────────────────────────────────── */
.vo-hero__arrow.is-dark  { color: var(--black-voala); }
.vo-hero__arrow.is-light { color: #fff; }
.vo-hero__arrow.is-red   { color: var(--red-voala); }

/* Hover: světlé varianty do červené, červená ztmavne */
.vo-hero__arrow.is-red:hover { color: var(--red-voala-dark); }

/* Rohová závorka → chevron (45° = „<", 225° = „>") */
.vo-hero__arrow--prev svg { transform: rotate(45deg); }
.vo-hero__arrow--next svg { transform: rotate(225deg); }

/* Šipky sedí UVNITŘ fotky, levá zarovnaná s levou hranou textu (Figma:
   závorka x = 182,6 vs. text 186 → obojí --vo-hero-inset). Pravá je ve
   Figmě jen 5 px od hrany, což vypadá jako nedotažené — držíme zrcadlově
   stejné odsazení. */
.vo-hero__arrow--prev { left: var(--vo-hero-inset); }
.vo-hero__arrow--next { right: var(--vo-hero-inset); }

.vo-hero__arrow--prev:hover { transform: translateX(-3px); }
.vo-hero__arrow--next:hover { transform: translateX(3px); }

/* ── Přístupnost ─────────────────────────────────────────────────────── */
.vo-hero .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .vo-hero__track { transition: none; }
  .vo-hero__arrow { transition: none; }
  .vo-hero__arrow:hover { transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vo-hero__arrow { width: 56px; height: 56px; margin-top: -28px; }
  .vo-hero__arrow svg { width: 40px; height: 40px; }

  /* Šipky jsou svisle na středu mezi nadpisem (nahoře) a tlačítkem (dole);
     text se s nimi nekříží, takže odsazení zůstává --vo-hero-inset. */
}

@media (max-width: 720px) {
  /* Mobilní frame: boční okraje 16 px (Figma x = 16, obsah 358).
     Tlačítko design na mobilu nemá — když ho klient vyplní, zobrazí se
     pod podnadpisem. */
  .vo-hero { width: calc(100% - 32px); }
  .vo-hero__inner { padding: 0 16px; }   /* text 16 px od hrany fotky */
  /* Šipky jsou dole v rozích, text tedy může přes celou šířku obsahu (358).
     Tlačítko se na mobilu neukotvuje ke dnu (kolidovalo by s levou šipkou),
     jde hned pod text jako v původní mobilní verzi. */
  .vo-hero__content {
    justify-content: flex-start;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* Podnadpis se na mobilu láme dřív, aby seděl na tři řádky jako v designu */
  .vo-hero .vo-hero__subtitle { max-width: 240px; }

  /* Šipky dolů k okrajům, ať nepřekáží textu (mobilní mock je statický,
     ovládání slideru tam design neřeší — swipe funguje i bez nich). */
  /* Odsazení šipek: zleva a zprava 16 px, zdola stejně, jako má text
     shora (--vo-hero-pad-top). */
  .vo-hero__arrow {
    top: auto;
    bottom: var(--vo-hero-pad-top);
    margin-top: 0;
    width: 44px;
    height: 44px;
  }
  .vo-hero__arrow svg { width: 30px; height: 30px; }
  .vo-hero__arrow--prev { left: 16px; }
  .vo-hero__arrow--next { right: 16px; }
}