/* =========================================================================
   Uprise Chiropractic — Professional mobile layer (v3, 2026-05-21)
   Mobile-first, aggressive overrides. Loads AFTER responsive.css to win
   specificity. Designed to make every page feel professional on 320-430px.
   ========================================================================= */

@media (max-width: 767px) {

  /* =====================================================================
     UNIVERSAL: prevent any horizontal scroll, kill any oversize element
     ===================================================================== */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  *, *::before, *::after { max-width: 100% !important; }
  img, video, picture, svg, iframe, canvas, embed, object { max-width: 100% !important; height: auto; }
  pre, code { white-space: pre-wrap !important; word-break: break-word !important; }

  /* Tighter section padding — bring side margins to a phone-friendly 16-20px */
  section, .upr-container, .upr-container-wide, .upr-container-narrow,
  [class*="container"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* =====================================================================
     TYPOGRAPHY — single source of truth, beats all inline styles
     ===================================================================== */
  h1, h1 * {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
  }
  h2, h2 * {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
  }
  h3, h3 * {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.2 !important;
  }
  /* Custom "h2 div" (e.g. .seo-cta-block .h2 — a div with .h2 class) */
  .seo-cta-block .h2,
  .seo-cta-block .h2 * {
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1.1 !important;
  }
  /* Hero-style display headings inside seo-hero */
  .seo-h1, h1.seo-h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.08 !important; }

  /* Body text — never below 15.5, never crazy big */
  p, li, blockquote {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  /* Override 20-26 sub-leads and italic quotes down to readable */
  p[style*="fontSize: 18"],
  p[style*="font-size: 18"],
  p[style*="fontSize: 19"],
  p[style*="font-size: 19"],
  p[style*="fontSize: 20"],
  p[style*="font-size: 20"],
  p[style*="fontSize: 22"],
  p[style*="font-size: 22"],
  p[style*="fontSize: 24"],
  p[style*="font-size: 24"] {
    font-size: 16px !important;
  }

  /* =====================================================================
     GRIDS — collapse ALL multi-column grids regardless of ratio or depth
     ===================================================================== */
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Keep specific grids that NEED multi-column (calendar, time slots) */
  [style*="grid-template-columns: repeat(7, 1fr)"],
  [style*="grid-template-columns: 'repeat(7, 1fr)'"] {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
  }
  [style*="grid-template-columns: repeat(7, 1fr)"] button {
    font-size: 12px !important;
    padding: 4px 0 !important;
  }
  /* 8-col time slots → 3 col is more tappable */
  [style*="grid-template-columns: repeat(8, 1fr)"],
  [style*="grid-template-columns: 'repeat(8, 1fr)'"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* =====================================================================
     CONTACT PAGE — hero, card values, map overlay
     ===================================================================== */
  .contact-hero { padding: 48px 18px 24px !important; }
  .contact-hero-h1 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
  }
  .contact-hero-lede {
    font-size: 15px !important;
    margin-top: 16px !important;
    line-height: 1.55 !important;
  }
  .contact-card { padding: 20px !important; gap: 16px !important; }
  .contact-card-row { gap: 12px !important; align-items: flex-start !important; }
  .contact-card-row > div:first-child { width: 36px !important; height: 36px !important; }
  .contact-card-val,
  .contact-card-val * {
    font-size: 16px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    letter-spacing: 0 !important;
  }

  /* =====================================================================
     BOOK PAGE — every section properly sized for phones
     ===================================================================== */
  /* Hero */
  .upr-book-hero { padding: 40px 18px 32px !important; }
  .upr-book-hero h1 { font-size: clamp(30px, 9vw, 42px) !important; line-height: 1.05 !important; }

  /* Practitioner strip — stack vertically with centred content */
  .upr-practitioner { padding: 16px 18px !important; }
  .upr-practitioner-card {
    grid-template-columns: 1fr !important;
    padding: 24px 20px !important;
    gap: 16px !important;
    text-align: center !important;
  }
  .upr-practitioner-photo { margin: 0 auto !important; }
  .upr-practitioner-info { text-align: center !important; }
  .upr-practitioner-info > div:nth-child(3) { /* the gold rule */
    margin: 8px auto 6px !important;
  }
  .upr-practitioner-status { justify-content: center !important; }
  .upr-practitioner-status > div { text-align: center !important; }
  .upr-practitioner-status > div > div:last-child {
    justify-content: center !important;
  }

  /* Prefer-to-Call card */
  .upr-call-card {
    grid-template-columns: 1fr !important;
    padding: 32px 24px !important;
    gap: 24px !important;
    text-align: left;
  }
  .upr-call-card-text h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  .upr-call-card-cta a[href^="tel:"] {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.1 !important;
  }
  .upr-call-card-bg { display: none !important; }

  /* =====================================================================
     ABOUT PAGE — fix signature card overlap and big quotes
     ===================================================================== */
  .upr-split [style*="position: absolute"][style*="bottom: -28"] {
    position: static !important;
    margin: -32px 16px 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  aside[style*="border-left"] p, aside p {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  /* =====================================================================
     BUTTONS — never overflow, always wrap inside narrow cards
     ===================================================================== */
  button {
    white-space: normal !important;
    max-width: 100% !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }
  /* Touch-friendly minimum */
  a.upr-btn, button { min-height: 44px !important; }

  /* =====================================================================
     HEADER / NAV / FOOTER — already covered by responsive.css, redo for cache bust
     ===================================================================== */
  .upr-header-inner { padding: 0 16px !important; }
  .upr-nav-desktop { display: none !important; }
  .upr-burger { display: inline-flex !important; }
  .upr-mobile-menu { display: block; }
  .upr-mobile-book { display: flex !important; }
  footer { padding-bottom: 88px !important; }
  .upr-announce { font-size: 11px !important; padding: 7px 14px !important; gap: 10px !important; }
  .upr-announce-sep, .upr-announce-addr { display: none !important; }

  /* =====================================================================
     STATIC SEO PAGES — tighter padding, smaller nav
     ===================================================================== */
  .seo-nav { padding: 0 16px !important; height: 56px !important; }
  .seo-nav-inner { gap: 12px !important; }
  .seo-breadcrumb { padding: 18px 16px 0 !important; font-size: 11px !important; }
  .seo-hero { padding: 48px 18px 64px !important; }
  .seo-hero p.intro { font-size: 15px !important; line-height: 1.55 !important; margin-bottom: 28px !important; }
  .seo-body, .seo-bullets, .seo-cta-block { padding: 48px 18px !important; }
  .seo-body p:first-of-type { font-size: 16px !important; line-height: 1.5 !important; }
  .seo-body p { font-size: 15.5px !important; }
  .seo-bullets ul { gap: 12px !important; }
  .seo-bullets li { font-size: 15px !important; padding-left: 28px !important; }
  .seo-cta { padding: 14px 22px !important; font-size: 13px !important; }
  .seo-cta-block p { font-size: 15px !important; }
  .seo-footer-inner { gap: 16px !important; font-size: 13px !important; }
  .seo-footer a { margin-left: 0 !important; margin-right: 16px !important; }

  /* Extra small screens: shrink "Book online 24/7" CTA in nav */
  .seo-nav a.cta {
    padding: 8px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
  }

  /* =====================================================================
     OVERLAYS / FLOATING CARDS — anything absolute with right/left/bottom
     ===================================================================== */
  [style*="position: absolute"][style*="right: -"] {
    right: -10px !important;
  }
  [style*="position: absolute"][style*="left: -"] {
    left: -10px !important;
  }

  /* Map / popover overlays wrap content */
  iframe[src*="maps.google"] { min-height: 320px !important; }

  /* =====================================================================
     LONG WORD-BREAKS — emails, URLs, addresses
     ===================================================================== */
  a[href^="mailto:"], a[href^="tel:"], a[href^="http"] {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  /* But tel: shouldn't break apart digits */
  a[href^="tel:"] { word-break: keep-all !important; white-space: nowrap !important; }
}

/* Extra-small phones (≤380px): one more squeeze */
@media (max-width: 380px) {
  h1, h1 * { font-size: clamp(24px, 8vw, 32px) !important; }
  h2, h2 * { font-size: clamp(20px, 6.5vw, 26px) !important; }
  .upr-book-hero h1 { font-size: clamp(26px, 9vw, 34px) !important; }
  .contact-hero-h1 { font-size: clamp(24px, 8vw, 32px) !important; }
  .seo-cta-block .h2 { font-size: 22px !important; }
  .seo-nav .seo-logo-text .wm { font-size: 17px !important; }
  .seo-nav .seo-logo-text .tg { display: none !important; }
  .seo-nav a.cta { padding: 7px 10px !important; font-size: 10.5px !important; }
}