/* =============================================================================
   Modulo: le card di quello che offriamo.

   Nodo di design 530:3967. Sezione ferma: nessuna scena, nessuna soglia. Il
   JavaScript del modulo fa una cosa sola — il filmato al passaggio — e senza
   filmati non serve.

   Le misure del design: 40 fra titolo e fila, card 472 con distanziatore 16 su una
   colonna da 1448, media 472x280 ad angoli 16, nome centrato a 16 dal fondo del
   media, 16 fra media e testo, 24 fra testo e pulsante, 8 di rientro del testo.
   ========================================================================== */

.offer-cards {
    padding-block: var(--space-section-half);
    color: var(--color-text-primary);
}

.offer-cards__inner {
    display: grid;

    /* 40px fra titolo e fila: vedi il commento gemello in claim-boxes.css. */
    row-gap: 2.5rem;
}

/* Nel design è un titolo di sezione col riempimento sfumato: la classe
   `.display-gradient` la mette il PHP.

   Niente `margin` qui: lo possiede `.display-gradient` (base.css), che ci mette un
   negativo per compensare il proprio padding. Un `margin: 0` in questa regola lo
   azzererebbe — stessa specificita', ma il CSS del modulo carica dopo — e l'accento
   delle maiuscole tornerebbe tagliato. Il reset di base.css lo azzera gia' per
   tutti. */
.offer-cards__intro {
    font-size: var(--text-title);
    line-height: var(--leading-solid);
    font-weight: var(--weight-black);
    text-transform: uppercase;
    text-align: center;
    font-feature-settings: "lnum", "pnum";
}

/* La fila.

   `auto-fit` e non un numero di colonne: il campo è un repeater da due a quattro
   card. Con tre card su 1448 la griglia crea quattro tracce da 288 minimo, collassa
   la quarta che è vuota e distribuisce il resto — vengono i 472 del design. Con due
   card restano due tracce da 716, con quattro quattro da 350. Sotto i 1000px circa
   va a capo da sé, senza una soglia scritta da nessuna parte. */
.offer-cards__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-s);
    list-style: none;
    padding: 0;
}

/* La card, e **l'allineamento dei pulsanti**.

   Due griglie annidate, e nessuna misura: la fila allunga tutte le celle alla
   stessa altezza, la card mette il media sulla prima riga e il corpo su una riga
   che prende quel che avanza, il corpo mette il testo sulla riga elastica e il
   pulsante su quella dopo. Risultato: i pulsanti sono tutti appoggiati al fondo
   della card più alta.

   Il media ha un rapporto fisso, quindi è alto uguale in tutte le card qualunque
   sia la colonna: è quello che tiene allineati anche i nomi. */
.offer-cards__card {
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: var(--space-s);
    height: 100%;
}

.offer-cards__media {
    display: grid;
    align-content: end;
    justify-items: center;
    position: relative;
    aspect-ratio: 472 / 280;
    padding: var(--space-s) var(--space-m);
    overflow: hidden;
    border-radius: var(--radius-m);
    background-color: var(--color-scene-bg);
    isolation: isolate;
}

.offer-cards__poster,
.offer-cards__video {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Il filmato sta sopra l'immagine e resta trasparente finché non parte: il
   passaggio è una dissolvenza e non uno sfarfallio, e senza JavaScript resta
   semplicemente l'immagine. La classe la mette il JS del modulo. */
.offer-cards__video {
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}

.offer-cards__card.is-playing .offer-cards__video {
    opacity: 1;
}

/* Il velo sotto il nome, misurato sul nodo: nero al 40% all'8,7% dell'altezza,
   trasparente al 40,1%, letti dal basso. */
.offer-cards__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgb(0 0 0 / 0.4) 8.73%,
        rgb(0 0 0 / 0) 40.077%
    );
}

/* `title-upper-sm`: 20px su 24, peso 900, maiuscolo, spaziato del 4%. */
.offer-cards__title {
    font-size: var(--text-title-s);
    line-height: var(--leading-title-s);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-title-s);
    text-transform: uppercase;
    text-align: center;
    color: var(--color-scene-text);
}

/* Il corpo. Il rientro di 8px è quello del design: il testo sta dentro il raggio
   del media, non a filo. Nel nodo ce l'hanno due card su tre — la terza è una
   distrazione del mockup, e vale la maggioranza. */
.offer-cards__body {
    display: grid;
    grid-template-rows: 1fr auto;
    row-gap: var(--space-m);
    padding-inline: var(--space-2xs);
}

/* `body-xs`: 16px su 24, spaziato dell'1%. */
.offer-cards__text {
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-body-s);
}

.offer-cards__cta {
    justify-self: start;
}