/* ==========================================================================
   Core Capabilities — 27:1191 · 1512 x 1839
   Flusso verticale: 160 + 639 (Container) + 80 (gap) + 800 (Immagine) + 160
   Base .section + .section--narrative (padding 160/40, column, align center).
   ========================================================================== */

.core {
  gap: var(--space-6);                    /* 80px — gap dell'auto-layout 27:1191 */
  background: var(--color-white);         /* Color/Neutrals/50, tinta piatta */
  color: var(--text-on-light);
}

/* --- Container 32:1420 — 1432 x 639 ---------------------------------------
   row, align-items flex-start, space-between. 696 + 736 = 1432, quindi lo
   space-between non produce spazio residuo. */
.core__container {
  width: var(--container-width);
  height: 639px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
}

/* --- Text 27:1337 — 696 x 639 ---------------------------------------------
   In Figma e una column con gap LETTERALE 480px (116 + 480 = 596 = y dei
   pulsanti). Qui si usa space-between su altezza piena: stesso risultato,
   ma robusto se il titolo cambia numero di righe (spec 04 §1.2). */
.core__text {
  width: 696px;
  height: 639px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

/* Titolo 27:1195 — 48/58, #00122b, box 696 x 116 (2 righe, wrap automatico) */
.core__h2 {
  width: 696px;
  color: var(--color-tertiary);
  text-align: left;
}

/* --- Cards 27:1232 — 736 x 639 --------------------------------------------
   flex: 1 0 0 nel Container (1432 - 696 = 736). ALTEZZA FISSA 639 con
   contenuto reale 1258px: e una lista con scroll verticale interno, non una
   colonna che espande la sezione. Nessun fill, nessuno stroke, nessun radius.
   Non esiste alcun separatore fra le card: gli 8px sono il gap dell'auto-
   layout, attraverso cui si vede il bianco della sezione. */
.core__cards {
  flex: 1 0 0;
  min-width: 0;
  height: 639px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);                    /* 8px */
  overflow-x: clip;
  overflow-y: auto;
  /* La scrollbar classica di Chromium ruberebbe ~15px alla larghezza utile
     delle card (736 -> 721) e cambierebbe il wrapping dei body, quindi le
     altezze 136/155. In Figma la barra e in overlay: qui la nascondiamo per
     conservare la geometria. Lo scroll resta attivo (rotella / trackpad). */
  scrollbar-width: none;
}
.core__cards::-webkit-scrollbar { width: 0; height: 0; }

/* --- Card 27:1333 / 1357 / 1361 / 1364 / 1368 / 1372 / 1376 / 1380 --------
   column, align-items flex-start, gap 8, padding 40, radius 16, no stroke.
   Altezza NON fissata: e il numero di righe del body (16px) a produrre
   136px (1 riga) o 155px (2 righe):
   40 + 29 (titolo) + 8 (gap) + 19|38 (body) + 40.
   Gradiente: in Figma 91.43deg (card 155) e 91.63deg (card 136); la
   differenza e solo la normalizzazione delle maniglie sul box, quindi si usa
   l'unico token --gradient-card-core (91.5deg). */
.core-card {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);                    /* 8px */
  padding: var(--space-5);                /* 40px su tutti i lati */
  border-radius: var(--radius-lg);        /* 16px */
  background: var(--gradient-card-core);
}

/* Titoli card (es. 27:1334) — 24/29, #ffffff, box 656 x 29, sempre 1 riga */
.core-card__title {
  width: 100%;
  color: var(--color-white);
  text-align: left;
}

/* Body card (es. 27:1335) — 16/19, #d2d2d2, box 656 x 19 o 38 */
.core-card__body {
  width: 100%;
  color: var(--color-neutral-300);
  text-align: left;
}

/* --- Immagine 32:1421 — 1432 x 800, radius 16 -----------------------------
   Scale mode Fit: l'immagine NON viene ritagliata (object-contain), quindi
   eventuali bande vuote restano visibili se l'aspect ratio non e 1.79:1. */
.core__media {
  width: var(--container-width);
  height: 800px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}