/*
 * base.css — reset, ruoli tipografici, contenitore, componenti condivisi (bottoni, chip, lastra,
 * card, intestazione di sezione, lista clienti, media video). Mobile-first: le regole senza media
 * query valgono dallo schermo piu' piccolo; min-width 640 / 900 / 1400 (breakpoint del content
 * model). Tutti i valori vengono dai token: nessun colore, corpo o spazio scritto a mano.
 *
 * ORDINE: 1 reset · 2 tipografia per elemento e per ruolo · 3 layout · 4 componenti ·
 * 5 stati di sezione (chiaro/scuro) · 6 utility — le utility sono in coda di proposito: a pari
 * specificita' decide l'ordine, e una utility nel markup deve vincere sul componente.
 */

/* 1 · Reset ------------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    /* Rete di sicurezza contro lo scroll orizzontale: `clip` e non `hidden` (non crea un
       contenitore di scroll, non rompe sticky/fixed). Sta anche su body, ma su iOS la propagazione
       body -> viewport non taglia (verificato su WebKit 18.2 con la fascia nuvole che sbordava):
       dichiararlo sulla radice e' l'unico punto che tiene su tutti i motori. */
    overflow-x: clip;
    /* NIENTE scroll-behavior: smooth qui: Mousewheel Smooth Scroll e' attivo sul sito e i due si
     combatterebbero (frontend-traps §2). Le ancore le porta il plugin. */
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-body);
    overflow-x: clip; /* clip, non hidden: non crea un contenitore di scroll e non rompe sticky/fixed */
    -webkit-font-smoothing: antialiased;
}
.lang-ja body,
body.lang-ja {
    font-family: var(--font-body_ja);
    line-height: calc(var(--line-height-body) + 0.1);
}
body.lang-ko {
    font-family: var(--font-body_ko);
    line-height: calc(var(--line-height-body) + 0.1);
}
img,
video,
svg {
    display: block;
    max-width: 100%;
}
img {
    height: auto;
}
a {
    color: inherit;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
}
ul,
ol,
dl,
dd,
figure,
blockquote {
    margin: 0;
    padding: 0;
}
ul,
ol {
    list-style: none;
}
h1,
h2,
h3,
h4,
p {
    margin: 0;
    overflow-wrap: break-word;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
:focus-visible {
    outline: 3px solid var(--color-cyan);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
[hidden] {
    display: none !important;
} /* l'attributo deve vincere sui display dell'autore */
.skip-link {
    position: absolute;
    left: var(--space-sm);
    top: -100px;
    z-index: 100;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-cyan);
    color: var(--color-plum);
    border-radius: var(--radius);
}
.skip-link:focus {
    top: var(--space-sm);
}
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 2 · Tipografia -------------------------------------------------------------------------- */
/* Ruoli: si applicano con le classi t-*; h1..h3 hanno il default del ruolo piu' vicino. */
h1,
.t-display {
    font-family: var(--font-display);
    font-size: var(--font-size-display);
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display);
    font-weight: var(--font-weight-display);
    text-wrap: balance;
    /* `anywhere` e non `break-word` (che e' nel reset): solo `anywhere` abbassa anche la misura
       minima intrinseca del titolo, quindi la colonna di griglia che lo contiene smette di essere
       forzata dalla parola piu' lunga. Sotto i 341px (iPhone SE 1a gen) "STORYBOARD?" a 48px e'
       piu' larga del contenitore: senza questo, whatis e technology sbordavano di 57px. */
    overflow-wrap: anywhere;
}
h2,
.t-h2 {
    font-family: var(--font-display);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2);
    font-weight: var(--font-weight-h2);
    text-wrap: balance;
}
h3,
.t-h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: var(--font-weight-h3);
}
.t-statement {
    font-family: var(--font-display);
    font-size: var(--font-size-statement);
    line-height: var(--line-height-statement);
    letter-spacing: var(--letter-spacing-statement);
    font-weight: var(--font-weight-statement);
    text-wrap: balance;
}
.t-lead {
    font-size: var(--font-size-lead);
    line-height: var(--line-height-lead);
    font-weight: var(--font-weight-lead);
    max-width: 56ch;
}
.t-body {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-body);
}
.t-label {
    font-family: var(--font-display);
    font-size: var(--font-size-label);
    line-height: var(--line-height-label);
    letter-spacing: var(--letter-spacing-label);
    font-weight: var(--font-weight-label);
    text-transform: uppercase;
    color: var(--fg-label);
}
.t-stat {
    font-family: var(--font-stat);
    font-size: var(--font-size-stat);
    line-height: var(--line-height-stat);
    letter-spacing: var(--letter-spacing-stat);
    font-weight: var(--font-weight-stat);
    font-variant-numeric: tabular-nums;
}
/* Il display usato come H2 su una frase lunga: la scala la decide il PHP (sb_heading_scale) */
.t-display.is-long {
    font-size: var(--font-size-h2);
}
.t-display.is-big {
    font-size: clamp(50px, 28.7324px + 6.0047vw, 106px);
}
.t-display.is-medium {
    font-size: clamp(40px, 28.7324px + 3.0047vw, 72px);
}
/* Rich text (wysiwyg e contenuto nativo). Qui si rimette solo cio' che il reset (§1) toglie a
   tutti: margini dei <p>, elenchi puntati e numerati. Il redattore scrive nel wysiwyg, il tema
   non deve stampare tag che poi non hanno stile. */
