/* =============================================================================
   Modulo: l'indice del magazine.

   Nodo di design 552:4179. Una sezione ferma: nessun pin, nessun progresso, nessun
   `data-scene`. Il JavaScript del modulo fa una cosa sola, ed è di FacetWP: tiene
   aggiornata la pastiglia *All* e lo stato di attesa dopo un refresh.

   Le misure del design, per non doverle ricercare:

     titolo      `title-lower-xl`, 96 su 104, Medium, −2%; 40 sotto
     barra       filtri a sinistra, ricerca a destra; 40 sotto
     etichette   `label-sm`, 16 dall'elemento che etichettano
     pastiglie   alte 32, padding 12, angoli 16, 8 fra loro
     ricerca     240×32, stessi bordi delle pastiglie, segnaposto al 60%
     griglia     tre colonne da 456, 40 fra le colonne e 64 fra le righe
     card        fotografia 456×280 angoli 24, 16 fra fotografia, titolo e data
     paginazione cerchi da 56, 8 fra loro, 64 sopra
   ========================================================================== */

.magazine-index {
    /* Lo stacco fra moduli, 160 per lato. È un margine, e collassa col vicino. */
    margin-block: var(--space-module);

    color: var(--color-scene-text);
}

/* ⚠ **Quando apre la pagina, lo stacco si conta dal menu.** Nel design il titolo sta
   a y 277 sotto un menu alto 112, cioè 165 più giù — lo stacco fra moduli. Ma il
   margine di questo modulo **collassa** con quello che `main` dichiara per l'header
   (base.css → *Header e footer*), e fra i due vince il più grande: il titolo
   finirebbe a 160 dalla cima del documento, cioè 64 sotto un menu da 96.

   Qui il modulo somma l'header al proprio stacco, e il collasso lascia quella somma:
   256, cioè 160 sotto il menu come nel design. Sta nel modulo e non in base.css perché
   non è una regola della pagina: l'articolo, che apre anche lui sotto il menu, ha la
   copertina a 16. È questa sezione che vuole respiro, non tutte quelle che aprono. */
main > .magazine-index:first-child {
    margin-block-start: calc(var(--header-h) + var(--space-module));
}

/* -----------------------------------------------------------------------------
   Testata: titolo, filtri, ricerca.
   -------------------------------------------------------------------------- */

.magazine-index__head {
    display: grid;
    gap: 2.5rem; /* 40 fra titolo e barra (nodo 570:1212): non è un passo della scala */
    margin-block-end: 2.5rem;
}

/* `title-lower-xl`: 96 su 104, Medium, tracking −2%, in tondo e bianco pieno — lo
   stesso stile del titolo della pagina servizi. Il corpo dell'`<h1>` di base.css si
   sostituisce per intero. */
.magazine-index__title {
    font-size: var(--text-title-lower);
    line-height: var(--leading-title-lower);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-medium);
}

/* Filtri a sinistra, ricerca a destra.

   ⚠ **Una griglia e non un `flex-wrap`, perché gli argomenti veri non stanno in una
   riga.** Nel design sono cinque nomi corti; nel database sono sette, e due sono «Sight
   Solutions & Content Creations» e «Sound Branding & Audio Solutions». Con un
   `flex-wrap` sulla barra la riga dei filtri andava a capo per intero — «Filter by»
   da solo sopra le pastiglie, la ricerca in una terza riga sotto. Con due colonne le
   pastiglie vanno a capo **dentro la propria**, e la ricerca resta dove il design la
   mette: in alto a destra, allineata alla prima riga. */
.magazine-index__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-m) var(--space-3xl);
}

.magazine-index__filters,
.magazine-index__search {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s); /* 16 fra l'etichetta e quel che etichetta */
}

/* L'etichetta è alta quanto una pastiglia e centrata nella sua altezza: così sta sulla
   prima riga anche quando le pastiglie sono due righe. Con `align-items: center` sul
   gruppo si centrerebbe sull'altezza di tutte e due. */
.magazine-index__label {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 2rem;
}

/* `label-sm`: 12 su 16, peso 600, tracking 12%, maiuscolo. È lo stile di tutte le
   scritte di questa barra — etichette, pastiglie, segnaposto — e **non** quello della
   barra di `projects-index`, che ha le etichette a 10px: sono due barre diverse. */
