/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Výhody (text + ikonový zoznam)

   Sekcia na bg-medium so ZAOBLENÝMI LEN SPODNÝMI rohmi (Figma `rounded-bl/br`,
   top hranatý). Riadok: vľavo fixný 420px textový stĺpec (nadpis/perex/CTA,
   `justify-content: space-between` + `align-self: stretch` - CTA sa drží pri
   spodku, zarovnané s pätou pravej karty), vpravo biela karta (radius Large 24,
   padding 32/48) s 2×3 mriežkou ikona+nadpis+text (položky BEZ vlastného
   orámovania). Farba textu je "Color Scheme 1/Text" #000 (--color-black),
   NIE zvyčajná --color-text #023047 - overené `get_variable_defs`.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-bfs {
  position: relative;
  background: var(--color-bg-medium);        /* Scheme A/Background Medium */
  padding-inline: var(--space-16);           /* Page Padding/padding-global 64 */
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);  /* Radius/XLarge 40, len spodok */
  overflow: hidden;
}
.zn-bfs.zn-block { --zn-pt: var(--space-20); --zn-pb: var(--space-20); }  /* Section Padding/section-medium 80 */

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

.zn-bfs__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);                      /* Div Padding/div-padding-xlarge 80 */
}

/* ── Textový stĺpec ──────────────────────────────────────────────────────── */
.zn-bfs__col-text {
  flex: none;
  width: 420px;
  min-width: 0;
  align-self: stretch;                       /* výška = výška pravej karty (tá vyššej) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;            /* Figma "justify-between" na 3 flat deťoch */
}

.zn-bfs__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3.5rem;                         /* Heading/H1 56 */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-black);                 /* Color Scheme 1/Text #000 - NIE --color-text */
}
.zn-bfs__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);        /* 420 Mix Regular Italic */
}
.zn-bfs--accent-secondary-dark .zn-bfs__heading-accent { color: var(--color-secondary-dark); }
.zn-bfs--accent-primary-dark   .zn-bfs__heading-accent { color: var(--color-primary-dark); }
.zn-bfs--accent-secondary      .zn-bfs__heading-accent { color: var(--color-secondary); }
.zn-bfs--accent-primary        .zn-bfs__heading-accent { color: var(--color-primary); }

.zn-bfs__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);               /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-black);
}

.zn-bfs__actions { display: flex; }

/* ── Pravá karta - mriežka ikona+nadpis+text ────────────────────────────── */
.zn-bfs__card {
  flex: 1 1 0%;
  min-width: 0;
  background: var(--color-white);            /* Scheme A/Background Light */
  border-radius: var(--radius-lg);           /* Radius/Large 24 */
  padding: var(--space-12) var(--space-8);   /* py 48 (div-padding-large) / px 32 (div-padding-medium) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.zn-bfs__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);                       /* Div Padding/div-padding-medium 32, riadok aj stĺpec */
}

.zn-bfs__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;                                 /* Figma literál - nezodpovedá --space tokenu */
}

.zn-bfs__item-icon {
  flex-shrink: 0;                            /* ikona vo flex riadku - viď interné poznámky */
  width: 40px;
  height: 40px;
}

.zn-bfs__item-body {
  flex: 1 1 0%;
  min-width: 0;
  padding-top: 8px;                          /* Figma literál - zarovnanie s optickým stredom ikony */
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.zn-bfs__item-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);                 /* Size/Large 20 */
  font-weight: var(--weight-bold);           /* Sans Bold 750 */
  color: var(--color-black);
}
.zn-bfs__item-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);               /* Size/Regular 16 */
  font-weight: var(--weight-regular);
  color: var(--color-black);
}

/* ══ Tablet (≤1199.98px) - generický medzikrok, Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-bfs__row { flex-direction: column; align-items: stretch; }
  .zn-bfs__col-text {
    width: 100%;
    align-self: auto;
    justify-content: flex-start;
    gap: var(--space-6);                     /* 24 - space-between stráca zmysel bez stretch */
  }
  .zn-bfs__card { width: 100%; }
}

/* ══ Mobil ══ */
@media (max-width: 767.98px) {
  .zn-bfs { padding-inline: var(--space-4); }  /* Page Padding/padding-global mobil 16 */
  .zn-bfs.zn-block { --zn-pt-m: var(--space-8); --zn-pb-m: var(--space-8); }  /* section-small mobil 32 - konvencia ako iné bloky */

  .zn-bfs__row { gap: var(--space-6); }        /* 24 */
  .zn-bfs__heading { font-size: 2.5rem; }      /* Size/H1 mobil 40 */

  /* ── Mriežka podľa Figma MOBILNÉHO uzla 1201:72450 ────────────────────────
     Pozn.: mobilný frame existuje LEN pre Stavebníctvo (`riesenie-Stavebnictvo-m`,
     1201:72445) - ostatných 8 odvetví ho nemá, takže hodnoty sú odtiaľ. Sekcia
     je zdieľaná, rozloženie je pre všetky odvetvia rovnaké.
     Hodnoty z `get_variable_defs` na tom uzle (nie z JSX literálov):
       div-padding-large 24, div-padding-medium 20, Size/Large 18. */

  /* Karta: padding 24 zvislo / 20 vodorovne (Figma: vnútorná mriežka začína
     na x 20, y 24 vnútri karty 361×598). */
  .zn-bfs__card { padding: var(--space-6) var(--space-5); }

  /* DVA stĺpce, gap 20 v oboch smeroch. Figma: položky široké 150,5 na x 0
     a 170,5 (→ stĺpcový gap 20); riadky na y 0 / 182 / 388 pri najvyšších
     položkách 162 a 186 (→ riadkový gap 20). */
  .zn-bfs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);                     /* 20 - pevná hodnota, nie clamp */
  }

  /* Ikona NAD nadpisom. Figma: ikona 40×40 na y 0, textový blok na y 52,
     teda medzera 12 - to je presne `gap: 12px`, ktorý má položka už
     z desktopu, mení sa LEN smer. `align-items: flex-start` z desktopu
     drží ikonu aj text zarovnané doľava (oboje na x 0 vo Figme). */
  .zn-bfs__item { flex-direction: column; }

  /* Size/Large je na mobile 18 (desktop 20) - z `get_variable_defs`
     mobilného uzla. Text položky ostáva 16 (Size/Regular), rovnaký ako desktop. */
  .zn-bfs__item-title { font-size: var(--text-lg); }
}