/* ============================================
   TABLET OVERRIDES (iPad: 768px–1024px)
   Loaded after glass-theme.css to override
   phone→desktop jumps with tablet-friendly layouts.
   Does NOT affect phone (<768px) or desktop (>1024px).
============================================ */

@media (min-width: 769px) and (max-width: 1024px) {

    /* ------------------------------------------
       HOME: Problem & Solution grids
       (inline styles collapse to 1fr at ≤900px)
    ------------------------------------------ */
    .problem-grid,
    .solution-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2.5rem !important;
    }

    .problem-card,
    .solution-card {
        max-width: none !important;
        margin: 0 !important;
    }

    /* ------------------------------------------
       HOME: Benefits grid
       (3-col desktop → 1-col at ≤900px, make 2-col)
    ------------------------------------------ */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* ------------------------------------------
       SERVICES INDEX: Service grid
       (2-col desktop → 1-col at ≤1024px, keep 2-col)
    ------------------------------------------ */
    .service-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2.5rem !important;
    }

    /* ------------------------------------------
       Tailwind grid utility overrides
       lg:grid-cols-2 pages (about, contact, ai-strategy, analytics)
       Currently 1-col below 1024px — force 2-col on tablet
    ------------------------------------------ */
    .grid.lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* md:grid-cols-3 pages (custom-development, talk-to-data)
       3-col at 768px is cramped on iPad — use 2-col */
    .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* ------------------------------------------
       NAVBAR: Use hamburger menu on tablet
       (too many links to fit at 769-1024px)
    ------------------------------------------ */
    .navbar-links {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: block !important;
    }

    .mobile-menu {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-base);
        padding: 2rem;
        z-index: 99;
    }

    .mobile-menu.open {
        display: block;
    }

    .mobile-menu-links {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .mobile-menu-link {
        display: block;
        padding: 1rem;
        color: var(--text-secondary);
        text-decoration: none;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 1.1rem;
        border-radius: var(--radius-md);
        transition: all var(--transition-fast);
    }

    .mobile-menu-link:hover,
    .mobile-menu-link.active {
        background: var(--bg-card);
        color: var(--text-primary);
    }

    /* ------------------------------------------
       General spacing tightening
    ------------------------------------------ */
    .section {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .section-container {
        max-width: 100%;
    }
}