/**
 * BRIDGE GROEP — Responsive Global
 * Corrige TOUTES les pages : heroes, sections, grilles, simulateur, étapes
 * Importer UNE SEULE FOIS dans header.php, après le CSS principal
 * Remplace bridge-responsive-fixes.css et bridge-hero-fix.css
 */

/* ============================================================
   BASE GLOBALE — overflow et min-width
   ============================================================ */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

* {
    min-width: 0;
    box-sizing: border-box;
}

.container {
    overflow-x: hidden;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

/* ============================================================
   HAMBURGER — barres blanches sur header bleu
   ============================================================ */
.menu-toggle span {
    background-color: #ffffff !important;
}

/* Overlay menu mobile */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 999;
}
.nav-overlay.active { display: block; }

/* ============================================================
   HERO PAGES — s'applique à TOUTES les sections hero
   Pattern commun : section avec min-height, gradient #0F172A→#1E3A8A
   Ciblage : toute section avec style contenant ces couleurs ou min-height
   ============================================================ */

/* — Tablette large (≤ 1024px) — */
@media (max-width: 1024px) {

    /* Footer 4 → 2 colonnes */
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    /* Grille kredieten 4 → 3 colonnes */
    #index-kredieten-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* — Tablette (≤ 900px) — */
@media (max-width: 900px) {

    /* Toute section hero (min-height inline) */
    section[style*="min-height"] {
        min-height: auto !important;
        padding-top: 5rem !important;
        padding-bottom: 4rem !important;
    }

    /* Page hero intérieure (sous-pages : over-ons, kredieten, contact...) */
    section[style*="min-height: 45vh"],
    section[style*="min-height: 50vh"],
    section[style*="min-height: 55vh"],
    section[style*="min-height: 60vh"] {
        min-height: auto !important;
        padding-top: 4rem !important;
        padding-bottom: 3rem !important;
    }
}

/* — Mobile (≤ 768px) — */
@media (max-width: 768px) {

    /* ── Toutes sections : padding réduit ── */
    section {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    section[style*="min-height"] {
        padding-top: 4rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── H1 hero : recalibrage clamp ── */
    section[style*="min-height"] h1,
    section[style*="background: linear-gradient"] h1 {
        font-size: clamp(1.85rem, 7vw, 2.6rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 1rem !important;
        word-break: break-word;
    }

    /* Masquer <br> dans h1 sur mobile */
    section[style*="min-height"] h1 br,
    section[style*="background: linear-gradient"] h1 br {
        display: none;
    }

    /* ── Sous-titre hero ── */
    section[style*="min-height"] > div > p,
    section[style*="background: linear-gradient"] > div > p {
        font-size: 1rem !important;
        padding: 0 0.5rem;
        margin-bottom: 1.75rem !important;
    }

    /* ── Badge hero (pill inline-flex) ── */
    section[style*="min-height"] div[style*="inline-flex"][style*="border-radius: 50px"],
    section[style*="background: linear-gradient"] div[style*="inline-flex"][style*="border-radius: 50px"] {
        font-size: 0.78rem !important;
        padding: 0.35rem 0.875rem !important;
        max-width: 90vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── CTA Buttons hero — colonne centrée ── */
    section[style*="min-height"] div[style*="flex-wrap: wrap"],
    section[style*="background: linear-gradient"] div[style*="flex-wrap: wrap"] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.875rem !important;
        margin-bottom: 2.5rem !important;
    }

    section[style*="min-height"] div[style*="flex-wrap: wrap"] > a,
    section[style*="background: linear-gradient"] div[style*="flex-wrap: wrap"] > a {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
        padding: 0.9rem 1.5rem !important;
    }

    /* ── Stats hero 3 cols → 1 col ── */
    section[style*="min-height"] div[style*="repeat(3, 1fr)"],
    section[style*="background: linear-gradient"] div[style*="repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        max-width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 0.875rem !important;
    }

    /* ── Grilles sections ── */
    /* Profielen 3 → 1 */
    #index-profielen-grid {
        grid-template-columns: 1fr !important;
    }

    /* Kredieten 4/3 → 2 */
    #index-kredieten-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Grille voordelen (grid-3) → 1 col */
    .grid.grid-3 {
        grid-template-columns: 1fr !important;
    }

    /* ── About grid → 1 col ── */
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .about-image {
        min-height: 280px !important;
        order: -1;
    }

    /* ── Stats About inline ── */
    .about-content div[style*="display: flex"][style*="gap: 2.5rem"] {
        gap: 1.25rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* ── Simulateur — card padding ── */
    div[style*="padding: 2.5rem 3rem"] {
        padding: 1.75rem 1.25rem !important;
    }

    /* Label "maanden" — masqué sur mobile */
    #duree {
        padding-right: 1rem !important;
    }
    #duree ~ span[style*="right: 15px"] {
        display: none !important;
    }

    /* Résultats simulateur — 1 col */
    div[style*="minmax(180px, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Bouton simulateur — centré full width */
    #simulatie div[style*="text-align: center"] > a {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── Étapes "Hoe Werkt Het" — 100px 1fr → 1 col ── */
    div[style*="grid-template-columns: 100px 1fr"] {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: 1.75rem 1.25rem !important;
        gap: 1rem !important;
    }

    div[style*="grid-template-columns: 100px 1fr"] > div:first-child {
        margin: 0 auto !important;
    }

    div[style*="grid-template-columns: 100px 1fr"] h3 {
        font-size: 1.25rem !important;
    }

    /* ── Témoignages → 1 col ── */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .testimonials-image {
        min-height: 280px !important;
        order: 2;
    }
    .testimonials-list { order: 1; }

    /* ── FAQ → 1 col ── */
    .faq-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* ── Footer → 1 col ── */
    .footer-content {
        grid-template-columns: 1fr !important;
    }
    .footer-legal {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* ── Page hero sous-pages (h2 au lieu de h1) ── */
    section[style*="min-height"] h2 {
        font-size: clamp(1.75rem, 6vw, 2.4rem) !important;
        line-height: 1.25 !important;
    }

    /* ── Contact grid ── */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* ── Over Ons story grid ── */
    .about-story-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .about-story-image { min-height: 280px !important; }

    /* ── Values grid → 1 col ── */
    .values-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Documents grid → 1 col ── */
    .documents-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Why choose grid → 1 col ── */
    .why-choose-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Demande container → 1 col ── */
    .demande-container {
        grid-template-columns: 1fr !important;
    }
    .demande-credit-form {
        padding: 2rem 1.25rem !important;
    }
    .form-row-demande {
        grid-template-columns: 1fr !important;
    }

    /* ── Boutons généraux — pas full width partout ── */
    /* (on ne force pas tous les boutons en 100%, seulement ceux dans le hero) */
}

/* — Petit mobile (≤ 480px) — */
@media (max-width: 480px) {

    /* H1 encore plus compact */
    section[style*="min-height"] h1,
    section[style*="background: linear-gradient"] h1 {
        font-size: clamp(1.55rem, 8vw, 1.9rem) !important;
        letter-spacing: -0.01em !important;
    }

    /* Stats hero — 3 colonnes compactes côte à côte */
    section[style*="min-height"] div[style*="repeat(3, 1fr)"],
    section[style*="background: linear-gradient"] div[style*="repeat(3, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 100% !important;
        gap: 0.5rem !important;
    }

    section[style*="min-height"] div[style*="repeat(3, 1fr)"] > div,
    section[style*="background: linear-gradient"] div[style*="repeat(3, 1fr)"] > div {
        padding: 0.875rem 0.4rem !important;
        border-radius: 12px !important;
    }

    section[style*="min-height"] div[style*="repeat(3, 1fr)"] > div > div:first-child {
        font-size: 1.55rem !important;
    }

    section[style*="min-height"] div[style*="repeat(3, 1fr)"] > div > div:last-child {
        font-size: 0.7rem !important;
        margin-top: 0.2rem !important;
    }

    /* Kredieten 2 → 1 col */
    #index-kredieten-grid {
        grid-template-columns: 1fr !important;
    }

    /* Profielen padding réduit */
    #index-profielen-grid > div {
        padding: 1.5rem 1.25rem !important;
    }

    /* Formulaire demande */
    .form-header-demande {
        padding: 2rem 1rem !important;
    }
    .form-header-demande h2 {
        font-size: 1.75rem !important;
    }

    /* Preview simulateur */
    .preview-content {
        grid-template-columns: 1fr !important;
    }

    /* Résultats simulateur chiffres */
    #mensualite { font-size: 1.75rem !important; }
    #coutTotal, #taeg { font-size: 1.4rem !important; }

    /* Témoignages image */
    .testimonials-image { min-height: 240px !important; }

    /* Credit detail */
    .credit-detail-header {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .credit-detail-content {
        grid-template-columns: 1fr !important;
    }
}

/* — Très petit mobile (≤ 360px) — */
@media (max-width: 360px) {

    section[style*="min-height"] h1,
    section[style*="background: linear-gradient"] h1 {
        font-size: 1.45rem !important;
    }

    section[style*="min-height"] div[style*="inline-flex"][style*="border-radius: 50px"] {
        font-size: 0.68rem !important;
        white-space: normal;
        text-align: center;
        line-height: 1.4;
    }

    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Footer colonne unique resserré */
    .footer-content {
        padding: 0 0.75rem !important;
    }
}