/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Section / Header / Two Column (Figma node 21:8591, inštancia
   813:26946 na /zakaznici/, https://library.relume.io/components/header-47)

   Biele pozadie, dva stĺpce `flex: 1 1 0` vedľa seba so spodkami zarovnanými
   (`align-items: end`) — vľavo H1 s jedným italic akcentom na konci (rovnaký
   accent model ako section-base/hero-level3), vpravo bežný odsek.

   Mobil (Figma 1201:100143): stĺpce sa zalomia pod seba (`flex-col`), H1 aj
   akcent obaja 40 (Size/H1 mobil) - akcent NEdedí vlastný font-size.
   **REVERT 2026-08-26** (Maroš schválil): 2026-08-14 záznam „akcent 56, cap-height
   meranie potvrdilo (V/4/1 vyzeralo väčšie)" bol nesprávny - to meranie porovnávalo
   upright cap-height oproti italic cap-height „od oka", čo je pre pár Sans Regular /
   Mix Regular Italic nespoľahlivé (italic rez vyzerá opticky väčší aj pri identickej
   veľkosti). Presné pixelové meranie (`V`/`4`/`1` = presne 29px všetky tri, žiadny
   rozdiel) aj wrap-test (krátky text "Viac ako 4100" sa zalomí rovnako pri oboch
   veľkostiach, takže o veci rozhodlo až to presné meranie) ukázali zhodu.
   Detail: docs-internal/CONTEXT.md, 2026-08-26.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-tch {
  background: var(--color-bg);                  /* biela */
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-tch.zn-block {
  --zn-pt: var(--space-24);                     /* section-large 112 */
  --zn-pb: var(--space-12);                     /* section-small 48 */
}

.zn-tch__container {
  max-width: var(--container-max);              /* 1280 */
  margin-inline: auto;
  display: flex;
  align-items: flex-end;                        /* spodky stĺpcov zarovnané (Figma items-end) */
  gap: var(--space-20);                         /* 80 */
  width: 100%;
}

.zn-tch__col {
  flex: 1 1 0;
  min-width: 0;
}

.zn-tch__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);
}
.zn-tch__accent {
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic 420 */
  color: var(--color-secondary-dark);           /* #1b8098 - jediná farba vo Figme, bez voľby (na rozdiel od section-base) */
}

.zn-tch__text {
  margin: 0;
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Mobil (≤767.98px) - Figma 1201:100143 ─────────────────────────────── */
@media (max-width: 767.98px) {
  .zn-tch { padding-inline: var(--space-4); }   /* page-padding 16 */
  /* Literály, NIE var(--space-16): ten je fluid clamp(2.5rem, 4.45vw, 4rem) a pri
     393px sa vyhodnotí na svoje MINIMUM 40px, nie na 64 - rovnaká pasca ako
     section-base-2/status-list (viď ich komentáre). --space-8 je fixná 2rem,
     tá je bezpečná. */
  .zn-tch.zn-block { --zn-pt-m: 64px; --zn-pb-m: var(--space-8); }  /* 64 / 32 */

  .zn-tch__container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);                        /* 20 */
  }
  .zn-tch__heading { font-size: 40px; }          /* Size/H1 mobil */
  /* .zn-tch__accent bez vlastného font-size = dedí 40 z .zn-tch__heading (rovnaká
     veľkosť ako base, viď docblock hore) */
  .zn-tch__text { font-size: var(--text-base); } /* Size/Medium mobil 16 */
}