/* =========================================
   MOBILE & TABLET STYLES
   /css/mobile.css
   Wordt alleen geladen op schermen ≤ 1024px

   LET OP: Nav, footer, hamburger en theme toggle
   responsive styles staan in base.css
   Dit bestand bevat alleen page-specifieke mobile styles.
   ========================================= */

/* =========================================
   TABLET + MOBIEL (≤ 900px)
   ========================================= */
@media (max-width: 900px) {

    /* --- Hero --- */
    .hero { min-height: 30vh; padding: 40px 20px; }
    .hero h1 { white-space: normal; font-size: 1.8rem; }
    .typewriter p {
        white-space: normal;
        border-right: none;
        animation: none;
        max-width: 100%;
        text-align: center;
    }

    /* --- Content & Grid --- */
    .content-container { margin: 20px auto; padding: 0 15px; }
    .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
        margin-top: 20px;
    }

    /* --- Cards --- */
    .card { padding: 20px; }
    .card h3 { font-size: 1.2rem; }

    /* --- Producten / Shop --- */
    .product-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

    /* --- Generator card (homepage) --- */
    .generator-card { margin: -30px 15px 30px 15px; padding: 20px; }

    /* --- Games --- */
    .tabs { gap: 8px; }
    .tab-btn { padding: 8px 15px; font-size: 0.85rem; }
}

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

    /* --- Algemeen --- */
    .hero h1 { font-size: 1.6rem; }
    .section-title { font-size: 1.5rem; margin: 40px 0 8px; }

    /* --- Wie ben ik: Timeline --- */
    .timeline { overflow: visible !important; }
    .timeline::before { left: 20px; }
    .timeline-item {
        width: calc(100% - 55px) !important;
        margin-left: 55px !important;
    }
    .timeline-item::after {
        left: -40px !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
    }
    .timeline-item::before {
        left: -35px !important;
        right: auto !important;
        width: 35px !important;
    }

    /* --- Wie ben ik: Grids --- */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .interests-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .cert-grid { grid-template-columns: 1fr; }

    /* --- Airsoft / Loadout --- */
    .product-grid { grid-template-columns: 1fr; }
    .product-image { height: 180px; }

    /* --- Games --- */
    .tetris-wrapper { flex-direction: column; align-items: center; }
    .tetris-sidebar { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .tetris-panel { min-width: 100px; flex: 1; }
    .tycoon-container { padding: 0 10px; }
    .ttt-board { grid-template-columns: repeat(3, 80px); }
    .cell { width: 80px; height: 80px; font-size: 2.5rem; }
}

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

    /* --- Algemeen --- */
    .hero h1 { font-size: 1.4rem; }
    .grid-container { grid-template-columns: 1fr; }
    .cta-button { padding: 10px 24px; font-size: 0.9rem; width: 100%; text-align: center; }

    /* --- Wie ben ik --- */
    .stats-grid { grid-template-columns: 1fr; }
    .about-hero { padding: 60px 15px 40px; }
    .about-hero h1 { font-size: 1.6rem; }

    /* --- Games --- */
    .ttt-board { grid-template-columns: repeat(3, 70px); }
    .cell { width: 70px; height: 70px; font-size: 2rem; }
    #tetrisCanvas { max-width: 100%; }
}