/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Hero-Level_3 (Figma „Hero-Level_3", node 1200:42561)

   Prvá sekcia stránky Zen AI: vľavo nadpis s gradientovým italic akcentom,
   text, CTA + Google badge a info riadok; vpravo produktový obrázok 684×630.

   Vlnitý predel dole NIE je súčasťou bloku — vkladá sa samostatný
   `zenturi/wave-sep` (varianta „navy-on-medium": 56px, `--color-bg-medium`,
   pre-flipnutý wave-navy-up.png) hneď za túto sekciu. Preto pb = 0
   (Figma má len pt section-small 48, žiadne pb).

   Reuse z hero-level2 (rovnaké hodnoty, žiadny nový vzhľad): Google badge
   (203×48, mix-blend-mode multiply), info riadok, veľkosti CTA. Šípka ide cez
   globálnu `.btn--arrow` (::after + --btn-arrow-frame) — žiadny nový systém.

   DESKTOP LEN — mobil príde samostatne (žiadne @media pravidlá tu).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-hl3 {
  background: var(--color-bg-medium);           /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);              /* page-padding 64 */
}
/* Spacing cez zn-block var systém; pb 0 — vlnu rieši nasledujúci wave-sep blok. */
.zn-hl3.zn-block {
  --zn-pt: var(--space-12);                     /* section-small 48 */
  --zn-pb: 0px;
}

.zn-hl3__container {
  max-width: var(--container-max);              /* max-width-xxlarge 1280 */
  margin-inline: auto;
}

.zn-hl3__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);                         /* div-padding-large 48 */
  width: 100%;
}

/* ── Ľavý stĺpec ── */
.zn-hl3__column {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                          /* div-padding-medium 32 */
  padding-block: var(--space-12);               /* 48 — vertikálne vyváženie voči obrázku */
}
.zn-hl3__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                          /* div-padding-small 24 */
}
.zn-hl3__headline {
  display: flex;
  flex-direction: column;
  gap: 8px;                                     /* Figma Headline gap 8 */
}

/* ZenAI ikona nad nadpisom (Figma „Top" wrapper) — 62px platí desktop AJ tablet
   (1199.98 breakpoint), Figma preň nemá samostatný medzikrok spec, rovnako ako
   nadpis 56px drží až po mobil. Ikona má vlastný vnútorný padding v paths
   (viewBox 62×62), preto žiadny extra padding tu. */
.zn-hl3__top { width: 62px; height: 62px; }
.zn-hl3__top-icon { display: block; width: 100%; height: 100%; }

/* Nadpis: base 56 Sans Regular, akcent 56 italic na vlastnom riadku */
.zn-hl3__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-7xl);                   /* Size/H1 56 */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
/* Gradientový text — PRVÝ výskyt tejto techniky v téme (overené: `background-clip`
   sa nikde inde nepoužíva, nič sa neduplikuje). Figma: linear-gradient 167.56deg,
   #fb8500 @35.7 % → #1b8098 @77.2 % (zaokrúhlené z 167.5569deg / 35.728 % / 77.155 %). */
.zn-hl3__heading-accent {
  display: block;
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic */
  background: linear-gradient(167.56deg, var(--color-primary-dark) 35.7%, var(--color-secondary-dark) 77.2%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Fallback, ak prehliadač nevie background-clip:text — plná farba ako iné italic akcenty */
@supports not (background-clip: text) {
  .zn-hl3__heading-accent {
    background: none;
    color: var(--color-secondary-dark);
  }
}

/* Text: jeden odsek, prvú vetu obalí admin do <strong> priamo v poli */
.zn-hl3__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-text);
}
.zn-hl3__text strong { font-weight: var(--weight-bold); }

/* ── Actions ── */
.zn-hl3__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;                                     /* Figma Actions gap 8 */
}
.zn-hl3__actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);                          /* 24 */
}
/* Veľkosť CTA cez 2-triednu špecificitu (components.css sa načítava PO blokovom
   CSS) — hodnoty 1:1 s hero-level2 aj s Figmou (Button 60 / font 18 / frame 52). */
.zn-hl3 .zn-hl3__cta {
  height: 60px;                                 /* Button 60 */
  font-size: 18px;                              /* Button Font Size 18 */
  --btn-arrow-frame: 52px;                      /* Icon frame 52 */
}

/* Google badge — rovnaké rozmery aj blend ako hero-level2 (rezervuje si miesto) */
.zn-hl3__rating {
  flex: 0 1 203px;
  max-width: 203px;
  min-width: 0;
  aspect-ratio: 203 / 48;
  height: auto;
  display: flex;
  align-items: center;
  mix-blend-mode: multiply;
}
.zn-hl3__rating-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.zn-hl3__rating-img--custom { object-fit: contain; }   /* nahraný badge sa neoreže */

/* Info riadok (Sans Regular 14, Status/Info Dark) — 1:1 s hero-level2 */
.zn-hl3__info {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);                          /* Figma gap 4 */
  font-family: var(--font-display);
  font-size: var(--text-sm);                    /* Size/Small 14 */
  line-height: 1.5;
  color: var(--color-info-dark);
}
.zn-hl3__info-icon { flex-shrink: 0; }