.rich-text p + p {
    margin-top: var(--space-sm);
}
.rich-text strong {
    font-weight: 700;
}
.rich-text em {
    font-style: italic;
}
.rich-text a {
    color: var(--fg-accent);
}
.rich-text ul,
.rich-text ol {
    margin-top: var(--space-sm);
    padding-left: 1.2em;
}
.rich-text ul {
    list-style: disc;
}
.rich-text ol {
    list-style: decimal;
}
.rich-text li + li {
    margin-top: var(--space-2xs);
}

/* 3 · Layout ------------------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--container-padding) * 2);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}
.site-main {
    container-type: inline-size;
}
/* L'ultima sezione respira di piu' prima del footer, a meno che non chieda esplicitamente il filo
   (.is-flush / .is-flush-bottom): senza il :not() questa regola (0,2,1) vincerebbe sulle utility. */
.site-main > section:last-child:not(.is-flush):not(.is-flush-bottom) {
    padding-bottom: calc(var(--section-gap) + 40px);
}
/* Ritmo verticale: ogni sezione ha lo stesso padding sopra e sotto, tranne quelle a filo. */
/* Regola generale a specificita' bassa (0,1,1): gli override per sezione (.site-main > .hero-splash,
   0,2,0) vincono senza !important. Le sezioni a filo dichiarano l'intento con .is-flush. */
.site-main > section,
.site-main > .strips {
    padding-block: var(--section-gap);
}
.site-main > .is-flush {
    padding-block: 0;
}
/* Varianti a filo su un lato solo: la sezione resta nel ritmo verticale da un lato e si attacca
   alla vicina dall'altro (studio: .intro-media, dove il ritmo pieno lasciava un vuoto sopra e
   sotto il disegno). Stessa specificita' di .is-flush (0,2,0), quindi vincono sulla regola
   generale e si combinano fra loro senza !important. Riutilizzabili su qualunque sezione figlia
   diretta di .site-main. */
.site-main > .is-flush-top {
    padding-block-start: 0;
}
.site-main > .is-flush-bottom {
    padding-block-end: 0;
}
.section-head {
    display: grid;
    gap: var(--space-sm);
    justify-items: center;
    text-align: center;
    margin-bottom: var(--space-xl);
}
.section-head__title {
    max-width: 22ch;
}
.section-head__label {
    font-size: var(--font-size-label-section);
} /* etichette di sezione 20px nel Figma */
.section-head__intro {
    text-align: center;
}
@media (min-width: 900px) {
    .section-head {
        margin-bottom: var(--space-2xl);
    }
}

/* 4 · Componenti -------------------------------------------------------------------------- */
/* Bottone: h 51 a 1440 (padding 18/24, corpo 15 lh 1), radius 10. Target touch >= 44. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 44px;
    padding: 18px var(--space-md);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--dur-state) var(--ease-out),
        color var(--dur-state) var(--ease-out),
        box-shadow var(--dur-state) var(--ease-out);
}
.button__icon {
    width: 16px;
    height: 16px;
    flex: none;
}
.button--small {
    padding: 12px;
    font-size: 13px;
    min-height: 40px;
}
.button--primary {
    background: var(--color-cyan);
    color: var(--color-plum);
}
.button--primary:hover {
    background: var(--color-cyan-100);
}
.button--secondary {
    background: var(--color-purple-deep);
    color: var(--color-ink-inverse);
}
.button--secondary:hover {
    background: var(--color-violet);
}
.button--paper {
    background: var(--color-paper);
    color: var(--color-plum);
}
.button--paper:hover {
    background: var(--color-cyan-050);
}
.button--ghost {
    background: var(--color-chip);
    color: var(--color-ink-inverse);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.button--ghost:hover {
    background: rgba(255, 255, 255, 0.2);
}
.button--ghost-dark {
    background: var(--color-chip);
    color: var(--color-plum);
    box-shadow: inset 0 0 0 1px rgba(53, 12, 100, 0.2);
    font-size: 13px;
}
.button--ghost-dark:hover {
    background: rgba(53, 12, 100, 0.06);
}
.button--ghost-dark .button__icon {
    width: 10px;
    height: 10px;
}
.button:active {
    transform: translateY(1px);
} /* unico transform sul bottone: nessun wrapper posizionato con transform */

