/* ==========================================================================
   Blocco condiviso — FEATURES
   Maintenance `Features` 63:586 · 1512 x 2693
   Ricompare su Compliance, MRF e Monitoring (li a larghezza diversa: per
   questo la griglia e a colonne fluide e non a 708 fissi).

   ⚠️ Su Maintenance la sezione NON ha padding inferiore (160 sopra, 0 sotto):
   serve a far attaccare il blocco successivo. Su Compliance invece ce l'ha,
   160 sopra e 160 sotto. Non e una svista: sono due impaginazioni diverse.
   Il template passa `attaccata => true` dove il padding va tolto.

   Verifica altezza Maintenance:
     160 + 58 (titolo) + 40 + 2352 (griglia) + 40 + 43 (pulsanti) + 0 = 2693 ✔
   Verifica altezza Compliance:
     160 + 116 + 40 + 1798 + 40 + 43 + 160 = 2357 ✔
     griglia = 4 x 576 + 3 x 16 = 2304 + 48 = 2352 ✔
     card    = 24 + 400 (img) + 40 + 88 (testo) + 24 = 576 ✔
   ========================================================================== */

.features--attaccata {
  padding-bottom: 0;                    /* ⚠️ voluto, vedi sopra */
}

.features__titolo {
  color: var(--text-on-light);
  text-align: center;
  width: 100%;
}

/* --- La griglia -----------------------------------------------------------
   Due colonne fluide, non 708 fissi: su Compliance lo stesso blocco vive in
   un contenitore piu stretto. `1fr` copre entrambi i casi senza varianti.

   Le card della stessa riga sono alte uguali (comportamento naturale della
   griglia): in Figma alcune istanze hanno `self-stretch` e altre
   `self-start`, ma il risultato e sempre una riga pareggiata, quindi qui non
   serve replicare la distinzione.
-------------------------------------------------------------------------- */
.features__griglia {
  display: grid;
  /* Due colonne su Maintenance (8 card da 708), TRE su Compliance
     (9 card da 466.67). Si passa dal template con --colonne. */
  grid-template-columns: repeat(var(--colonne, 2), minmax(0, 1fr));
  gap: var(--space-3);                  /* 16 */
  width: 100%;
  margin-top: var(--space-5);           /* 40 */
  list-style: none;
  padding: 0;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);                  /* 40 */
  padding: 24px;                        /* ⚠️ 24, non 40 come le altre card */
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
}

.feature-card__media {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: 0 0 auto;
}

/* `contain`: come tutte le immagini di prodotto del progetto, non si ritaglia. */
.feature-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.feature-card__testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);                  /* 16 */
  width: 100%;
}

.feature-card__titolo { color: var(--text-on-light); }
.feature-card__corpo  { color: var(--color-tertiary-300); }

.features .btn-group {
  margin-top: var(--space-5);           /* 40 */
}