/* Responsive CSS for Reroll Formations Theme */

/* ========================================
   BREAKPOINTS STRATEGY
   ======================================== */
/*
Mobile-first approach:
- Base styles: 0-767px (mobile)
- Tablet: 768px-1023px
- Desktop: 1024px+
*/

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Visibility utilities */
.hide-on-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-on-mobile {
        display: revert !important;
    }
    .hide-on-tablet {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .hide-on-tablet {
        display: revert !important;
    }
    .hide-on-desktop {
        display: none !important;
    }
}

.show-on-mobile-only {
    display: block !important;
}

@media (min-width: 768px) {
    .show-on-mobile-only {
        display: none !important;
    }
}

/* ========================================
   RESPONSIVE FIXES FOR EXISTING COMPONENTS
   ======================================== */

/* Reset problematic absolute positioning on mobile */
@media (max-width: 767px) {

    /* Container adjustments */
    .wp-block-group.alignfull {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Strip/Bandeau elements - reset complex positioning */
    .stripe-home .stripe-col .stripe-arrow,
    .stripe-shifted .shifted-col .stripe-arrow {
        position: static !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto 1rem !important;
    }

    .stripe-home p,
    .stripe-shifted .stripe-shifted-container .shifted-col .shifted-button-container {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        padding: 1rem !important;
        border: none !important;
        white-space: normal !important;
        margin: 1rem 0 !important;
    }

    .stripe-shifted .stripe-shifted-container {
        transform: none !important;
    }

    /* Team cards - stack vertically */
    .card-team.card-left,
    .card-team.card-right {
        height: auto !important;
        transform: none !important;
        margin-bottom: 2rem !important;
    }

    .card-team .team-name-role,
    .card-team .team-desc,
    .card-team .team-img {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Hide decorative elements on mobile */
    .card-team span.red-circle,
    .shifted-button-container:after {
        display: none !important;
    }

    /* Masonry grid - single column on mobile */
    .masonry-item {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    /* Todo section - remove clip-path */
    .todo-container {
        clip-path: none !important;
    }

    /* Navigation adjustments */
    .menu-container {
        border-radius: 15px !important;
        padding: 0.5rem !important;
    }

    nav.nav-header ul {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Footer adjustments */
    .footer-container .logo-footer:after {
        display: none !important;
    }

    /* Hero H1 trace SVG - hide on mobile */
    body.home .hero-home h1.wp-block-heading::after {
        display: none !important;
    }

    /* Shifted rows - Simplification maximale */
    .shifted-blocks {
        position: static !important;
    }

    .shifted-row {
        width: 100% !important;
        margin: 0 0 2rem 0 !important;
    }

    .shifted-row.is-layout-flex,
    .rows-footer.is-layout-flex,
    .subfooter .is-layout-flex,
    .hero-home .is-layout-flex,
    .two-cards .is-layout-flex,
    .fake-masonry .is-layout-flex,
    .nos-valeurs .is-layout-flex,
    .section-dl .is-layout-flex {
        display: block !important;
        flex-direction: unset !important;
        gap: unset !important;
    }

    .rows-footer {
        padding: 10px !important;
    }

    ul.page-links {
        padding: 10px !important;
    }

    .hero-home .is-layout-flex {
        padding: 10px !important;
    }

    .two-cards .is-layout-flex {
        padding: 10px !important;
        margin-top: 10px !important;
    }

    .two-cards .wp-block-group:nth-child(1) {
        margin-bottom: 20px !important;
    }

    .shifted-blocks > .shifted-row ~ .shifted-row {
        margin-top: 2rem !important;
    }

    .shifted-block.shifted-left {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .shifted-block .wp-block-image img {
        margin-top: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    .shifted-block h5 {
        margin-top: 1rem !important;
        text-align: center !important;
    }

    /* Simplification pour tous les éléments décalés */
    .shifted-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 0 2rem 0 !important;
        padding: 1rem !important;
    }

    /* Fix pour conteneurs spécifiques en mode mobile */
    .wp-container-core-group-is-layout-5c4495dd,
    .wp-container-core-group-is-layout-6c531013 {
        display: block !important;
    }

    .wp-container-core-group-is-layout-5c4495dd > *,
    .wp-container-core-group-is-layout-6c531013 > * {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Positionnement des boutons dans les blocs offres */
    .liste-offres .bloc-offre .wp-block-buttons {
        right: 83px !important;
        bottom: -23px !important;
    }

    .liste-offres .bloc-offre h3 {
        padding-right: 0 !important;
        padding-bottom: 30px !important;
        text-align: center !important;
        font-size: var(--wp--preset--font-size--l) !important;
    }

    /* Section choices - affichage en bloc et marges entre éléments */
    .section-choices > .wp-block-group {
        display: block !important;
    }

    .section-choices > .wp-block-group > * {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .section-choices .wp-block-button {
        text-align: center !important;
        margin: auto !important;
    }
}