/* Chip (voci comprese, badge) */
.chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-chip);
    color: var(--color-ink-soft);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
}
.chip--accent {
    background: var(--color-chip-accent);
    color: var(--color-cyan);
}

/* Lastra: la barra didascalia presa dal lower-third (citazione, barra degli stadi) */
.slate {
    background: var(--color-card);
    border: 2px solid var(--color-line-soft);
    border-radius: var(--radius);
    padding: 18px var(--space-md);
    color: var(--color-ink-inverse);
}
.slate--bar {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
    background: var(--color-purple-deep);
    border: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    font-size: 14px;
    line-height: 1.2;
}

/* Loghi dei clienti, monocromi: un solo trattamento per la fascia della home, il muro dello
   studio e ogni richiamo futuro (prima erano due catene di filtri diverse, brightness .75 e .5).
   Il duotono e' il filtro SVG di template-parts/parts/logo-ink.php (stampato da header.php): manda
   il nero sull'inchiostro #2f253a e il bianco su bianco esatto. Il multiply sfrutta quel bianco
   esatto per far sparire il riquadro dei file caricati con il fondo bianco cotto dentro: i loghi
   in libreria sono stati resi trasparenti, questa e' la rete per i prossimi che arriveranno dal
   backoffice. `--color-logo-ink` (tokens-theme.css) e' lo stesso valore, per chi lo cerca.
   ATTENZIONE: vale su fondo chiaro. Su una sezione scura il multiply spegnerebbe l'inchiostro,
   servirebbe una variante (inchiostro chiaro + screen). */
.logo-mono {
    filter: url(#sb-logo-ink);
    mix-blend-mode: multiply;
}
/* Contenitore dei soli <filter>: niente da dipingere, non deve occupare spazio ne' essere letto. */
.sb-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Fascia nuvole (template-parts/parts/clouds.php), comune a statement, rework e agile.
   La fascia vale sempre la larghezza del contenitore e tiene la propria proporzione: niente
   numeri qui dentro, valgono sia l'SVG del tema sia la `clouds_image` caricata da backoffice.
   NIENTE `min-width: max-content` (c'era fino al 11/09/2025): su un <img> il max-content e' la
   misura intrinseca del file, e Safari/WebKit la legge dall'SVG (1674x478) mentre Chrome usa il
   default 300px. Su iPhone la fascia veniva quindi renderizzata 1674x478: sbordava di 642px per
   lato (pagina scrollabile in orizzontale, "spostata a sinistra") e con 478px di altezza finiva
   sopra il testo della sezione, che ne riserva molto meno nel proprio padding-bottom.
   Il transform del contenitore .clouds e' di GSAP (livello "medio" del parallax, motion.js) e
   non va toccato; l'immagine non ne ha piu' bisogno perche' non e' mai piu' larga del contenitore.
   Le misure stanno QUI e non nelle sezioni: statement.css e rework.css non le ridichiarano
   (vincerebbero per specificita'); rework tiene solo il proprio posizionamento (.clouds--top). */
.clouds__img {
    width: 100%;
    height: auto;
}
/* Fascia che chiude una sezione (statement della home, agile dello studio): ancorata al fondo e
   fuori dal flusso, quindi la sezione ne riserva l'altezza nel proprio padding-bottom (statement.css,
   agile.css) e il testo non ci finisce sotto. Sotto la linea di galleggiamento il fondo torna bianco,
   altrimenti fra i cerchi si vede il gradiente ciano della sezione; la fascia bianca prosegue oltre
   il bordo (-50vh, tagliata dall'overflow della sezione) perche' il livello "medio" del parallax
   trasla di 40px e lascerebbe scoperto il fondo. `bottom: -8%` fa uscire la fascia dal bordo come
   nel Figma. La sezione puo' spostare la linea ridichiarando --clouds-waterline.
   Stava in statement.css: e' qui perche' agile deve comportarsi esattamente allo stesso modo. */
.clouds--bottom {
    --clouds-waterline: 60%;
    position: absolute;
    inset: auto 0 0%;
    width: 100%;
}
.clouds--bottom::after {
    content: "";
    position: absolute;
    inset: var(--clouds-waterline) 0 -50vh;
    background: var(--color-paper);
}
/* L'immagine sta sopra il velo bianco di ::after. */
.clouds--bottom .clouds__img {
    z-index: 1;
}

/* Card su viola (schede servizi, colonna fondatori, card fondatori) */
.card {
    background: var(--color-card);
    border: 2px solid var(--color-line-soft);
    border-radius: var(--radius-lg);
    color: var(--color-ink-inverse);
}
.card--blue-1 {
    background: var(--color-blue-1);
}
.card--blue-2 {
    background: var(--color-blue-2);
}
.card--blue-3 {
    background: var(--color-blue-3);
}

/* Lista clienti: studio a sinistra (ciano maiuscolo), titoli a destra, filetto 1px, passo 55 */
.client-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs) var(--space-md);
    padding-block: var(--space-sm);
    border-top: 1px solid var(--color-line);
}
.client-list__row:last-child {
    border-bottom: 1px solid var(--color-line);
}
.client-list__studio {
    font-size: 16px;
}
.client-list__titles {
    color: var(--color-ink-inverse);
}
@media (min-width: 640px) {
    .clients-wall__col--studio .client-list__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    }
    .client-list__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: baseline;
        padding-block: 18px;
    }
    .client-list--compact .client-list__row {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

@media (min-width: 900px) {
    .clouds--bottom {
        inset: auto 0 -8%;
    }
}

/* Video con poster: il wrapper ha sempre un aspect-ratio (frontend-traps §3) */
.media-video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-purple-deep);
}
.media-video__poster,
.media-video__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-video__video {
    opacity: 0;
    transition: opacity 1000ms var(--ease-out) 200ms;
} /* vid-autoplay-loop-fade: fade d'ingresso */
.media-video.is-playing .media-video__video {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .media-video__video {
        transition: none;
    }
}