/* ── Pravý stĺpec: produktový obrázok 684×630 ── */
.zn-hl3__visual {
  flex-shrink: 0;
  width: 684px;
  height: 630px;
}
.zn-hl3__visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══ Tablet (768-1199.98) - generický medzikrok, Figma preň nemá spec ══
   Rovnaká konvencia ako hero-level2: stack stĺpcov (vizuál pod text), vizuál
   responzívny namiesto pevných 684px. Bez tohto medzikroku (chýbal od prvého
   builded — bug nájdený pri Check bugfix 2026-07-21) sa v tomto rozsahu pevná
   šírka vizuálu + rigidný riadok CTA/badge/info tlačia navzájom a badge
   (min-width:0 flex item) skolabuje na 0×0, nadpis sa rozlomí slovo po slove. */
@media (max-width: 1199.98px) {
  .zn-hl3__row {
    flex-direction: column;
    align-items: stretch;
  }
  .zn-hl3__column {
    padding-block: 0;                            /* vertikálne vyváženie voči obrázku už netreba - stĺpce sú pod sebou */
  }
  .zn-hl3__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 684 / 630;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL (rám 393, Figma node 1200:42994) — hodnoty z mobilného módu, nie z JSX.
   Mobilný mód: section-small 32 (pt) · page-padding 16 · Component gap 24
   · Column gap 20 · Content gap 16 · Actions gap 4 / row gap 12
   · Button 48 (späť na .btn default) · Size/H1 40 · Size/Medium 16.

   Všetky spacing hodnoty vyšli na FLAT tokeny (--space-1/3/4/5/6/8) — žiadny
   hardcode; hardcode je len pri veľkostiach nadpisu (40 / 56).
   Vlnitý predel ostáva externý `zenturi/wave-sep` blok (pb ostáva 0).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* Sekcia: pt section-small mobil 32, px 16; pb 0 (vlnu rieši nasledujúci blok) */
  .zn-hl3 { padding-inline: var(--space-4); }                /* 16 */
  .zn-hl3.zn-block { --zn-pt-m: var(--space-8); --zn-pb-m: 0px; }  /* 32 / 0 */

  /* Layout: stĺpce pod seba */
  .zn-hl3__row {
    flex-direction: column;
    gap: var(--space-6);                                     /* 24 (z 48) */
  }
  .zn-hl3__column {
    gap: var(--space-5);                                     /* 20 (z 32) */
    padding-block: 0;                                        /* desktopové vyváženie 48 na mobile MIZNE */
  }
  .zn-hl3__content { gap: var(--space-4); }                  /* 16 (z 24) */
  /* Headline gap 8 — bez zmeny */

  /* ZenAI ikona: 52px mobil (Figma frame 1200:42994, node „ZenAI-Icon" size-[52px]) */
  .zn-hl3__top { width: 52px; height: 52px; }

  /* Nadpis: base 40. Akcent ostáva 56 (podľa zadania je vo Figme väčší než base —
     nezmenšuje sa; nemohol som to overiť screenshotom, viď report). */
  .zn-hl3__heading { font-size: 40px; }                      /* Size/H1 mobil */
  .zn-hl3__heading-accent {
    font-size: 56px;
    /* Mobil má INÝ uhol gradientu než desktop (167.56deg); farby aj stopy rovnaké.
       `background` je shorthand → resetuje background-clip, preto ho tu opakujeme. */
    background: linear-gradient(160.4deg, var(--color-primary-dark) 35.7%, var(--color-secondary-dark) 77.2%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  /* Fallback musí byť aj tu — desktopový @supports je vyššie v súbore a mobilný
     `background` shorthand by ho inak prebil. */
  @supports not (background-clip: text) {
    .zn-hl3__heading-accent { background: none; color: var(--color-secondary-dark); }
  }

  /* Text: jednotných 16 (bold sa líši len váhou, nie veľkosťou — viď report) */
  .zn-hl3__text { font-size: var(--text-base); }             /* Size/Medium mobil 16 */

  /* Actions */
  .zn-hl3__actions     { gap: var(--space-1); }              /* 4 (z 8) */
  .zn-hl3__actions-row { gap: var(--space-3); width: 100%; } /* 12 (z 24) */
  /* CTA späť na štandardnú .btn veľkosť (Button 48) — prepisuje desktop override.
     Rovnaké hodnoty ako hero-level2 mobil. */
  .zn-hl3 .zn-hl3__cta { height: 48px; font-size: var(--text-base); --btn-arrow-frame: 32px; }
  /* Badge 1:1 s hero-level2 mobilom (max-width ruší desktopových 203) */
  .zn-hl3__rating { width: auto; flex: 1 1 0%; max-width: none; aspect-ratio: 220.133 / 52; height: auto; }

  /* Info riadok — bez zmeny (14 / ikona 16) */

  /* Obrázok: responzívna šírka, rovnaký pomer ako desktop (684×630) */
  .zn-hl3__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 684 / 630;
  }
}