/*
 * statement.css — Statement + intro (home 236:411, work 236:1224). Spec: 01-home.md §2, 02-work.md §2.
 * Fondo bianco con gradiente ciano che sale dal basso (Figma 236:385). Griglia: marchio grande a
 * sinistra (fondo del parallax) e testo lungo a destra; su mobile il testo viene prima del marchio.
 */
.statement {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(
        0deg,
        rgba(106, 199, 239, 0.6) 9%,
        rgba(106, 199, 239, 0) 53%
    );
}
.statement__text {
    max-width: 30ch;
}
/* L'accento deve restare ciano anche dentro .u-shimmer (gradiente clip-text sul paragrafo):
   il span porta il proprio sfondo pieno ritagliato sul testo, che vince sul gradiente del padre. */
.statement__accent {
    color: var(--color-accent-text);
    background-image: linear-gradient(
        var(--color-accent-text),
        var(--color-accent-text)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.statement__grid {
    display: grid;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
    align-items: top;
}
.statement__brand {
    order: 2;
    width: min(60vw, 320px);
}
.statement__brand-img {
    width: 100%;
    height: auto;
}
.statement__body {
    order: 1;
    line-height: var(--line-height-lead-figma);
    max-width: none;
}
.statement__body p + p {
    margin-top: var(--space-sm);
}
.statement__grid--focus .statement__focus-title {
    max-width: 30ch;
}
/* Le nuvole chiudono la sezione: la fascia e' fuori dal flusso (.clouds--bottom, base.css §4,
   condivisa con agile) e la sezione le riserva spazio nel proprio padding-bottom (padding in % =
   larghezza del blocco, la stessa su cui si misura la fascia). La fascia a tutta larghezza e' alta
   il 28.5% della larghezza (478/1674.3, proporzione di deco-clouds.svg): qui se ne riserva 7.28%
   perche' l'ultimo elemento della colonna e' il marchio, che nel Figma entra apposta dietro le
   nuvole — il testo finisce piu' in alto. Regge finche' la fascia tiene la propria proporzione:
   e' il motivo per cui .clouds__img non ha piu' min-width: max-content (base.css §4). */
.site-main > .statement--home {
    padding-bottom: 7.28%;
}
@media (min-width: 900px) {
    .statement__text {
        max-width: none;
    } /* Figma 236:411: statement a tutta larghezza (1344), 4 righe a 60px */
    .statement__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 593px);
        justify-content: space-between;
        gap: var(--space-3xl);
        margin-top: var(--space-3xl);
    }
    .statement__brand {
        order: 1;
        width: 472px;
        margin-left: 0;
        img {
            margin-top: var(--space-2xl);
        }
    }
    .statement__body {
        order: 2;
    }
    .statement__grid--focus {
        grid-template-columns: minmax(0, 623px) minmax(0, 613px);
        align-items: start;
    }
}