/* ============================================================
   GARBEAR DIAMOND PAINTIN — responsive.css
   Breakpoints: 1080 (laptop) / 860 (tablet) / 560 (mobile)
   ============================================================ */

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1080px) {
  .process { grid-template-columns: repeat(3, 1fr); }
  .step:nth-child(3)::after { display: none; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__contact { grid-column: 1 / -1; }
}

/* ---------- Tablet ---------- */
@media (max-width: 860px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }

  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__head, .hero__copy { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__art { order: -1; margin-bottom: 1rem; }
  .hero__art img { width: min(78%, 340px); }

  .meet__grid { grid-template-columns: 1fr; }
  .meet__photo { max-width: 420px; margin-inline: auto; }

  .why__grid { grid-template-columns: 1fr; }
  .why__img { max-width: 480px; margin-inline: auto; }

  .process { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }

  .gallery-grid { columns: 2 200px; }

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

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
  :root { --nav-h: 66px; }

  .btn { width: 100%; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }

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

  .filters { gap: .45rem; }
  .filter-chip { font-size: .92rem; padding: .5rem .9rem; }

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

  .lightbox__prev { left: 1%; }
  .lightbox__next { right: 1%; }
  .lightbox__btn { width: 46px; height: 46px; }

  .cta-band { padding: 2rem 1.3rem; }
}

/* ---------- Custom order page responsive ---------- */
@media (max-width: 960px) {
  .config-grid { grid-template-columns: 1fr !important; }
  .summary { position: static !important; }
}
@media (max-width: 640px) {
  .size-grid { grid-template-columns: 1fr 1fr !important; }
  .preview-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 400px) {
  .size-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .gallery-item img { transition: none !important; }
}