/* Dialog del reel (reel.js): schermo intero, video contenuto, chiusura in alto a destra */
.reel-dialog {
    width: min(100vw, 1280px);
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    border: 0;
    background: transparent;
}
.reel-dialog::backdrop {
    background: rgba(26, 11, 46, 0.92);
}
.reel-dialog__video {
    display: block;
    width: 100%;
    max-height: 100vh;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-lg);
}
.reel-dialog__close {
    position: fixed;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--color-cyan);
    color: var(--color-plum);
    font-size: 28px;
    line-height: 1;
}

/* Fondi a gradiente ciano (workflow, works teaser, agile): da trasparente a ciano */
.is-gradient-cyan {
    background: linear-gradient(
        180deg,
        rgba(211, 238, 250, 0) 0%,
        var(--color-cyan) 100%
    );
}

/* 5 · Sezioni chiare e scure: ribaltano gli alias, non duplicano le regole ------------------- */
.is-light {
    --bg: var(--color-paper);
    --fg: var(--color-plum);
    --fg-muted: var(--color-plum);
    --fg-accent: var(--color-accent-text);
    --fg-label: var(--color-label-violet);
    --line: rgba(53, 12, 100, 0.15);
    background-color: var(--bg);
    color: var(--fg);
}
.is-dark {
    --bg: var(--color-purple-deep);
    --fg: var(--color-ink-inverse);
    --fg-muted: var(--color-ink-muted);
    --fg-accent: var(--color-cyan);
    --fg-label: var(--color-ink-faint);
    --line: var(--color-line);
    background-color: var(--bg);
    color: var(--fg);
}
.is-light.is-gradient-cyan {
    background-color: transparent;
}

/* 6 · Utility (in coda: devono vincere) ------------------------------------------------------ */
.t-caps {
    text-transform: uppercase;
}
.t-caps-cyan {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-cyan);
    line-height: 1.2;
}
.t-caps-cyan.is-accent {
    color: var(--color-accent-text);
}
.t-caps-muted {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-ink-faint);
}
.t-label.is-violet {
    color: var(--color-label-violet);
    font-size: clamp(14px, 12.4225px + 0.4225vw, 20px);
    letter-spacing: 0.02em;
} /* label di sezione su chiaro: 20px nel Figma */
.is-muted {
    color: var(--fg-muted);
}
.is-violet {
    color: var(--color-label-violet);
}
.t-lead.is-muted {
    color: var(--fg-muted);
}

/* Hook del motore motion (motion.js): classi aggiunte via JS, mai nel markup. */
/* txt-gradient-shimmer: gradiente che scorre sul testo (background-position animato, clip al testo). */
/* Il gradiente e' ritagliato sul testo ma dipinto solo dentro il box: con interlinea 0.9-1 i tratti
   discendenti uscirebbero dal box e sparirebbero. Padding verticale compensato dal margine. */
.u-shimmer {
    padding-block: 0.15em;
    margin-block: -0.15em;
    background-image: linear-gradient(
        100deg,
        currentColor 0%,
        currentColor 40%,
        var(--color-cyan) 50%,
        currentColor 60%,
        currentColor 100%
    );
    background-size: 200% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.is-light .u-shimmer,
.is-gradient-cyan .u-shimmer {
    background-image: linear-gradient(
        100deg,
        currentColor 0%,
        currentColor 40%,
        var(--color-label-violet) 50%,
        currentColor 60%,
        currentColor 100%
    );
}
/* SplitText: le righe stanno dentro una maschera con overflow hidden (mask: 'lines') */
.u-line {
    display: block;
}