/* ═══════════════════════════════════════════
   RESPONSIVE – Tablet & Mobiel
═══════════════════════════════════════════ */

/* ── Tablet (max 900px) ── */
@media (max-width: 900px) {

    /* Stats */
    .cc-stats-rij { gap: 8px; padding: 0 16px 24px; }
    .cc-stat-card { padding: 12px 16px; min-width: 150px; }
    .cc-stat-card__getal { font-size: 1.2rem; }

    /* Grid: 2 kolommen */
    .cc-kaarten-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    /* Zoekbalk */
    .cc-zoekbalk { padding: 0 16px 20px; gap: 8px; }
    .cc-zoekbalk__select { width: 140px; }

    /* Grid wrap */
    .cc-grid-wrap { padding: 0 16px 48px; }
    .cc-home-kaart-head,
    .cc-home-kaart-wrap { padding: 0 16px; }

    /* Home header */
    .cc-home-header { padding: 36px 16px 28px; }
    .cc-home-header__titel { font-size: 2.4rem; }
}

/* ── Mobiel (max 600px) ── */

@media (max-width: 900px) {
    .cc-trips-stats--geschiedenis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    /* Geen horizontale overflow */
    .cc-app { overflow-x: hidden; }

    /* Home header */
    .cc-home-header { padding: 24px 16px 20px; }
    .cc-home-header__titel { font-size: 1.8rem; }
    .cc-home-header__sub { font-size: .85rem; }

    /* Stats: 2-kolommen grid */
    .cc-stats-rij {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 16px 20px;
        overflow: visible;
    }
    .cc-stat-card { min-width: 140px; padding: 12px 14px; }
    .cc-stat-card__icon { width: 30px; height: 30px; font-size: .95rem; }
    .cc-stat-card__getal { font-size: 1.2rem; }
    .cc-stat-card__label { font-size: .65rem; white-space: nowrap; }

    /* Zoekbalk: gestapeld, netjes */
    .cc-zoekbalk {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0 16px 16px;
        gap: 8px;
        align-items: stretch;
        width: 100%;
        box-sizing: border-box;
    }
    .cc-zoekbalk__input-wrap {
        width: 100%;
        flex: none;
        box-sizing: border-box;
    }
    .cc-zoekbalk__input {
        min-height: 54px;
        padding-left: 46px;
        border-radius: 16px;
        width: 100%;
        box-sizing: border-box;
    }
    .cc-zoekbalk__input-wrap::before {
        content: none;
    }
    .cc-zoekbalk__input-wrap::after {
        left: 16px;
    }
    .cc-zoekbalk__select {
        min-height: 54px;
        width: 100%;
        flex: none;
        border-radius: 16px;
        box-sizing: border-box;
    }
    .cc-zoekbalk__count { margin-left: 0; text-align: left; }
    .cc-submit { width: 100%; box-sizing: border-box; }

    /* Grid: 1 kolom, nooit breder dan scherm */
    .cc-kaarten-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .cc-grid-wrap { padding: 0 16px 40px; width: 100%; box-sizing: border-box; }
    .cc-home-kaart-head,
    .cc-home-kaart-wrap { padding: 0 16px; width: 100%; box-sizing: border-box; }
    .cc-home-kaart { height: 420px; }
    .cc-kaart { width: 100%; box-sizing: border-box; max-width: 100%; }
    .cc-kaart__foto-wrap { height: 200px; }

    /* Formulier */
    .cc-toevoegen-wrap { padding: 20px 12px 60px; }
    .cc-form-sectie { padding: 16px 14px; }
    .cc-form-rij { grid-template-columns: 1fr; }

    /* Popup */
    .cc-popup-overlay { padding: 0; align-items: flex-end; }
    .cc-popup { width: 100%; max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; transform: translateY(40px); }
    .cc-popup-overlay--zichtbaar .cc-popup { transform: translateY(0); }
    .cc-popup__foto-wrap { height: 200px; }
    .cc-popup__acties { flex-direction: column; }
    .cc-popup__bewerk-btn,
    .cc-popup__route-btn,
    .cc-popup__share-btn,
    .cc-popup__delete-btn,
    .cc-popup__dagboek-btn { width: 100%; justify-content: center; }
    #cc-popup-verblijven { grid-template-columns: 1fr !important; }

    /* Auth */
    .cc-auth-kaart { padding: 24px 16px; }
    .cc-auth-rij { grid-template-columns: 1fr; }
}

/* ── Klein mobiel (max 400px) ── */
@media (max-width: 400px) {
    .cc-home-header__titel { font-size: 1.6rem; }
    .cc-stat-card__getal { font-size: 1.1rem; }
}