/* =====================================================================
   BELREUS.NL - responsive (tablet en mobiel). Altijd als laatste laden.
   ===================================================================== */

@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    .brand-grid { grid-template-columns: repeat(3, 1fr); }
    .calc-grid { grid-template-columns: repeat(2, 1fr); }
    .offer-row { grid-template-columns: 60px 1fr auto; }
    .offer-score { grid-column: 2; }
    .offer-cta { grid-column: 3; }
}

@media (max-width: 900px) {
    .layout-sidebar { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .sidebar .filters { grid-template-columns: repeat(2, 1fr); }
    .sidebar .field-submit { grid-column: 1 / -1; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .pd-hero { grid-template-columns: 1fr; gap: 28px; }
    .pd-media { position: relative; top: 0; min-height: 300px; }
    .spec-list { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .compare-picker { grid-template-columns: repeat(2, 1fr); }
    .compare-picker .field-submit { grid-column: 1 / -1; }
    .stat-cards { grid-template-columns: repeat(2, 1fr); }
    .admin-form { grid-template-columns: 1fr; }

    .nav-toggle { display: block; }
    .header-inner { gap: 12px; }
    .main-nav { display: none; }
    .main-nav.is-open { display: block; }
    .main-nav ul { flex-direction: column; gap: 0; padding: 6px 0 12px; }
    .main-nav a { border-bottom: 0; border-left: 3px solid transparent; padding: 12px 10px; }
    .main-nav a.active { border-left-color: var(--blue); background: var(--tint-blue); }
    .main-nav .nav-cta { margin-left: 0; }
}

@media (max-width: 640px) {
    .container { padding: 0 16px; }
    .header-inner { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; }
    .header-search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
    .header-icon, .header-actions { margin-left: auto; }
    .logo { font-size: 1.3rem; }
    .logo-img { height: 42px; }
    .filters-compact { grid-template-columns: 1fr; }
    .sidebar .filters { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sidebar .filters .field-submit, .filters .toggles { grid-column: 1 / -1; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .brand-grid { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 44px 0; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .score-legend-lg { grid-template-columns: 1fr; }
    .score-parts li { grid-template-columns: 110px 1fr 44px; }
    .footer-grid { grid-template-columns: 1fr; }
    .compare-picker, .calc-grid, .calc-result { grid-template-columns: 1fr; }
    .compare-inner { flex-direction: column; align-items: stretch; }
    .compare-label { display: none; }
    .compare-actions .btn { flex: 1; }
    .best-deal-head { flex-direction: column; align-items: flex-start; }
    .offer-row { grid-template-columns: 56px 1fr; }
    .offer-cost { text-align: left; grid-column: 1 / -1; }
    .offer-score { grid-column: 1; }
    .offer-cta { grid-column: 2; }
    .offer-cta .btn { width: 100%; }
    .stat-cards { grid-template-columns: 1fr; }

    /* Abonnementen-tabel als kaarten */
    #offers-table thead { display: none; }
    #offers-table, #offers-table tbody, #offers-table tr, #offers-table td { display: block; width: 100%; }
    #offers-table tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
    #offers-table td { border: 0; padding: 6px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    #offers-table td::before { content: attr(data-label); color: var(--muted); font-size: .85rem; }
    #offers-table td:last-child { display: block; }
    #offers-table td:last-child .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}