/* ==========================================================================
   REPAIR LANDING PAGES — Responsieve stijlen v2
   Alle inline grid/flex stijlen in single-cc_repair_page.php worden
   hier via klassen overschreven voor mobiel.
   ========================================================================== */

/* ---- BASE ---- */
.cc-repair-hero { overflow-x: hidden; }

/* ==========================================================================
   TABLET (≤992px)
   ========================================================================== */
@media (max-width: 992px) {

    /* Hero: kaartje rechts verbergen */
    .cc-hero-card-hide { display: none !important; }

    /* Hero: 1 kolom */
    .cc-repair-hero .container > div > div[style*="grid-template-columns:1fr auto"],
    .cc-repair-hero .container > div[style*="grid-template-columns:1fr auto"] {
        grid-template-columns: 1fr !important;
    }

    /* Voordelen: 1 kolom */
    .cc-repair-voordelen-grid {
        grid-template-columns: 1fr !important;
    }

    /* USP 3-grid: 2 kolommen */
    .cc-usp-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Stappen: 2 kolommen */
    .cc-repair-steps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Pijlen verbergen op tablet (te smal voor pijlen) */
    .cc-step-arrow { display: none !important; }
}

/* ==========================================================================
   MOBIEL (≤768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* Hero kaartje weg */
    .cc-hero-card-hide { display: none !important; }

    /* Hero stats: wrap op meerdere rijen */
    .cc-repair-hero [style*="display:flex"][style*="align-items:center"] {
        flex-wrap: wrap;
    }

    /* Hero knoppen: volledig breed */
    .cc-repair-hero .btn {
        width: 100%;
        text-align: center;
    }

    /* Hero knoppen container: 1 kolom */
    .cc-repair-hero [style*="gap:12px"][style*="flex-wrap:wrap"] {
        flex-direction: column;
    }

    /* Trust badges: 2 kolommen */
    .cc-repair-hero [style*="display:flex"][style*="justify-content:center"] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0 !important;
    }

    /* Voordelen: volledig 1 kolom */
    .cc-repair-voordelen-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* CTA card in voordelen: volgorde omdraaien (kaart boven tekst) */
    .cc-repair-voordelen-grid > div:last-child {
        order: -1;
    }

    /* Stappen: 1 kolom */
    .cc-repair-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cc-step-arrow { display: none !important; }

    /* USP 3-grid: 1 kolom */
    .cc-usp-grid-3 {
        grid-template-columns: 1fr !important;
    }

    /* Taxonomy brand grid */
    [style*="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))"] {
        grid-template-columns: 1fr !important;
    }

    /* Taxonomy brand header: 1 kolom */
    [style*="grid-template-columns:1fr auto"] {
        grid-template-columns: 1fr !important;
    }

    /* Modellen chips flexbox: wrap goed */
    [style*="display:flex;flex-wrap:wrap;gap:8px"] {
        gap: 6px !important;
    }

    /* Alle reparaties overzicht: chips kleiner */
    .cc-repair-hero [style*="grid-template-columns:repeat(auto-fill,minmax(220px,1fr))"] {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   KLEIN MOBIEL (≤480px)
   ========================================================================== */
@media (max-width: 480px) {

    /* Hero titel */
    .cc-repair-hero h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    /* Prijs in hero */
    .cc-repair-hero [style*="font-size:30px"] {
        font-size: 26px !important;
    }

    /* Stat blokken in hero: stapelen */
    .cc-repair-hero [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:20px"] {
        flex-direction: column;
        gap: 12px !important;
    }

    /* Stat blokken: volledig breed */
    .cc-repair-hero [style*="display:flex;align-items:center;gap:8px;background:rgba"] {
        flex: 1;
        min-width: 0;
    }

    /* Trust badge grid: 2 kolommen op heel klein scherm */
    .cc-repair-hero [style*="display:flex"][style*="justify-content:center"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* CTA card padding verminderen */
    .cc-repair-voordelen-grid > div:last-child {
        padding: 24px 16px !important;
    }

    /* Prijs in card */
    .cc-repair-voordelen-grid [style*="font-size:38px"] {
        font-size: 30px !important;
    }

    /* Modellen chips: kleinere padding */
    [style*="background:white;border:1px solid var(--cc-border);border-radius:6px;padding:8px 16px"] {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* Interne link chips */
    [style*="display:inline-flex;align-items:center;gap:7px;background:white;border:1px solid var(--cc-border);border-radius:6px;padding:9px 16px"] {
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    /* Alle reparaties overzicht type cards */
    [style*="display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06)"] {
        padding: 12px !important;
    }

    /* Stap hero knoppen volledig breed */
    .btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   SPECIFIEKE COMPONENT FIXES
   ========================================================================== */

/* Alle inline style grids die niet via klassen zijn aan te spreken:
   Dit vangt de vaste 2-koloms secties in de templates op */

/* "Alle reparaties" overzicht sectie per merk */
@media (max-width: 768px) {
    /* Per-merk sectie chips wrappen correct */
    .cc-reparaties-sectie-merk {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Model kaartjes in taxonomy-cc_brand.php */
@media (max-width: 480px) {
    .cc-repair-type-card {
        padding: 16px !important;
    }

    .cc-repair-type-card h3 {
        font-size: 14px !important;
    }

    .cc-repair-type-card [style*="font-size:48px"] {
        font-size: 32px !important;
    }
}

/* Taxonomy reparatietype: merk grid */
@media (max-width: 480px) {
    [style*="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))"] {
        grid-template-columns: 1fr !important;
    }

    [style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"] {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   ZORGT DAT WIZARD OP EEN STANDAARD PAGINA OOK CORRECT SCHAALT
   (fix voor het probleem dat [repair_booking] op een lege WP pagina
    niet goed renderde op stap 3)
   ========================================================================== */

/* Elke pagina die de shortcode bevat */
.entry-content .ros-wizard,
.page-content .ros-wizard,
.post-content .ros-wizard,
[class*="elementor"] .ros-wizard,
.wp-block-group .ros-wizard {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Zorg dat de standaard WP page layout niet te smal is voor de wizard */
.page-template-default .cc-main-content,
.single-page .cc-main-content {
    min-width: 0;
    overflow: hidden;
}

/* Als [repair_booking] direct op een pagina staat zonder onze template */
body.page:not(.cc-has-sidebar) .ros-wizard {
    max-width: 100%;
}

/* Content area op pagina's zonder sidebar: volledig breed */
.page-template-default .cc-content-area .container,
body.page .cc-content-area > .container {
    display: block; /* sidebar weg als er geen is */
}

/* ==========================================================================
   EXTRA: stap 3 filterbalk specifiek voor standalone pagina's
   ========================================================================== */

/* Als de wizard in een standaard WP pagina staat */
.entry-content #ros-series-filter,
.entry-content .ros-filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    max-width: 100%;
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
}

.entry-content #ros-models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    width: 100%;
}

@media (max-width: 480px) {
    .entry-content #ros-models-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .entry-content #ros-series-filter .ros-filter-chip,
    .entry-content .ros-filter-tabs .ros-filter-chip {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ==========================================================================
   KLASSE-GEBASEERDE RESPONSIVE FIXES (single-cc_repair_page.php)
   ========================================================================== */

/* Hero grid */
.cc-rp-hero-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
}

/* Stats rij */
.cc-rp-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 28px;
}

/* CTA knoppen */
.cc-rp-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Trust badges */
.cc-rp-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 992px) {
    .cc-rp-hero-grid {
        grid-template-columns: 1fr;
    }
    .cc-hero-card-hide { display: none !important; }
}

@media (max-width: 768px) {
    /* Hero knoppen: volledig breed */
    .cc-rp-hero-btns { flex-direction: column; }
    .cc-rp-hero-btns .btn {
        width: 100%;
        text-align: center;
    }

    /* Stats: kolommen */
    .cc-rp-stats-row { gap: 10px; }
    .cc-rp-stats-row > div:last-child {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .cc-rp-stats-row > div:last-child > div {
        width: 100%;
    }

    /* Trust badges: 3-koloms grid */
    .cc-rp-trust-badges {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    /* Trust badges: 2-koloms grid */
    .cc-rp-trust-badges {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Stats rij volledig gestapeld */
    .cc-rp-stats-row {
        flex-direction: column;
        gap: 8px;
    }
}