/* ==========================================================================
   Nappy Bag Initiative — responsive rules
   Breakpoints: 1080px (laptop/tablet), 900px (tablet), 780px (mobile CTA bar),
   680px (mobile)
   ========================================================================== */

/* -------------------- ≤ 1080px : laptop / tablet -------------------- */
@media (max-width: 1080px) {
  .h1 { font-size: 44px; }
  .h2 { font-size: 34px; }
  .section { padding: 72px 0; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .masonry { column-count: 2; }
}

/* -------------------- ≤ 980px : nav collapses to hamburger -------------------- */
@media (max-width: 980px) {
  .nav,
  .header__actions .btn--primary { display: none !important; }
  .menu-toggle { display: inline-flex; }
}

/* -------------------- ≤ 900px : footer / two-col grids stack -------------------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .form-grid-2col,
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* -------------------- ≤ 780px : mobile sticky CTA bar appears -------------------- */
@media (max-width: 780px) {
  .site-header,
  .admin-bar .site-header { position: relative; top: 0; }
  .mobile-cta-bar { display: flex; }
  .grid-4.grid-4--stack-mobile { grid-template-columns: 1fr !important; }
  body { padding-bottom: 78px; }
}

/* -------------------- ≤ 680px : phones -------------------- */
@media (max-width: 680px) {
  .container,
  .container--wide,
  .container--narrow { padding: 0 20px; }
  .h1 { font-size: 36px; }
  .h2 { font-size: 28px; }
  .section { padding: 54px 0; }
  .grid-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: 1fr 1fr !important; }
  .grid-5 { grid-template-columns: 1fr 1fr !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .masonry { column-count: 1; }
  .step-row { gap: 20px; }
  .step-row__num { width: 56px; font-size: 34px; }
  .quote-card--lg { padding: 32px 24px; }
  .journey__item,
  .journey__item--reverse { flex-direction: column; text-align: center !important; max-width: 100%; }
  .journey__row--right,
  .journey__row--left { justify-content: center; }
  .hide-on-mobile { display: none !important; }
}