.magazine-index__label,
.magazine-index__pill,
.magazine-index__pills .facetwp-checkbox,
.magazine-index__search .facetwp-search {
    font-size: var(--text-label);
    line-height: var(--leading-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
}

.magazine-index__pills {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--space-2xs); /* 8 fra le pastiglie (nodo 552:4183) */

    /* Senza, la fila di un flex non scende sotto la sua pastiglia più lunga e sborda
       invece di andare a capo. */
    min-width: 0;
}

/* ⚠ **`display: contents` sul contenitore del facet**: FacetWP avvolge le proprie
   caselle in un `<div class="facetwp-facet …">`, e senza questa riga le pastiglie
   sarebbero un blocco a sé accanto ad *All*. Il perché per esteso è in
   `projects-index.css`, che ha la stessa riga. */
.magazine-index__pills .facetwp-facet,
.magazine-index__search .facetwp-facet {
    display: contents;
    margin: 0;
}

/* La pastiglia, in due sapori che devono essere identici: *All* è un `<a>` del tema,
   le altre sono i `<div>` di FacetWP.

   Dal componente `filter` del design (nodo 895:5608): alta 32 col bordo dentro,
   padding 12, angoli 16, bordo bianco di un pixel. ⚠ **Il componente ha due livelli**:
   il riquadro col bordo, e sotto di lui un rettangolo bianco pieno della stessa
   altezza, fuori dal ritaglio. È il riempimento dell'hover, lo stesso di `cta-l-white`
   — si alza dal basso e l'etichetta passa a nera — quindi è fatto come
   `.button--outline` in base.css: uno pseudo-elemento che cresce da `scale: 1 0`.

   ⚠ **`height` dichiarata e non dedotta dal padding**, per la trappola di sempre: in
   Figma il bordo non si somma alla misura, in CSS sì. */
.magazine-index__pill,
.magazine-index__pills .facetwp-checkbox {
    --pill-duration: 600ms;
    --pill-ease: cubic-bezier(0.48, 0, 0.12, 1);

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    margin: 0;
    /* 12 meno il pixel del bordo, per la stessa ragione dell'altezza: in Figma il
       bordo sta dentro i 12, in CSS si somma. Misurato: con 12 pieni ogni pastiglia
       era larga 2 in più del nodo, e su una fila di otto sono 16. */
    padding: 0 calc(var(--space-xs) - 1px);
    overflow: hidden;
    border: 1px solid var(--color-text-primary);
    border-radius: var(--radius-m);
    background-color: transparent;

    /* ⚠ **Non ridondante**: il foglio di FacetWP disegna la casella di spunta come
       immagine di fondo, ed è accodato nel footer — dopo questo. La storia per intero
       è in `projects-index.css`, sulla stessa riga. */
    background-image: none;
    color: var(--color-text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--pill-duration) var(--pill-ease);

    &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: var(--color-text-primary);
        transform-origin: bottom center;
        scale: 1 0;
        transition: scale var(--pill-duration) var(--pill-ease);
    }
}

/* L'hover e lo stato attivo sono lo stesso fotogramma — fondo bianco, testo nero —
   e nel design la pastiglia *All* accesa è esattamente il fotogramma finale
   dell'hover. Diverso da `projects-index`, dove l'hover è un velo: là il componente
   non ha il secondo livello. */
.magazine-index__pill:is(:hover, :focus-visible, .is-active),
.magazine-index__pills .facetwp-checkbox:is(:hover, .checked) {
    background-image: none;
    color: #000;

    &::after {
        scale: 1 1;
    }
}

/* Una scelta che non porterebbe nessun risultato: FacetWP le mette `.disabled`. Resta
   leggibile e non si riempie: una pastiglia che invita e poi non fa niente è peggio
   di una spenta. */
.magazine-index__pills .facetwp-checkbox.disabled {
    opacity: 0.4;
    cursor: default;

    &:hover {
        color: var(--color-text-primary);

        &::after {
            scale: 1 0;
        }
    }
}

/* Il conteggio fra parentesi: nel design non c'è. */
.magazine-index__pills .facetwp-counter {
    display: none;
}

/* FacetWP mette 5px di padding a destra dell'etichetta per staccarla dal conteggio,
   che qui non c'è: senza azzerarlo il testo è fuori centro. */
