/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Hero Split (Figma 1202:130554 „Hero-Level_5")

   Navy karta, vľavo nadpis s italic akcentom, vpravo text + primary CTA,
   dole vlnka. Odôvodnenie, prečo samostatný blok, je v hlavičke template.php.

   VLNKA = NAVY kópia (rovnaká ako `hero-text`), lebo karta je navy.
   Farba vlnky sa riadi farbou KARTY - `hero-simple` má z toho istého dôvodu bielu.

   MOBIL: Figma frame NEDODANÝ - hodnoty pri @media nižšie sú konvencia.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-hsp {
  position: relative;
  background: var(--color-bg-medium);           /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);              /* Page Padding/padding-global 64 */
}
.zn-hsp.zn-block { --zn-pt: var(--space-6); --zn-pb: var(--space-6); }  /* div-padding-small 24 */

.zn-hsp__container {
  position: relative;
  max-width: var(--container-max);              /* Container/container-large 1280 */
  margin-inline: auto;
}

.zn-hsp__card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  /* Gap 40, NIE 48: Figma má medzi kartou a obsahom ešte vrstvu „Column" a tých 48 je
     gap KARTY, ktorý sa nikdy neuplatní (Column je jej jediné dieťa). Reálny odstup
     medzi nadpisom a pravým blokom je gap Column = 40. Pri 48 vyšiel ľavý blok 643
     namiesto Figma 651. */
  gap: 40px;
  background: var(--color-text);                /* Scheme A/Foreground #023047 */
  /* pt 48 (div-padding-large) / pr 48 (section-small) / pb 32 (div-padding-medium) / pl 48 */
  padding: var(--space-12) var(--space-12) var(--space-8);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;   /* Radius/XLarge 40 */
}

/* „Column" vo Figme je flex row s gap 40 - ľavý blok je pružný, pravý fixný 493. */
.zn-hsp__headline { flex: 1 1 0%; min-width: 0; }
.zn-hsp__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 */
}
/* Akcent je vo Figme „Mix Regular Italic" v ROVNAKEJ veľkosti aj farbe ako zvyšok
   nadpisu - líši sa len rezom. Preto tu NIE JE farebný override (na rozdiel od
   väčšiny heading blokov v téme). */
.zn-hsp__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: inherit;
}

.zn-hsp__aside {
  flex: none;
  width: 493px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);                          /* Figma literál 12 */
  padding: var(--space-6);                      /* div-padding-small 24 */
}
.zn-hsp__text {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-white);
}
/* CTA = globálna `.btn--primary` (#ffb703, 48, radius 12) - vzhľad sa nedefinuje nanovo,
   dopĺňa sa len ikona. `ico-plus` = Figma „Add_round", 32px Icon frame s vycentrovaným
   glyphom (DS konvencia), farba cez `currentColor`, teda dedí farbu textu tlačidla. */
/* Gap 4, NIE globálnych 8 a ani 0. Figma dáva tlačidlo 216 široké; namerané na rendere:
   gap 0 → 211,7 · gap 4 → 215,7 · gap 8 → 219,7. Štvorka je jediná, ktorá sedí na Figma
   šírku (0,3 px). Per-inštančná odchýlka od DS gapu je očakávaná, nie chyba - rovnako ako
   gap 0 v `comparison` a `zenai-faq`, kde odstup dáva vnútorný padding rámu ikony. */
/* POZOR na kaskádu: `components.css` sa načítava PO blokových style.css, takže
   jednotriedne `.zn-hsp__cta` by `.btn { gap: 8px }` neprebilo (CLAUDE.md). Preto 2 triedy. */
.zn-hsp__cta.btn { gap: 4px; }
.zn-hsp__cta-icon { flex-shrink: 0; width: 32px; height: 32px; }

/* Vlnka - prekryv je vlastnosť assetu (výpočet v CLAUDE.md). Figma tu má 39 j. */
.zn-hsp__wave {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: -1px;
}
.zn-hsp__wave-piece {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 34;
}
.zn-hsp__wave-piece:first-child { margin-right: -3.415%; }

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-hsp { padding-inline: var(--space-8); }
  .zn-hsp__aside { width: 40%; }
}

/* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════
   Konvencia príbuzných hero blokov: page-padding 16, Radius/Large 24, Size/H1 40,
   Size/Medium 16, karta stackuje na stĺpec. Section padding cez `-m` premenné. ══ */
@media (max-width: 767.98px) {
  .zn-hsp { padding-inline: var(--space-4); }
  .zn-hsp.zn-block { --zn-pt-m: 16px; --zn-pb-m: 16px; }

  .zn-hsp__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);                                        /* 24 */
    padding: var(--space-4);                                    /* 16 */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;       /* Radius/Large 24 */
  }
  .zn-hsp__heading { font-size: 2.5rem; }                       /* Size/H1 (mobil) 40 */
  .zn-hsp__aside   { width: 100%; padding: 0; }
  .zn-hsp__text    { font-size: var(--text-base); }             /* Size/Medium (mobil) 16 */
  /* Prekryv vlnky sa NEPREPISUJE - hodnota assetu platí na všetkých šírkach,
     pokiaľ dizajn výslovne nechce o vlnu menej (ako hero-simple na mobile). */
}