/**
 * Struttura dei blocchi — GR Fashion Consulting
 *
 * La disposizione minima che serve a un blocco per essere quello che dice di
 * essere, su QUALUNQUE tema: lo slider mostra una diapositiva alla volta, le
 * tessere stanno in griglia, i prodotti in fila, le frecce sono frecce. Fino
 * alla 1.3.1 tutto questo stava solo nel foglio di gr-hybrid, e su Hummingbird
 * le diapositive uscivano una sotto l'altra.
 *
 *
 * STRUTTURA SI', IDENTITA' NO
 *
 * Qui c'e' come le cose stanno in pagina. Non ci sono: caratteri, spaziature
 * dei caratteri, maiuscoletti, tinte di un marchio, velature colorate,
 * segnaposto fotografici, ingrandimenti al passaggio del mouse. Quelli sono la
 * faccia di un negozio e li mette il tema.
 *
 * I soli colori scritti qui sono il nero, il bianco e le trasparenze del nero,
 * e servono in un caso solo: il testo che passa sopra una fotografia, dove non
 * c'e' un colore del tema di cui fidarsi. Dove una superficie serve anche
 * senza fotografia — la fascia alternata, il filetto del richiamo — si ricava
 * dal colore del testo con `color-mix(in srgb, currentColor …)`: fondo e testo
 * non possono separarsi, nemmeno quando qualcuno sposta il blocco in un piede
 * scuro. Un fondo fisso sopra un colore ereditato e' il modo in cui nasce una
 * scritta illeggibile.
 *
 * Nessuna misura viene da un sito da imitare: sono la scala da 4 px, i punti
 * di rottura di Bootstrap e le proporzioni comuni delle fotografie.
 *
 *
 * PERCHE' `@layer ps-modules` — CONTA PIU' DELLA SPECIFICITA'
 *
 * Fra livelli CSS decide l'ordine dei livelli; la specificita' conta solo
 * dentro lo stesso livello. `ps-modules` lo dichiarano Hummingbird e gr-hybrid,
 * e sta:
 *
 *   - SOPRA `bs-base`, dove Bootstrap rientra le liste e mette i margini ai
 *     paragrafi: gli azzeramenti di questo foglio funzionano;
 *   - SOTTO `utilities`, e su gr-hybrid sotto tutti i livelli `gr-*`: ogni
 *     proprieta' che il tema dichiara su queste classi vince, qualunque sia la
 *     specificita' del suo selettore.
 *
 * Fuori dai livelli questo foglio batterebbe il tema. In `gr-modules`, dove sta
 * `marchi.css`, lo batterebbe su Hummingbird: li' quel livello non e'
 * dichiarato, e un livello nuovo si mette in fondo alla scala.
 *
 * Il foglio si registra DOPO `theme.css` (priorita' 85 contro 50) per la stessa
 * ragione: e' `theme.css` a dichiarare l'ordine. Se `ps-modules` lo nominasse
 * prima questo foglio, il livello nascerebbe per primo — sotto il reboot di
 * Bootstrap — e le liste tornerebbero rientrate e coi pallini.
 *
 * `:where()` ovunque: specificita' zero, cosi' anche un tema che scrive nello
 * stesso livello vince con una classe sola.
 *
 *
 * SU GR-HYBRID NON CAMBIA NIENTE — E NON PER FORTUNA
 *
 * Il livello protegge le proprieta' che il tema dichiara. Quelle che il tema
 * NON dichiara passerebbero. Per questo ogni proprieta' qui sotto e' una di
 * quelle che `gr-sezioni.css` dichiara sullo stesso elemento, oppure non ha
 * effetto con la disposizione che gr-hybrid le da' — e dove e' cosi', accanto
 * c'e' scritto perche'. Chi aggiunge una regola deve rifare quel conto: e'
 * l'unico modo in cui una base e un tema vestono le stesse classi senza
 * pestarsi.
 *
 * Classic Minimal: scala da 4 px, raggi al massimo 2 px, movimento a 180 ms con
 * `cubic-bezier(0.2, 0.7, 0.2, 1)` e spento con «riduci il movimento», ogni
 * variabile col suo ripiego. Lo controlla `tests/Unit/FoglioStrutturaleTest.php`.
 */

