/* =============================================================================
   MODULE · b-column — the editorial two-track passage

   THE MOST-USED BLOCK ON THE SITE: 89 sections, 85 of them in this default
   shape. It is the body of every service and category page.

   REBUILT 13 Aug 2026 from a single column to a two-track grid.

   What was wrong. The block was one flex column capped at --measure — about
   620px — sitting left-aligned inside a 1200px container. That left roughly
   580px of empty cream to its right on every one of those 85 sections, and it
   is the single biggest reason the site read as undesigned: a narrow ribbon of
   text floating in a wide field, repeated down every page. Measured across the
   whole site, the container was using a little over half its own width.

   What it is now. The label and the heading take a left rail; the prose takes
   the wider right track and keeps its own --measure cap so the line length is
   unchanged (about 64 characters at 1440). Nothing about readability moves —
   the page simply stops being mostly margin, and the heading gains a column of
   its own to sit in, which is what makes it read as editorial rather than as a
   paragraph with a big first line.

   NO MARKUP CHANGED. The block already emitted eyebrow, heading and body as
   siblings, so all 85 sections adopt this without touching an instance file —
   which is also what keeps it portable: in WordPress this is one group with two
   inner columns, and the pattern stays self-contained.

   The explicit two-row track is load-bearing: it gives `grid-row: 1 / -1` a
   real end line to reach, so the body spans the full height of the rail beside
   it instead of collapsing onto row one.
   ========================================================================== */

.b-column__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(var(--sp-10), 5vw, var(--sp-20));
  row-gap: var(--sp-5);
  align-items: start;
}

.b-column__eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.b-column__h {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  text-wrap: balance;
}

.b-column__body {
  grid-column: 2;
  grid-row: 1 / -1;
  max-width: var(--measure);
  color: var(--soft);
  font-size: var(--t-body-l);
  line-height: var(--lh-body);
}

/* EVERY BLOCK IN THE PASSAGE NEEDS A GAP. The reset zeroes every margin and
   .t-body sets `margin: 0`, which is right — each block spaces its own
   content. This block never did, and most passages are a single paragraph so
   it went unseen. On the 18 pages where a passage runs to two or more, the
   break vanished and the copy read as one unbroken wall. 24px against a 29px
   line box is clearly a paragraph break without reading as a new section.

   The first pass fixed `p + p` only, which left the same collision everywhere
   a passage mixes in a list or a sub-head — 45 zero-gap joins across 25 pages:
   every neurofeedback and thermography page runs a lead sentence straight into
   its bulleted list with nothing between them, and /iv-therapy/'s "Boosters"
   sub-head sat flush against the shot list above it. Listing the tags rather
   than using `* + *` because the set is small and closed (p, ul, ol, h3,
   blockquote) and an explicit list will not surprise anyone who adds a
   wrapper later. */
.b-column__body > :is(p, ul, ol, h3, blockquote) + :is(p, ul, ol, h3, blockquote) {
  margin-block-start: var(--sp-6);
}

/* A sub-head opens a new part of the passage, so it takes more air above than
   a paragraph does and sits closer to the copy it introduces — otherwise it
   floats midway and reads as belonging to neither side. */
.b-column__body > * + h3 { margin-block-start: var(--sp-10); }
.b-column__body > h3 + * { margin-block-start: var(--sp-4); }

/* A link that is a LIST ITEM is navigation, and the 44px floor applies — a
   bare 18px line box measures 21px. Links inside running sentences are left
   alone (the WCAG 2.5.8 inline exemption, and inline-flex would stop them
   wrapping). Centring in a 44px box keeps the list rhythm even. */
.b-column__body ul a,
.b-column__body ol a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
}

/* --- centred variant -----------------------------------------------------
   Four sections use this — page-opening statements, where a rail would put the
   heading off to one side of a line that is meant to be addressed to you. It
   collapses the grid back to one centred column. */

.b-column--centred .b-column__inner {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  justify-items: center;
  text-align: center;
  max-width: var(--measure);
  margin-inline: auto;
}

.b-column--centred .b-column__eyebrow,
.b-column--centred .b-column__h,
.b-column--centred .b-column__body,
.b-column--centred .b-column__media {
  grid-column: 1;
  grid-row: auto;
}

.b-column--centred .b-column__h { max-width: var(--measure-tight); margin-inline: auto; }

.b-column--centred .b-column__body { width: 100%; }

/* --- slot primitives (scoped) -------------------------------------------- */

.b-column .slot {
  color: var(--soft);
  border: 1px dashed var(--sage);
  border-radius: var(--radius);
  margin: 0;
}

.b-column .slot--inline {
  display: inline;
  border: 0;
  border-bottom: 1px dashed var(--sage);
}

.b-column .slot--block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
}

.b-column .slot__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.b-column .slot__lines i {
  display: block;
  height: var(--sp-2);
  border-radius: var(--radius);
  background: var(--line);
}

.b-column .slot__lines i:last-child { width: 54%; }

/* An optional photograph under the body copy. Added 12 Aug 2026 for the IV
   page's ozone section, which describes a machine most people have never seen
   and had no image of it. Full width of the column's measure, so it reads as
   part of the passage rather than as a separate band. */
.b-column__media {
  grid-column: 2;          /* under the prose, in the wide track */
  margin: clamp(var(--sp-8), 4vw, var(--sp-12)) 0 0;
  max-width: var(--measure);
  overflow: hidden;
  border-radius: var(--radius-card);
}
.b-column__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* =============================================================================
   THE STACKED BREAKPOINT MUST BE THE LAST THING IN THIS FILE.

   It used to sit in the middle, and `.b-column__media { grid-column: 2 }` was
   declared 70 lines below it. Same specificity, later rule wins — so on a
   phone the figure stayed in column two of a grid that had been collapsed to
   one column, creating a phantom second track.

   Chromium sized that track to 0 and the damage was invisible. SAFARI SIZED IT
   TO THE IMAGE, squeezing the text column to about 100px, and the IV page's
   ozone section rendered one word per line on an iPhone. The full-site audit
   runs on Chromium and passed it clean.

   Anything added below this block will override it on mobile. Add above.
   ========================================================================== */

/* --- stacked, below the two-track breakpoint -----------------------------
   900px is where the right track drops under about 45 characters, which is the
   floor for running text. Below it the rail idea stops paying and the block
   returns to the single column it always was. */
@media (max-width: 899.98px) {
  .b-column__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .b-column__eyebrow,
  .b-column__h,
  .b-column__body,
  .b-column__media {
    grid-column: 1;
    grid-row: auto;
  }
  .b-column__h { max-width: var(--measure-tight); }
}