/* ============================================================
   Nabi Shop - Responsive Styles
   5 Breakpoints: xl(≥1200) lg(992-1199) md(768-991) sm(576-767) xs(<576)
   ============================================================ */

/* === TABLET LANDSCAPE (lg: 992-1199px) === */
@media (max-width: 1199px) {
    :root { --container-padding: 20px; }
    .hero__title { font-size: 2.75rem; }
    .split--55-45, .split--45-55, .split--40-60 { gap: var(--sp-8); }
}

/* === TABLET PORTRAIT (md: 768-991px) === */
@media (max-width: 991px) {
    /* Header: hide desktop nav, show hamburger */
    .nav, .header__social { display: none; }
    .header__login-btn { display: none; }
    .hamburger { display: flex; }

    /* Hero: keep 2 cols but equal */
    .split--55-45 { grid-template-columns: 1fr 1fr; }
    .hero__title { font-size: 2.25rem; }
    .hero__greeting { font-size: 1.15rem; }

    /* About: stack */
    .split--40-60, .split--45-55 { grid-template-columns: 1fr; }
    .about__image-wrap { max-width: 400px; margin: 0 auto; }

    /* Why Choose: 2x2 */
    .grid--4 { grid-template-columns: repeat(2, 1fr); }

    /* Coming Soon: 2 cols */
    .coming-soon__banner {
        grid-template-columns: 1fr 1fr;
        padding: var(--sp-8);
    }
    .coming-soon__image { grid-column: 1 / -1; margin: 0 auto; }

    /* Footer: 2x2 */
    .footer__grid { grid-template-columns: repeat(2, 1fr); }

    /* Section padding reduce */
    .section { padding: var(--sp-16) 0; }

    /* Prevent iOS auto-zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* === MOBILE LARGE (sm: 576-767px) === */
@media (max-width: 767px) {
    /* Hero: single column */
    .split--55-45 { grid-template-columns: 1fr; }
    .hero { padding: var(--sp-10) 0 var(--sp-12); }
    .hero__title { font-size: 2.5rem; }
    .hero__image { max-width: 420px; margin: 0 auto; }
    .hero__desc { max-width: 100%; }

    /* About features: 2x2 grid */
    .about__features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4);
    }

    /* Coming Soon: single column */
    .coming-soon__banner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--sp-8) var(--sp-6);
    }
    .coming-soon__heading { white-space: normal; }
    .coming-soon__image { width: 100px; margin: 0 auto; }

    /* Section */
    .section { padding: var(--sp-12) 0; }
    .section__title { font-size: 1.4rem; margin-bottom: var(--sp-8); }
}

/* === MOBILE SMALL (xs: <576px) === */
@media (max-width: 575px) {
    :root { --container-padding: 16px; }

    body { font-size: 14px; }

    .hero__title { font-size: 2rem; }
    .hero__greeting { font-size: 1.05rem; }
    .hero__tagline { font-size: 0.85rem; }

    /* Why Choose: single column */
    .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }

    /* Footer: single column */
    .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .footer__social-list { justify-content: flex-start; }

    /* Buttons: full width on mobile */
    .btn { width: 100%; justify-content: center; }

    /* Cards */
    .card { padding: var(--sp-6) var(--sp-5); }

    /* Coming soon */
    .coming-soon__title { font-size: 1.35rem; }
    .coming-soon__subtitle { font-size: 1.2rem; }

    /* About */
    .about__features { gap: var(--sp-3); }
    .feature-item__icon { width: 40px; height: 40px; }
    .feature-item__label { font-size: 0.75rem; }

    .section { padding: var(--sp-10) 0; }
}

/* === TOUCH-FRIENDLY: ensure minimum tap targets === */
@media (hover: none) and (pointer: coarse) {
    .nav__link, .mobile-nav__link { min-height: 44px; display: flex; align-items: center; }
    .social-icon { width: 44px; height: 44px; }
    .btn { min-height: 44px; }
}