/* ==========================================================================
   GK Hero — základná (desktopová) vrstva

   PRINCÍP MIERKY
   Celý komponent je navrhnutý na rám 1767 × 490. Jednotka `--u` je jedna
   "návrhová" jednotka prepočítaná na skutočnú šírku kontajnera, takže sa
   všetko škáluje naraz a v rovnakom pomere:

       --u: calc(100cqw / var(--gh-design-w))

   Vďaka tomu stačí písať rozmery v číslach z návrhu (napr. 34 * var(--u)).

   JEDNOTNÝ LAYOUT
   Na rozdiel od pôvodnej verzie NEMÁ žiadny slajd vlastné súradnice.
   Obrázok sa vkladá do pevného rámu a text do ľavého stĺpca, ktorý je
   zvislo vycentrovaný — preto funguje nadpis na 1 aj na 3 riadky bez
   nastavovania čohokoľvek.
   ========================================================================== */

.gh {
  /* ── farby ───────────────────────────────────────────────────────────── */
  --gh-blue:  #2756a0;
  --gh-green: #61bb52;
  --gh-dot:   #b1b1b1;
  --gh-bg:    #ffffff;

  --gh-font: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gh-dur:  300ms;

  /* ── návrhový rám ────────────────────────────────────────────────────── */
  --gh-design-w: 1767;
  --gh-design-h: 490;

  position: relative;
  background: var(--gh-bg);

  /* Kontajner pre @container dotazy. MUSÍ byť tu, nie na .gh__viewport:
     prvok nemôže byť cieľom dotazu, ktorého kontajnerom je on sám — inak sa
     mobilné pravidlá pre .gh__viewport ticho preskočia. */
  container-type: inline-size;
}

.gh__viewport {
  --u: calc(100cqw / var(--gh-design-w));

  position: relative;
  aspect-ratio: var(--gh-design-w) / var(--gh-design-h);
  overflow: hidden;
  background: var(--gh-bg);
}

/* Vnorené prvky si mierku dedia — bez tohto by `cqw` v potomkoch
   počítalo voči vlastnému kontajneru, nie voči rámu slidera. */
.gh__viewport * { --u: calc(100cqw / var(--gh-design-w)); }

/* ── pozadie ──────────────────────────────────────────────────────────────
   Je to najväčší vykreslený prvok (a teda LCP), preto ho preloadujeme
   v PHP. `cover` zaručí, že vyplní rám pri akomkoľvek pomere strán. */
.gh__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

/* ── dráha a slajdy ──────────────────────────────────────────────────────── */

.gh__track {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gh__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gh-dur) ease;
}

.gh__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* ── obrázok ──────────────────────────────────────────────────────────────
   PEVNÝ rám vpravo. `contain` + `center` znamená, že sa doň zmestí
   akýkoľvek obrázok bez orezania a sám sa vycentruje — preto sa pri
   novom slajde nezadávajú žiadne súradnice. */
.gh__stage {
  position: absolute;
  /* Rám sa ZÁMERNE neprekrýva s textovým stĺpcom (ten končí na 650).
     Pôvodne obe oblasti do seba zasahovali a fungovalo to len preto, že
     naše PNG mali okolo seba priehľadný okraj. Pri obrázku nahranom
     v admine by text vliezol do obrázka. */
  left:   calc(670 * var(--u));
  top:    calc(44 * var(--u));
  width:  calc(770 * var(--u));
  height: calc(402 * var(--u));
}

.gh__stage picture { display: contents; }

.gh__art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
}

/* popiska nad obrázkom (nepovinná, napr. „177 cm") */
.gh__note {
  position: absolute;
  left: 50%;
  top: calc(-26 * var(--u));
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--gh-font);
  font-weight: 600;
  font-size: calc(14 * var(--u));
  letter-spacing: .04em;
  color: var(--gh-blue);
  white-space: nowrap;
}

/* ── textový stĺpec ───────────────────────────────────────────────────────
   Pozície sú ZO SCHVÁLENEJ VERZIE a rovnaké na každom slajde, aby obsah
   pri preklikávaní neposkakoval:
     • nadpis vždy začína na 290 × 103
     • tlačidlo vždy na 290 × 267 (drží ho `margin-top: auto` na spodku boxu)
     • promo text vždy na 290 × 342
   Box má pevnú výšku 103 → 311. Keby bol nadpis dlhší, než sa do boxu
   zmestí, tlačidlo sa neprekryje s textom — flexbox ho len odsunie nižšie.
   Šírka 360 = trojriadkový nadpis „Produkty z karpatského buku skladom"
   presne ako vo Figme. */
