/* ═══════════════════════════════════════════════════════════════════════
   Hero "Testo e immagine di fondo" (page builder, formato sfondo, dalla 1.3.34)
   Partial: views/partials/_hero_sfondo.twig. Il testo usa le classi di
   hero-video.css (caricato prima); qui solo l'immagine: larga, dietro a
   destra, sfumata nel colore di sfondo (--hv-sfondo) verso il testo e verso
   il basso. Su telefono va sopra il testo.
   ═══════════════════════════════════════════════════════════════════════ */

.hv--sfondo {
    display: flex;
    align-items: center;
    min-height: clamp(460px, 42vw, 680px);
}
.hv--sfondo.hv--solo-testo { min-height: 0; }
.hv--sfondo .hv-dentro {
    z-index: 1;
    width: 100%;
}

.hv-fondo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    pointer-events: none;
}
.hv-fondo picture,
.hv-fondo-img {
    display: block;
    width: 100%;
    height: 100%;
}
.hv-fondo-img {
    object-fit: cover;
    object-position: right center;
}
.hv--sfondo-adatta .hv-fondo-img {
    object-fit: contain;
    object-position: right top;
}
/* La sfumatura: dal colore di sfondo (lato testo) all'immagine, e in basso
   verso il blocco che segue. Questa è la semplice; quella più morbida, con
   color-mix, è nel @supports qui sotto */
.hv-fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--hv-sfondo, #15213a) 0%, var(--hv-sfondo, #15213a) 6%, transparent 50%),
        linear-gradient(0deg, var(--hv-sfondo, #15213a) 0%, transparent 26%);
}
/* Con var() dentro, una seconda dichiarazione con color-mix non ricade sulla
   prima nei browser che non lo conoscono (resta senza sfumatura): @supports */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .hv-fondo::after {
        background:
            linear-gradient(90deg, var(--hv-sfondo, #15213a) 0%, color-mix(in srgb, var(--hv-sfondo, #15213a) 85%, transparent) 18%, color-mix(in srgb, var(--hv-sfondo, #15213a) 40%, transparent) 32%, transparent 52%),
            linear-gradient(0deg, var(--hv-sfondo, #15213a) 0%, transparent 26%);
    }
}

/* Schermi grandi: l'immagine non resta schiacciata a destra */
@media (min-width: 1600px) {
    .hv-fondo { width: 55%; }
}

/* Tablet e telefono: l'immagine sopra, il testo sotto */
@media (max-width: 960px) {
    /* .hv.hv--sfondo: vince su ".hv { padding }" anche se hero-video.css è
       ricaricato più giù nella pagina da un hero «Testo e video» */
    .hv.hv--sfondo {
        display: block;
        min-height: 0;
    }
    /* Solo con l'immagine (che sta in cima): senza, il testo tiene lo spazio sopra */
    .hv.hv--sfondo:not(.hv--solo-testo) { padding-top: 0; }
    .hv-fondo {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        margin-bottom: 8px;
    }
    .hv-fondo::after {
        background: linear-gradient(0deg, var(--hv-sfondo, #15213a) 0%, transparent 34%);
    }
}
/* Con l'immagine «mobile» (sotto i 640 px) si vede intera, nelle sue proporzioni */
@media (max-width: 640px) {
    .hv--sfondo-tel .hv-fondo { aspect-ratio: auto; }
    .hv--sfondo-tel .hv-fondo-img { height: auto; }
}