/* ==========================================================================
   MUTTS & NUTTS — Responsive
   Desktop-first refinements down to 360px, plus ultra-wide handling.
   ========================================================================== */

/* ------ Ultra-wide (≥1800px): let hero breathe, cap line lengths ------ */
@media (min-width: 112.5em) {
  .hero { min-height: 56rem; }
  .hero__inner { align-items: center; }
}

/* ------ Large laptop (≤1200px) ------ */
@media (max-width: 75em) {
  .nav-list { gap: 0.1rem; }
  .nav-link { padding: 0.5rem 0.55rem; font-size: 0.84rem; }
  .hero__review { bottom: 4.5rem; }
}

/* ------ Tablet landscape (≤1024px) ------ */
@media (max-width: 64em) {
  /* Switch to mobile navigation */
  .nav-list, .navbar__actions .btn { display: none; }
  .nav-toggle { display: grid; }
  .topbar__meta span:nth-child(2) { display: none; }

  .hero { flex-direction: column; align-items: stretch; justify-content: center; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__card { justify-self: start; width: min(26rem, 100%); }
  /* Review badge drops into the flow below the hero content, aligned to the container edge */
  .hero__review { position: static; align-self: flex-start; margin: 2rem 0 0 var(--gutter); width: max-content; }
  .hero__scroll { display: none; }

  .split { grid-template-columns: 1fr; }
  .split--reverse > .split__media { order: 0; }
  .split__media { max-width: 34rem; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .counters { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .perk-columns { grid-template-columns: repeat(2, 1fr); }

  .day-timeline { grid-template-columns: 1fr; gap: 0; }
  .day-timeline::before {
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.42rem;
    right: auto;
    width: 1px;
    height: auto;
  }
  .day-slot {
    padding: 0 0 2.2rem 2.4rem;
    text-align: left;
  }
  .day-slot::before { left: 0; top: 0.35rem; translate: 0 0; }

  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__item--wide { grid-column: span 2; }

  .price-cards { grid-template-columns: 1fr !important; max-width: 30rem; margin-inline: auto; }
  .price-card--featured { order: -1; }

  .masonry { columns: 2; }

  .booking-layout { grid-template-columns: 1fr; }
  .booking-aside { position: static; order: 2; }
  .booking-summary { display: none; } /* summary lives in review step on small screens */
  .contact-layout { grid-template-columns: 1fr; }

  .post-featured { grid-template-columns: 1fr; }
  .post-featured__media { min-height: 15rem; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr; }

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

/* ------ Tablet portrait / large phone (≤720px) ------ */
@media (max-width: 45em) {
  .topbar__meta { display: none; }
  .topbar__inner { justify-content: center; }

  .brand__logo { height: 3.2rem; }

  .hero { padding-top: 7.5rem; }
  .hero__stats { gap: 1.25rem 2rem; }
  .hero-stat__num { font-size: 1.6rem; }

  .section-head--split { flex-direction: column; align-items: flex-start; }

  .services-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .perk-columns { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }

  .media-stack { padding-right: 1.5rem; padding-bottom: 3rem; }
  .media-stack__chip { left: -0.4rem; padding: 0.65rem 0.9rem; }

  .form-grid { grid-template-columns: 1fr; }
  .service-select { grid-template-columns: repeat(2, 1fr); }
  .booking-progress__step .label-text { display: none; }
  .booking-nav { flex-direction: column-reverse; }
  .booking-nav .btn { width: 100%; }

  .cta-band { border-radius: var(--radius-lg); }
  .footer-cta__inner { flex-direction: column; align-items: flex-start; }

  .reviews__track { grid-auto-columns: min(21rem, 86vw); }

  .lightbox__prev { left: 0.4rem; }
  .lightbox__next { right: 0.4rem; }
  .lightbox__prev, .lightbox__next { width: 2.6rem; height: 2.6rem; }

  .image-band { aspect-ratio: 4 / 3; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* ------ Small phone (≤480px) ------ */
@media (max-width: 30em) {
  :root { --gutter: 1.1rem; }

  .hero__ctas .btn { width: 100%; }
  .hero__card { padding: 1.4rem; }

  .masonry { columns: 1; }
  .bento { grid-template-columns: 1fr; }
  .bento__item--wide, .bento__item--tall { grid-column: auto; grid-row: auto; }

  .counters { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .counter { padding: 1.4rem 0.6rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer-bottom__inner { justify-content: center; text-align: center; }

  .service-select { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr; }

  .mobile-menu__sub { grid-template-columns: 1fr; }
}

/* ------ Container-query refinement for cards in narrow slots ------ */
@supports (container-type: inline-size) {
  .services-grid, .post-grid { container-type: inline-size; }
}

/* ------ Print: clean, ink-friendly ------ */
@media print {
  .site-header, .site-footer, .back-to-top, .scroll-progress,
  .page-loader, .cta-band, .mobile-menu, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}