/* ─────────────────────────────────────────────────────────────────────────
   hero-variants.css — five alternative openings for the homepage.

   Loaded ONLY on /v1 … /v5, so nothing here can reach the live hero. Every
   selector is scoped under .hero-v*, and the rest of the page is untouched:
   what these compare is the first screen and nothing else.

   Shared decisions across all five:
   · the four track-record tiles are gone from the hero — the same numbers run
     in the marquee immediately below and stand in six cards under that;
   · one call to action, never two;
   · the photograph is the client's own, greyscale like the rest of the site.
   ───────────────────────────────────────────────────────────────────────── */

.hero-v--dark { background: var(--ink); color: var(--paper); }

.hero-v__title {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144;
  margin: 1.15rem 0 0;
  font-size: clamp(2.05rem, 3.6vw + 0.4rem, 4.3rem);
  text-wrap: balance;
}
.hero-v__title em { font-style: italic; color: var(--gold); }

.hero-v__lede {
  margin: 1.35rem 0 0;
  max-width: 48ch;
  font-size: clamp(1rem, 0.35vw + 0.94rem, 1.16rem);
  line-height: 1.62;
  color: rgba(246, 242, 234, 0.78);
}
.hero-v__lede--second { margin-top: 0.9rem; }

.hero-v__actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1.1rem 1.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.hero-v__values {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}

/* ── V1 — celoplošná fotka, jedna veta ─────────────────────────────────── */
.hero-v1 {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: min(880px, calc(100svh - var(--nav-h, 76px)));
  overflow: hidden;
}
/* Fotka je tu vlastný, doľava predĺžený orez (2,16:1) — takmer presne pomer tejto
   sekcie, takže sa už nedoreže takmer nič a on ostáva tam, kam bol vysadený: vpravo. */
.hero-v1__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  filter: saturate(0) contrast(1.06) brightness(0.92);
}
/* Two gradients, not one: the horizontal keeps the type legible over the wall,
   the vertical stops the headline fighting the sticky nav above it.
   Ťažisko tieňa je vľavo po ~40 %, kde stojí text; on sám začína na 36 % (rameno)
   a tvár má na 60 %, takže cez tvár už nejde ani gradient, ani písmeno. */
.hero-v1__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,11,.93) 0%, rgba(10,10,11,.80) 34%,
                           rgba(10,10,11,.24) 56%, rgba(10,10,11,.18) 80%,
                           rgba(10,10,11,.46) 100%),
    linear-gradient(180deg, rgba(10,10,11,.60) 0%, rgba(10,10,11,0) 26%,
                            rgba(10,10,11,0) 55%, rgba(10,10,11,.72) 100%);
}
.hero-v1__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(2.75rem, 7vw, 5.5rem);
  max-width: min(var(--maxw), 100%);
}
.hero-v1 .hero-v__title { max-width: 17ch; }
.hero-v1 .hero-v__lede  { max-width: 44ch; }

@media (max-width: 860px) {
  .hero-v1 { min-height: min(760px, calc(100svh - var(--nav-h, 76px))); }
  /* Na zvislom displeji sa zo širokého orezu vidí len úzky výsek — musí byť ten,
     v ktorom stojí on, nie prázdna stena vľavo od neho. */
  .hero-v1__img { object-position: 63% 26%; }
  .hero-v1__scrim {
    background: linear-gradient(180deg, rgba(10,10,11,.48) 0%, rgba(10,10,11,.22) 20%,
                                        rgba(10,10,11,.74) 44%, rgba(10,10,11,.93) 62%,
                                        rgba(10,10,11,.97) 100%);
  }
}

