/* ═══════════════════════════════════════════════════════════════════════════
   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__text { font-size: var(--text-lg); }

    .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); }

    .hub-service { grid-template-columns: 1fr; gap: var(--space-4); }
    .hub-service__media { max-width: 300px; }

    .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); }
}