/* =============================================================================
   Hero, formato «Testo e due schermi» (dalla 1.2.717). Partial:
   views/partials/_hero_schermi.twig. Colori dal pannello: --hs-sfondo
   («Colore sfondo»), --hs-testo («Colore testo»), --hs-accento («Colore CTA»:
   pulsanti, occhiello e seconda riga del titolo). Gli schermi sono disegnati
   qui (cornice scura, angoli arrotondati, prospettiva); dentro l'immagine
   mostra la parte alta.
   ============================================================================= */
.hs {
    background-color: var(--hs-sfondo);
    /* a parte: dove color-mix non c'è salta solo la sfumatura, il colore di fondo resta */
    background-image: radial-gradient(ellipse 60% 70% at 85% 100%, color-mix(in srgb, var(--hs-accento) 9%, transparent), transparent 70%);
    color: var(--hs-testo);
    overflow: hidden; /* gli schermi inclinati non allargano la pagina */
}
.hs-dentro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    max-width: var(--container-max-width, 1280px);
    margin: 0 auto;
    padding: 64px 16px;
}
@media (min-width: 1024px) {
    .hs-dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 88px 16px; }
    .hs--solo-testo .hs-dentro { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
}

/* Il testo */
.hs-testo { min-width: 0; overflow-wrap: anywhere; }
.hs .hs-occhiello {
    margin: 0 0 18px;
    color: var(--hs-accento);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.hs .hs-titolo {
    margin: 0;
    padding: 0; /* app.css dà 10px sopra e sotto a tutti i titoli */
    color: var(--hs-testo);
    font-size: clamp(34px, 2.6vw + 16px, 58px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
}
.hs .hs-titolo-riga2 {
    display: block;
    margin-top: 16px;
    color: var(--hs-accento);
    font-size: .5em;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.hs .hs-frase {
    max-width: 640px;
    margin: 24px 0 0;
    color: color-mix(in srgb, var(--hs-testo) 72%, transparent);
    font-size: clamp(17px, .4vw + 15px, 20px);
    line-height: 1.6;
}
.hs-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hs .hs-cta,
.hs .hs-cta2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    border: 1.5px solid var(--hs-accento);
    border-radius: 6px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: filter .15s, background-color .15s;
}
.hs .hs-cta { background: var(--hs-accento); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--hs-accento) 25%, transparent); }
.hs .hs-cta:hover { filter: brightness(1.06); color: #fff; }
.hs .hs-cta2 { background: transparent; color: var(--hs-accento); }
.hs .hs-cta2:hover { background: color-mix(in srgb, var(--hs-accento) 8%, transparent); color: var(--hs-accento); }
.hs .hs-cta:focus-visible,
.hs .hs-cta2:focus-visible { outline: 2px solid var(--hs-accento); outline-offset: 3px; }
.hs .hs-nota { margin: 18px 0 0; color: color-mix(in srgb, var(--hs-testo) 60%, transparent); font-size: 14px; line-height: 1.5; }

/* Gli schermi: dietro in alto a destra, davanti in basso a sinistra, in prospettiva */
.hs-schermi {
    position: relative;
    width: 100%;
    max-width: 680px; /* su telefono e tablet sotto il testo, non più larghi di così */
    min-width: 0;
    margin: 0 auto;
    aspect-ratio: 1.25 / 1;
    perspective: 1800px;
}
@media (min-width: 1024px) {
    .hs-schermi { max-width: none; }
}
.hs-schermo {
    position: absolute;
    padding: 10px; /* la cornice: il fondo scuro attorno al vetro */
    border-radius: 22px;
    background: #1f2937;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .12), 0 30px 60px rgba(15, 23, 42, .28);
    transform: rotateY(-12deg) rotateX(5deg) rotateZ(-2deg);
}
/* Il vetro ritaglia lo screenshot sopra il fondo scuro della cornice: niente filo chiaro agli angoli */
.hs-vetro { overflow: hidden; width: 100%; height: 100%; border-radius: 12px; background: #1f2937; }
.hs-schermo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}
.hs-schermo--dietro { top: 2%; right: 0; width: 82%; aspect-ratio: 16 / 10; transform-origin: right center; }
.hs-schermo--davanti { bottom: 2%; left: 0; width: 86%; aspect-ratio: 16 / 9.4; padding: 12px; transform-origin: left center; }
/* Uno schermo solo: al centro, un po' più grande */
.hs-schermi--uno { aspect-ratio: 16 / 11; }
.hs-schermi--uno .hs-schermo--davanti { top: 50%; bottom: auto; left: 4%; width: 92%; transform: translateY(-50%) rotateY(-12deg) rotateX(5deg) rotateZ(-2deg); }

@media (max-width: 639.98px) {
    .hs-schermo { padding: 6px; border-radius: 14px; }
    .hs-schermo--davanti { padding: 7px; }
    .hs-vetro { border-radius: 8px; }
}