/* ── V2 — dva stĺpce, upratané ─────────────────────────────────────────── */
.hero-v2 { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3.5rem, 7vw, 6.5rem); }
.hero-v2__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.hero-v2__media { position: relative; margin: 0; overflow: hidden; }
.hero-v2__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: saturate(0) contrast(1.08) brightness(0.95);
  display: block;
}
.hero-v2__media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-5);
  background: linear-gradient(180deg, transparent, rgba(10,10,11,.86));
}
.hero-v2__place {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.hero-v2__values {
  font-family: var(--font-display); font-weight: 350; font-style: italic;
  font-size: 1.12rem; color: var(--paper);
}
@media (max-width: 900px) {
  .hero-v2__grid { grid-template-columns: 1fr; }
  .hero-v2__media { max-width: 460px; }
}

/* ── V3 — editoriál na stred ───────────────────────────────────────────── */
.hero-v3 {
  position: relative;
  min-height: calc(100svh - var(--nav-h, 76px));
  display: grid; align-content: end; justify-items: center;
  text-align: center;
  overflow: hidden;
}
/* Zarovnané NA VRCH: na širokej obrazovke je jeho hlava vysoká ~625 px bez ohľadu na
   to, aká je obrazovka vysoká (orez cover škáluje podľa šírky). Keď fotka sedí na
   hornej hrane, hlava sa nikdy neoreže a pod bradou ostane maximum miesta na text —
   presne to miesto, ktoré nadpisu chýbalo, keď ležal cez ústa. */
.hero-v3__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;
  filter: saturate(0) contrast(1.05) brightness(0.86);
}
/* Tma nastupuje až pod bradou (~72 %), nie cez tvár — predtým začínala na 62 % a
   nadpis potom ležal na ústach aj opticky, nielen typograficky. */
.hero-v3__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 76% at 50% 26%, rgba(10,10,11,0) 28%, rgba(10,10,11,.42) 78%),
    linear-gradient(180deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,0) 18%,
                            rgba(10,10,11,0) 52%, rgba(10,10,11,.72) 70%,
                            rgba(10,10,11,.97) 82%, #0a0a0b 100%);
}
/* Values sit above his head, on the wall — never across his mouth. */
.hero-v3__top {
  position: absolute; z-index: 2;
  left: 0; right: 0; top: clamp(1.25rem, 4.5vh, 2.75rem);
  text-align: center; padding: 0 var(--gutter);
}
/* Širší blok, aby veta držala dva riadky podľa <br> a nezalamovala sa na tri —
   tretí riadok bol to, čo blok vytlačilo hore na jeho tvár. */
.hero-v3__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1180px;
  padding: 0 var(--gutter) calc(clamp(1.4rem, 3.4svh, 2.6rem) + var(--v3-bar, 0px));
}
/* Nadpis je zhora obmedzený VÝŠKOU okna, nie len šírkou: pod bradou je na 1920×900
   asi 160 px a text sa doň musí zmestiť celý, inak sa mu vráti na tvár. */
.hero-v3__title {
  margin-top: 0;
  font-size: min(clamp(1.5rem, 2.3vw + 0.3rem, 2.9rem), 5svh);
}
/* Klient 9.10.2026: v motíve čisté biele písmo, „života“ nemusí byť zlaté.
   A v druhej správe v ten deň: „života“ postaviť vertikálne v súlade s textom — rovné, nie kurzíva. */
.hero-v3__title em { color: inherit; font-style: normal; }
.hero-v3__actions { justify-content: center; margin-top: clamp(0.9rem, 2.2svh, 1.6rem); }
/* Klient 25.10.2026 (Texty V.): tlačidlo „jemne zmenšiť, aby nám vynikol hlavný motív pod
   mojou fotkou“ — z btn--lg na menšie a tichšie, motív nadpisu má navrch. */
