/* =============================================================================
   Modulo: le sedi, in card con l'ora locale.

   Nodo di design 453:1609, pagina Contacts.

   Il titolo della pagina (453:1627) e il pulsante sotto (895:5493), poi le card in
   due colonne da 704 con 40 di stacco, righe a 32. Una card è alta 640: la
   fotografia 704×480 con raggio 24, 16, la barra del nome alta 56 col filetto
   sotto, 16, e i dettagli in tre colonne — 282,5, 282,5 e i 107 di «Get
   directions» — con 16 di stacco (nodi 453:1638–453:1647).

   Nessun movimento oltre al reveal e ai due punti dell'ora: non è una scena.
   ========================================================================== */

/* Lo stacco del design, 160 per lato, come margine: vedi `--space-module` in
   base.css.

   ⚠ **Quando apre la pagina non serve altro**, e non è il caso di `magazine-index`.
   Il margine collassa con quello che `main` mette per l'header, vince il più grande,
   e il titolo cade a 160 dalla cima: 64 sotto un menu da 96. Nel design sta a 176
   sotto un menu da 112, cioè gli stessi 64 — contati dal menu, come là. */
.offices-grid {
    margin-block: var(--space-module);
}

/* -----------------------------------------------------------------------------
   Testata: titolo e pulsante.
   -------------------------------------------------------------------------- */

/* 16 fra titolo e pulsante (nodo 453:1626, `gap: 16`), 64 fra il pulsante e la
   prima riga di card: il gruppo finisce a y 344 e le card cominciano a 408. */
.offices-grid__head {
    display: grid;
    justify-items: start;
    gap: var(--space-s);
    margin-block-end: var(--space-2xl);
}

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

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

/* Due colonne da 704 su 1448, 40 in mezzo: in frazioni e non in pixel perché la
   colonna di contenuto si restringe con la finestra. Sotto la soglia una colonna
   sola: a 900 una card sarebbe larga 411, e la riga dei dettagli non ci sta più
   nemmeno a capo. */
.offices-grid__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l) 2.5rem; /* 32 fra le righe (408 → 1080 meno 640), 40 fra le colonne: non è un passo della scala */
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 901px) {
    .offices-grid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* La card è un contenitore di query: la riga dei dettagli si ricompone sulla sua
   larghezza, non su quella della finestra, perché le due cose non vanno insieme — a
   1000 di finestra la card è larga 460, a 800 è larga 760. */
.offices-grid__card {
    display: grid;
    align-content: start;
    gap: var(--space-s);
    container-type: inline-size;
}

/* 704×480, raggio 24. In proporzione e non in pixel, così la card si restringe
   intera. `--color-scene-bg` è il fondo dietro un media — il tempo in cui la
   fotografia non è arrivata, e la card senza fotografia. */
.offices-grid__media {
    aspect-ratio: 704 / 480;
    overflow: hidden;
    border-radius: var(--radius-l);
    background-color: var(--color-scene-bg);
}

.offices-grid__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------------------------------------------------
   La barra del nome: nome a sinistra, ora a destra, filetto sotto.
   -------------------------------------------------------------------------- */

/* Lo stile `h3` del design — 28 su 40, SemiBold — per nome e ora. Il filetto è
   **bianco pieno** (453:1640, `border-white`), non il 12% della tabella delle sedi:
   qui separa il titolo della card dai suoi dettagli, e nel design si vede.

   8 sopra e 8 sotto più il filetto: 57 invece dei 56 del frame, perché in Figma il
   bordo non si somma alla misura e in CSS sì. Si tiene il pixel in più, come nel
   footer: devono combaciare gli spazi che si vedono. */
.offices-grid__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 var(--space-s);
    padding-block: var(--space-2xs);
    border-block-end: 1px solid var(--color-text-primary);
    font-size: var(--text-body-xl);
    line-height: var(--leading-body-xl);
    font-weight: var(--weight-semibold);
}

