/*
 * Babajaga V2 — utilities v0.1
 *
 * Regole di ammissione:
 * - una utility descrive una relazione di layout o accessibilità;
 * - non contiene colori, font o contenuti specifici di una sezione;
 * - varianti responsive entrano soltanto quando un caso reale le richiede;
 * - un pattern usato una sola volta resta nella composizione della sezione.
 */

:where([data-babajaga-tema="v2"] .u-contenitore) {
    inline-size: var(--larghezza-contenuto);
    margin-inline: auto;
}

/*
 * Campo griglia condiviso.
 *
 * Disegna la stessa geometria in ogni capitolo V2. La utility possiede
 * colonne e breakpoint; la singola sezione puo' cambiare soltanto il colore
 * della linea tramite --colore-campo-griglia.
 */
:where([data-babajaga-tema="v2"] .u-campo-griglia) {
    --colore-campo-griglia: var(--colore-linea);

    background-image: linear-gradient(
        to right,
        var(--colore-campo-griglia) var(--spessore-linea),
        transparent var(--spessore-linea)
    );
    background-size: var(--passo-griglia) 100%;
    background-position: left top;
    background-repeat: repeat-x;
    box-shadow: inset calc(-1 * var(--spessore-linea)) 0 0 var(--colore-campo-griglia);
}

/*
 * Layout strutturale gemello del campo visibile.
 * Non introduce gutter: i bordi dei componenti coincidono con le linee.
 * Spazi e pause editoriali si ottengono lasciando tracce intenzionalmente
 * libere oppure tramite padding interno al componente.
 */
:where([data-babajaga-tema="v2"] .u-layout-griglia) {
    display: grid;
    grid-template-columns: repeat(var(--colonne-griglia), minmax(0, 1fr));
    column-gap: 0;
}

/*
 * Contesto di scala per i display editoriali.
 * Le unita' cqi dei figli leggono la larghezza reale del contenitore Grid,
 * quindi margini pagina e inset restano parte del calcolo tipografico.
 */
:where([data-babajaga-tema="v2"] .u-contesto-display) {
    container-type: inline-size;
}

:where([data-babajaga-tema="v2"] .u-solo-lettori-schermo) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Display title a misura di griglia.
 * La Grid governa il box e mantiene inset strutturali simmetrici. Ogni titolo
 * scala sul piu' vicino u-contesto-display e puo' dichiarare una piccola
 * --correzione-ottica-x: e' calibrazione della stringa, non del layout.
 */
:where([data-babajaga-tema="v2"] .u-adatta-alla-griglia) {
    --rientro-ottico-inizio: var(
        --titolo-display-rientro-inizio,
        var(--rientro-ottico-display)
    );
    --rientro-ottico-fine: var(
        --titolo-display-rientro-fine,
        var(--rientro-ottico-display)
    );

    inline-size: 100%;
    min-inline-size: 0;
    padding-inline-start: var(--rientro-ottico-inizio);
    padding-inline-end: var(--rientro-ottico-fine);
    text-align: start;
}

:where([data-babajaga-tema="v2"] .u-adatta-alla-griglia > [data-display-fit-line]) {
    display: inline-block;
    max-inline-size: none;
    transform: translateX(
        var(
            --titolo-display-correzione-ottica-x,
            var(--correzione-ottica-x, 0px)
        )
    );
    transform-origin: left center;
    white-space: nowrap;
}

:where([data-babajaga-tema="v2"] .u-adatta-alla-griglia [data-display-fit-text]) {
    display: inline-block;
    max-inline-size: none;
    white-space: nowrap;
}