/* =========================================================================
   Uprise Chiropractic — Responsive layer
   Breakpoints match Tailwind: sm 640 · md 768 · lg 1024 · xl 1280
   - Desktop (≥1024): no overrides — design renders exactly as authored
   - Tablet  (768–1023): tighter padding, 3-col grids → 2-col where it helps
   - Mobile  (<768):    single column, hamburger nav, finger-friendly targets
   ========================================================================= */

/* ---------- Touch-friendly minimums on every screen size ---------------- */
button, a.upr-btn, .upr-mobile-book {
  min-height: 44px;
}

/* Mobile menu (hidden by default; CSS shows it under lg) ---------------- */
.upr-mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--cream);
  z-index: 50;
  padding: 96px 24px 32px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 220ms var(--ease-rise), transform 220ms var(--ease-rise);
  display: none;
}
.upr-mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.upr-mobile-menu-inner {
  max-width: 480px;
  margin: 0 auto;
}

/* =========================================================================
   md — Tablet (≤ 1023px): start collapsing layouts
   ========================================================================= */
@media (max-width: 1023px) {
  /* Hide desktop links; show hamburger */
  .upr-nav-desktop { display: none !important; }
  .upr-burger      { display: inline-flex !important; }
  .upr-mobile-menu { display: block; }

  /* Slightly tighter section padding */
  section, .upr-container, .upr-container-wide {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* Reduce display headings on tablet */
  h1 { font-size: clamp(36px, 5.4vw, 48px) !important; }
  h2 { font-size: clamp(28px, 4.4vw, 38px) !important; }

  /* 3-column → 2 column where it helps */
  .upr-persona-grid,
  .upr-how-grid,
  .upr-usp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Two-column splits → stack */
  .upr-norris-grid,
  .upr-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Footer 3-col → 2-col */
  footer .upr-footer-cols,
  footer > div > div > div[style*="grid-template-columns: 1.4fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}

/* =========================================================================
   sm — Mobile (≤ 767px): single column everywhere, tight padding
   ========================================================================= */
@media (max-width: 767px) {
  /* Robust split-layout collapse — every grid marked .upr-split goes vertical */
  .upr-split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* When the image was on the RIGHT, keep it after the text on mobile so the page reads:
     copy first, image second. When marked split-reverse, swap. */
  .upr-split-reverse > *:first-child { order: 2; }
  .upr-split-reverse > *:last-child  { order: 1; }
  /* Map block — drop its tall min-height so it doesn't dominate the page */
  .upr-split [style*="min-height: 480px"],
  .upr-split [style*="minHeight: 480"] {
    min-height: 280px !important;
  }
  /* About page Contact "signature card" — let it sit naturally under the photo */
  .upr-split [style*="position: absolute"][style*="bottom: -28"] {
    position: static !important;
    margin: -32px 16px 0 !important;
  }

  /* Services page — six cards into a single column */
  .upr-services-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Footer — restack into ONE column with proper breathing room */
  .upr-footer-cols {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding-bottom: 8px;
  }
  /* Inside the footer's first column, the social row needs a top margin reset */
  .upr-footer-cols > div:first-child > div:last-child {
    margin-top: 18px !important;
  }
  /* Suburb SEO row — give links more vertical breathing room */
  footer .upr-footer-cols ~ div[style*="margin-top: 48px"],
  footer [style*="Serving Byford"] {
    line-height: 2 !important;
  }
  /* Trust / legal row — wrap nicely */
  footer > div > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding-bottom: 24px !important;
  }
  footer > div > div:last-child > div:first-child { gap: 10px !important; flex-wrap: wrap; }
  /* Tighter side padding, but never edge-to-edge */
  section, .upr-container, .upr-container-wide, .upr-container-narrow {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Section vertical padding */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Body text floor — never below 16px */
  body, p, li { font-size: 16px !important; }

  /* Display & headings — readable, not chunky */
  h1                    { font-size: clamp(34px, 8vw, 42px) !important; line-height: 1.08 !important; }
  h2, .upr-display-h2   { font-size: clamp(28px, 7vw, 34px) !important; line-height: 1.12 !important; }
  h3                    { font-size: 20px !important; }

  /* Hero — readable, less padded, allow shorter min-height */
  .upr-hero-grid {
    padding: 56px 20px !important;
  }
  section[style*="minHeight: 'calc(100vh - 112px)'"],
  section[style*="min-height: calc(100vh - 112px)"] {
    min-height: 64vh !important;
  }

  /* Hero headlines: shrink the bold + italic pair so they don't blow out */
  h1 > span:first-child  { font-size: clamp(30px, 8vw, 40px) !important; }
  h1 > span:nth-child(2) { font-size: clamp(20px, 5.4vw, 26px) !important; }

  /* Persona / journey / USP / norris — all single column */
  .upr-persona-grid,
  .upr-how-grid,
  .upr-usp-grid,
  .upr-norris-grid,
  .upr-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Footer columns → single column stack */
  footer .upr-footer-cols,
  footer > div > div > div[style*="grid-template-columns: 1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  footer > div > div > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Footer bottom legal row — wrap cleanly */
  footer > div > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Any inline-styled multi-column grid → collapse to 1 column on mobile.
     Permissive: matches at ANY depth (not just direct children of <section>),
     covers all the common ratios used across the site. */
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 0.8fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: auto 1fr auto"],
  [style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Book page — practitioner strip (Dr Norris + status pill) needs to stack +
     re-align text to the left so the "Currently / Accepting new patients"
     block doesn't clip off the right edge. */
  section[style*="padding: 8px 32px"] > div {
    grid-template-columns: 1fr !important;
    text-align: center;
    padding: 24px 20px !important;
  }
  section[style*="padding: 8px 32px"] > div > div:first-child {
    margin: 0 auto;
  }
  section[style*="padding: 8px 32px"] > div > div:last-child {
    justify-content: center !important;
  }
  section[style*="padding: 8px 32px"] > div > div:last-child > div {
    text-align: center !important;
  }
  section[style*="padding: 8px 32px"] > div > div:last-child > div > div:last-child {
    justify-content: center !important;
  }

  /* Book page — "Prefer to call" card needs to stack and align everything left */
  section > div[style*="background: var(--teal-700)"][style*="grid-template-columns"] {
    padding: 40px 28px !important;
    text-align: left;
  }
  section > div[style*="background: var(--teal-700)"] a[href^="tel:"] {
    font-size: 32px !important;
    line-height: 1.1 !important;
    word-break: keep-all;
  }

  /* Credentials 3-col → 1-col */
  section [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Announcement strip — keep dot + book link, hide middle separator + address */
  .upr-announce-sep:nth-of-type(1),
  .upr-announce-sep:nth-of-type(2),
  .upr-announce-addr { display: none !important; }
  .upr-announce { font-size: 11px !important; padding: 7px 16px !important; gap: 12px !important; }

  /* Header padding tighter */
  .upr-header-inner { padding: 0 20px !important; }

  /* Logo: hide "CHIROPRACTIC" tagline on small to free space */
  .upr-header-inner .upr-tagline:not(.upr-anim) { display: none; }

  /* Hero pill — keep tappable, full width inside hero */
  section > div > div > div[style*="background: rgba(247, 243, 237, 0.08)"] {
    width: 100%;
  }

  /* Mobile book bar shows */
  .upr-mobile-book { display: flex !important; }

  /* Reserve space for the floating mobile book bar at the very bottom */
  footer { padding-bottom: 88px !important; }

  /* Disable hover transforms on mobile — they cause stuck states with touch */
  .upr-lift:hover { transform: none !important; }
  article:hover, .upr-persona-card:hover, [class*="upr-card"]:hover {
    transform: none !important;
    box-shadow: 0 2px 12px rgba(31,94,94,0.06) !important;
  }

  /* All images / videos scale */
  img, video, picture { max-width: 100% !important; height: auto; }

  /* Contact card — let long emails wrap; centre & shrink the CTA so it fits */
  .upr-split a[href^="mailto:"],
  .upr-split a[href^="tel:"] {
    word-break: break-all;
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  /* Buttons inside narrow cards/containers — allow wrap on mobile */
  .upr-split button,
  section button {
    white-space: normal !important;
    max-width: 100%;
    text-align: center;
    line-height: 1.2 !important;
  }
  /* Contact / Book page hero h1 — bring large clamp(48px, ...) headlines down.
     Targets any h1 with inline clamp() that starts at 40px+ (those overflow on phones). */
  section h1[style*="clamp(48px"],
  section h1[style*="clamp(40px"],
  section h1[style*="clamp(42px"],
  section h1[style*="clamp(44px"],
  section h1[style*="clamp(46px"] {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.1 !important;
  }
  /* Big h2 inside dark CTA cards (e.g. "Give us a ring.") — also shrink */
  section h2[style*="fontSize: 52"],
  section h2[style*="font-size: 52"],
  section h2[style*="fontSize: 48"],
  section h2[style*="font-size: 48"] {
    font-size: 30px !important;
    line-height: 1.1 !important;
  }
  /* Big phone-number link in CTA card — shrink so it fits a 320-380px viewport */
  section a[style*="fontSize: 44"][href^="tel:"],
  section a[style*="font-size: 44"][href^="tel:"],
  section a[style*="fontSize: 36"][href^="tel:"] {
    font-size: 30px !important;
    line-height: 1.1 !important;
  }
  /* But the hero video is sized via objectFit:cover — preserve that */
  section video[autoplay] { height: 100% !important; }

  /* Tables wrap into horizontal scrolling */
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Anchor minimum hit area inside nav menu */
  .upr-mobile-menu nav a { min-height: 56px; }

  /* Book page mobile reorder — surface live availability calendar above hero */
  .upr-book-main {
    display: flex !important;
    flex-direction: column !important;
  }
  #upr-book-live {
    order: -1 !important;
    padding-top: 32px !important;
  }
  /* Book hero gets a tighter top now that calendar sits above it */
  .upr-book-hero { padding-top: 32px !important; }

  /* =================================================================
     FINAL MOBILE POLISH — additional fixes from deep audit
     ================================================================= */

  /* Grid ratios still not covered */
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 3fr"],
  [style*="grid-template-columns: 3fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Book page — 8-column time grids (slots) → 3 columns */
  [style*="grid-template-columns: repeat(8, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* 4 or 5 column grids → 2 column */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 6 col → 2 col */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Calendar 7-col stays 7-col but shrink text */
  [style*="grid-template-columns: repeat(7, 1fr)"] button {
    font-size: 13px !important;
  }

  /* h2 fontSize 44 (FAQ heading on book page) */
  section h2[style*="fontSize: 44"],
  section h2[style*="font-size: 44"],
  section h2[style*="fontSize: 40"],
  section h2[style*="font-size: 40"],
  section h2[style*="fontSize: 36"],
  section h2[style*="font-size: 36"] {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  /* h3 fontSize >24 — shrink */
  section h3[style*="fontSize: 28"],
  section h3[style*="font-size: 28"],
  section h3[style*="fontSize: 26"],
  section h3[style*="font-size: 26"] {
    font-size: 19px !important;
  }
  /* Confirmation h3 fontSize 44 */
  section h3[style*="fontSize: 44"],
  section h3[style*="font-size: 44"] {
    font-size: 24px !important;
  }
  /* Raw h1 fontSize: 88 on book hero */
  section h1[style*="fontSize: 88"],
  section h1[style*="font-size: 88"],
  section h1[style*="fontSize: 76"],
  section h1[style*="font-size: 76"] {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.1 !important;
  }

  /* ClinikoMock huge dimensions */
  [style*="minHeight: 720"],
  [style*="min-height: 720"],
  [style*="minHeight: 580"],
  [style*="min-height: 580"] { min-height: 0 !important; }

  /* Padding-heavy containers — tighten on mobile */
  [style*="padding: '40px 48px'"],
  [style*="padding: 40px 48px"],
  [style*="padding: '56px 48px'"],
  [style*="padding: 56px 48px"] {
    padding: 28px 18px !important;
  }
  [style*="padding: '20px 32px'"],
  [style*="padding: 20px 32px"] {
    padding: 16px 18px !important;
  }

  /* About signature card minWidth */
  .upr-split [style*="minWidth: 220"],
  .upr-split [style*="minWidth: 200"] {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Italic quote / pull-quote sized 24 — shrink */
  section p[style*="fontSize: 24"],
  section p[style*="font-size: 24"],
  aside p[style*="fontSize: 24"],
  aside p[style*="font-size: 24"] {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
  /* Big body paragraphs sized 22 (intros / sub-leads) */
  section p[style*="fontSize: 22"],
  section p[style*="font-size: 22"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Map / popover overlays — let content wrap */
  [style*="rgba(247,243,237,0.96)"][style*="position: absolute"],
  [style*="rgba(19,62,62,0.78)"],
  [style*="rgba(19,62,62,0.6)"],
  [style*="rgba(19, 62, 62, 0.78)"],
  [style*="rgba(19, 62, 62, 0.6)"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Pills / hero badges with whiteSpace:nowrap → allow wrap on small viewports */
  [style*="rgba(247, 243, 237, 0.08)"] [style*="whiteSpace: 'nowrap'"],
  [style*="rgba(247, 243, 237, 0.08)"] [style*="white-space: nowrap"] {
    white-space: normal !important;
    flex-wrap: wrap !important;
  }

  /* Contact card big-value text (non-tel/mailto) */
  .upr-split a[style*="fontSize: 22"],
  .upr-split div[style*="fontSize: 22"],
  .upr-split a[style*="font-size: 22"] {
    font-size: 17px !important;
    word-break: break-word;
  }

  /* Service / persona card h2 sized 30 (services grid) */
  article h2[style*="fontSize: 30"],
  article h2[style*="font-size: 30"],
  section h2[style*="fontSize: 30"],
  section h2[style*="font-size: 30"] {
    font-size: 22px !important;
  }

  /* =================================================================
     STATIC SEO PAGES — chiropractor-*/index.html + services/*/index.html
     These pages have their own <style> blocks not under responsive.css's
     section selectors. Target their classes directly.
     ================================================================= */
  .seo-nav { padding: 0 18px !important; }
  .seo-breadcrumb { padding-left: 18px !important; padding-right: 18px !important; }
  .seo-hero { padding: 56px 18px 72px !important; }
  .seo-body, .seo-bullets, .seo-cta-block { padding: 56px 18px !important; }
  /* .h2 is a <div class="h2"> not a real h2 — global rule misses it */
  .seo-cta-block .h2 { font-size: clamp(26px, 7vw, 32px) !important; line-height: 1.1 !important; }
  h1.seo-h1 { font-size: clamp(28px, 8vw, 38px) !important; }
}

/* Extra-small phones: shrink the static-page nav so logo + CTA both fit */
@media (max-width: 380px) {
  .seo-nav a.cta { padding: 8px 12px !important; font-size: 11px !important; letter-spacing: 0.04em !important; }
  .seo-logo-text .wm { font-size: 18px !important; }
  .seo-logo-text .tg { display: none; }
  .seo-nav-inner { gap: 8px; }
}

/* =========================================================================
   xs — Very small phones (≤ 380px): one more squeeze
   ========================================================================= */
@media (max-width: 380px) {
  section, .upr-container, .upr-container-wide, .upr-container-narrow {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h1 { font-size: 30px !important; }
  h2 { font-size: 26px !important; }
  .upr-announce { font-size: 10.5px !important; padding: 6px 12px !important; }
}

/* =========================================================================
   Print — strip chrome
   ========================================================================= */
@media print {
  header, footer, .upr-mobile-book, .upr-announce { display: none !important; }
  section { padding: 24px 0 !important; break-inside: avoid; }
}

/* =========================================================================
   Tailwind-style utility helpers — for future migration
   Add classes like `lg:cols-3 md:cols-2 sm:cols-1` to opt into responsive grids
   ========================================================================= */
.cols-1 { grid-template-columns: 1fr !important; }
.cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

@media (min-width: 768px) {
  .md\:cols-1 { grid-template-columns: 1fr !important; }
  .md\:cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .md\:cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .md\:flex   { display: flex !important; }
  .md\:hidden { display: none !important; }
}
@media (min-width: 1024px) {
  .lg\:cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .lg\:cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .lg\:cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .lg\:flex   { display: flex !important; }
  .lg\:hidden { display: none !important; }
}