.gh__content {
  position: absolute;
  left:   calc(290 * var(--u));
  top:    calc(103 * var(--u));
  width:  calc(360 * var(--u));   /* končí na 650 → 20u medzera pred obrázkom */
  height: calc(208 * var(--u));

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: calc(40 * var(--u));       /* najmenšia medzera — pod nadpisom visí zelená čiara */
}

.gh__title {
  margin: 0;
  font-family: var(--gh-font);
  font-weight: 800;
  font-size: calc(34 * var(--u));
  line-height: 1.0785;
  letter-spacing: -0.01em;
  color: var(--gh-blue);
  text-transform: uppercase;
}

/* Zelená čiara visí pod POSLEDNÝM slovom — span je `relative`, takže
   sedí aj keď sa nadpis zalomí inak alebo sa zmení text. */
.gh__ul {
  position: relative;
  display: inline-block;
}

/* SVG čiary má iba viewBox, žiadne vlastné rozmery. Bez `aspect-ratio` by
   z nej prehliadač pri `height:auto` urobil sploštený pásik — presne to
   dlho kazilo tvar čiary v pôvodnej verzii. */
.gh__underline {
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 6px;
  width: 112%;
  max-width: none;
  height: auto;
  aspect-ratio: 7207.24 / 691.46;
  pointer-events: none;
}

.gh__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Rozmer zo schváleného návrhu je 226 × 44. `min-width` namiesto `width`,
     aby dlhší text tlačidla nepretiekol — tlačidlo sa radšej rozšíri. */
  min-width: calc(226 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-radius: 999px;
  background: var(--gh-blue);
  font-family: var(--gh-font);
  font-weight: 800;
  font-size: calc(16.84 * var(--u));
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  margin-top: auto;               /* pritlačí tlačidlo na spodok boxu = vždy 267 */
  transition: filter 160ms ease, transform 160ms ease;
}

/* Téma prefarbuje odkazy pri :hover na tmavo — držíme text biely
   vo všetkých stavoch, inak tlačidlo pri prejdení myšou „zhasne". */
.gh__cta,
.gh__cta:link,
.gh__cta:visited,
.gh__cta:hover,
.gh__cta:focus,
.gh__cta:active {
  color: #fff;
}

.gh__cta:hover  { filter: brightness(1.1); transform: translateY(-1px); }
.gh__cta:active { transform: translateY(0); }
.gh__cta:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: 3px; }

/* promo text pod tlačidlom (nepovinný, reálny text kvôli SEO).
   Mimo toku, aby neposúval tlačidlo — vždy 31u pod ním (= 342). */
.gh__promo {
  position: absolute;
  left: 0;
  top: calc(100% + 31 * var(--u));
  margin: 0;
  font-family: var(--gh-font);
  font-weight: 800;
  font-size: calc(27 * var(--u));
  line-height: 1.1;
  color: var(--gh-blue);
  white-space: nowrap;
}

/* zelená šípka smerujúca do obrázka (nepovinná) */
.gh__arrow {
  position: absolute;
  left: calc(600 * var(--u));
  top:  calc(305 * var(--u));
  width: calc(165 * var(--u));
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ── bodky ────────────────────────────────────────────────────────────────── */

.gh__dots {
  position: absolute;
  left: 50%;
  top: calc(450 * var(--u));
  transform: translateX(-50%);
  display: flex;
  gap: calc(16 * var(--u));
  z-index: 2;
}

.gh__dot {
  position: relative;
  width:  calc(20 * var(--u));
  height: calc(20 * var(--u));
  padding: 0;
  border: max(1px, calc(1.5 * var(--u))) solid var(--gh-dot);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  appearance: none;
}

/* Výplň ide len cez ::after a len pri aktívnej bodke. Pozadie samotného
   tlačidla ostáva vždy biele — téma inak kliknutej bodke vyplní celý box. */
.gh__dot::after {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: var(--gh-blue);
  opacity: 0;
  transition: opacity var(--gh-dur) ease;
}

.gh__dot[aria-current="true"]::after { opacity: 1; }

.gh__dot:focus-visible { outline: 2px solid var(--gh-blue); outline-offset: 2px; }

/* ==========================================================================
   Pás výhod
   ========================================================================== */

.gt-wrap {
  container-type: inline-size;
  padding-top: 24px;
  padding-bottom: 40px;
  background: #fff;
  /* Biela cez CELÚ šírku okna, nie len v kontajneri témy — inak po stranách
     presvitá sivé pozadie sekcie (klient to videl ako „sivé pruhy"). */
  box-shadow: 0 0 0 100vw #fff;
  clip-path: inset(0 -100vw);
}

.gt {
  --gt-blue:  #2756a0;
  --gt-title: #1c2b3a;
  --gt-text:  #6b7683;
  --gt-line:  #e3e8ef;
  --gt-bg:    #ffffff;
  --gt-font:  Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--gt-font);
}

