/* ==========================================================================
   LAYOUT — Responsive Breakpoints & Grid
   ========================================================================== */

/* ——— Tablet (768px+) ——— */
@media (min-width: 768px) {
    :root {
        --container-padding: 2rem;
    }

    h1 {
        font-size: var(--font-size-4xl);
    }

    h2 {
        font-size: var(--font-size-3xl);
    }

    .hero-title {
        font-size: var(--font-size-4xl);
    }

    .hero-content {
        grid-template-columns: 1fr 1fr;
    }

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

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

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

    .testimonials-slide {
        min-width: 50%;
    }

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

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

/* ——— Desktop (1024px+) ——— */
@media (min-width: 1024px) {
    .navbar-hamburger {
        display: none;
    }

    .navbar-links {
        display: flex;
    }

    .navbar-cta {
        display: inline-flex;
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testimonials-slide {
        min-width: 33.333%;
    }

    .footer-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* ——— Mobile-only overrides (< 1024px) ——— */
@media (max-width: 1023px) {
    .navbar-links {
        display: none;
    }

    .hero-content {
        text-align: center;
    }

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

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

    .hero-visual {
        order: -1;
    }

    .hero-illustration {
        max-width: 320px;
    }

    .about-illustration {
        order: -1;
    }
}

/* ——— Small Mobile (< 480px) ——— */
@media (max-width: 479px) {
    .hero-title {
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

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

    .hero-actions .btn {
        width: 100%;
    }

    .tabs {
        gap: var(--space-2xs);
    }

    .tab {
        padding: var(--space-2xs) var(--space-md);
        font-size: var(--font-size-xs);
    }
}