/* ─────────────────────────────────────────────────────────────
   Global overflow guard – prevents any overflowing element from
   making the page wider than the viewport.
   • html: clip transfers to the viewport — no horizontal scroll
     possible at all, even via touch momentum.
   • body: max-width caps the body at the viewport width.
   • site-header / site-footer are outside .section so they get
     their own clip here.
───────────────────────────────────────────────────────────── */
html {
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

.site-header,
.site-footer {
  overflow-x: clip;
}

/* ─────────────────────────────────────────────────────────────
   Tablet / large-phone  ≤ 1024px
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --header-h: 108px;
  }

  .logo {
    margin-left: -14px;
  }

  .logo-img {
    width: clamp(126px, 15vw, 154px);
    height: clamp(72px, 8.8vw, 90px);
  }

  .logo-inline-text {
    font-size: 0.92rem;
  }

  .hero.hero-home {
    min-height: 76vh;
  }

  .hero-content {
    padding: 1.25rem 0;
  }

  .hero-copy {
    max-width: 100%;
  }

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

  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .service-card:not(.is-featured) .service-card-media img {
    height: 260px;
    min-height: unset;
  }

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

  .service-tile-media img {
    height: 260px;
    min-height: unset;
  }

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

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

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

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

  .google-reviews-layout {
    grid-template-columns: 1fr;
  }

  .google-review-card {
    flex-basis: calc(50% - 0.4rem);
    min-width: 240px;
  }

  .nav-list {
    background: transparent;
    border: 0;
    padding: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   Mobile  ≤ 860px
───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root {
    --header-h: 88px;
  }

  .header-inner {
    padding-inline: 0;
  }

  .logo {
    margin-left: -8px;
  }

  .logo-img {
    width: clamp(102px, 25vw, 128px);
    height: clamp(58px, 13.2vw, 74px);
  }

  .logo-inline-text {
    font-size: 0.84rem;
  }

  .hero.hero-home {
    min-height: 70vh;
  }

  .hero-copy h1 {
    max-width: 100%;
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 12px auto 12px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(206, 221, 226, 0.95);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 0.9rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    z-index: 950;
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

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

  /* All 2-column and 3-column grids → single column */
  .grid-2,
  .grid-3,
  .split,
  .about-preview-split {
    grid-template-columns: 1fr;
  }

  .split-reverse {
    direction: ltr;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

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

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

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem 0;
  }

  .google-review-card {
    flex-basis: 100%;
    min-width: 100%;
  }

  .cta-final-inner,
  .cta-inline-inner {
    align-items: flex-start;
    gap: 1.25rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Reduce section padding on mid-range mobile */
  .section {
    padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  }

  /* Remove extra hero-content inner padding on mobile */
  .hero-content {
    padding: 0;
  }

  /* Section head slightly tighter */
  .section-head {
    margin-bottom: 1.5rem;
  }

  /* Card padding slightly tighter */
  .card-elevated,
  .card-soft {
    padding: 1.1rem;
  }

  /* About preview image: smaller max-height on mobile */
  .about-preview-img {
    max-height: min(400px, 50vh);
  }

  /* frame-rounded: smaller clamp on mobile */
  .frame-rounded img {
    height: clamp(220px, 56vw, 340px);
  }

  /* contact gallery: single column on mobile */
  .contact-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .contact-gallery-item--wide {
    grid-column: span 2;
  }

  /* Trust row single column */
  .trust-row {
    grid-template-columns: 1fr;
  }

  /* ── Google Reviews: force block layout so cards never overflow ── */
  .google-reviews-layout {
    display: block;
  }

  .google-summary {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 1rem;
  }

  .google-slider-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Button must stay inside the summary card */
  .google-review-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
    white-space: normal;
    word-break: break-word;
  }

  /* Prevent any single element from blowing out the page width */
  .section,
  .container,
  .card,
  .service-card,
  .therapy-card,
  .blog-card,
  .testimonial,
  .process-step,
  .google-summary,
  .google-slider-wrap {
    max-width: 100%;
    min-width: 0;
  }

  /* Doctor badge: keep absolute but tighten position on mobile */
  .doctor-badge {
    right: 1rem;
    bottom: 1rem;
  }

  .doctor-popup {
    bottom: calc(100% + 10px);
    top: auto;
    right: 0;
    left: auto;
    min-width: unset;
    width: max-content;
    max-width: min(280px, calc(100vw - 2rem));
  }
}

