/* ============================================================
   mod_deer_hero 1.15.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));
  }
}

/* ============================================================
   OBLOUK (volitelný)
   ------------------------------------------------------------
   Výška se řídí proměnnou --arc-h z inline stylu wrapperu,
   na mobilu --arc-h-m. Barvu nese --arc-fill; v CSS režimu se
   dosazuje rovnou do atributu fill, takže tady žádná hodnota
   barvy není.

   Statické SVG (.arc--static) se roztahuje přes preserveAspect-
   Ratio="none" — výšku určuje výhradně CSS níže. JS varianta si
   výšku i viewBox nastavuje sama, proto se jí pravidlo výšky
   netýká.
   ============================================================ */
.zs-vhero__arc{
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}
.zs-vhero__arc--bottom{ bottom: 0; }
.zs-vhero__arc--top   { top: 0; }

.zs-vhero__arc > svg{
  display: block;
  width: 100%;
}
.zs-vhero__arc > svg.arc--static{
  height: var(--arc-h, 220px);
}

@media (max-width: 767.98px){
  .zs-vhero__arc > svg.arc--static{
    height: var(--arc-h-m, var(--arc-h, 220px));
  }
}

/* Obsah hero nesmí zmizet pod obloukem.

   Odsazení jde přes margin, ne přes padding: .zs-vhero__inner nese
   zároveň třídu .container, jejíž paddingy řídí Bootstrap i pravidlo
   výše — sahat do nich by znamenalo prát se o specificitu. Margin do
   toho nikdo netahá a při align-items: flex-end posune blok nahoru
   spolehlivě. Vlastní padding sekce (--hero-pad-bottom) zůstává beze
   změny a přičítá se k tomu.

   Výšku oblouku nese sekce jako --hero-arc-h; obal s obloukem je vůči
   obsahu sourozenec, z něj by se proměnná nedědila. Ve výchozím stavu
   se odsazuje o celou výšku oblouku, poměr lze doladit přes
   --hero-arc-clear. */
.zs-vhero--arc-bottom .zs-vhero__inner{
  margin-block-end: calc(var(--hero-arc-h, 0px) * var(--hero-arc-clear, 1));
}
.zs-vhero--arc-top .zs-vhero__inner{
  margin-block-start: calc(var(--hero-arc-h, 0px) * var(--hero-arc-clear, 1));
}

@media (max-width: 767.98px){
  .zs-vhero--arc-bottom .zs-vhero__inner{
    margin-block-end: calc(
      var(--hero-arc-h-m, var(--hero-arc-h, 0px)) * var(--hero-arc-clear, 1)
    );
  }
  .zs-vhero--arc-top .zs-vhero__inner{
    margin-block-start: calc(
      var(--hero-arc-h-m, var(--hero-arc-h, 0px)) * var(--hero-arc-clear, 1)
    );
  }
}

/* ============================================================
   TLAČÍTKA, SLOT A ZAROVNÁNÍ (1.11.0)
   ------------------------------------------------------------
   Rozestupy a směr; barvy a velikost písma nesou utility
   z polí „Třídy – …" v administraci.
   ============================================================ */
.zs-vhero__actions .btn{
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.zs-vhero__actions .btn svg{
  flex-shrink: 0;
  width: var(--hero-btn-icon-size, 1.15em);
  height: var(--hero-btn-icon-size, 1.15em);
}

.zs-vhero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-gap-actions, 12px);
}

.zs-vhero__slot{
  margin-block-start: var(--hero-gap-slot, clamp(24px, 3vw, 40px));
  width: 100%;
}

/* Vložený modul si nesmí přinést vlastní full-bleed pozadí přes celou
   šířku okna — uvnitř hero sekce by přetekl. */
.zs-vhero__slot > * { max-width: 100%; }

/* --- aside (roh vpravo dole: kontaktní chipy a/nebo vložený modul) ---
   Ukotveno k SEKCI (ne inneru), aby mohl zasahovat do oblouku. z-index 4 je
   NAD obloukem (z-index 3), takže chipy leží přes křivku. Offsety od hran
   sekce laď přes --hero-contacts-right / --hero-contacts-bottom.
   Mobil (<992px): zůstává absolutní (aby nebyl flex-item sekce), přesune se
   k dolní hraně přes celou šířku a chipy se zalomí zleva. */
