/* ==================================================
   RESPONSIVE
   Breakpoint overrides only. Base styles live in
   style.css / utilities.css — this file adapts them
   down for tablet and mobile, largest breakpoint first.
   ================================================== */

/* ---------- Tablet (<=1024px) ---------- */
@media (max-width: 1024px) {
    .about__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

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

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

    .about-story__grid {
        grid-template-columns: 1fr;
    }

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

    .product-detail,
    .product-detail--reverse {
        grid-template-columns: 1fr;
    }

    .product-detail--reverse .product-detail__media {
        order: 1;
    }

    .product-detail--reverse>div:last-child {
        order: 2;
    }

    .product-detail__media {
        max-width: 340px;
        margin-inline: auto;
    }

    .product-detail__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

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

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

/* ---------- Small tablet / large mobile (<=860px) ---------- */
@media (max-width: 860px) {
    .navbar__links {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(320px, 80vw);
        background: var(--color-white);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-lg);
        padding: 6rem var(--space-lg) var(--space-lg);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--dur-base) var(--ease-out);
        z-index: var(--z-overlay);
    }

    .navbar__links.is-open {
        transform: translateX(0);
        animation: menu-slide-in var(--dur-base) var(--ease-out);
    }

    body.menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 90;
        animation: fade-in-up 0.2s ease-out;
    }

    .navbar__links a {
        color: var(--color-dark);
        font-size: 1.05rem;
    }

    .navbar__links a::after {
        display: none;
    }

    .navbar__burger {
        display: flex;
        position: relative;
        z-index: 210;
    }

    .navbar__burger.is-open span {
        background: var(--color-dark) !important;
    }

    .navbar__actions .btn--primary {
        display: none;
    }

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

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

/* ---------- Mobile (<=640px) ---------- */
@media (max-width: 640px) {
    .hero__content {
        padding-top: 5rem;
    }

    .hero__cta {
        flex-direction: column;
        align-items: stretch;
    }

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

    .process-track {
        grid-template-columns: 1fr;
    }

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

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

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

    .section-title {
        font-size: var(--fs-h2);
    }

    .cta-banner__inner h2 {
        font-size: var(--fs-h3);
    }

    .back-to-top {
        right: var(--space-sm);
        bottom: var(--space-sm);
        width: 42px;
        height: 42px;
    }

    .process-flow::before {
        left: 21px;
    }

    .process-flow__num {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
    }

    .process-flow__item {
        gap: var(--space-md);
    }

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

    .leader-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .leader-card__avatar {
        margin-inline: auto;
    }

    .leader-card__meta {
        justify-content: center;
    }

    .leader-card__bio {
        max-width: 420px;
        margin-inline: auto;
        text-align: left;
    }

    .product-grid-cards {
        grid-template-columns: 1fr;
    }

    .why-detail-grid {
        grid-template-columns: 1fr;
    }

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

/* ---------- Small mobile (<=380px) ---------- */
@media (max-width: 380px) {
    .hero__title {
        font-size: 2.25rem;
    }

    .navbar__logo-text {
        font-size: 0.95rem;
    }
}