/* --- BASE --- */
.wp-block-aqyu-video-hero-block {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #1a1a1a;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- VIDÉOS --- */
.wp-block-aqyu-video-hero-block video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    z-index: 0;
    object-fit: cover;
    pointer-events: none;
}

/* Par défaut : On montre la desktop, on cache la mobile */
.aqyu-video-mobile { display: none; }
.aqyu-img-mobile { display: none; }
.aqyu-hero-title-mobile, .aqyu-hero-subtitle-mobile { display: none; }

/* --- CONTENU --- */
.wp-block-aqyu-video-hero-block .aqyu-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Le padding est géré inline pour desktop, variable pour mobile */
    box-sizing: border-box;
}

.wp-block-aqyu-video-hero-block.mode-image .aqyu-hero-text-content { display: none; }
.wp-block-aqyu-video-hero-block.mode-text .aqyu-hero-image-content { display: none; }

/* --- MEDIA QUERY MOBILE (< 768px) --- */
@media (max-width: 767px) {
    .wp-block-aqyu-video-hero-block {
        min-height: var(--aqyu-mobile-height, 50vh) !important;
    }

    /* 1. Bascule Vidéo de base */
    .aqyu-video-desktop { display: none !important; }
    .aqyu-video-mobile { display: block !important; }

    /* 2. FALLBACK DE SÉCURITÉ (CRUCIAL) */
    /* Si le bloc ne contient PAS de vidéo mobile (attribut vide), on réaffiche la desktop */
    /* Note: :has() fonctionne sur Safari iOS 15+ et Chrome Android récents. */
    .wp-block-aqyu-video-hero-block:not(:has(.aqyu-video-mobile)) .aqyu-video-desktop {
        display: block !important;
    }
    
    /* Alternative pour vieux navigateurs si :has() ne suffit pas (via JS ou classe supplémentaire) */
    /* Mais avec le code JS fourni précédemment qui n'injecte la balise <video> que si mobileVideoURL existe, 
       le :has() devrait suffire car la balise n'existera pas dans le DOM. */

    /* 3. Bascule Image */
    .aqyu-img-desktop { display: none !important; }
    .aqyu-img-mobile { display: block !important; }
    
    /* Fallback Image */
    .wp-block-aqyu-video-hero-block:not(:has(.aqyu-img-mobile)) .aqyu-img-desktop {
        display: block !important; 
    }

    /* 4. Bascule Texte */
    .aqyu-hero-title-mobile, .aqyu-hero-subtitle-mobile {
        display: block !important;
    }
    /* Fallback Texte : Si pas de version mobile, on garde la desktop */
    .wp-block-aqyu-video-hero-block:not(:has(.aqyu-hero-title-mobile)) .aqyu-hero-title {
        display: block !important;
    }
    .wp-block-aqyu-video-hero-block:not(:has(.aqyu-hero-subtitle-mobile)) .aqyu-hero-subtitle {
        display: block !important;
    }

    /* 5. Positionnement & Styles */
    .wp-block-aqyu-video-hero-block .aqyu-hero-content {
        padding: var(--aqyu-mobile-padding, 20px) !important;
        justify-content: var(--aqyu-mobile-valign, center) !important;
    }
    
    .wp-block-aqyu-video-hero-block .aqyu-hero-image-content {
        text-align: var(--aqyu-mobile-img-align, center);
        display: flex;
        justify-content: var(--aqyu-mobile-img-align, center);
    }

    .wp-block-aqyu-video-hero-block .aqyu-hero-title {
        font-size: var(--aqyu-mobile-font, 32px) !important;
    }
    .wp-block-aqyu-video-hero-block .aqyu-hero-subtitle {
        font-size: var(--aqyu-mobile-sub, 16px) !important;
    }
}

/* --- GESTION DU RATIO VIDÉO --- */

/* Conteneur principal */
.wp-block-aqyu-video-hero-block .aqyu-video-container, 
.wp-block-aqyu-video-hero-block > div[style*="aspect-ratio"] {
    /* Le ratio est défini en inline via style="", mais on force le comportement */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Cas spécifique Mobile : On change le ratio via Media Query */
@media (max-width: 782px) {
    .wp-block-aqyu-video-hero-block {
        /* On redéfinit la variable CSS pour le mobile */
        --aqyu-desktop-aspect: var(--aqyu-mobile-aspect, auto);
    }

    /* Gestion de l'affichage des vidéos */
    .wp-block-aqyu-video-hero-block .aqyu-video-desktop {
        display: none !important;
    }
    
    .wp-block-aqyu-video-hero-block .aqyu-video-mobile {
        display: block !important;
    }
}

/* Fallback si pas de vidéo mobile : on affiche la desktop sur mobile aussi */
@media (max-width: 782px) {
    .wp-block-aqyu-video-hero-block:not(:has(.aqyu-video-mobile)) .aqyu-video-desktop {
        display: block !important;
    }
}