.magazine-index__pills .facetwp-display-value {
    padding: 0;
}

/* Il ricaricamento: la regola di FacetWP sta sul contenitore, che qui è
   `display: contents` e non ha una scatola. Si sposta sulle pastiglie. */
.magazine-index__pills:has(.facetwp-facet.is-loading) .facetwp-checkbox {
    opacity: 0.6;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   La ricerca.

   Il campo è quello del facet `search` di FacetWP: un `<input class="facetwp-search">`
   dentro uno `<span class="facetwp-input-wrap">`, con accanto un'icona `<i>` che fa da
   lente, da pulsante e da indicatore di caricamento.
   -------------------------------------------------------------------------- */

.magazine-index__search .facetwp-input-wrap {
    display: block;
}

/* 240×32, bordo bianco, angoli 16, padding 12 (nodo 552:4198). Il `min-width` e il
   `padding-right` di FacetWP — 240 e 30, per fare posto alla lente — si riscrivono:
   il suo selettore ha due classi e un elemento, questo tre classi e un elemento. */
.magazine-index__search .facetwp-facet input.facetwp-search {
    width: 15rem;
    min-width: 0;
    height: 2rem;
    margin: 0;
    padding: 0 var(--space-xs);
    border: 1px solid var(--color-text-primary);
    border-radius: var(--radius-m);
    background-color: transparent;
    color: var(--color-text-primary);
    outline-offset: 2px;

    &::placeholder {
        color: rgb(255 255 255 / 0.6);
        opacity: 1;
    }
}

/* ⚠ **La lente di FacetWP si nasconde**, perché nel design il campo è solo un bordo
   col segnaposto. Non si perde niente: il campo ha `auto_refresh` e cerca mentre si
   scrive, e l'invio cerca lo stesso — la lente era la terza strada per la stessa
   cosa. Si perde lo spinner, che al suo posto è lo stato di attesa della sezione
   (`is-refreshing`, più sotto). */
.magazine-index__search .facetwp-icon {
    display: none;
}

/* Lo stato di attesa, mentre la richiesta di FacetWP è in volo. È lo stesso di
   `projects-index`, per la stessa ragione: su questa installazione una richiesta costa
   un secondo, e un secondo senza nessun segno sembra un guasto. */
.magazine-index__results {
    transition: opacity var(--duration-base) var(--ease-out);
}

.magazine-index.is-refreshing :is(.magazine-index__results, .magazine-index__pager) {
    opacity: 0.4;
    pointer-events: none;
    transition-duration: var(--duration-fast);
}

/* -----------------------------------------------------------------------------
   La griglia.
   -------------------------------------------------------------------------- */

/* Tre colonne da 456 su 1448: 3 × 456 + 2 × 40 fa 1448 esatti. `align-items: start`
   perché nel design le card hanno altezze diverse — il titolo va su una riga o su due
   — e il passo fra le righe resta 444, cioè la card più alta più 64. */
.magazine-index__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 4rem 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* -----------------------------------------------------------------------------
   La card. È la stessa delle ultime uscite in fondo a un articolo, e il CSS è
   ripetuto — vedi il template. Chi cambia qualcosa qui lo cambia anche in
   `singles/article-latest.css`.
   -------------------------------------------------------------------------- */

.magazine-index__card {
    display: grid;
    gap: var(--space-s);
    color: inherit;
    text-decoration: none;
}

.magazine-index__media {
    position: relative;
    display: block;
    aspect-ratio: 456 / 280;
    overflow: hidden;
    border-radius: var(--radius-l);
    background-color: var(--color-scene-bg);
}

/* ⚠ **Lo zoom all'hover è provvisorio**: l'annotazione «riferimenti animazione — card
   hover» sulla prima card (nodo 895:5526) rimanda a un'animazione che nel file non
   c'è. Il perché per esteso è nella gemella, `article-latest.css`. */
.magazine-index__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--duration-slow) var(--ease-out);
}

.magazine-index__card:is(:hover, :focus-visible) .magazine-index__image {
    scale: 1.05;
}

