/**
 * Slider Block - Corrections spécifiques pour le débordement
 * Ce fichier contient des styles ultra-agressifs pour garantir 
 * que le slider dépasse toujours de son conteneur
 * 
 * @package WPDashboard
 * @since 1.7.2
 */

/* === DÉBORDEMENT FORCÉ ULTRA-AGRESSIF === */

/* Force TOUS les containers parents à permettre l'overflow */
.wp-dashboard-slider,
.wp-dashboard-slider *,
.wp-block-wp-dashboard-slider,
.wp-block-wp-dashboard-slider * {
    overflow-x: visible !important;
}

/* Exception pour le track qui doit garder son scroll */
.wp-dashboard-slider .slider-track {
    overflow-x: auto !important;
}

/* Technique CSS Grid pour forcer le débordement */
.wp-dashboard-slider .slider-container {
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: start;
    width: 100% !important;
    overflow: visible !important;
}

.wp-dashboard-slider .slider-track {
    justify-self: start;
    width: calc(100vw - 57px) !important;
    max-width: none !important;
    grid-column: 1 / -1;
}

/* Technique avec transform pour certains cas edge */
@supports (transform: translateX(0)) {
    .wp-dashboard-slider .slider-track {
        transform: translateX(0);
        will-change: transform;
    }
}

/* Breakout pour thèmes avec containers stricts */
.wp-site-blocks .wp-dashboard-slider .slider-track,
.wp-block-group .wp-dashboard-slider .slider-track,
.entry-content .wp-dashboard-slider .slider-track {
    width: calc(100vw - 57px) !important;
    margin-left: calc(-50vw + 50% + 57px) !important;
    margin-right: -50vw !important;
}

/* Override pour constructeurs de pages spécifiques */
[class*="elementor"] .wp-dashboard-slider .slider-track,
[class*="gspb"] .wp-dashboard-slider .slider-track,
[class*="gb-"] .wp-dashboard-slider .slider-track {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: calc(100vw - 57px) !important;
    margin-left: calc(-50vw + 50% + 57px) !important;
}

/* Responsive adaptatif */
@media (max-width: 1440px) {
    .wp-dashboard-slider .slider-track,
    .wp-site-blocks .wp-dashboard-slider .slider-track,
    .wp-block-group .wp-dashboard-slider .slider-track,
    .entry-content .wp-dashboard-slider .slider-track {
        width: calc(100vw - 40px) !important;
        margin-left: calc(-50vw + 50% + 40px) !important;
    }
}

@media (max-width: 768px) {
    .wp-dashboard-slider .slider-track,
    .wp-site-blocks .wp-dashboard-slider .slider-track,
    .wp-block-group .wp-dashboard-slider .slider-track,
    .entry-content .wp-dashboard-slider .slider-track {
        width: calc(100vw - 20px) !important;
        margin-left: calc(-50vw + 50% + 20px) !important;
    }
}

/* Technique de dernier recours avec position absolute */
.wp-dashboard-slider.force-absolute-breakout .slider-container {
    position: relative !important;
}

.wp-dashboard-slider.force-absolute-breakout .slider-track {
    position: absolute !important;
    left: 57px !important;
    width: calc(100vw - 57px) !important;
    z-index: 1 !important;
}

/* Indicateur visuel de debug (à supprimer en production) */
.wp-dashboard-slider.debug-overflow .slider-track::before {
    content: "DÉBORDEMENT ACTIF";
    position: absolute;
    top: -20px;
    left: 0;
    background: red;
    color: white;
    padding: 2px 8px;
    font-size: 10px;
    z-index: 1000;
}

/* === COMPATIBILITÉ THÈMES POPULAIRES === */

/* Twenty Twenty-Four et thèmes Block */
.wp-site-blocks .wp-dashboard-slider {
    overflow: visible !important;
}

/* Astra */
.ast-container .wp-dashboard-slider,
.ast-separate-container .wp-dashboard-slider {
    overflow: visible !important;
}

/* Kadence */
.content-bg .wp-dashboard-slider {
    overflow: visible !important;
}

/* GeneratePress */
.inside-article .wp-dashboard-slider,
.generate-columns-container .wp-dashboard-slider {
    overflow: visible !important;
}

/* === FIX POUR LES VIDÉOS === */

/* S'assurer que les vidéos avec cover fonctionnent correctement */
.wp-dashboard-slider .video-responsive-wrapper {
    position: relative !important;
    background: #000 !important;
}

.wp-dashboard-slider .video-cover-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
}

.wp-dashboard-slider .slide-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important;
}