/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Roadmap (Figma 788:45809 „Section / Bento 3")

   ⚠️ Figma názov KOLIDUJE s existujúcim `zenturi/bento-3` - detail v hlavičke
   template.php. Hlasovanie je STATICKÉ (pole + odkaz), obsah drží repeater.

   Stĺpce majú vo Figme RÔZNE výšky (512 / 722 / 798) - to nie je chyba, každý
   je taký, aký je jeho obsah. Preto `align-items: start`, žiadny stretch.

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

.zn-rm {
  background: var(--color-bg-medium);           /* Scheme A/Background Medium */
  padding-inline: var(--space-16);              /* Page Padding 64 */
}
.zn-rm.zn-block { --zn-pt: var(--space-12); --zn-pb: var(--space-20); }  /* 48 / 80 */

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

.zn-rm__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);        /* (1280 − 2×32) / 3 = 405,333 */
  align-items: start;                           /* stĺpce sa NEnaťahujú na rovnakú výšku */
  gap: var(--space-8);                          /* div-padding-medium 32 */
}

/* ── Stĺpec ── */
.zn-rm__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                          /* „Content Top" gap 8 */
  background: var(--color-white);               /* Scheme A/Foreground */
  padding: var(--space-4) var(--space-6) var(--space-6);   /* pt 16 / px 24 / pb 24 */
  border-radius: var(--radius-md);              /* Radius/Medium 12 */
  /* Figma stroke je INSIDE - inset shadow, nie `border` (rozšíril by box o 2px). */
  box-shadow: inset 0 0 0 1px var(--color-border);
}
/* Nadpis stĺpca = „Heading/H4-A": Mix Medium Italic 32/1.3 w580, letter-spacing −1 %.
   To percento je pri 32px −0,32px, teda −0.01em - zapísané v em, aby sedelo aj na
   mobile, kde je Size/H4 menšie. Celý nadpis je italic, nie len akcent. */
.zn-rm__col-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 580;
  font-size: var(--text-4xl);                   /* Size/H4 32 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);                     /* Scheme A/Text #023047 */
}

/* ── Karta nápadu (Figma „roadmap-card") ── */
.zn-rm__card {
  display: flex;
  align-items: flex-start;
  padding: var(--space-2);                      /* 8 */
  border-radius: var(--radius-sm);              /* Radius/Small 8 */
  box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Ľavý stĺpček: ikona + počet hlasov. Vo Figme má pri hlasovaní pt 4 / pb 8 / px 8,
   ale v stave „Zrealizované" (bez počtu) je padding rovnomerných 8. */
.zn-rm__meta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px var(--space-2) var(--space-2);
  border-radius: 4px;                           /* Figma literál, token pre 4 nie je */
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.zn-rm__meta--done { padding: var(--space-2); }
.zn-rm__icon { flex-shrink: 0; width: 24px; height: 24px; }

/* Farba ikon podľa STAVU stĺpca (get_variable_defs per stĺpec, nie odhad):
     Nápady       788:46502 - Scheme A/Icon/Dark #fb8500 + Icon/Medium #fbd26a
     Vo vývoji    788:48885 - Status/Disabled Dark #75878f + Status/Disabled #a9b7bc
     Zrealizované 788:48931 - Status/Sucess Dark #2c7f09 + Status/Sucess Light #eef9e9
   (Figma token píše „Sucess" s jedným c - preklep v dizajne, v kóde `success`.)
   Stĺpce 2 a 3 teda Icon/* tokeny nepoužívajú vôbec, sú to STAVOVÉ farby.
   Override ide na stĺpec, ikony ho dedia - obe (`ico-like`, `ico-check-ring`) majú
   `var(--zn-ico-*)` vo vnútri, overené. `#a9b7bc` ako jediná nemá token v téme -
   preto literál s Figma menom v komentári. */
.zn-rm__col--ico-primary { --zn-ico-main: var(--color-primary-dark); --zn-ico-soft: var(--color-primary-light); }
.zn-rm__col--ico-muted   { --zn-ico-main: var(--color-text-secondary); --zn-ico-soft: #a9b7bc; }
.zn-rm__col--ico-success { --zn-ico-main: var(--color-success-dark); --zn-ico-soft: var(--color-success-light); }
.zn-rm__votes {
  width: 24px;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);            /* Sans Medium 550 */
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  text-align: center;
  color: var(--color-text-secondary);           /* Scheme A/Text Secondary #75878f */
}

.zn-rm__body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);                          /* 8 */
  padding: var(--space-2);                      /* 8 */
}
.zn-rm__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);            /* Sans Medium 550 */
  font-size: var(--text-2xl);                   /* Size/H6 20 */
  line-height: 1.4;
  color: var(--color-text);
}
.zn-rm__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);                    /* Size/Small 14 */
  line-height: 1.5;
  color: var(--color-text-secondary);           /* #75878f */
}

/* Tlačidlá v kartách aj na konci stĺpca = globálna `.btn--outline`, len výška 40
   (Figma token „Button" má v tomto node 40, nie 48) - meníme LEN veľkosť, nie vzhľad. */
.zn-rm__vote,
.zn-rm__more { height: 40px; }
.zn-rm__more { width: 100%; margin-top: var(--space-2); }

/* Tlačidlo pod celou sekciou: vycentrované, 80 nad ním (Figma 926 − 846). */
.zn-rm__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-20);                  /* 80 */
}
.zn-rm__cta { min-width: 216px; }

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-rm { padding-inline: var(--space-8); }
  .zn-rm__row { grid-template-columns: repeat(2, 1fr); }
}

/* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════
   Konvencia: page-padding 16, stĺpce pod sebou, section padding cez `-m`.
   POZOR na fluidné tokeny: `--text-4xl` je clamp(26 → 32) a pri 393px vracia 26,
   nie 32; mobilnú hodnotu H4 by mal dodať frame, dovtedy necháme škálu pracovať. ══ */
@media (max-width: 767.98px) {
  .zn-rm { padding-inline: var(--space-4); }
  .zn-rm.zn-block { --zn-pt-m: 32px; --zn-pb-m: 48px; }
  .zn-rm__row { grid-template-columns: 1fr; gap: var(--space-4); }
  .zn-rm__actions { margin-top: var(--space-8); }               /* 32 */
  .zn-rm__cta { width: 100%; }
}