/* ==========================================================================
   Responsive — breakpoints 1440 / 1024 / 900 / 768 / 600 / 480 / 360.
   Mobile sticky call+WhatsApp bar appears only at ≤768px.
   Goal: zero horizontal overflow at 360px.
   ========================================================================== */

/* ---- ≤1440px ------------------------------------------------------------ */
@media (max-width: 1440px) {
  .spec-card--tl { left: -2%; }
  .spec-card--br { right: -1%; }
}

/* ---- ≤1200px ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .footer__col--hours { grid-column: 1 / -1; }
  .footer__hours { max-width: 420px; }
}

/* ---- ≤1024px — collapse nav to the mobile overlay ----------------------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: grid; }

  .header__actions .btn--desktop { display: none; }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-9);
  }

  .hero__content { max-width: 100%; }

  .hero__visual { order: -1; }

  .medallion { width: min(340px, 68%); }

  .hero { min-height: auto; padding-block: var(--sp-9) var(--sp-10); }

  .scroll-hint { display: none; }

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

  .split { grid-template-columns: 1fr; gap: var(--sp-7); }

  .split__media { order: -1; }
}

/* ---- ≤900px ------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .topbar__group--secondary { display: none; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; }
}

/* ---- ≤768px — mobile bar on, tighter rhythm ----------------------------- */
@media (max-width: 768px) {
  /* Sticky call / WhatsApp bar — mobile only, per the brief. */
  .mobile-bar { display: flex; }

  /* Keep the footer clear of the fixed bar. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* Move back-to-top above the bar. */
  .to-top {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--sp-4));
    right: var(--sp-4);
  }

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

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

  .topbar__item--address { display: none; }

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

  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

  .rating-summary__divider { display: none; }

  .rating-summary { flex-direction: column; text-align: center; gap: var(--sp-4); }

  /* Disable 3D tilt on touch — no hover, and it fights scrolling. */
  .card--tilt { transform: none !important; }
  .card--tilt > * { transform: none; }
  .card:hover .card__icon { transform: scale(1.05) rotate(-4deg); }

  .spec-card { display: none; }

  .footer { padding-top: var(--sp-9); }

  .footer__bottom { flex-direction: column; text-align: center; gap: var(--sp-3); }

  .cta-band__actions .btn { width: 100%; }
}

/* ---- ≤600px ------------------------------------------------------------- */
@media (max-width: 600px) {
  .topbar__inner { justify-content: center; }
  .topbar__group--primary { justify-content: center; gap: var(--sp-4); }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .trust-row { gap: var(--sp-2); }

  .chip { font-size: 0.66rem; padding: var(--sp-2) var(--sp-3); }

  .review-tabs { gap: var(--sp-2); }
  .tab { padding: var(--sp-2) var(--sp-4); font-size: 0.68rem; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-7); }

  .timeline__item { grid-template-columns: 40px 1fr; gap: var(--sp-4); }
  .timeline::before { left: 19px; }
  .timeline__dot { width: 40px; height: 40px; }

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

  .popup__dialog { padding: var(--sp-6) var(--sp-5); }
}

/* ---- ≤480px ------------------------------------------------------------- */
@media (max-width: 480px) {
  .topbar__item--email { display: none; }

  .card { padding: var(--sp-5); }

  /* Card padding shrinks here, so the media bleed must match it. */
  .card__media {
    width: calc(100% + var(--sp-5) * 2);
    margin-left: calc(var(--sp-5) * -1);
    margin-top: calc(var(--sp-5) * -1);
  }

  .logo__mark { width: 36px; height: 36px; }
  .logo__name { font-size: 1.02rem; }

  .mobile-nav__link { font-size: var(--fs-lg); padding: var(--sp-3) var(--sp-1); }

  .btn { --btn-px: 1.5rem; }

  .rating-summary { padding: var(--sp-5); }

  .font-sample { min-height: 104px; }
}

/* ---- ≤360px — smallest supported width ---------------------------------- */
@media (max-width: 360px) {
  :root { --gutter: 1rem; }

  .logo__suffix { display: none; }

  .mobile-bar__btn { font-size: 0.72rem; gap: var(--sp-1); }

  .btn { --btn-px: 1.25rem; font-size: 0.72rem; }

  .card__list li { font-size: 0.64rem; }
}

/* ---- Landscape phones: shrink vertical rhythm --------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: var(--sp-8); }
  .mobile-nav { justify-content: flex-start; padding-top: var(--sp-7); }
  .mobile-nav__link { font-size: var(--fs-md); padding: var(--sp-3) var(--sp-2); }
}

/* ---- Pointer-coarse: neutralise hover-only affordances ------------------ */
@media (hover: none) {
  .card--tilt { transform: none !important; }
  .card::before { display: none; }
  .btn::after { display: none; }
}

/* ---- Print --------------------------------------------------------------- */
@media print {
  .topbar, .header, .mobile-bar, .to-top, .popup, .preloader,
  .mobile-nav, .scroll-hint, .cta-band { display: none !important; }

  body { background: #fff; color: #000; padding-bottom: 0; }

  .page-bg { display: none; }

  .card, .review { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}