/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Hero Text (Figma 795:38666 „VypocetCeny-R")

   POZOR recyklovaný Figma názov „VypocetCeny-R" - už 7. význam v projekte
   (pricing-calculator, pricing-compare, compare-cta, status-contact 2×,
   hero-demo, a teraz toto). S cenami nesúvisí.

   Hero všeobecnej textovej podstránky: navy karta + vycentrovaný nadpis +
   vlnitý spodný okraj. Odôvodnenie, prečo samostatný blok a nie variant
   `hero-demo`, je v hlavičke template.php.

   Sekcia má rovnaké DVOJVRSTVOVÉ pozadie ako `hero-demo` (Figma to vracia
   ako dva gradienty): biely fade zhora nadväzujúci na navbar + solid
   bg-medium pod ním. Prevzaté 1:1, vrátane hodnoty 43.222 %.

   Vlnka = ten istý asset a tá istá technika ako hero-demo/-level2/-status
   (skopírovaný súbor do assets/img/hero-text/, nie nový export z Figmy).
   `hero-demo/wave.svg` je jediná NAVY kópia v téme - presne tá, ktorá sem
   patrí; hero-level2/-status/status-contact majú bielu.

   MOBIL: Figma frame pre túto podstránku NEDODANÝ. Desktop je 1:1 z nodu,
   mobil ide podľa konvencie - zdroje hodnôt sú pri @media pravidle nižšie.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-htx {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 43.222%),
    var(--color-bg-medium);                   /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);            /* Page Padding/padding-global 64 */
}
.zn-htx.zn-block { --zn-pt: var(--space-6); --zn-pb: var(--space-6); }  /* Div Padding/div-padding-small 24 */

/* Figma „Max Width/max-width-xlarge" = 1024 (NIE --container-max 1280, ktorý má väčšina
   sekcií) - literál, token pre 1024 v téme neexistuje. Rovnaká prax ako `compare-cta` (1124). */
.zn-htx__container {
  position: relative;
  max-width: 1024px;
  margin-inline: auto;
}

.zn-htx__card {
  position: relative;
  z-index: 2;                                 /* Figma: karta z-2, vlnka z-1 */
  background: var(--color-text);              /* Scheme A/Foreground #023047 */
  /* pt 48 / pr 48 / pb 32 / pl 48. POZOR: pravý padding nesie vo Figme INÝ token
     (Section Padding/section-small) než ľavý (Div Padding/div-padding-large), obe = 48.
     Rozdiel oproti `hero-demo`, ktorý má pr = 0 kvôli bleedu obrázka k okraju karty. */
  padding: var(--space-12) var(--space-12) var(--space-8);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;   /* Radius/XLarge 40, len hore */
}

.zn-htx__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-7xl);                 /* Size/H1 56 */
  line-height: 1.1;
  color: var(--color-white);                  /* Scheme A/Text #ffffff */
  text-align: center;
}

/* ── Vlnitý spodný okraj ──────────────────────────────────────────────────
   Dve kópie assetu vedľa seba s prekryvom - zámerná Figma štruktúra (795:38675
   + 795:38676), nie chyba; nezjednocovať na jeden obrázok (precedens: v1.16.x).

   PREKRYV JE VLASTNOSŤ ASSETU, NIE KONTAJNERA. `wave.svg` má viewBox 659,5
   a doliny (koncové body kriviek na dne) na 21,7792 / 144,968 / 268,156 /
   391,344 / 514,532 / 637,721 - perióda 123,1888. Od poslednej doliny k pravému
   okraju ostáva 21,779, rovnako ako od ľavého okraja k prvej (21,7792): sú to
   dve polovice tej istej vlny. Aby sa napojili do jednej, musia sa prekryť:
     prekryv    = 21,7792 + 21,779 = 43,5582 j = 6,6047 % šírky kúska
     margin-right = 0,066047 / (2 − 0,066047) = 3,4151 % šírky kontajnera
   (z 2w − mC = C vyplýva w = C(1+m)/2, takže prekryv/w = 2m/(1+m) - šírka
   kontajnera C sa VYKRÁTI). Preto majú hero-demo aj hero-status tú istú hodnotu
   a preto sa NEODČÍTAVA z Figma pozícií vektorov.

   Do 2026-08-05 tu stálo -3.809 %, odvodené z Figma `mr: -39px` pri kontajneri
   1024. Figma má medzeru o 48,392 − 43,558 = 4,83 jednotky (≈ 3,9 px pri kúsku
   531,5) väčšiu - pri jednej vlne sa to stratí, na napojení v strede to bolo
   vidieť. Namerané na rendere: rozostupy dolín 389,5-399 px (@2×) namiesto
   rovnomerných. */
.zn-htx__wave {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: -1px;                           /* zakryje subpixelovú škáru pod kartou */
}
.zn-htx__wave-piece {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 34;                     /* pomer assetu, zhodne s ostatnými vlnkami */
}
.zn-htx__wave-piece:first-child { margin-right: -3.415%; }

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec, generický medzikrok ══ */
@media (max-width: 1199.98px) {
  .zn-htx { padding-inline: var(--space-8); }         /* 32 */
}

/* ══ Mobil (≤767.98px) ═══════════════════════════════════════════════════
   Figma mobil frame pre túto podstránku NEDODANÝ - hodnoty sú prevzaté z mobilných
   frame-ov PRÍBUZNÝCH blokov, nie odhadnuté:
   - page-padding 16 a Size/H1 40 sú v mobilnom móde rovnaké naprieč všetkými
     doteraz overenými frame-ami (hero, hero-demo, section-base, sb2…),
   - Radius/Large 24 namiesto XLarge 40 - rovnako ako hero-demo aj section-base-2,
   - padding karty pt16/px16/pb20 = mobilné hodnoty karty `hero-demo` (1202:138623),
     teda tá istá karta v tej istej rodine,
   - prekryv vlnky sa v mobile NEPREPISUJE: renderuje sa ten istý `wave.svg`
     a hodnota je vlastnosť ASSETU (výpočet vyššie), takže -3.415 % platí na
     všetkých šírkach. Do 2026-08-05 tu bolo -14.3 % prevzaté z `hero-demo`.
     To je o presne jednu periódu vlny (18,68 % šírky kúska) väčší prekryv -
     doliny pri ňom stále lícujú (namerané do ~0,5 px), len sa stratí jedna
     vlna. Nie je to teda viditeľná chyba, ale bez frame-u pre túto sekciu
     nemáme dôvod od hodnoty assetu odchýliť.
   - (pôvodne: -14.3 % = 52px / 361px kontajner, prevzaté z iných blokov)
     s kartou na 361px (pri 393px frame je kontajner 393 − 2×16 = 361).
   Po dodaní frame-u overiť a prípadne upraviť. Section padding cez `-m` premenné,
   NIE holé `--zn-pt` (inak by ho components.css prepolvil). ══ */
@media (max-width: 767.98px) {
  .zn-htx { padding-inline: var(--space-4); }         /* 16 */
  .zn-htx.zn-block { --zn-pt-m: 24px; --zn-pb-m: 24px; }

  .zn-htx__card {
    padding: var(--space-4) var(--space-4) var(--space-5);   /* pt16 / px16 / pb20 */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;    /* Radius/Large 24 */
  }
  .zn-htx__heading { font-size: 2.5rem; }                    /* Size/H1 40 */
}