/* ============================================================
   mod_deer_hero 1.9.1 — POUZE STRUKTURA
   ------------------------------------------------------------
   Kořenová třída: .zs-vhero (venue hero). Vlastní jmenný prostor
   → žádná kolize s landing-page .deer-hero v user.css.

   V tomto souboru NESMÍ být: font-size, font-family, font-weight,
   line-height textu, font-style, ani žádná hex barva. Typografii
   a barvy řídí utility DEER přes pole „Třídy – …“ v administraci.
   Zde jen mechanika: full-bleed, vrstvy, poměry, měřítko textu,
   rytmus mezer a mapování světa.
   ============================================================ */

.zs-vhero{
  /* --- tokeny modulu (přepsatelné inline stylem / user.css) --- */
  --hero-accent: var(--world-nest);
  --hero-h: 100svh;
  --hero-scrim-ink: var(--c-forest-400);
  --hero-gap-eyebrow: clamp(.4rem, 1vw, .6rem);
  --hero-gap-title:   clamp(.6rem, 1.5vw, .9rem);
  --hero-gap-lead:    clamp(.9rem, 2vw, 1.25rem);
  --hero-measure: 46ch;
  --hero-pad-bottom: 48px;      /* tlačítko 48px nad spodní hranou */
  --hero-lockup-pull: -0.32em;  /* stažení „The / Nest“ k sobě */

  /* --- full-bleed breakout --- */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* --- layout (bez kolize, tedy bez shieldu) --- */
  position: relative;
  min-height: var(--hero-h);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

/* Mapování světa → akcentní token (mechanika, ne hodnota) */
.zs-vhero[data-world="nest"]  { --hero-accent: var(--world-nest);  }
.zs-vhero[data-world="roots"] { --hero-accent: var(--world-roots); }
.zs-vhero[data-world="apple"] { --hero-accent: var(--world-apple); }

/* --- vrstva 0: fotka --- */
.zs-vhero__media{ position: absolute; inset: 0; z-index: 0; }
.zs-vhero__media picture{ display: contents; } /* <picture> obal z lib_bhgimg nesmí vytvářet vlastní box */
.zs-vhero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- vrstva 1: scrim (čitelnost textu) ---
   1:1 dle Figmy (Rectangle 366): element pokrývá jen SPODNÍCH 66 % obrázku
   (ukotvený dole), uvnitř lineární přechod #23142D 90 % (dole) → 0 % (nahoře
   na hraně elementu = 66 % výšky obrázku). Druhá vrstva je jemný nádech v barvě
   světa (NENÍ ve Figmě – doplněk, klidně smaž). Výšku laď přes --hero-scrim-h. */
.zs-vhero__scrim{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hero-scrim-h, 66%);
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--hero-scrim-ink) 90%, transparent) 0%,
      transparent 100%),
    linear-gradient(to top right,
      color-mix(in srgb, var(--hero-accent) 22%, transparent) 0%,
      transparent 55%);
}

/* --- vrstva 2: obsah ---
   Šířku a vycentrování dědí z .container (přidána v šabloně) → drží PŘESNĚ
   šířku containeru webu, ne napevno 1200px. */
.zs-vhero__inner{
  position: relative;
  z-index: 2;
  padding-block-end: var(--hero-pad-bottom, 48px);
}

/* Vynulování bočního paddingu .containeru. POZOR: .container má vlastní
   padding-inline: calc(--bs-gutter-x*.5) se specificitou (0,1,0); pouhé
   nastavení --bs-gutter-x na inneru (taky 0,1,0) by při pozdějším načtení
   Bootstrapu prohrálo. Proto padding pinujeme selektorem (0,2,0), který
   .container spolehlivě přebije.
   • Desktop: 0 (obsah dosedne na šířku containeru).
   • Mobil (<992px): boční mezery jako site grid — web používá 16px na úzkých
     oknech (viz header). Laď --hero-pad-x (desktop) / --hero-pad-x-m (mobil). */
.zs-vhero .zs-vhero__inner{
  padding-inline: var(--hero-pad-x, 0);
}
@media (max-width: 991.98px){
  .zs-vhero .zs-vhero__inner{
    padding-inline: var(--hero-pad-x-m, 16px);
  }
}

/* --- eyebrow lockup ---
   Barva světa přímo na spanech: user.css (~ř.766) má
   .typo-h1..h4{color:var(--bs-heading-color)} (0,1,0), které cílí na
   .typo-h3/.typo-h2 uvnitř. Selektor (0,2,0) to přebije bez !important.
   Velikost/řez dál nesou typo-* třídy. */
.zs-vhero__eyebrow{ margin: 0 0 var(--hero-gap-eyebrow); }
.zs-vhero__eyebrow .pre,
.zs-vhero__eyebrow .main{ display: block; color: var(--hero-accent); }

/* Stažení lockupu „The / Nest“ k sobě. Záporný margin = LAYOUT (mechanika),
   ne typografie – line-height ani velikost nesahám. Laď --hero-lockup-pull. */
.zs-vhero__eyebrow .main{ margin-top: var(--hero-lockup-pull, -0.32em); }

/* --- titulek ---
   Barvu NEŘEŠÍME (zůstává, co dává třída – .typo-h2 → --bs-heading-color).
   Barvu světa má jen eyebrow. Zde jen struktura. */
.zs-vhero__title{
  margin: 0 0 var(--hero-gap-title);
  text-wrap: balance;
}

/* --- perex --- */
.zs-vhero__lead{
  max-width: var(--hero-measure);
  margin: 0 0 var(--hero-gap-lead);
}

/* Mobil (< 992px): header je sticky, takže bere výšku. Hero 100svh by proto
   přeteklo dolů a spodní obsah (tlačítko) by spadl pod okraj. Vytáhneme hero
   pod header — přesně to dělal starý JS inline margin-top na .deer-hero, který
   teď .zs-vhero míjí. Řešíme to v CSS, ať modul nezávisí na externím JS.
   Hodnota = výška headeru (ticker + lišta s logem). Laď --zs-vhero-headpull,
   pokud výška headeru neodpovídá (nebo použij --header-h, pokud ji šablona
   spolehlivě nastavuje i na mobilu). Desktop má header absolutní (nebere
   výšku), proto se pull-up NEuplatňuje. */
@media (max-width: 991.98px){
  .zs-vhero{
    margin-top: calc(-1 * var(--zs-vhero-headpull, 106px));
  }
}