/* ================================================
   Aaray PACKAGING — RESPONSIVE
   responsive.css — mobile-first media queries
   ================================================ */

/* ---- Base: mobile-first (< 480px) ---- */

/* Topbar hidden on mobile */
@media (max-width: 767px) {
  .topbar {
    display: none;
  }
}

/* ---- Small (≥ 480px) ---- */
@media (min-width: 480px) {
  .hero__trust {
    flex-wrap: nowrap;
  }
}

/* ---- Tablet (≥ 768px) ---- */
@media (min-width: 768px) {
  .grid-2--tablet {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .masonry-grid {
    columns: 2;
  }

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

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

/* ---- Desktop (≥ 1024px) ---- */
@media (min-width: 1024px) {
  .variant-card__title {
    font-size: 1.35rem;
  }
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .masonry-grid {
    columns: 3;
  }

  .variants-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stats-row {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .footer__top {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

/* ---- Max width: navbar hamburger threshold ---- */
@media (max-width: 1023px) {
  /* Show hamburger, hide desktop nav */
  .navbar__nav,
  .navbar__cta {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  /* Footer stack */
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Hero stacks */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 100px 0 60px;
  }

  .hero__title {
    max-width: none;
    margin: 0 auto;
  }

  .hero__desc {
    margin: 0 auto;
  }

  .hero__btns,
  .hero__trust {
    justify-content: center;
  }

  .hero__right {
    min-height: 320px;
  }

  .hero__img-1 {
    width: 160px;
    height: 160px;
  }

  .hero__img-2 {
    width: 130px;
    height: 130px;
  }

  .hero__img-3 {
    width: 120px;
    height: 120px;
  }

  .hero__blob {
    width: 280px;
    height: 280px;
  }

  /* Scroll anim section */
  .scroll-anim-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .scroll-anim-canvas {
    width: 340px;
    height: 340px;
    margin: 0 auto;
  }

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

  /* About stats */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Grid-2 stack */
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-2-1,
  .grid-1-2 {
    grid-template-columns: 1fr;
  }

  /* Mission-vision */
  .mission-vision-grid {
    grid-template-columns: 1fr;
  }

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

/* ---- Tablet landscape / small desktop (768–1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

/* ---- Mobile only (< 768px) ---- */
@media (max-width: 767px) {
  section {
    padding: clamp(40px, 8vw, 60px) var(--container-pad);
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

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

  .hero__inner {
    grid-template-columns: 1fr;
    padding: 100px 0 48px;
    text-align: center;
  }

  .hero__btns {
    justify-content: center;
  }

  .hero__trust {
    justify-content: center;
  }

  .hero__right {
    display: none;
  }

  .testimonials-row {
    grid-template-columns: 1fr;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 16px;
  }

  .testimonials-row .testimonial-card {
    min-width: 80vw;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .masonry-grid {
    columns: 1;
  }

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

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

  .mission-vision-grid {
    grid-template-columns: 1fr;
  }

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

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

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .page-hero {
    padding: 60px var(--container-pad);
  }

  .scroll-anim-sticky {
    height: auto;
    padding: 48px 0;
  }

  .scroll-anim-inner {
    grid-template-columns: 1fr;
  }

  .scroll-anim-canvas {
    width: 260px;
    height: 260px;
  }

  .navbar__mega-menu {
    display: none;
  }
}

/* ---- Very small (< 380px) ---- */
@media (max-width: 379px) {
  .hero__title {
    font-size: 1.9rem;
  }

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

  .related-products {
    grid-template-columns: 1fr;
  }

  .filter-tabs {
    flex-direction: column;
    align-items: center;
  }
}

/* ---- Print ---- */
@media print {
  .topbar,
  .navbar,
  footer,
  .scroll-anim-section {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
  }
}