/* =========================================================================
   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;
  }

  /* About hero (split layout) */
  section > div[style*="grid-template-columns: 1.1fr 1fr"],
  section > div[style*="grid-template-columns: 1.3fr 1fr"],
  section > div[style*="grid-template-columns: 1.2fr 1fr"],
  section > div[style*="grid-template-columns: 0.8fr 1.2fr"],
  section > div[style*="grid-template-columns: 1fr 1fr"],
  section > div[style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* 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; }
  /* 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; }
}

/* =========================================================================
   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; }
}