/* ═══════════════════════════════════════════════════════════════════════════
   High Stone Wholistic Wellness — Responsive breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    /* Single-deck header on tablet/mobile: nav moves to the drawer */
    :root { --header-height: 79px; }

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

    .nav { display: none; }
    .nav-toggle { display: inline-flex; }
    .header-phone { display: none; }
    /* Without the phone column, let the logo sit left for balance */
    .site-header__top { grid-template-columns: auto 1fr; }
    .site-header__top .logo { justify-self: start; }
    .site-header__top .header-actions { grid-column: 2; }

    .logo { gap: var(--space-2); }
    .logo__mark { height: 38px; }
    .logo__wordmark { height: 30px; }

    .home-hero { min-height: 0; padding-block: var(--space-20) var(--space-16); }
    .hero-float { position: static; display: inline-flex; margin-top: var(--space-6); }

    .location-hero .container { grid-template-columns: 1fr; gap: var(--space-8); }
    .location-diptych { grid-template-columns: 1fr; }
    .diptych-panel { min-height: 380px; }

    .service-layout,
    .pricing-layout { grid-template-columns: 1fr; }

    .service-sidebar,
    .pricing-aside { position: static; }

    .split,
    .split--reverse { grid-template-columns: 1fr; gap: var(--space-8); }
    .split--reverse > .split__media { order: 0; }

    .section-head--split { grid-template-columns: 1fr; align-items: start; }

    .feature-row { grid-template-columns: 1fr; gap: var(--space-8); }
    .feature-row:nth-child(even) .feature-row__media { order: 0; }
    .feature-row__media { max-width: 320px; }

    .cta-banner__grid { grid-template-columns: 1fr; gap: var(--space-10); }
    .cta-banner__media { max-width: 420px; justify-self: center; width: 100%; }

    .visit-grid { grid-template-columns: 1fr; }
    .membership-tiers { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
    .occasions-grid, .amount-map, .values-grid { grid-template-columns: repeat(2, 1fr); }

    .hub-service { grid-template-columns: 160px minmax(0, 1fr); }
    .hub-service__aside {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }

    /* Ripple rings shrink so they never crowd stacked hero content */
    .hero-motif__ring { width: 380px; height: 380px; margin-top: -190px; right: -160px; }
}

@media (max-width: 768px) {
    .section { padding-block: var(--space-16); }
    .section--tight { padding-block: var(--space-12); }

    /* Ribbon slims down: locations + phone only */
    .ribbon .open-chip, .ribbon .open-chip + .ribbon__dot { display: none; }

    .grid--2, .grid--3 { grid-template-columns: 1fr; }
    .reviews-grid { grid-template-columns: 1fr; }
    .contact-locations { grid-template-columns: 1fr; }
    .direction-cards { grid-template-columns: 1fr; }

    .page-hero { padding-block: var(--space-10) var(--space-8); }

    .btn-row .btn { flex: 1 1 auto; }

    /* Mobile CTA bar appears; reserve space so it never covers content */
    .mobile-cta-bar { display: grid; }
    body { padding-bottom: calc(var(--cta-bar-height) + env(safe-area-inset-bottom, 0px)); }

    .contact-form-wrap { padding: var(--space-6); }

    /* Stack for real: the 1024px block places the aside in column 2, which
       silently creates an implicit second column here and stops the row from
       stacking at all (the media track then starves to the icon's width and
       its min-height stretches it alongside the paragraph). */
    .hub-service { grid-template-columns: 1fr; gap: var(--space-4); }
    .hub-service__aside { grid-column: auto; }
    .hub-service__media { max-width: 300px; }
    /* A photo earns its place stacked; an icon-on-gradient placeholder does not
       — the heading already carries the same icon. */
    .hub-service__media--empty { display: none; }

    .footer-naps { gap: var(--space-8); }
}

@media (max-width: 480px) {

    .container { padding-inline: var(--space-4); }

    /* Shorten the header "Book Online" → "Book" so it clears the logo */
    .header-actions .btn-word { display: none; }

    .occasions-grid, .amount-map, .values-grid { grid-template-columns: 1fr; }

    .home-hero__trust { gap: var(--space-2) var(--space-4); }

    .trust-strip { gap: var(--space-3) var(--space-5); }

    .price-row { padding-inline: var(--space-4); }
    .price-table__heading, .price-table__note { padding-inline: var(--space-4); }
    /* Long labels (e.g. cryo session rows) wrap instead of forcing overflow */
    .price-row__duration { white-space: normal; }

    .ribbon { font-size: 0.65rem; }
    .diptych-panel { min-height: 340px; }
    .diptych-panel__body { padding: var(--space-6); }
}