/* ════════════════════════════════════════════════════════════════════════
   21-page-hero.css — VOALA hero podstránky (statická fotka + závorky)

   Zdroj: Figma VOALA_WEB_2025 → PRINTLAB (24:1323), KDO JSME (2159:1982),
   verze z 2. 9. 2026
   - fotka V ŠÍŘCE TĚLA STRÁNKY: 1222 × 650 (x = 109, hned pod hlavičkou),
     ne přes celý prohlížeč — změna na přání klienta (e-mail 2. 9. 2026),
     stejně jako hlavní banner homepage (09-hero.css)
   - rohové závorky: stejný tvar jako šipky hero (path 48,9, stroke 2,
     VOALA_DARK_GRAY, bounding 69 × 69), svisle na středu fotky, odsazené
     od hran fotky stejně jako na homepage (--vo-hero-inset 16 → 77 px)
   - výška: mobilní frame pro podstránku neexistuje → přebíráme rytmus
     homepage hero 420 → 650 (stejný clamp jako v 09-hero.css)

   Markup: includes/shortcodes-page-hero.php → [vo_page_hero image="URL"]
   Sekce v Divi dostává CSS Class „vo-page-hero-section".
   ════════════════════════════════════════════════════════════════════════ */

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

/* ── Fotka / slider ──────────────────────────────────────────────────────
   Jedna fotka = statický banner. Dvě a více (parametr images) = slider —
   markup dostane stejné data-atributy jako hlavní banner homepage, takže
   ho obsluhuje tentýž assets/js/vo-hero.js (šipky, klávesy, swipe,
   autoplay s pauzou na hover/fokus/skrytou kartu).
   ──────────────────────────────────────────────────────────────────────── */
.vo-page-hero {
  --vo-hero-inset: clamp(16px, 5.35vw, 77px);
  position: relative;
  width: min(var(--container), 100% - 48px);   /* tělo stránky, na užším okně okraje 24 px */
  height: clamp(420px, calc(334.6px + 21.9vw), 650px);  /* 390 → 1440 */
  margin: 0 auto;
  background: var(--gray-voala);   /* než se fotka načte */
  box-shadow: var(--shadow-map);
  overflow: hidden;
}

.vo-page-hero__viewport {
  height: 100%;
  overflow: hidden;
}

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

.vo-page-hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
}

.vo-page-hero__img,
.vo-page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Video-loop (položka v images s příponou .mp4/.webm): tiché, ve smyčce */
.vo-page-hero__video { pointer-events: none; background: var(--gray-voala); }
.vo-page-hero__video::-webkit-media-controls { display: none !important; }

/* ── Rohové závorky ──────────────────────────────────────────────────────
   Stejná geometrie jako šipky hero (09-hero.css): uvnitř fotky, odsazené
   od jejích hran o --vo-hero-inset, svisle na středu. U jedné fotky jen dekorace (span, bez hoveru
   a kurzoru), u slideru tlačítka předchozí/další.
   ──────────────────────────────────────────────────────────────────────── */
.vo-page-hero__corner {
  position: absolute;
  top: 50%;
  z-index: 1;
  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);
  pointer-events: none;
}
.vo-page-hero__corner svg {
  display: block;
  width: 50px;
  height: 50px;
}

/* Slider: závorky jsou tlačítka — chovají se jako šipky hero na homepage */
button.vo-page-hero__corner {
  pointer-events: auto;
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast);
}
button.vo-page-hero__corner:hover { color: var(--red-voala); }
button.vo-page-hero__corner:focus-visible {
  outline: 2px solid var(--red-voala);
  outline-offset: 4px;
  border-radius: 6px;
}
button.vo-page-hero__corner--left:hover  { transform: translateX(-3px); }
button.vo-page-hero__corner--right:hover { transform: translateX(3px); }

/* Barevné varianty šipek pro fotky, kde šedá zaniká (parametr arrows;
   vo-hero.js je přehazuje podle data-arrow-* na snímku) */
.vo-page-hero__corner.is-dark  { color: var(--black-voala); }
.vo-page-hero__corner.is-light { color: #fff; }
.vo-page-hero__corner.is-red   { color: var(--red-voala); }
button.vo-page-hero__corner.is-red:hover { color: var(--red-voala-dark); }

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

.vo-page-hero__corner--left  { left:  var(--vo-hero-inset); }
.vo-page-hero__corner--right { right: var(--vo-hero-inset); }

/* ── Přístupnost ─────────────────────────────────────────────────────── */
.vo-page-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-page-hero__track { transition: none; }
  button.vo-page-hero__corner { transition: none; }
  button.vo-page-hero__corner:hover { transform: none; }
}

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

@media (max-width: 720px) {
  /* Mobilní okraje 16 px jako zbytek webu */
  .vo-page-hero { width: calc(100% - 32px); }
  .vo-page-hero__corner { width: 44px; height: 44px; margin-top: -22px; }
  .vo-page-hero__corner svg { width: 30px; height: 30px; }
  .vo-page-hero__corner--left  { left: 16px; }
  .vo-page-hero__corner--right { right: 16px; }
}