.offices-grid__name {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

/* L'ora al 60% di bianco: il colore del nodo 453:1643. Non è un token, come nelle
   card del magazine che usano lo stesso 60%. */
.offices-grid__time {
    margin: 0;
    color: rgb(255 255 255 / 0.6);
    white-space: nowrap;
}

/* ⚠ **I due punti lampeggiano: è la richiesta, non il design**, che è un fotogramma
   fermo. Un lampeggio secco e non una dissolvenza — un secondo accesi, un secondo
   spenti — come l'orologio di un forno. Le quattordici card cominciano nello stesso
   fotogramma, quindi lampeggiano insieme.

   ⚠ **`steps(1)` vuole la fermata a metà.** La funzione di tempo vale per ogni
   intervallo fra due keyframe, e `steps(1)` tiene il valore di partenza fino alla fine
   dell'intervallo: con il solo `to { opacity: 0 }` il salto cadrebbe alla fine del
   ciclo, cioè nell'istante in cui il ciclo ricomincia, e i due punti non si
   spegnerebbero mai. Con il 50%: accesi da 0 a 1s, spenti da 1 a 2s, e il 100% è il
   valore dell'elemento, cioè di nuovo accesi.

   Niente `fill-mode`: col movimento ridotto base.css accorcia l'animazione a un
   istante, e senza `fill-mode` alla fine resta lo stato di partenza — i due punti
   accesi e fermi, che è la resa giusta.

   Il JS non tocca mai questo elemento: riscrive le ore e i minuti accanto, e il
   lampeggio non si interrompe al cambio di minuto. */
.offices-grid__colon {
    --clock-blink: 2s;

    animation: offices-grid-blink var(--clock-blink) steps(1) infinite;
}

@keyframes offices-grid-blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* -----------------------------------------------------------------------------
   I dettagli: contatti, indirizzo, indicazioni.
   -------------------------------------------------------------------------- */

/* `body-xs`: 16 su 24, Medium, tracking 1%. Tre colonne come nel design — due uguali
   e «Get directions» alla propria misura, allineato a destra.

   `font-style: normal` perché è un `<address>`, che lo user agent mette in corsivo. */
.offices-grid__details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-s);
    font-style: normal;
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-body-s);
}

.offices-grid__contacts,
.offices-grid__address {
    display: grid;
    align-content: start;
}

/* ⚠ Le sedi vere hanno email più lunghe di quelle del design —
   `sales.fairviewcorp@mcubedigital.com` è 35 caratteri — e un indirizzo email non ha
   spazi dove andare a capo. Il template mette un `<wbr>` dopo la chiocciola, che è il
   punto dove si legge meglio; `overflow-wrap: anywhere` resta per l'indirizzo che
   nemmeno così ci sta, invece di sbordare nella colonna accanto. */
.offices-grid__email {
    color: inherit;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

/* Il telefono nel design non è sottolineato, e resta un link: lo dice il puntatore,
   e lo hover lo sottolinea come i contatti della tabella. */
.offices-grid__phone {
    color: inherit;
    text-decoration: none;

    &:is(:hover, :focus-visible) {
        text-decoration: underline;
    }
}

.offices-grid__line {
    display: block;
}

/* ⚠ **Sottolineato in tutte le card**, e nel design lo è solo nella prima (453:1647
   sì, 453:1657, 453:1667 e 453:1677 no). Il nodo è lo stesso testo in quattro copie,
   e un link che non si vede non è un link — lo stesso scarto scelto per i link negli
   articoli. */
.offices-grid__directions {
    justify-self: end;
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}

/* Una card stretta non ha posto per tre colonne, e nemmeno per due: sotto i 32rem —
   la card a 1024 di finestra, o su un telefono — contatti, indirizzo e indicazioni
   vanno uno sotto l'altro. Due colonne da 227 sono già state provate, ed è lì che le
   email si spezzavano all'ultima lettera: «italy@mcubedigital.co / m».

   Sta in fondo al file perché riscrive `justify-self` delle indicazioni: una query
   di contenitore non aggiunge peso al selettore, e prima della regola di base
   perderebbe. */
@container (inline-size < 32rem) {
    .offices-grid__details {
        grid-template-columns: minmax(0, 1fr);
    }

    .offices-grid__directions {
        justify-self: start;
    }
}