.hero-v3__actions .btn { padding: .68rem 1.2rem; font-size: 13.5px; }
.hero-v3__meta {
  display: block; margin-top: clamp(0.7rem, 1.8svh, 1.3rem);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
/* Na nízkom okne padá ako prvý riadok, bez ktorého veta aj výzva ostanú pod bradou. */
@media (max-height: 1000px) { .hero-v3__meta { display: none; } }
/* A na ešte nižšom okne ide fotka o kúsok hore — hlava je vysoká rovnako (orez podľa
   šírky), takže miesto pod bradou nevyrobí nič iné než posun samotného záberu. */
@media (max-height: 950px) { .hero-v3__img { object-position: 50% 24%; } }
/* Na zvislom displeji sa orezáva vodorovne a on stojí na 31–55 % šírky — v strede
   výrezu mu ostávalo ucho za okrajom. */
@media (max-width: 700px) { .hero-v3__img { object-position: 42% 50%; } }

/* Klient 13.10.2026 (foto z notebooku): „Text na titulke … mi ide trochu cez tvár pri
   zobrazení na PC.“ Na 1280×600, 1366×650 a 1536×730 orez cover škáloval fotku podľa
   ŠÍRKY okna, hlava mala ~510 px a brada končila presne tam, kde začína nadpis — posun
   object-position (vyššie) to na nízkych oknách nestačil vyrovnať.
   Na širokom a nízkom okne sa preto fotka meria VÝŠKOU okna: je presne taká široká, aby
   brada (≈ 67 % výšky záberu) skončila nad blokom nadpisu a výzvy (13 rem) aj nad lištou
   verzií. Pozadie záberu je takmer čierne, takže boky a spodok sa maskou rozpustia do
   --ink a hranu nevidno. Na vysokom okne vyjde width 100 % a nič sa nemení. */
.hero-v3 { --v3-bar: 0px; }
@media (max-width: 1440px) {
  /* Lišta verzií je fixná dole (na telefóne cez celú šírku, inak vpravo) a do ~1400 px
     šírky zasahuje pod tlačidlo — na telefóne ho prekrývala skoro celé.
     Viazané na jej existenciu: keď lištu po výbere úvodu odstránime, odsadenie zmizne. */
  body:has(.hero-switch) .hero-v3 { --v3-bar: 52px; }
}
/* Klient 27.10.2026 (CRM 2586, intx 30562): „Dá sa Front Page na desktope vycentrovať úvodná
   fotka s textom tak, aby to nenarušilo zobrazenie v telefóne?“ Jeho tvár stojí na 43,5 % šírky
   záberu (zmerané), nadpis na 50 % okna — záber centrovaný na 50 % ju teda nechával o 6,5 %
   svojej šírky vľavo (na 1536 px ~75 px). Telefón (≤ 560 px) to už rieši posunom -44 % a ostáva.
   Na PC sa záber posúva o rovnaký kus: v pravidle nižšie translateX(-43,5 %); na vyššom okne
   (pomer pod 8:5, fotka orezaná po stranách) o 6,5 % šírky záberu = výška úvodu × 16/9 × 0,065,
   najviac však po ľavú hranu fotky, aby sa nikdy neodkryla. */
@media (min-width: 701px) and (max-aspect-ratio: 8/5) {
  .hero-v3__img { object-position: min(0px, calc(50% + (100svh - var(--nav-h, 76px)) * 0.1156)) 0%; }
}
@media (min-width: 701px) and (max-aspect-ratio: 8/5) and (max-height: 950px) {
  .hero-v3__img { object-position: min(0px, calc(50% + (100svh - var(--nav-h, 76px)) * 0.1156)) 24%; }
}
@media (min-width: 701px) and (min-aspect-ratio: 8/5) {
  .hero-v3__img {
    inset: 0 auto auto 50%;
    transform: translateX(-43.5%);
    width: min(100%, calc((100svh - var(--nav-h, 76px) - 13rem - var(--v3-bar)) * 2.62));
    height: auto;
    aspect-ratio: 16 / 9;
    object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
                        linear-gradient(180deg, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
                        linear-gradient(180deg, #000 78%, transparent 100%);
            mask-composite: intersect;
  }
}
.hero-v3__cue {
  position: absolute; left: 50%; bottom: 1.35rem; z-index: 3;
  transform: translateX(-50%);
}
.hero-v3__cue i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(180deg, rgba(196,166,113,0), var(--gold));
  animation: heroCue 2.4s ease-in-out infinite;
}
@keyframes heroCue {
  0%, 100% { opacity: .25; transform: scaleY(.55); transform-origin: 50% 100%; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: 50% 100%; }
}
@media (prefers-reduced-motion: reduce) { .hero-v3__cue i { animation: none; opacity: .6; } }

/* ── V4 — typografia na svetlom + kinematografický pás ─────────────────── */
.hero-v4 { background: var(--paper); color: var(--paper-ink); }
.hero-v4__type { padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(1.75rem, 3.5vw, 3rem); }
.hero-v4__title { color: var(--paper-ink); font-size: clamp(2.1rem, 4.4vw + 0.4rem, 5.1rem); }
.hero-v4__title em { color: var(--gold-2); }
.hero-v4 .hero-v__lede { color: var(--paper-muted); max-width: 52ch; margin: 0; }
.hero-v4__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.75rem 3rem; flex-wrap: wrap;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--paper-line);
}
.hero-v4__band { position: relative; margin: 0; line-height: 0; background: var(--ink); }
/* Pás drží pomer orezu (3,2:1), takže sa v ňom nedoreže nič. Pevná výška v px pri
   rastúcej šírke zväčšovala tvár — a to bola presne tá sťažnosť: v páse ostalo čelo
   a okuliare. Teraz je to široký záber miestnosti, v ktorom je on celý. */
