/* =========================================================
   HERO — visuel optionnel à gauche
   Activé par la classe .v8-hero--img (posée quand le champ
   hero_image est renseigné et visible dans l'admin).

   Deux réglages :
     --hero-img-w    largeur du visuel
     --hero-fade     où commence le fondu vers la transparence
   ========================================================= */

.v8-hero--img {
    position: relative;
    overflow: hidden;
    --hero-img-w: 44%;
    --hero-fade: 58%;
}

.v8-hero--img .hero-visual {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--hero-img-w);
    z-index: 0;
    pointer-events: none;
}

.v8-hero--img .hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    /* Le fondu se fait sur l'image elle-même : le fond du hero
       reste visible derrière, quelle que soit sa couleur. */
    -webkit-mask-image: linear-gradient(to right,
        #000 0%,
        #000 var(--hero-fade),
        transparent 100%);
    mask-image: linear-gradient(to right,
        #000 0%,
        #000 var(--hero-fade),
        transparent 100%);
}

/* Le contenu passe au-dessus et se décale à droite du visuel */
.v8-hero--img .v8-hero-grid {
    position: relative;
    z-index: 1;
}

@media (min-width: 1025px) {
    .v8-hero--img .v8-hero-grid {
        padding-left: calc(var(--hero-img-w) - 6%);
    }
}

/* En dessous de 1025px : le visuel repasse en bandeau horizontal,
   le fondu bascule vers le bas. */
@media (max-width: 1024px) {
    .v8-hero--img .hero-visual {
        position: relative;
        width: 100%;
        height: 220px;
        margin-bottom: -40px;
    }
    .v8-hero--img .hero-visual img {
        -webkit-mask-image: linear-gradient(to bottom,
            #000 0%, #000 50%, transparent 100%);
        mask-image: linear-gradient(to bottom,
            #000 0%, #000 50%, transparent 100%);
    }
    .v8-hero--img .v8-hero-grid { padding-left: 0; }
}