/* ============================================================
   MOTION SELL — responsive.css
   Tablet & mobile adjustments
   ============================================================ */

/* ---------- ≤ 1024px (tablet landscape) ---------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
  .hero__desc { margin-inline: auto; }
  .hero__actions, .hero__stats { justify-content: center; }
  .hero__visual { min-height: 440px; order: -1; margin-top: 1rem; }
  .hero__ball { width: min(430px, 78%); }
  .hero__chip--1 { left: 4%; }
  .hero__chip--2 { right: 4%; }

  .showcase__inner { grid-template-columns: 1fr; text-align: center; }
  .showcase__visual { order: -1; }
  .showcase__desc, .showcase__specs { margin-inline: auto; }
  .showcase__specs li { justify-content: center; }
  .showcase__cta { justify-content: center; }
  .section-head { margin-inline: auto; text-align: inherit; }

  .contact__inner { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1.4rem; }
  .gallery__masonry { columns: 2 260px; }
}

/* ---------- ≤ 820px (tablet portrait / mobile nav) ---------- */
@media (max-width: 820px) {
  /* Drop the centering transform so the fixed fullscreen menu
     positions against the viewport, not the transformed navbar */
  .nav { top: 10px; left: 3%; right: 3%; width: auto; transform: none; }
  .nav.nav--hidden { transform: translateY(-160%); }
  .nav__burger { display: flex; }

  .nav__links {
    position: fixed; inset: 0; z-index: 10;
    flex-direction: column; justify-content: center; gap: 2rem;
    background: rgba(11, 11, 13, .92);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    opacity: 0; pointer-events: none;
    transition: opacity .4s var(--ease-out);
  }
  .nav__links.is-open { opacity: 1; pointer-events: auto; }
  .nav__link { font-size: 1.5rem; font-family: var(--font-display); font-weight: 600; }
  .nav__links .nav__cta { margin-top: .6rem; }

  /* stagger-in for mobile menu links */
  .nav__links > * { transform: translateY(24px); opacity: 0; transition: transform .5s var(--ease-out), opacity .5s; }
  .nav__links.is-open > * { transform: none; opacity: 1; }
  .nav__links.is-open > *:nth-child(1) { transition-delay: .05s; }
  .nav__links.is-open > *:nth-child(2) { transition-delay: .1s; }
  .nav__links.is-open > *:nth-child(3) { transition-delay: .15s; }
  .nav__links.is-open > *:nth-child(4) { transition-delay: .2s; }
  .nav__links.is-open > *:nth-child(5) { transition-delay: .25s; }
  .nav__links.is-open > *:nth-child(6) { transition-delay: .3s; }
}

/* ---------- ≤ 640px (mobile) ---------- */
@media (max-width: 640px) {
  :root { --radius-lg: 24px; }

  .hero { padding-top: 6.4rem; }
  .hero__chip { display: none; }
  .hero__ball { width: min(340px, 84%); }
  .hero__scroll { display: none; }
  .hero__actions .btn { flex: 1; justify-content: center; }
  .hero__stats { flex-direction: column; gap: .4rem; }

  .marquee { transform: rotate(0) scale(1); }

  .collection__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .categories__grid { grid-template-columns: 1fr 1fr; }
  .category-card { min-height: 230px; }

  .review-card { width: 84vw; padding: 1.4rem; }

  .contact__form { grid-template-columns: 1fr; }
  .contact__form .field--half { grid-column: 1 / -1; }

  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; text-align: center; }

  .gallery__masonry { columns: 1; }
  .showcase__word { font-size: 42vw; }
}

/* ---------- ≤ 380px (small mobile) ---------- */
@media (max-width: 380px) {
  .categories__grid { grid-template-columns: 1fr; }
  .btn--lg { padding: .95rem 1.4rem; font-size: .92rem; }
  .stats__grid { grid-template-columns: 1fr; }
}

/* ---------- Tall sections on short screens ---------- */
@media (max-height: 640px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 8rem 5rem; }
}