/* Key-facts grid: the section is bounded top and bottom, with one divider
   between rows — three rules for a 2x2, evenly spaced bands, and no item
   sitting against the line above it. */
[data-m-keyfacts] {
  border-top: 2px solid rgba(45,156,219,0.35);
  border-bottom: 2px solid rgba(45,156,219,0.35);
}
[data-m-keyfacts] > div {
  border-bottom: 2px solid rgba(45,156,219,0.35);
}
/* Final row needs no rule of its own — the grid edge provides it. */
[data-m-keyfacts] > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

/* Category chips scroll sideways at every width; hide the scrollbar. */
[data-m-chiprow] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-m-chiprow]::-webkit-scrollbar {
  display: none;
}

/* Strips run full-bleed, so clip any overshoot instead of letting it scroll the
   page sideways. clip rather than hidden: hidden would make body a scroll
   container and break position: sticky on the header. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* Marquee — all widths */
[data-marquee] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-marquee]::-webkit-scrollbar {
  display: none;
}

/* The Resilience Lab — mobile-only refinements.
   Everything here is inside a max-width query, so the desktop layout is untouched.
   Elements are tagged at runtime by motion.js (data-m-card, data-m-pills, data-m-btnrow). */

@media (max-width: 899px) {

  /* --- Readability: phone reading distance needs a larger minimum than a
         desktop column does. Body copy never drops below 16px, and line-height
         opens up so paragraphs are easier to track. --- */
  main p,
  main blockquote,
  main li {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }
  main h2 {
    line-height: 1.2;
  }
  main h3 {
    line-height: 1.3;
  }

  /* --- Room to breathe: more air inside cards and between stacked blocks. --- */
  [data-m-card]:not(:has([data-m-svcbar])) {
    padding: 24px 20px !important;
  }
  [data-m-card]:has([data-m-svcbar]) {
    padding: 0 !important;
  }
  /* Copy runs closer to the card edge so boxes are not needlessly tall. */
  [data-m-card] p {
    max-width: none !important;
  }
  [data-m-card] > p[style*="padding"] {
    padding: 20px !important;
  }
  main section > div {
    row-gap: 40px;
  }

  /* --- Repetitive on mobile: the services CTA appears twice on the homepage,
         once under the benefit trio and again under the service grid. Keep the
         one that follows the grid. --- */
  section[data-screen-label="What we help you do"] a[href="Services.dc.html"],
  section[data-screen-label="What we help you do"] a[href="/services"] {
    display: none !important;
  }

  /* --- Shorter on mobile: show Chiropractic Care, Functional Rehab and Dry
         Needling; the View All Services link below the grid covers the other
         three. Desktop still shows all six. --- */
  [data-m-svcgrid] > a:nth-child(n + 4) {
    display: none !important;
  }

  /* --- Service header bars keep a common height so the colour bands align
         even when a title wraps to two lines. --- */
  [data-m-svcbar] {
    min-height: 62px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* --- Long-form comparison grids do not earn their height on a phone. --- */
  section[data-screen-label="Myths and facts"] {
    display: none !important;
  }

  /* --- Numbered rows in blog tables stack on a phone: the number sits above
         its text instead of squeezing the copy into a narrow column. --- */
  [data-m-numrow] {
    grid-template-columns: 1fr !important;
  }
  [data-m-numrow] > div:first-child {
    padding: 16px !important;
    flex-direction: row !important;
    gap: 12px !important;
    border-bottom: 1px solid var(--border-subtle);
  }
  [data-m-numrow] > div:first-child span:first-child {
    font-size: 1.9rem !important;
  }

  [data-m-chiprow] {
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
  }

  [data-m-keyfacts] {
    grid-template-columns: 1fr !important;
  }
  [data-m-keyfacts] > div {
    padding: 26px 0 !important;
    border-bottom: 2px solid rgba(45,156,219,0.35) !important;
  }
  [data-m-keyfacts] > div:last-child {
    border-bottom: 0 !important;
  }

  /* --- Subscribe box: input stacks above the button on a phone, both full
         width and left-aligned. Overrides the generic button-row centring. --- */
  [data-m-subform] {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  [data-m-subform] input {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  [data-m-subbtn] {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  [data-m-subbtn] [data-m-btn] {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- Card and box text centres ---
     text-align inherits, which is all the centring needs. align-self is only
     re-anchored on the pills/eyebrows that carry an inline flex-start, so
     full-width children (service header bars, line stacks) keep stretching. */
  [data-m-card] {
    text-align: center;
  }
  [data-m-card] span[style*="align-self: flex-start"] {
    align-self: center !important;
  }
  [data-m-card] p,
  [data-m-card] h3,
  [data-m-card] h4 {
    text-align: center;
  }
  /* Meta rows (date · read time) are flex, so they need justify, not align. */
  [data-m-card] span[style*="margin-top: auto"] {
    justify-content: center !important;
  }

  /* --- Buttons: comfortable target size, centred rows --- */
  [data-m-btnrow]:not([data-m-keepleft]) {
    justify-content: center !important;
  }
  [data-m-keepleft] {
    justify-content: flex-start !important;
  }
  [data-m-btn] {
    min-height: 44px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    font-size: 14px !important;
  }

  /* --- Condition pills: one sideways-scrolling row --- */
  [data-m-pills] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* The strip must be pinned to the viewport width, or a nowrap flex row simply
       grows to fit its content and there is nothing left to scroll. */
    width: calc(100% + 48px) !important;
    max-width: calc(100% + 48px) !important;
    min-width: 0 !important;
    /* Full-bleed across the 24px container gutters. Deliberately NOT 100vw:
       that measures the viewport including the scrollbar. */
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 24px;
    padding-right: 24px;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
  }
  [data-m-pills]::-webkit-scrollbar,
  [data-marquee]::-webkit-scrollbar {
    display: none;
  }
  [data-m-pills] > span {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* --- Repetitive-on-mobile content is hidden here, not deleted.
         Desktop keeps everything; these blocks only earn their space on a wide
         layout where they sit side by side. --- */
  section[data-screen-label="Stats"] {
    display: none !important;
  }
  [data-m-svc-kicker] {
    display: none !important;
  }

  /* A flex ancestor sizes to its content's min-content width, which a nowrap
     strip makes enormous. Let those ancestors shrink. */
  main div:has([data-m-pills]) {
    min-width: 0 !important;
  }

  /* --- Review stars centre with the card text --- */
  [data-m-stars] {
    justify-content: center !important;
  }

  /* --- Social circles centre with everything else ---
         The footer column stretches its children, so the row went full width with
         both circles pinned left; the provider row pushed them to the right edge.
         Centre the row itself and stop it stretching. --- */
  div:has(> a[aria-label="Instagram"]),
  div:has(> a[aria-label="Facebook"]) {
    justify-content: center !important;
    align-self: center !important;
    width: auto !important;
  }
  [data-m-ctarow] {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- Footer brand column: one alignment, not three.
         The logo carries an inline align-self: flex-start (design-system placement
         rule), so it has to be overridden explicitly; the tagline needs text-align
         as well as block centring. --- */
  footer > div > div:has(> img[alt="The Resilience Lab"]) {
    align-items: center !important;
    text-align: center !important;
  }
  footer img[alt="The Resilience Lab"] {
    align-self: center !important;
  }

  /* --- Nothing may claim a fixed width wider than the content column ---
         Desktop uses min-width / minmax floors around 280-320px to keep photos
         and cards from getting too narrow. On a 320px screen the content column
         is only 272px, so those floors force horizontal scroll. Release them and
         let every fluid grid stack. */
  main [style*="min-width: 300px"],
  main [style*="min-width: 320px"],
  main [style*="min-width: 280px"] {
    min-width: 0 !important;
  }
  main div[style*="minmax"] {
    grid-template-columns: 1fr !important;
  }

  /* --- Headings that are pinned to fixed line breaks on desktop are released
         here; a nowrap span is wider than a 320px screen and pushes the whole
         page into horizontal scroll. --- */
  main h2 span[style*="nowrap"] {
    white-space: normal !important;
  }

  /* --- Hero headline: hold three lines down to 320px ---
     The floor has to stay low enough that the vw term still governs on a 320px
     screen, or "Perform better." overflows onto a fourth line. */
  section[data-screen-label="Hero"] h1 {
    font-size: clamp(1.6rem, 8.6vw, 3.1rem) !important;
    line-height: 1.06;
  }

  /* --- Blog post bodies read left-aligned on mobile, headings included.
         Centred headings over multi-line prose give every line a different
         start point, which is the opposite of what long-form needs. --- */
  [data-m-post],
  [data-m-post] h2,
  [data-m-post] h3,
  [data-m-post] p,
  [data-m-post] figcaption,
  [data-m-post] blockquote {
    text-align: left !important;
  }
  /* Cards sitting inside a post body (clinical notes, callouts) follow the
     prose, not the centred card rule used on marketing pages. */
  [data-m-post] [data-m-card],
  [data-m-post] [data-m-card] p,
  [data-m-post] [data-m-card] h3,
  [data-m-post] [data-m-card] span {
    text-align: left !important;
    align-self: stretch !important;
  }
}

/* Reduced motion: the pill strip stays manually scrollable, it just never auto-advances.
   (The pause/resume logic lives in motion.js.) */