@layer ps-modules {

  /* ============================================================
     LA SEZIONE — blocchi.tpl, _intestazione.tpl
     ============================================================ */

  :where(.gr-blocco) {
    padding-block: 2rem;
  }

  /* Il contenuto resta nella misura del sito anche dove il tema stampa
     l'aggancio fuori da un contenitore. Il testo redazionale ha una misura
     sua, piu' stretta, piu' sotto. */
  :where(.gr-blocco) > :where(.gr-blocco__intestazione, .gr-tessere, .gr-prodotti, .gr-html) {
    max-width: var(--gr-container-max, 1280px);
    margin-inline: auto;
  }

  :where(.gr-blocco__intestazione) {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  :where(.gr-blocco__titolo) {
    margin: 0;
  }

  /* Fra i 45 e i 75 caratteri una riga si legge; a tutta larghezza si
     scorre. */
  :where(.gr-blocco__sottotitolo) {
    margin: 0;
    max-width: 70ch;
  }

  /* La fascia alternata: il colore del testo al 4%. Una velatura leggera su un
     tema chiaro, su uno scuro e dentro un piede scuro. */
  :where(.gr-blocco--alt) {
    background-color: color-mix(in srgb, currentColor 4%, transparent);
  }

  /* ---------- sezioni a due colonne ----------
     `gr-apertura` e `gr-newsletter` arrivano come classi del blocco
     (`impostazioni.classe`): intestazione e contenuto diventano due colonne
     da 62rem in su, una sola sotto. */
  :where(.gr-blocco.gr-apertura, .gr-blocco.gr-newsletter) {
    display: grid;
    gap: 1.5rem;
    align-items: center;
  }

  /* Solo per `gr-apertura`. gr-hybrid dichiara la colonna unica per lei e non
     per `gr-newsletter`, e sostituire la colonna implicita con una esplicita
     cambierebbe come trabocca un contenuto troppo largo. */
  :where(.gr-blocco.gr-apertura) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A colonne l'intestazione e' una colonna, non un cappello: il margine sotto
     la sfalserebbe rispetto all'altra. Viene dopo la regola generale
     dell'intestazione apposta: a specificita' zero decide l'ordine. */
  :where(.gr-apertura, .gr-newsletter) > :where(.gr-blocco__intestazione) {
    margin-bottom: 0;
  }

  @media (min-width: 62rem) {
    :where(.gr-blocco.gr-apertura, .gr-blocco.gr-newsletter) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* La variante in cui il testo pesa piu' di cio' che gli sta accanto: tre
       parti su cinque. */
    :where(.gr-blocco.gr-apertura--secondaria) {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
  }

  /* Il blocco slider e' una fascia intera e non va mai a colonne, anche quando
     porta `gr-apertura` — i file di semina gliela mettono. Sta dopo la regola
     delle colonne apposta. */
  :where(.gr-blocco.gr-blocco--slider) {
    display: block;
    padding-block: 0;
  }

  :where(.gr-blocco--slider) > :where(.gr-blocco__intestazione) {
    padding-top: 2rem;
  }

  /* ============================================================
     TESSERE — banner_grid.tpl
     ============================================================
     Una griglia che va a capo. Ogni tessera e' una colonna: l'immagine in
     proporzione sopra, le parole sotto. Le parole SOPRA la fotografia sono
     una scelta di disegno, e chiedono una velatura e un colore che dipendono
     dal tema: la base non la fa. */

  :where(.gr-tessere) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Una tessera sola non e' una griglia: a tutta larghezza la sua immagine
     sarebbe alta quanto lo schermo. */
  :where(.gr-tessere[data-gr-tessere="1"]) {
    grid-template-columns: minmax(0, 40rem);
  }

  /* Tre, sei e nove voci: righe da tre esatte, mai una tessera spaiata in
     fondo. */
  @media (min-width: 62rem) {
    :where(.gr-tessere[data-gr-tessere="3"], .gr-tessere[data-gr-tessere="6"], .gr-tessere[data-gr-tessere="9"]) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Su gr-hybrid la tessera e' un contenitore flessibile su una riga sola, e
     li' `align-content` non fa niente; `gap` nemmeno, perche' la fotografia e'
     posizionata e i figli in flusso sono uno. `min-width: 0` e' gia' il suo
     minimo, perche' gr-hybrid le da' `overflow: hidden`. */
  :where(.gr-tessera) {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
  }

  /* Il collegamento avvolge la tessera intera. Su gr-hybrid valgono le stesse
     ragioni della tessera per `align-content` e `gap`. */
  :where(.gr-tessera__collegamento) {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }

  /* La proporzione sta sull'immagine e vale prima che il file arrivi: niente
     salto del contenuto. 4:3 e' il formato di uno scatto orizzontale comune, e
     taglia poco sia un prodotto sia un ambiente. Su gr-hybrid l'immagine e'
     posizionata con larghezza e altezza date, e con due misure date
     `aspect-ratio` e `display` non contano. */
  :where(.gr-tessera__immagine) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  :where(.gr-tessera__testo) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
  }

  /* Righe distinte anche se un tema toglie la flessione al contenitore. Dentro
     un contenitore flessibile sono gia' blocchi: qui non cambiano niente. */
  :where(.gr-tessera__titolo, .gr-tessera__sottotitolo) {
    display: block;
  }

  /* Gerarchia, non marchio: il titolo pesa piu' della riga sotto. */
  :where(.gr-tessera__titolo) {
    font-weight: 600;
  }

  /* E' un'etichetta dentro il collegamento, non un bottone: non si stira sulla
     larghezza della tessera. */
  :where(.gr-tessera__bottone) {
    align-self: flex-start;
    margin-top: 0.5rem;
  }

  /* ============================================================
     PRODOTTI — product_carousel.tpl
     ============================================================
     Una fila che scorre dentro se stessa, mai sul corpo della pagina: una fila
     piu' larga dello schermo che sfora dal `body` mette la barra orizzontale
     sotto tutto il sito. La scheda e' la miniatura del tema; qui si decide
     solo come le schede stanno in fila. */

  :where(.gr-prodotti) {
    position: relative;
  }

  :where(.gr-prodotti__elenco) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    gap: 1.5rem;
    margin: 0;
    padding: 0 0 1rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  :where(.gr-prodotti__voce) {
    min-width: 0;
    scroll-snap-align: start;
  }

  /* ============================================================
     TESTO E HTML — text.tpl, html.tpl, e le classi dei contenuti seminati
     ============================================================ */

  :where(.gr-testo, .gr-html) {
    overflow-wrap: break-word;
  }

  :where(.gr-testo) {
    max-width: 70ch;
  }

  /* Le classi che i contenuti seminati scrivono dentro l'HTML. Stanno PRIMA
     degli azzeramenti del primo e dell'ultimo figlio: a specificita' zero
     decide l'ordine, e una citazione in fondo al testo non deve lasciare spazio
     sotto. */
  :where(.gr-occhiello) {
    margin: 0 0 0.5rem;
  }

  :where(.gr-citazione) {
    margin: 1rem 0;
  }

  :where(.gr-firma) {
    margin-top: 0.5rem;
  }

  :where(.gr-consenso) {
    margin-top: 0.75rem;
  }

  :where(.gr-testo, .gr-html) > :where(:first-child) {
    margin-top: 0;
  }

  :where(.gr-testo, .gr-html) > :where(:last-child) {
    margin-bottom: 0;
  }

  :where(.gr-testo, .gr-html) :where(img) {
    max-width: 100%;
    height: auto;
  }

  :where(.gr-html) :where(video, iframe, svg) {
    max-width: 100%;
  }

  /* Una tabella larga di codice altrui scorre dentro se stessa invece di
     allargare la pagina. */
  :where(.gr-html) :where(table) {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
  }

  /* ---------- richiamo ----------
     Una frase e un bottone sulla stessa riga, che va a capo quando non ci
     stanno. Il filetto e' il colore del testo al 20%. */
  :where(.gr-richiamo) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  }

  :where(.gr-richiamo) :where(h3, .gr-titolo) {
    margin: 0;
  }

  :where(.gr-richiamo) :where(p) {
    margin: 0.25rem 0 0;
  }

  /* ---------- bottoni ----------
     Un collegamento con l'aria di un bottone. Il semplice e' sottolineato:
     senza fondo e senza bordo solo la sottolineatura dice che si clicca. Lo
     scuro e' pieno, col colore di maggior contrasto del tema sotto e il fondo
     della pagina sopra — dichiarati insieme, perche' non si separino. Su
     gr-hybrid `text-decoration` resta `none`, e la distanza della
     sottolineatura non ha niente da spostare. */
  :where(.gr-bottone) {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 2px;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  :where(.gr-bottone--scuro) {
    background-color: var(--bs-emphasis-color, #000);
    color: var(--bs-body-bg, #fff);
    text-decoration: none;
  }

  /* ============================================================
     SLIDER — slider.tpl, grcontentblocks.js
     ============================================================
     Una diapositiva alla volta: la prima la marca attiva il template, le altre
     le scambia il JavaScript. `display: none` e non la trasparenza: una
     diapositiva trasparente resta raggiungibile col tabulatore.

     La fotografia fa da fondo e il testo le sta sopra, nella colonna di
     sinistra da 62rem in su. Sopra una fotografia non c'e' un colore di cui
     fidarsi, quindi la base mette una velatura nera e il testo bianco. Li
     mette SEMPRE, e li toglie alle sole diapositive senza fotografia: un
     browser che non conosce `:has()` scarta la regola che li toglie, e resta
     la versione leggibile. Meglio una fascia scura senza fotografia che testo
     scuro sopra una fotografia scura. */

  :where(.gr-slider) {
    position: relative;
    isolation: isolate;
  }

  :where(.gr-slider__diapositive) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(.gr-slider__diapositiva) {
    position: relative;
    display: none;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: clamp(16rem, 40vw, 32rem);
    color: #fff;
  }

  :where(.gr-slider__diapositiva--attiva) {
    display: grid;
  }

  :where(.gr-slider__immagine) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Nero al 60% sotto il testo: il bianco sopra una fotografia bianca velata
     cosi' fa 5,7:1. */
  :where(.gr-slider__diapositiva)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.6);
  }

  :where(.gr-slider__diapositiva:not(:has(> .gr-slider__immagine))) {
    background-color: color-mix(in srgb, currentColor 4%, transparent);
    color: inherit;
  }

  :where(.gr-slider__diapositiva:not(:has(> .gr-slider__immagine)))::after {
    content: none;
  }

  /* Il testo sopra la velatura (1), il collegamento a tutta diapositiva sopra
     il testo (2), le frecce sopra tutto (3) — dentro il contesto di
     impilamento dello slider, che non scavalca la testata. */
  :where(.gr-slider__testo) {
    position: relative;
    z-index: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    min-width: 0;
    padding: 2rem 1.5rem;
  }

  /* Sul telefono le frecce stanno in basso a destra: il testo lascia loro il
     posto invece di finirci sotto. */
  :where(.gr-slider:has(> .gr-slider__freccia)) :where(.gr-slider__testo) {
    padding-bottom: 4.75rem;
  }

  /* Gerarchia minima: il titolo di un'apertura resta grande anche quando esce
     come paragrafo. Carattere e peso li decide il tema. */
  :where(.gr-slider__titolo) {
    margin: 0;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
    line-height: 1.1;
    color: inherit;
  }

  :where(.gr-slider__sottotitolo) {
    margin: 0;
    max-width: 60ch;
  }

  /* Pieno, col contrasto massimo sulla velatura. Senza fotografia prende i
     colori del tema, come il bottone scuro. */
  :where(.gr-slider__bottone) {
    align-self: flex-start;
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    background-color: #fff;
    color: #000;
  }

  :where(.gr-slider__diapositiva:not(:has(> .gr-slider__immagine))) :where(.gr-slider__bottone) {
    background-color: var(--bs-emphasis-color, #000);
    color: var(--bs-body-bg, #fff);
  }

  /* La diapositiva senza bottone e' cliccabile tutta. Il contorno di messa a
     fuoco sta DENTRO la diapositiva, dove la velatura gli garantisce il
     contrasto, e ha il colore del testo. Su gr-hybrid `color: inherit` non si
     vede: il collegamento contiene solo un testo nascosto, e il tema da' al
     contorno un colore suo. */
  :where(.gr-slider__collegamento) {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: inherit;
  }

  :where(.gr-slider__collegamento:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }

  /* Il nome del collegamento per chi non vede la fotografia: nascosto alla
     vista, letto alla voce. */
  :where(.gr-slider__collegamento-testo) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Le frecce: 44 px di lato, la misura minima di un bersaglio da dito. Il
     segno lo disegna il foglio, perche' il template da' al bottone solo
     l'`aria-label`: due lati di un quadrato, ruotati. Fondo e segno stanno
     insieme, nero al 60% e bianco, e la freccia si legge qualunque cosa le
     passi sotto. */
  :where(.gr-slider__freccia) {
    position: absolute;
    z-index: 3;
    bottom: 1rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    transition: background-color 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  :where(.gr-slider__freccia:hover) {
    background-color: rgba(0, 0, 0, 0.8);
  }

  :where(.gr-slider__freccia)::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }

  :where(.gr-slider__freccia--indietro) {
    right: calc(1rem + 2.75rem + 0.5rem);
  }

  :where(.gr-slider__freccia--indietro)::before {
    margin-left: 0.25rem;
    transform: rotate(-135deg);
  }

  :where(.gr-slider__freccia--avanti) {
    right: 1rem;
  }

  :where(.gr-slider__freccia--avanti)::before {
    margin-right: 0.25rem;
    transform: rotate(45deg);
  }

  @media (min-width: 62rem) {
    :where(.gr-slider__diapositiva) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Piena sotto la colonna del testo, sfumata verso destra, dove la
       fotografia resta visibile. */
    :where(.gr-slider__diapositiva)::after {
      background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
    }

    /* Il rientro laterale lascia fuori le frecce, che qui stanno a meta'
       altezza sui due lati. */
    :where(.gr-slider__testo) {
      padding: 3rem 4.5rem;
    }

    :where(.gr-slider__freccia) {
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
    }

    :where(.gr-slider__freccia--indietro) {
      left: 1rem;
      right: auto;
    }
  }

  /* ============================================================
     RIDUCI IL MOVIMENTO
     ============================================================
     Su gr-hybrid lo stesso lo fa gia' il tema, fuori dai livelli. */
  @media (prefers-reduced-motion: reduce) {
    :where(.gr-slider__freccia) {
      transition: none;
    }
  }
}