/* ─── MITHRAM Website - Responsive Breakpoints ─────────────────── */

/* ─── Large Tablets / Small Desktops (1024px) ──────────────────── */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-preview-grid {
        gap: var(--space-2xl);
    }

    .tech-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Tablets (768px) ──────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --container-padding: var(--space-md);
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Navigation */
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--deep-blue);
        flex-direction: column;
        padding: 5rem var(--space-xl) var(--space-xl);
        transition: right var(--transition-base);
        z-index: 999;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    }

    .nav-menu.open {
        right: 0;
    }

    .nav-menu a {
        padding: var(--space-md) 0;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    .nav-overlay.open {
        display: block;
    }

    .nav-close {
        display: flex;
    }

    /* Hero */
    .hero {
        min-height: 80vh;
    }

    .hero-logos {
        gap: var(--space-md);
    }

    .hero-logo {
        height: 60px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Slider */
    .slider-arrow { width: 42px; height: 42px; opacity: 1; }
    .slider-prev { left: 14px; }
    .slider-next { right: 14px; }
    .slider-arrow svg { width: 18px; height: 18px; }
    .slider-controls { bottom: 28px; }
    .scroll-indicator { bottom: 68px; }

    /* About Preview */
    .about-preview-grid {
        grid-template-columns: 1fr;
    }

    .about-preview-image {
        order: -1;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Mobile (480px) ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .hero-logo {
        height: 50px;
    }

    .slider-arrow { width: 36px; height: 36px; }
    .slider-prev { left: 8px; }
    .slider-next { right: 8px; }
    .hero-badge { font-size: var(--fs-xs); padding: 0.3rem 0.8rem; letter-spacing: 1px; }
    .slider-counter { display: none; }

    .section {
        padding: var(--space-3xl) 0;
    }

    .section-header {
        margin-bottom: var(--space-2xl);
    }

    .btn-lg {
        padding: 0.85rem 2rem;
        font-size: 1rem;
    }

    .pillar-card {
        padding: var(--space-xl) var(--space-lg);
    }

    .stat-value {
        font-size: var(--fs-h2);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Large Desktops (1200px+) ─────────────────────────────────── */
@media (min-width: 1200px) {
    .container {
        padding: 0 var(--space-xl);
    }
}