/* ============================================================
   responsive.css
   Media queries — tablet and mobile overrides.
   Loaded last so its rules win on smaller screens.
   ============================================================ */

/* ===========================
   Tablet ≤ 968px
   =========================== */
@media (max-width: 968px) {

    /* Stack About photo above text */
    .about__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .about__photo {
        max-width: 380px;
        margin: 0 auto;
    }

    /* 6-col stat grid → 3-col */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Services + stack go single-col */
    .services-grid,
    .stack-grid {
        grid-template-columns: 1fr;
    }

    /* PSR block stacks vertically inside product card */
    .psr {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    /* Product metrics: 4 → 2 cols */
    .product-card__metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Section vertical padding shrinks */
    .section {
        padding: var(--space-lg) 0;
    }
}

/* ===========================
   Mobile ≤ 640px
   =========================== */
@media (max-width: 640px) {

    /* Hide desktop nav links, show burger */
    .navbar__links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background-color: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
        padding: var(--space-sm) var(--space-md) var(--space-md);
        gap: 0;
        /* Closed state — hidden offscreen */
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--transition), opacity var(--transition);
    }

    .navbar__links.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .navbar__link,
    .navbar__links .btn {
        padding: var(--space-sm) 0;
        border-bottom: 1px solid var(--border);
        text-align: left;
        border-radius: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .navbar__links .btn {
        margin-top: var(--space-xs);
        border: 1px solid var(--accent);
        border-radius: var(--radius-pill);
        justify-content: center;
        padding: 0.75rem 1rem;
    }

    .navbar__burger {
        display: flex;
    }

    /* Hero — tighter spacing on mobile */
    .section--hero {
        padding-top: calc(var(--nav-height) + var(--space-md));
        min-height: auto;
    }

    .hero__avatar {
        width: 96px;
        height: 96px;
    }

    .hero__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-xs);
    }

    .hero__ctas .btn {
        justify-content: center;
    }

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

    .stats-grid--lg {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    /* Form row stacks */
    .form__row,
    .form__actions {
        grid-template-columns: 1fr;
    }

    /* Product card head wraps cleanly */
    .product-card__head {
        flex-direction: column;
    }

    /* Container padding tighter */
    .container {
        padding: 0 var(--space-sm);
    }

    /* Footer items stack vertically */
    .footer__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    /* Sticky buttons tighter on mobile */
    .mb-whatsapp {
        right: 1rem;
        bottom: 1rem;
        width: 50px;
        height: 50px;
    }
    .mb-whatsapp svg {
        width: 24px;
        height: 24px;
    }

    .mb-back-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 42px;
        height: 42px;
    }
    .mb-back-to-top svg {
        width: 18px;
        height: 18px;
    }
    /* Tighter stack on mobile (smaller WhatsApp button = less gap needed). */
    .mb-has-whatsapp .mb-back-to-top {
        bottom: 4.5rem;
    }

    .mb-preloader__brand { font-size: 1.375rem; }
    .mb-preloader__bar   { width: 160px; }

    /* Logo image smaller so it fits next to the burger on mobile. */
    .navbar__logo-img {
        height: 32px;
        max-width: 160px;
    }

    /* Client marquee — smaller logos, smaller gap on mobile. */
    .clients-logo  { width: 140px; height: 48px; }
    .clients-track { gap: var(--space-md); }
}

/* === Touch / coarse-pointer devices ===
   Spotlight + magnetic effects only make sense with a real cursor.
   Disable them on touch devices to avoid weird artifacts. */
@media (hover: none), (pointer: coarse) {
    .mb-spotlight       { display: none !important; }
    .btn[data-magnetic] { transform: none !important; }
}