/* =============================================================
   MFES.GE — Responsive Styles (Mobile-first breakpoints)
   xs:  < 480px   (small phones)
   sm:  ≥ 480px   (large phones)
   md:  ≥ 768px   (tablets)
   lg:  ≥ 1024px  (laptops)
   xl:  ≥ 1280px  (desktops)
   2xl: ≥ 1536px  (wide screens)
   ============================================================= */

/* ── Mobile baseline (already in components.css) ────────── */

/* ── sm: ≥ 480px ─────────────────────────────────────────── */
@media (min-width: 480px) {
    .hero-stats { gap: var(--space-8); }
}

/* ── md: ≥ 768px ─────────────────────────────────────────── */
@media (min-width: 768px) {
    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Products */
    .products-showcase {
        grid-template-columns: 1fr;
    }

    /* Why MFES */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-card--highlight {
        grid-column: auto;
    }

    /* Login */
    .login-layout {
        grid-template-columns: 1fr;
    }

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

    /* Form rows */
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── lg: ≥ 1024px ───────────────────────────────────────── */
@media (min-width: 1024px) {
    /* Services */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Products — side by side */
    .products-showcase {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Why */
    .why-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .why-card--highlight {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    /* Login */
    .login-layout {
        grid-template-columns: 1fr 1fr;
    }

    /* Contact */
    .contact-layout {
        grid-template-columns: 1.1fr 0.9fr;
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
}

/* ── xl: ≥ 1280px ───────────────────────────────────────── */
@media (min-width: 1280px) {
    :root { --container-max: 1200px; }
}

/* ── 2xl: ≥ 1536px ──────────────────────────────────────── */
@media (min-width: 1536px) {
    :root { --container-max: 1400px; }

    .hero-heading { font-size: 4.5rem; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE NAV (max-width: 1023px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .hamburger { display: flex; }

    .main-nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        padding: var(--space-4) var(--container-pad) var(--space-6);
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--dur-base) var(--ease-std),
                    opacity   var(--dur-base) var(--ease-std);
        z-index: var(--z-nav);
    }

    .main-nav.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
    }

    .nav-link {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
    }
}

/* ════════════════════════════════════════════════════════════
   HERO — Mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-badge { margin-inline: auto; }

    .hero-actions { justify-content: center; }

    .hero-stats { justify-content: center; }

    .hero-visual { display: none; }

    .hero-scroll-cue { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .hero-visual { display: none; }
}

/* ════════════════════════════════════════════════════════════
   WHY MFES — Mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .why-grid {
        grid-template-columns: 1fr;
    }

    .why-card--highlight {
        grid-column: auto;
        grid-row: auto;
    }
}

/* ════════════════════════════════════════════════════════════
   PRODUCTS — Mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .products-showcase {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════
   LOGIN — Mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .login-card { padding: var(--space-6); }

    .login-layout { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   CONTACT — Mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .contact-layout { grid-template-columns: 1fr; }

    .contact-form-wrap { padding: var(--space-6); }

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

/* ════════════════════════════════════════════════════════════
   FOOTER — Mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════
   PRINT
   ════════════════════════════════════════════════════════════ */
@media print {
    .site-header,
    .hero-visual,
    .hamburger,
    .hero-scroll-cue,
    .site-footer { display: none !important; }

    body { font-size: 12pt; color: #000; background: #fff; }

    .container { max-width: 100%; padding: 0; }
}