/* ==========================================================================
   Responsive — mobile-first overrides.
   Breakpoints: 480 / 768 / 1024 / 1280 / 1536
   Verified at 360, 390, 768, 1024, 1440, 1920 with no horizontal overflow.
   ========================================================================== */

/* ---------------------------------------------------- below 1100: nav --- */
@media (max-width: 1099px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header__cta .btn--nav { display: none; }
}

@media (min-width: 1100px) {
  .drawer { display: none; }
}

/* ---------------------------------------------------------- 1024 down --- */
@media (max-width: 1023px) {
  .hero { min-height: auto; }
  .hero__stack { max-width: 460px; aspect-ratio: 5 / 4; margin-top: 1rem; }
  .media-frame--offset { transform: none; }
  .scroll-cue { display: none; }
}

/* ----------------------------------------------------------- 768 down --- */
@media (max-width: 768px) {
  :root {
    --header-h: 64px;
    --topbar-h: auto;
  }

  /* sticky call / WhatsApp bar is mobile-only */
  .mobile-bar { display: flex; }

  /* keep the bar from covering page content or the footer credit */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  .topbar__inner {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.55rem;
    text-align: center;
  }
  .topbar__group { justify-content: center; gap: 1rem; }
  .topbar__group--hours { display: none; }
  .topbar__addr { display: none; }

  .brand img { height: 38px; }

  .hero__title { letter-spacing: -0.025em; }
  .hero__actions .btn { flex: 1 1 100%; }

  .hero__stack { aspect-ratio: 1; max-width: 100%; }
  .hero__card--a { inset: 0 26% 30% 0; }
  .hero__card--b { inset: 34% 0 4% 32%; }
  .hero__card--c { display: none; }

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

  .reviews-head { flex-direction: column; align-items: flex-start; text-align: left; }
  .reviews-head .btn { width: 100%; }

  /* reviews become a swipeable snap carousel */
  .review-grid--carousel {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.8rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .review-grid--carousel::-webkit-scrollbar { display: none; }
  .review-grid--carousel > .review {
    flex: 0 0 min(85%, 330px);
    scroll-snap-align: start;
  }
  .review-grid--carousel > .empty-state { flex: 0 0 100%; }

  .carousel-dots { display: flex; }

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

  .lightbox__btn--prev { left: 0.6rem; }
  .lightbox__btn--next { right: 0.6rem; }
  .lightbox__btn--close { top: 0.8rem; right: 0.8rem; }

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

  .cta-band .btn-row .btn { flex: 1 1 100%; }
}

.carousel-dots { display: none; justify-content: center; gap: 0.5rem; margin-top: 1.2rem; }
.carousel-dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-io), width var(--t-fast) var(--ease-out);
}
.carousel-dots button[aria-selected='true'] { background: var(--cyan); width: 22px; border-radius: 4px; }

/* ----------------------------------------------------------- 480 down --- */
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .filter-bar { gap: 0.4rem; }
  .filter-btn { padding: 0.55rem 0.9rem; font-size: 0.75rem; }
  .form-grid--2 { grid-template-columns: 1fr; }
  .mobile-bar a { font-size: 0.76rem; gap: 0.35rem; }
  .popup__card { padding: 1.6rem 1.2rem; }
  .popup__logo img { height: 42px; }
  .radio-row { gap: 0.8rem; }
}

/* --------------------------------------------------- very small phones -- */
@media (max-width: 360px) {
  :root { --gutter: 1rem; }
  .mobile-bar a { font-size: 0.7rem; }
  .mobile-bar svg { width: 17px; height: 17px; }
  .chip { padding: 0.5rem 0.8rem; font-size: 0.72rem; }
}

/* --------------------------------------------------------- wide screens - */
@media (min-width: 1536px) {
  :root { --wrap: 1400px; }
}

/* ------------------------------------------------------------- print ---- */
@media print {
  .topbar, .header, .mobile-bar, .popup, .preloader,
  .progress, .cursor-dot, .cta-band, .drawer { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .section { padding-block: 1.5rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}