.zs-vhero__aside{
  position: absolute;
  right: var(--hero-contacts-right, clamp(20px, 3vw, 48px));
  bottom: var(--hero-contacts-bottom, clamp(28px, 3vw, 56px));
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--hero-aside-gap, .5rem);
  max-width: min(100%, var(--hero-aside-max, 360px));
}
.zs-vhero__aside > * { max-width: 100%; }

/* Sloupec kontaktních chipů (zarovnané vpravo). */
.zs-vhero__contacts{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--hero-aside-gap, .5rem);
}

/* Chip = pilulka. Struktura + stín + blur + hover (tokeny); barvu textu,
   pozadí-utilitu, typografii a padding nesou třídy z pole „Třídy chipu".
   Pozadí dáváme tokenem tady (ne bg-* utilitou s !important), aby hover
   pozadí vůbec mohlo přebít. */
.zs-vhero__chip{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  text-decoration: none;
  background: var(--c-surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: background-color .15s ease, color .15s ease;
}
.zs-vhero__chip svg{ flex-shrink: 0; }
a.zs-vhero__chip:hover{
  background: var(--c-grain-100);
  color: var(--c-forest-400);
}

@media (max-width: 991.98px){
  /* Chipy zůstávají POD SEBOU vpravo (jako desktop), jen s mobilními offsety.
     Column + align-items:flex-end dědíme ze základního pravidla. */
  .zs-vhero__aside{
    right: var(--hero-contacts-right-m, 16px);
    bottom: var(--hero-contacts-bottom-m, clamp(12px, 4vw, 24px));
    max-width: min(100%, var(--hero-aside-max-m, 320px));
  }
}

/* Vystředěná varianta: text i tlačítka na střed, obsah dole. */
.zs-vhero--center{
  justify-content: center;
  text-align: center;
}
.zs-vhero--center .zs-vhero__actions{
  justify-content: center;
}
.zs-vhero--center .zs-vhero__lead{
  margin-inline: auto;
}

/* ============================================================
   PŘEKRYV „BLUR" A PODSTRČENÍ POD HLAVIČKU (1.12.0)
   ------------------------------------------------------------
   Varianta z landing pages Deeru. Tři vrstvy nad fotkou:
     1. plošné ztmavení celé fotky (--hero-scrim-tint)
     2. rozostření od horní hrany, ubývající dolů
     3. rozostření od spodní hrany, ubývající nahoru
   Rozostření dělá backdrop-filter, maska přechodu zajistí, že
   k okraji je plné a do středu se vytrácí. Barvu nese
   --hero-scrim-ink, rozměry --hero-scrim-top-h a -bottom-h.

   Všechny hodnoty přicházejí inline z parametrů modulu, takže
   tady nejsou žádné konkrétní barvy ani rozměry.
   ============================================================ */
.zs-vhero__tint,
.zs-vhero__blur{
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* 1) plošné ztmavení */
.zs-vhero__tint{
  top: 0;
  bottom: 0;
  background: color-mix(
    in srgb,
    var(--hero-scrim-ink) var(--hero-scrim-tint, 50%),
    transparent
  );
}

/* 2) horní rozostření + přechod */
.zs-vhero__blur--top{
  top: 0;
  height: var(--hero-scrim-top-h, 220px);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--hero-scrim-ink) 70%, transparent) 0%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  -webkit-backdrop-filter: blur(var(--hero-scrim-blur, 20px));
          backdrop-filter: blur(var(--hero-scrim-blur, 20px));
}

/* 3) spodní rozostření + přechod do plné barvy */
.zs-vhero__blur--bottom{
  bottom: 0;
  height: var(--hero-scrim-bottom-h, 65%);
  background: linear-gradient(
    0deg,
    var(--hero-scrim-ink) 0%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(0deg, #000 0%, transparent 100%);
  -webkit-backdrop-filter: blur(var(--hero-scrim-blur, 20px));
          backdrop-filter: blur(var(--hero-scrim-blur, 20px));
}

/* Podstrčení pod průhlednou hlavičku — jen na desktopu, kde je hlavička
   přes obsah. Na mobilu by se obsah schoval pod hamburger. */
@media (min-width: 992px){
  .zs-vhero--pulled{
    margin-block-start: calc(-1 * var(--hero-pull-up, 0px));
  }
}