/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Hero Contact (hero band stránky "Kontakt")

   Figma "VypocetCeny-R" (795:25643) — NIE kalkulačka (napriek názvu, 3. výskyt
   toho layer name), ale jednoduchý hero band: navy karta rounded-top-40, nadpis
   vľavo (H1 56) + vedľajší text vpravo (Medium 18, v 493px boxe s p24), vlnitý
   spodný okraj karty.

   Reuse (CLAUDE.md): navy karta + vlnka = rovnaká technika ako hero-status
   (wave.svg 2 kópie, aspect 480/34, margin-right presah). wave.svg je NAVY, lebo
   karta je navy (#023047 = Scheme A/Foreground = hex --color-text). Typografia/
   spacing len cez theme tokeny.

   MOBIL: Figma 1202:137967 (var_defs mobilný mód) — H1 40, text 16, card padding 16,
   radius-top 24, py 16. TABLET: generický medzikrok (stack).
   ══════════════════════════════════════════════════════════════════════════ */

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

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

.zn-hct__card {
  position: relative;
  z-index: 2;
  background: var(--color-text);               /* Scheme A/Foreground #023047 (rovnaký hex ako text token) */
  padding: var(--space-12) var(--space-12) var(--space-8) var(--space-12);  /* pt48 pr48 pb32 pl48 */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;   /* Radius/XLarge 40, len top rohy */
  overflow: hidden;
}

.zn-hct__row {
  display: flex;
  align-items: flex-start;                     /* Figma Column items-start */
  gap: 40px;                                   /* Figma Column gap 40 (bez tokenu, ako hero-status) */
}

.zn-hct__heading-wrap {
  flex: 1 1 0%;
  min-width: 0;
}
.zn-hct__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);          /* Sans Regular 400 */
  font-size: var(--text-7xl);                  /* Size/H1 56 (clamp → responzívne) */
  line-height: 1.1;
  color: var(--color-white);                   /* Scheme A/Text = biela na navy karte */
}
.zn-hct__heading-accent {
  display: inline;
  font-style: italic;
  font-weight: var(--weight-tagline);
  /* Zámerne ŽIADNA farba — Figma tu nedáva accentu vlastnú farbu (biela ako nadpis,
     len italic). Label poľa je preto "Nadpis - italic časť" (výnimka CLAUDE.md). */
}

.zn-hct__text-wrap {
  flex-shrink: 0;
  width: 493px;                                /* Figma pravý box fixná šírka 493 */
  padding: var(--space-6);                     /* Figma p24 (div-padding-small) */
}
.zn-hct__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);                   /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-white);
}

/* ── Vlnitý spodný okraj karty (rovnaká technika/geometria ako hero-status;
   wave.svg tu navy) ── */
.zn-hct__wave {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: -1px;
}
.zn-hct__wave-piece {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 34;
}
.zn-hct__wave-piece:first-child { margin-right: -3.415%; }

/* ══ Tablet (≤1199.98px) — generický medzikrok (stack nadpis + text) ══ */
@media (max-width: 1199.98px) {
  .zn-hct__card {
    padding: var(--space-8);
  }
  .zn-hct__row {
    flex-direction: column;
    gap: var(--space-6);
  }
  .zn-hct__text-wrap {
    width: 100%;
    padding: 0;                                /* stacknuté — p24 box tu netreba */
  }
}

/* ══ Mobil (≤767.98px) — Figma 1202:137967 (var_defs mobilný mód) ══ */
@media (max-width: 767.98px) {
  .zn-hct { padding-inline: var(--space-4); }              /* page-padding mobil 16 (z 64) */
  /* pt/pb = div-padding-small mobil 16 (--zn-pt-m obíde auto-scale *0.5 = 12). */
  .zn-hct.zn-block { --zn-pt-m: var(--space-4); --zn-pb-m: var(--space-4); }
  .zn-hct__card {
    padding: var(--space-4);                               /* div-padding-small 16 (všetky strany) */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;  /* Radius/Large mobil 24 (desktop 40) */
  }
  .zn-hct__heading,
  .zn-hct__heading-accent { font-size: 2.5rem; }           /* Size/H1 mobil 40 */
  .zn-hct__text { font-size: var(--text-base); }           /* Size/Medium mobil 16 (z 18) */
  .zn-hct__wave-piece:first-child { margin-right: -14.3%; }
}