.magazine-index__topic {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-m);
    background-color: rgb(0 0 0 / 0.4);
    font-size: var(--text-label);
    line-height: var(--leading-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* 20 su 26, Medium, tracking 1%: misurato sul nodo, e non uno stile del design. */
.magazine-index__card-title {
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
}

.magazine-index__date {
    color: rgb(255 255 255 / 0.6);
    font-size: var(--text-label);
    line-height: var(--leading-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Paginazione. La stessa di `projects-index` (nodo 647:3987 qui, 542:1808 là), e
   ripetuta per la stessa ragione della card.
   -------------------------------------------------------------------------- */

.magazine-index__pager {
    margin-block-start: var(--space-2xl);
}

.magazine-index__pager .facetwp-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
}

.magazine-index__pager .facetwp-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    /* FacetWP mette 6px a destra di ogni pagina: lo spazio qui è il `gap`. */
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-body-s);
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);

    & > svg {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
    }

    &:is(:hover, :focus-visible) {
        background-color: var(--color-text-faint);
    }
}

/* La pagina corrente: il cerchio col bordo bianco. `font-weight` ridichiarato perché
   FacetWP mette `bold` su `.facetwp-page.active` e il suo foglio arriva dopo. */
.magazine-index__pager .facetwp-page.active {
    border-color: var(--color-text-primary);
    font-weight: var(--weight-medium);
}

.magazine-index__pager .facetwp-page.dots {
    cursor: default;
    pointer-events: none;
}

/* La freccia indietro è la stessa icona specchiata: vedi `projects-index.css`. */
.magazine-index__pager .facetwp-page.prev > svg {
    scale: -1 1;
}

/* -----------------------------------------------------------------------------
   Nessun risultato. Il design non ce l'ha, ma una ricerca che non trova niente deve
   dirlo — altrimenti la pagina sembra rotta.
   -------------------------------------------------------------------------- */

.magazine-index__empty {
    padding-block: var(--space-2xl);
    font-size: var(--text-body-l);
    line-height: var(--leading-body-l);
    font-weight: var(--weight-medium);
    text-align: center;
    opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   Layout stretto. Il design non c'è: due colonne, poi una, e la ricerca che si
   allarga a tutta la riga quando va sotto i filtri.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

    .magazine-index__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {

    /* Sotto questa larghezza la ricerca va sotto i filtri, e le etichette sopra quel
       che etichettano: accanto si mangerebbero metà della riga. */
    .magazine-index__bar {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Da telefono il campo di ricerca è alto 48 invece di 32, su richiesta: è un
   bersaglio al tocco. L'etichetta accanto cresce con lui per restargli centrata;
   sotto i 640 va sopra, e il blocco qui sotto la rimette alta quanto il testo. */
@media (max-width: 900px) {

    .magazine-index__search .facetwp-facet input.facetwp-search {
        height: 3rem;
    }

    .magazine-index__search .magazine-index__label {
        height: 3rem;
    }
}

@media (max-width: 640px) {

    .magazine-index__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* L'etichetta sopra quel che etichetta. Accanto, «Filter by» più la pastiglia più
       lunga — «Sight Solutions & Content Creations», 322px — non stanno in 358:
       misurato a 390, la pagina scorreva di lato di 34. */
    .magazine-index__filters,
    .magazine-index__search {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2xs);
    }

    .magazine-index__label,
    .magazine-index__search .magazine-index__label {
        height: auto;
    }

    .magazine-index__search .facetwp-input-wrap {
        flex: 1 1 auto;
    }

    .magazine-index__search .facetwp-facet input.facetwp-search {
        width: 100%;
    }

    /* ⚠ **La paginazione non va a capo: i cerchi si restringono.** Una pagina in
       mezzo ne ha nove — le due frecce, sette numeri o i puntini — e a 56 con 8 di
       stacco fanno 568px, contro i 342 di una colonna a 390: la freccia avanti
       scendeva da sola sulla riga sotto. Qui ogni cerchio parte da 56 e cede in
       parti uguali, alto quanto è largo: a 390 sono 34, a 360 sono 31. Con undici,
       il massimo che FacetWP stampa, a 360 restano 25 — sopra i 24 di un bersaglio
       al tocco. */
    .magazine-index__pager .facetwp-pager {
        flex-wrap: nowrap;
        gap: var(--space-3xs);
    }

    .magazine-index__pager .facetwp-page {
        flex: 0 1 3.5rem;
        min-width: 0;
        width: auto;
        height: auto;
        aspect-ratio: 1;

        & > svg {
            width: min(1.5rem, 60%);
            height: auto;
        }
    }
}