/* ==============================================
   RESPONSIVE — mobile-first, all media queries here
   Breakpoints: 480px (sm) · 768px (md) · 1024px (lg)
   ============================================== */

/* ── Mobile default (< 480px) ─────────────────── */

/* Testimonials: single column on mobile, headings left-aligned */
.testimonials-grid { grid-template-columns: 1fr; }
#testimonials-heading { text-align: left; }

/* Nav: hide desktop menu, show toggle */
.nav__menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-2xl) var(--space-xl);
  gap: var(--space-xl);
  border-top: 0.0625rem solid var(--color-border);
  z-index: calc(var(--z-sticky) - 1);
  overflow-y: auto;
}
.nav__menu.is-open { display: flex; }
.nav__toggle { display: flex; }

/* Ticker: wrap on small screens, show first 4 benefits */
.ticker__list { gap: var(--space-xl); }
.ticker__item:nth-child(n+5) { display: none; }

/* Grids collapse to single column */
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; justify-items: center; }
.grid-4 { grid-template-columns: 1fr 1fr; }

/* Occasion cards: let aspect-ratio breathe on mobile */
.occasion-card { max-height: none; width: 100%; }

/* Steps collapse */
.steps { grid-template-columns: 1fr; }

/* Split layout stacks */
.split { grid-template-columns: 1fr; }
.split--reverse .split__media { order: 0; }

/* Footer stacks */
.footer__grid { grid-template-columns: 1fr; gap: var(--space-xl); }

/* Forms: single column */
.form__row { grid-template-columns: 1fr; }

/* CTA banner: tighter padding */
.cta-banner { padding: var(--space-2xl) var(--space-xl); }

/* Hero actions: full width */
.hero__actions { flex-direction: column; align-items: flex-start; }
.hero__actions .btn { width: 100%; justify-content: center; }

/* Gallery: 2 columns on small */
.gallery-grid { grid-template-columns: repeat(2, 1fr); }

/* Scroll-to-top: closer to edge */
.scroll-top { bottom: var(--space-lg); right: var(--space-lg); }

/* Pricing cards: full width */
.grid-3 .pricing-card { width: 100%; }

/* Feature list: single column on mobile */
.feature-list { grid-template-columns: 1fr; }


/* ── Small mobile — 480px+ ────────────────────── */
@media (min-width: 480px) {
  .ticker__item:nth-child(n+5) { display: flex; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .steps  { grid-template-columns: 1fr 1fr; }
  .hero__actions { flex-direction: row; }
  .hero__actions .btn { width: auto; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ── Tablet — 768px+ ──────────────────────────── */
@media (min-width: 768px) {
  /* Nav: show desktop menu, hide toggle */
  .nav__toggle { display: none; }
  .nav__menu {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    background: none;
    padding: 0;
    gap: var(--space-xl);
    border-top: none;
    overflow: visible;
  }

  /* Grids */
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .feature-list { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); justify-items: stretch; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .occasion-card { max-height: 25rem; }

  /* Split layout restored */
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: -1; }

  /* Form rows */
  .form__row { grid-template-columns: 1fr 1fr; }

  /* Footer: 2-column */
  .footer__grid { grid-template-columns: 1fr 1fr; }

  /* Ticker: show all items */
  .ticker__item:nth-child(n+5) { display: flex; }

  /* Hero */
  .hero__actions { flex-direction: row; }
  .hero__actions .btn { width: auto; }
}


/* ── Desktop — 1024px+ ────────────────────────── */
@media (min-width: 1024px) {
  /* Testimonials: 3 across */
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  #testimonials-heading { text-align: center; }
  /* Full 3-column grid */
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  /* How it works: 4 across */
  .steps { grid-template-columns: repeat(4, 1fr); }

  /* Footer: original 2fr 1fr 1fr */
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }

  /* Gallery: 4 columns */
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}