/* ==========================================================================
   Core Capabilities — 27:1191 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, non una misura di Figma.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la sezione
   resta identica al mockup (1839px, container 696 + 736, lista a scroll
   interno alta 639 su 1258 di contenuto, immagine 1432x800).

   Il punto delicato di questa sezione e lo SCROLL INTERNO della lista:
   a desktop e un box da 639px che scorre dentro una pagina ferma. Su touch
   uno scroll annidato dentro lo scroll di pagina e una trappola, quindi da
   tablet in giu viene sciolto: la lista torna un flusso normale e allunga
   la sezione.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1280-1511 · Desktop compresso
   Stessa struttura: colonna testo a sinistra, lista a scroll a destra.
   696 e 736 diventano quote della griglia (696/1432 = 48.6%), cosi il
   rapporto fra le due colonne resta quello di Figma a qualsiasi larghezza.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .core__container {
    width: 100%;
    height: auto;
    /* stretch (invece di flex-start) cosi la colonna testo si allunga fino
       all'altezza della lista e lo space-between continua a spingere i
       pulsanti sul fondo, come nel mockup */
    align-items: stretch;
  }

  .core__text {
    width: 48.6%;                   /* 696 / 1432 */
    height: auto;
    padding-right: var(--space-4);  /* 32px MIO: a Figma le due colonne sono
                                       a filo, qui servono per non incollarle */
  }
  .core__h2 { width: 100%; }        /* era 696px fissi */

  /* .core__cards resta flex:1 0 0 e conserva height:639 + overflow-y:auto:
     lo scroll interno a desktop e voluto. */

  /* Immagine 1432x800 -> fluida a rapporto costante (1.79:1).
     aspect-ratio invece di height fissa: l'immagine e in "Fit", una height
     fissa produrrebbe bande vuote crescenti man mano che la card si stringe. */
  .core__media {
    width: 100%;
    height: auto;
    aspect-ratio: 1432 / 800;
  }
}


/* --------------------------------------------------------------------------
   1024-1279 · Laptop
   Le due colonne reggono ancora affiancate. Si abbassa il box di scroll:
   639px su una finestra da 800 di altezza occuperebbe tutto il viewport.
   560 e un valore MIO.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .core__cards { height: 560px; }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — le due colonne si impilano E lo scroll interno si scioglie
   Impilate, la colonna testo e la lista occupano tutta la larghezza: tenere
   un box da 560px che scorre dentro la pagina sarebbe un'area cieca al touch.
   La lista diventa flusso normale (height:auto, overflow:visible) e tutte e
   otto le card sono raggiungibili con lo scroll di pagina.
   Conseguenza attesa: la sezione si allunga di ~700px. E il prezzo dello
   scioglimento; se il mockup mobile vorra tenere la lista corta servira un
   troncamento nel markup (es. "vedi tutte"), non una regola CSS.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .core__container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);            /* 40px, valore MIO */
  }
  .core__text {
    width: 100%;
    padding-right: 0;
    justify-content: flex-start;
    gap: var(--space-4);            /* 32px: sostituisce lo space-between,
                                       che in colonna auto non ha piu effetto */
  }
  .core__cards {
    width: 100%;
    height: auto;
    overflow: visible;
  }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .core__container { gap: var(--space-4); }
  .core__text      { gap: var(--space-3); }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   40px di padding su una card di ~343px lascerebbero 263px di testo.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .core-card { padding: 24px; }
}