/* ─────────────────────────────────────────────────────────────
   Small phone  ≤ 480px
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --header-h: 72px;
  }

  /* Tighten container padding on narrow screens */
  .container {
    width: min(var(--container), calc(100% - 28px));
  }

  /* ── Header / logo ── */
  .logo {
    margin-left: 0;
    gap: 0.3rem;
  }

  .logo-img {
    width: clamp(72px, 18vw, 90px);
    height: clamp(40px, 10vw, 52px);
  }

  /* Hide the "Sports / Physiotherapy" text on very small screens
     to prevent header overflow – the logo image is sufficient */
  .logo-inline-text {
    display: none;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
  }

  /* ── Hero ── */
  .hero.hero-home {
    min-height: 55vh;
  }

  .hero-copy h1 {
    font-size: clamp(1.8rem, 7vw + 0.25rem, 2.4rem);
    max-width: 100%;
  }

  .hero-sub {
    font-size: 0.95rem;
    max-width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .trust-row {
    font-size: 0.9rem;
    gap: 0.45rem;
  }

  /* ── Section spacing ── */
  .section {
    padding: clamp(2rem, 5vw, 2.75rem) 0;
  }

  .section-head {
    margin-bottom: 1.25rem;
  }

  /* ── Page hero: reduce padding on small screens ── */
  .page-hero {
    padding-top: clamp(2.5rem, 5vw, 3rem);
    padding-bottom: clamp(1.75rem, 3vw, 2.25rem);
  }

  /* ── Service hero: reduce padding on small screens ── */
  .service-hero {
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: 2rem;
  }

  /* ── frame-rounded: even smaller on very small screens ── */
  .frame-rounded img {
    height: clamp(180px, 52vw, 280px);
  }

  /* ── Service card / tile images on very small screens ── */
  .service-card-media img,
  .service-tile-media img {
    height: 200px;
    min-height: unset;
  }

  /* ── Service cards body ── */
  .service-card-body,
  .service-tile-body {
    padding: 1rem;
  }

  /* ── Process steps ── */
  .process-step {
    padding: 1rem;
  }

  /* ── CTA sections ── */
  .cta-final-inner,
  .cta-inline-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 1rem;
  }

  .cta-final-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cta-final-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Google reviews ── */
  .google-review-card {
    flex-basis: 100%;
    min-width: 100%;
  }

  .google-summary {
    padding: 0.85rem;
  }

  .google-slider-wrap {
    padding: 0.85rem;
  }

  /* ── Pills ── */
  .pill-grid {
    gap: 0.45rem;
  }

  .pill {
    font-size: 0.88rem;
    padding: 0.45rem 0.75rem;
  }

  /* ── Footer ── */
  .footer-grid {
    gap: 1.25rem 0;
  }

  /* ── Buttons: full-width on very small screens ── */
  .hero .btn-lg {
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
  }

  /* ── Checklist spacing ── */
  .checklist li {
    font-size: 0.95rem;
  }

  /* ── Contact reviews wrap ── */
  .contact-reviews-wrap {
    padding: 1rem;
  }

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

  .contact-gallery-item--wide {
    grid-column: span 1;
  }

  /* ── Accordion ── */
  .accordion-trigger {
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
  }

  .accordion-panel {
    padding: 0 1rem 0.9rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   Reduced motion
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn {
    transition: none;
  }
}