/* ==========================================================================
   MRF PFR — 312:5171 · 1512 x 691

   NUOVA dal mockup del 31 ago 2026.
   Flusso: 40 (padding sopra) + 651 (card) + 0 = 691
     card  = 240 + 171 + 240 = 651
     testo = 58 + 16 + 38 + 16 + 43 = 171

   ⚠️ NIENTE PADDING SOTTO. E' il mockup: la card si appoggia al bordo
   inferiore della sezione e la sezione successiva le arriva a filo.
   ========================================================================== */

.mrf-fascia {
  width: var(--page-width);
  padding: var(--space-5) var(--page-gutter) 0;   /* 40 / 40 / 0 */
  background: var(--color-white);
}

/* --- Card 312:5118 — 1432 x 651 ------------------------------------------
   I 240px di padding sono la misura del mockup, ed e quella a dare
   l'altezza: il testo dentro ne occupa 171.
-------------------------------------------------------------------------- */
.mrf-fascia__card {
  position: relative;
  width: 100%;
  padding: 240px;
  border-radius: var(--radius-lg);                /* 16 */
  overflow: hidden;
  background: var(--color-tertiary);              /* si vede finche manca la foto */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Il riquadro della fotografia e fuori flusso: cosi ne la foto ne la
   didascalia del segnaposto possono cambiare l'altezza della card. */
.mrf-fascia__sfondo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Il velo: rettangolo pieno #00122b al 60%, non un gradiente. */
.mrf-fascia__velo {
  position: absolute;
  inset: 0;
  background: rgb(0 18 43 / .6);
  pointer-events: none;
}

.mrf-fascia__testo {
  position: relative;                             /* sopra foto e velo */
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);                            /* 16 */
}

.mrf-fascia__titolo {
  width: 100%;
  color: var(--color-white);
  text-align: center;
}

.mrf-fascia__lead {
  width: 100%;
  color: var(--text-on-dark-muted);               /* #d2d2d2 */
  text-align: center;
}

/* ⚠️ Largo quanto il testo, non hug: e la variante disegnata qui. Per questo
   il pulsante non passa dal blocco `pulsanti`, che e hug per costruzione. */
.mrf-fascia__cta {
  width: 100%;
}