.hero-v4__band img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 5;
  max-height: 68svh;
  object-fit: cover; object-position: 50% 46%;
  filter: saturate(0) contrast(1.06) brightness(0.94);
}
.hero-v4__values {
  position: absolute; left: 0; right: 0; bottom: clamp(1rem, 2.5vw, 1.75rem);
  text-align: center; line-height: 1.4;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 2px 18px rgba(10, 10, 11, 0.85);
}

/* ── V5 — video intro riadené skrolovaním ──────────────────────────────── */
/* Pulled up under the sticky nav so the sticky stage is a true 100svh from the first
   pixel — otherwise the headline anchored to its bottom sits below the fold at rest. */
.hero-v5 {
  position: relative; height: 340svh; background: #000;
  margin-top: calc(-1 * var(--nav-h, 85px));
}
.hero-v5__stage {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden; background: #000;
}
#heroSeq {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .8s cubic-bezier(.16,1,.3,1);
}
#heroSeq.is-ready { opacity: 1; }
.hero-v5__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-v5__vig {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 86% at 50% 38%, transparent 26%, rgba(6,6,7,.48) 74%, rgba(6,6,7,.82) 100%),
    linear-gradient(180deg, rgba(10,10,11,.58) 0%, rgba(10,10,11,0) 22%,
                            rgba(10,10,11,0) 44%, rgba(10,10,11,.82) 72%,
                            rgba(10,10,11,.97) 92%);
}
.hero-v5__dim {
  position: absolute; inset: 0; background: #0a0a0b;
  opacity: 0; pointer-events: none; will-change: opacity;
}
.hero-v5__type {
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-content: end; justify-items: center; text-align: center;
  /* --switch-h drzi lista verzii; nad 1100 px sedi vpravo dole a premenna je 0. */
  padding: 0 var(--gutter) calc(clamp(3.5rem, 11vh, 7rem) + var(--switch-h, 0px));
  will-change: transform, opacity;
}
.hero-v5__title {
  margin-top: 1rem;
  font-size: clamp(1.9rem, 3.2vw + 0.5rem, 4.1rem);
  text-shadow: 0 6px 50px rgba(0, 0, 0, .5);
}
.hero-v5__end {
  position: absolute; left: 0; right: 0; z-index: 3;
  bottom: calc(clamp(3rem, 9vh, 6rem) + var(--switch-h, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  padding: 0 var(--gutter);
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
.hero-v5__cue {
  position: absolute; left: 50%; bottom: calc(1.35rem + var(--switch-h, 0px)); z-index: 4;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.hero-v5__cue i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(196,166,113,0), var(--gold));
  animation: heroCue 2.4s ease-in-out infinite;
}
/* Lišta nad skrolovacím úvodom: spád, nie pás.
   Úvod je zámerne vytiahnutý pod lištu (margin-top: -nav-h), takže záber ide až po horný
   okraj obrazovky — lenže lišta nad ním stála ako nepriehľadný pás vysoký ~71 px a jeho
   temeno leží na 7,5 % výšky 16:9 snímky, čo je na 1440×900 presne 67 px. Na každej bežnej
   obrazovke tak bola hlava ZA lištou, nie orezaná — orez ju už nemal ako zachrániť, lebo
   snímka je hore na doraz. Klient to poslal ako dva printscreeny (CRM 2586, 1. 9. 2026:
   „Dá sa tú fotku prosím vás trochu posunúť alebo spraviť tak, aby to zobrazovalo celé?“).
   Spád drží tmu pod textom lišty (0–40 px), ale nad jeho temenom je už takmer čistý.
   Platí len tam, kde je skrolovací úvod, a len kým je lišta v tmavom režime — po odskrolovaní
   sa vracia svetlý pás nad obsahom. */
body:has(.hero-v5) .site-nav.is-dark {
  background: linear-gradient(180deg,
              rgba(10, 10, 11, 0.86) 0%,
              rgba(10, 10, 11, 0.48) 55%,
              rgba(10, 10, 11, 0) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Reduced motion / Save-Data / 2g: one frame, no scroll work, and the section
   collapses to a single screen so nothing has to be scrolled past. */
.hero-v5.is-static { height: 100svh; }
.hero-v5.is-static .hero-v5__stage { position: relative; height: 100%; }
.hero-v5.is-static .hero-v5__cue { display: none; }
/* V šetriacom režime sú nadpis aj výzva na obrazovke NARAZ — pri skrolovaní sa striedajú,
   tu sa striedať nemajú kde, a tlačidlo tak ležalo priamo na poslednom riadku nadpisu.
   Nadpis si preto odsadí spodok o celý blok výzvy (riadok hodnôt + medzera + tlačidlo). */
.hero-v5.is-static .hero-v5__type {
  padding-bottom: calc(clamp(3rem, 9vh, 6rem) + var(--switch-h, 0px) + 7.5rem);
}
@media (prefers-reduced-motion: reduce) { .hero-v5__cue i { animation: none; opacity: .6; } }

/* Telefón a tablet: kratšia dráha. 340svh znamená 240svh skrolovania cez pripnutú scénu,
   a to sú na telefóne dve až tri potiahnutia prstom, počas ktorých sa stránka pod prstom
   nikam nepohne. Na myši to je plynulé, na dotyku to nevyzerá ako zámer, ale ako pokazený
   skrol. 220svh = 120svh dráhy, teda zhruba jedno potiahnutie: záber sa stihne prehrať
   celý a stránka ide ďalej. Špecificita je nižšia ako .hero-v5.is-static, takže verzia
   pre šetriaci režim ostáva na jednej obrazovke bez ohľadu na poradie.
   Podmienka je úzka obrazovka ALEBO dotyk — to je presne opak toho, čo si v hero-scrub.js
   pýta tlmenie (`(hover:hover) and (pointer:fine)`), takže kratšia dráha a rýchlejšie
   dobiehanie snímok idú vždy spolu. Tablet naležato je tiež prst, nie koliesko. */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .hero-v5 { height: 220svh; }
}

/* AI Act čl. 50(4) — viditeľné, čitateľné, s vlastným podkladom, na mobile tiež.
   Nie hover, nie jedno bliknutie: je hore od prvej generovanej snímky až do konca. */
.hero-v5__ai {
  position: absolute; z-index: 5;
  left: var(--gutter); bottom: calc(1.1rem + var(--switch-h, 0px));
  max-width: min(46ch, calc(100% - 2 * var(--gutter)));
  margin: 0; padding: 6px 11px;
  background: rgba(10, 10, 11, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  font-family: var(--font-mono); font-size: 10px; line-height: 1.45;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(246, 242, 234, 0.92);
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}
@media (max-width: 700px) {
  /* Štítok nesú /v8, /v9, /v10 a /v11 (vrátený 31.8.2026 — sú to generované zábery
     skutočnej osoby, čl. 50(4) na ne platí). Bez rezervy pod nadpisom leží na telefóne
     presne tam, kam padne posledný riadok nadpisu. */
  /* Spodok úvodu je na telefóne stohovaný, zdola nahor: lišta verzií (--switch-h, existuje
     len kým je prepínač zapnutý) → označenie AI → ukazovateľ skrolovania → nadpis. Predtým
     ležali všetky tri na sebe: prepínač prekryl označenie celé a ukazovateľ do polovice. */
  .hero-v5 { --ai-h: 0rem; }
  .hero-v5:has(.hero-v5__ai) { --ai-h: 4.6rem; }
  .hero-v5__ai   { left: 1.1rem; right: 1.1rem; max-width: none; font-size: 9.5px; }
  /* Rezerva na ukazovateľ skrolovania: 1.35rem odsadenie + 34px čiarka + 10px medzera
     + riadok textu ≈ 4.6rem. Bez nej posledný riadok nadpisu sadne rovno naň. */
  .hero-v5 { --cue-h: 4.6rem; }
  .hero-v5__cue  { bottom: calc(1.35rem + var(--switch-h, 0px) + var(--ai-h)); }
  .hero-v5__type { padding-bottom: calc(var(--ai-h) + var(--cue-h) + var(--switch-h, 0px) + clamp(1.5rem, 4vh, 2.5rem)); }
  .hero-v5__end  { bottom: calc(var(--ai-h) + var(--cue-h) + var(--switch-h, 0px) + clamp(1rem, 3vh, 2rem)); }
}

/* Nízke okno na šírku — notebook, nie telefón.
   Odsadenie nadpisu zdola je 11vh; pri 660 px výšky okna to je 73 px, lenže ukazovateľ
   skrolovania stojí na pevných 1,35 rem a s čiarkou končí až na ~81 px. Posledný riadok
   nadpisu naň potom sadne. Nad 780 px výšky sa 11vh cez ukazovateľ prehupne samo, takže
   pravidlo platí len pod ňou a širokú obrazovku nechá tak, ako je schválená. */
@media (min-width: 701px) and (max-height: 780px) {
  .hero-v5__type { padding-bottom: calc(5.6rem + var(--switch-h, 0px)); }
}

/* ── Telefón: menšie nadpisy, aby sa zmestili nad spodný okraj ─────────── */
@media (max-width: 560px) {
  .hero-v3__title { font-size: clamp(1.6rem, 7.2vw, 2.1rem); }
  .hero-v3__inner { padding-bottom: calc(clamp(2rem, 5vh, 3rem) + var(--v3-bar, 0px)); }
  /* To isté ako na notebooku (pozri vyššie): na telefóne sa nadpis láme na tri riadky a
     cover meria fotku výškou celého úvodu, takže brada končila na prvom riadku nadpisu.
     Fotka je preto len taká vysoká, aby brada (≈ 65 % záberu) skončila nad textom
     (~15 rem + lišta verzií); tvár je v strede displeja (stojí na ~44 % šírky záberu). */
  .hero-v3__img {
    inset: 0 auto auto 50%;
    transform: translateX(-44%);
    width: auto; max-width: none;
    height: min(100%, calc((100svh - var(--nav-h, 76px) - 15rem - var(--v3-bar, 0px)) / 0.65));
    aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  }
  .hero-v5__title { font-size: clamp(1.6rem, 7.2vw, 2.1rem); }
  /* Na telefóne by 3,2:1 pás mal 122 px — tam sa vracia pevná výška a orez na neho. */
  .hero-v4__band img {
    aspect-ratio: auto; max-height: none;
    height: clamp(280px, 78vw, 380px); object-position: 50% 30%;
  }
}