.gt *,
.gt *::before,
.gt *::after { box-sizing: border-box; }

.gt__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--gt-line);
  border-radius: 8px;
  background: var(--gt-bg);
  color: inherit;
}

/* Ikony majú rôzne pomery strán (nákladiak 44×27, kuchár 28×39), preto
   slot pevnej šírky a obrázok v prirodzenej veľkosti, len zastropovaný.
   Natiahnutie na pevnú šírku by kuchára zväčšilo. */
.gt__icon {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gt__icon img {
  display: block;
  width: auto;
  height: auto;
  max-width: 44px;
  max-height: 44px;
}

.gt__body { min-width: 0; }

.gt__title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gt-title);
  text-wrap: balance;
}

.gt__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--gt-text);
}

/* ==========================================================================
   Obrana proti štýlom témy (Electro)

   Téma má vlastné štýly pre tlačidlá, odkazy a obrázky, ktoré by náš
   komponent prefarbili. Všetko nižšie bolo odhalené a otestované na živom
   webe — `!important` je tu zámerne a treba ho nechať.
   ========================================================================== */

/* Sekcia, do ktorej téma vkladá slider, má sivé pozadie. */
.home-v3-slider { background: #fff !important; }

/* Pôvodný pás výhod témy — nahrádzame ho vlastným, inak by bol na webe dvakrát.
   (Tento súbor sa načítava len keď je hero zapnuté, takže pri vypnutom
   plugine sa pôvodný pás vráti.) */
.home-v3-features-block { display: none !important; }

/* Bodky: téma kliknutému tlačidlu vyplní celý box modrou a nechá ho
   „aktívny". Pozadie teda vždy biele, obrys vždy sivý; vybranú bodku
   odlišuje iba modrá gulička v strede. */
.gh .gh__dot {
  background: #fff !important;
  border-color: var(--gh-dot) !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
}
.gh .gh__dot::after { opacity: 0 !important; inset: 17% !important; }
.gh .gh__dot[aria-current="true"]::after { opacity: 1 !important; }

/* Tlačidlo: téma pri :hover/:focus prefarbí odkaz na tmavý. */
.gh .gh__cta,
.gh .gh__cta:link,
.gh .gh__cta:visited,
.gh .gh__cta:hover,
.gh .gh__cta:focus,
.gh .gh__cta:active { color: #fff !important; }

/* Zelená čiara: téma má vlastné pravidlá pre <img> (výška, max-width),
   ktoré by čiaru zdeformovali. */
.gh .gh__underline {
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  bottom: auto !important;
  margin-top: 6px !important;
  transform: translateX(-50%) !important;
  width: 112% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 7207.24 / 691.46 !important;
}

/* ==========================================================================
   Veľmi široké monitory
   Hero drží rovnakú šírku ako ostatné sekcie webu, ale biele pozadie ide
   cez celú šírku okna, aby po stranách nevznikli sivé pruhy.
   Hranica 2200 px je nad bežnými monitormi aj nad MacBookom (~1512 px CSS),
   takže tie ostávajú nedotknuté.
   ========================================================================== */

@media (min-width: 2200px) {
  .gh {
    max-width: 1430px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 0 100vw #fff;
    clip-path: inset(0 -100vw);
  }
}

/* Používatelia, ktorí si vypli animácie. */
@media (prefers-reduced-motion: reduce) {
  .gh__slide,
  .gh__dot::after,
  .gh__cta { transition: none; }
}