/*
 * hero-splash.css — Splash della home (Figma 236:387, 1440x810). Spec: specs/01-home.md §1.
 * Fondo: gradiente viola brand → viola acceso come fallback del video (i livelli blend del Figma si
 * riducono a questo gradiente). Il video sta sulla radice (inset 0): nessuna fascia di fondo fra
 * bordo e media. Mobile: colonna (titolo, testo, bottoni, poi il pannello). Desktop >= 900: testo a
 * sinistra, pannello 546x662 a destra, allineati in basso come nel frame.
 */
.hero-splash {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 100svh;
    padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xl);
    background: linear-gradient(
        239deg,
        var(--color-violet-bright) 0%,
        var(--color-violet) 60%,
        var(--color-purple-deep) 100%
    );
}
.site-main > .hero-splash {
    padding-block: calc(var(--header-height) + var(--space-3xl)) var(--space-xl);
}
.hero-splash__bg {
    position: absolute;
    inset: 0;
}
.hero-splash__bg .media-video {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    background: transparent;
}
.hero-splash__bg .media-video__poster,
.hero-splash__bg .media-video__video {
    mix-blend-mode: luminosity;
    opacity: 0.35;
}
.hero-splash__bg .media-video.is-playing .media-video__video {
    opacity: 0.35;
}
.hero-splash__inner {
    position: relative;
    display: grid;
    gap: var(--space-xl);
    width: 100%;
}
/* Colonna testo distribuita in verticale: titolo e lead in cima, bottoni al fondo (margin-top:
   auto, blocco da 900px). Flex e non grid perche' il margine automatico deve mangiarsi tutto lo
   spazio libero della colonna. */
.hero-splash__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
/* 106px a 1440 (236:389), qualunque sia la lunghezza del testo: l'H1 della home non passa dalla
   scala per lunghezza (sb_heading_scale -> .is-medium/.is-long, base.css §2), che lo avrebbe tenuto
   a 72 o 60px. Il testo va a capo dentro le 12ch, come nel frame. Stesso criterio di hero-page.php,
   che sta sempre alla scala .is-big. */
.hero-splash__title {
    text-transform: uppercase;
    max-width: 12ch;
    font-size: var(--font-size-display-hero);
    margin-top: 10%;
}
.hero-splash__lead {
    max-width: 34em;
    line-height: var(--line-height-lead-figma);
}
.hero-splash__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-2xs);
}

/* Pannello incorniciato: bordo ciano 27 e radius 20 nel Figma; se c'e' la cornice PNG globale si
   sovrappone al video e il bordo CSS resta come base. */
.hero-splash__panel {
    width: 100%;
    max-width: 546px;
}
.hero-splash__panel-mask {
    position: relative;
    aspect-ratio: 546 / 662;
    border-radius: var(--radius-lg);
    /* border: clamp(12px, 1.875vw, 27px) solid var(--color-cyan); */
    overflow: hidden;
    /* background: var(--color-purple-deep); */
}
.hero-splash__panel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-splash__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

@media (min-width: 640px) {
    .hero-splash__panel {
        max-width: 420px;
    }
}
@media (min-width: 900px) {
    .site-main > .hero-splash {
        min-height: min(810px, 100svh);
        padding-block: calc(var(--header-height) + var(--space-xl))
            var(--space-xl);
        padding-bottom: var(--space-3xl);
    }
    .hero-splash__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
        align-items: end;
        gap: var(--space-2xl);
    }
    /* L'inner allinea in basso (align-items: end): senza stretch la colonna testo sarebbe alta
       quanto il proprio contenuto e il margine automatico non avrebbe spazio da occupare. Cosi'
       la colonna prende l'altezza della riga — quella del pannello — e i bottoni ne toccano la base. */
    .hero-splash__copy {
        align-self: stretch;
    }
    .hero-splash__actions {
        margin-top: auto;
    }
    .hero-splash__panel {
        max-width: 546px;
        justify-self: end;
    }
}
@media (min-width: 1400px) {
    .hero-splash__inner {
        grid-template-columns: minmax(0, 774px) 546px;
        justify-content: space-between;
    }
}