/* ================================================================
   UwWerkplek — Mobile overrides voor inline-styled secties
   Overschrijft inline grid-template-columns, paddings en gaps
   ================================================================ */

/* Tablet (max 1024px) */
@media (max-width: 1024px) {
    /* 3-kolom grids naar 2 */
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobiel (max 768px) */
@media (max-width: 768px) {
    /* Alle multi-kolom grids naar 1 kolom */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: 2fr 1fr 1fr"],
    [style*="grid-template-columns:2fr 1fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
    [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* 2-kolom grids in formulieren behouden op 2 */
    form [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Gap verkleinen */
    [style*="gap:48px"],
    [style*="gap: 48px"] {
        gap: 24px !important;
    }
    [style*="gap:40px"],
    [style*="gap: 40px"] {
        gap: 20px !important;
    }
    [style*="gap:32px"],
    [style*="gap: 32px"] {
        gap: 16px !important;
    }

    /* Secties padding verkleinen */
    [style*="padding:80px 0"],
    [style*="padding: 80px 0"] {
        padding: 48px 0 !important;
    }
    [style*="padding:60px 0"],
    [style*="padding: 60px 0"] {
        padding: 40px 0 !important;
    }

    /* Hero heading kleiner */
    h1 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
    }
    h2 {
        font-size: 1.2rem !important;
    }

    /* Flexbox wrapping voor filters */
    [style*="display:flex"][style*="gap:8px"] {
        flex-wrap: wrap !important;
    }

    /* Nieuws grid */
    .artikel-inhoud h2 {
        font-size: 1.1rem !important;
    }

    /* FAQ accordion volledig breed */
    [style*="max-width:800px"] {
        max-width: 100% !important;
    }
    [style*="max-width:900px"] {
        max-width: 100% !important;
    }

    /* Footer grid */
    footer [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Sub-navbar menu items smaller */
    .sub-nav {
        gap: 4px !important;
    }
    .sub-nav a {
        font-size: 0.8rem !important;
        padding: 6px 8px !important;
    }
}

/* Klein mobiel (max 480px) */
@media (max-width: 480px) {
    /* Formulier grids ook stacken */
    form [style*="grid-template-columns: 1fr 1fr"],
    form [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Padding nog compacter */
    [style*="padding:32px"],
    [style*="padding: 32px"] {
        padding: 20px !important;
    }
    [style*="padding:36px"],
    [style*="padding: 36px"] {
        padding: 20px !important;
    }
    [style*="padding:40px"],
    [style*="padding: 40px"] {
        padding: 20px !important;
    }

    h1 {
        font-size: 1.4rem !important;
    }

    /* Stat counters kleiner */
    .hero-stats {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Status flow horizontaal scrollen */
    [style*="display:flex"][style*="gap:32px"] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Pijlen verbergen in status flow */
    [style*="font-size:1.5rem"][style*="color:#ccc"] {
        display: none !important;
    }
}