/* Interior page bands. Homepage bands live in styles.css.
   Loaded after shell.css by every page that is not the homepage.

   NOTE: no page links this file right now. The v2 interior pages
   (sports-injuries-v2.html, about-v2.html) were built on the separate
   editorial.css instead, and the older .html names this stylesheet was written
   for no longer exist. It is kept because the band structure is still the
   intended long-page pattern.

   It has been brought onto the shared type and space scale in tokens.css so it
   does not rot into a trap: it previously carried 9px mono labels, 12px card
   bodies and 0.88 display leading, which is the exact set of defects the rest of
   the system just shed. Anything built on it now inherits the current scale. */

/* Light band: heading rail on the left, body copy on the right. */
.statement { padding: var(--band) 0; }

/* A band whose whole job is a photograph.

   The editorial pages dropped photographs straight into a text band. In this
   system a photograph that is not the hero gets its own band, with an optional
   aside laid over it. Contained to the shell rather than full-bleed, so it
   lines up with the copy above and below it. */
.media-band { padding: var(--band) 0; }
.media-band--tight { padding: 0 0 var(--band); }

.media-band__frame {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
}

.media-band__frame img {
  display: block;
  width: 100%;
  height: clamp(260px, 32vw, 440px);
  object-fit: cover;
}

.media-band__note {
  position: absolute;
  z-index: 2;
  right: var(--sp-7);
  bottom: var(--sp-6);
  left: var(--sp-7);
}

.media-band figcaption {
  margin-top: var(--sp-3);
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

@media (max-width: 780px) {
  .media-band__frame img { height: clamp(220px, 46vw, 320px); }
  .media-band__note { right: var(--sp-5); bottom: var(--sp-5); left: var(--sp-5); }
}

.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.06fr);
  gap: clamp(38px, 6vw, 96px);
  align-items: start;
}

.statement h2 {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-sans);
}

.statement h2 span { color: var(--blue); }

.statement__body p {
  margin: 0 0 var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}

.statement__body p:last-child { margin-bottom: 0; }
.statement__body strong { color: var(--ink); font-weight: 600; }

.statement__quote {
  margin: var(--sp-5) 0 0;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--blue);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  letter-spacing: 0.005em;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

/* Dark band built around .principles-list. */
.model-band {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--white);
  padding: var(--band) 0;
}

.model-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(260px, 0.44fr);
  gap: clamp(44px, 9vw, 140px);
  align-items: center;
}

.model-band h2 {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-sans);
}

.model-band h2 span { color: var(--blue); }

.model-band__dek {
  max-width: 46ch;
  margin: var(--sp-5) 0 0;
  color: oklch(0.82 0.025 245);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.model-band__footer {
  margin: var(--sp-6) 0 0;
  color: oklch(0.78 0.025 245);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Light band: heading rail plus a grid of text-only cards. */
.card-band { padding: var(--band) 0; }

.card-band__heading { max-width: 780px; margin-bottom: var(--sp-6); }

.card-band h2 {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-sans);
}

.card-band h2 span { color: var(--blue); }

.card-band__intro {
  max-width: 52ch;
  margin: var(--sp-4) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.text-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  /* Even insets on every card, with the grid bled left by the same amount, so
     each card's copy sits on its own column line AND the first card still
     starts flush with the shell edge. The previous shape gave the first card no
     left padding and the rest 26px, which zigzagged the text edges. */
  margin-left: calc(var(--sp-5) * -1);
}

.text-card {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border-left: 1px solid var(--line);
}

.text-card:first-child { border-left: 0; }

.text-card span {
  display: block;
  margin-bottom: var(--sp-4);
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
}

.text-card h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

/* Optional mark above the heading. The editorial care cards carried a small
   line icon between the index number and the title; this is its slot. */
.text-card svg { display: block; margin: 0 0 var(--sp-3); color: var(--ink); }

/* When a mark follows the index, close the gap the index normally leaves before
   the heading — otherwise number, mark and title stack with two full steps. */
.text-card span:has(+ svg) { margin-bottom: var(--sp-2); }

.text-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* Light band built around .why-list. */
.principle-band { padding: var(--band) 0; }

/* A photograph in the heading rail, and a handwritten aside under it. Both are
   carried over from the editorial page, where the rail held the image and the
   aside sat to its right. */
.principle-band__media { margin-top: var(--sp-6); }

.principle-band__media img {
  display: block;
  width: 100%;
  height: clamp(200px, 22vw, 300px);
  object-fit: cover;
}

.principle-band__hand { margin-top: var(--sp-5); }

/* Long manifesto lines (e.g. item 06) wrapped with a single word stranded
   on line two. Pretty-printing rebalances without touching copy. Scoped
   here so the homepage why-list is unaffected. */
.principle-band .why-list strong { text-wrap: pretty; }

.principle-band__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(40px, 7vw, 92px);
  align-items: start;
}

.principle-band h2 {
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-sans);
}

.principle-band h2 span { color: var(--blue); }

.principle-band__dek {
  max-width: 44ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

/* Light band holding the clinic's contact facts. Unlike the editorial bands,
   the values here are body text — an address set in display caps is unreadable. */
.clinic-band {
  padding: var(--band) 0;
  background: var(--paper-muted);
}

.clinic-band__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(34px, 5vw, 84px);
  align-items: start;
}

.clinic-band h2 {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-display-md);
  line-height: var(--lh-display-sans);
}

.clinic-band h2 span { color: var(--blue-ink); }

.clinic-band__dek {
  max-width: 42ch;
  margin: var(--sp-4) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.clinic-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clinic-facts li {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.clinic-facts span {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.clinic-facts strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.clinic-facts p {
  margin: var(--sp-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

.clinic-facts a {
  color: var(--blue-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.clinic-facts a:hover { color: var(--ink); }

/* Light band: conditions grouped by region, three lists side by side. */
.condition-band { padding: var(--band) 0; }

.condition-band__heading { max-width: 800px; margin-bottom: var(--sp-6); }

.condition-band h2 {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-sans);
}

.condition-band h2 span { color: var(--blue); }

.condition-band__intro {
  max-width: 54ch;
  margin: var(--sp-4) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.condition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.condition-group {
  padding: 24px 30px 8px 0;
  border-right: 1px solid var(--line);
}

.condition-group:last-child { padding-right: 0; border-right: 0; }
.condition-group:not(:first-child) { padding-left: 30px; }

.condition-group > span {
  display: block;
  margin-bottom: var(--sp-4);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.condition-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.condition-group li {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.condition-group li:last-child { border-bottom: 0; }

.condition-group small {
  display: block;
  margin-top: var(--sp-1);
  color: var(--ink-muted);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: var(--lh-body);
}

/* Optional leading mark, for the lists where the polarity matters — "we work
   well together if" against "we are not the best fit if".

   The polarity lives in the glyph, not in a colour: the affirmative mark takes
   the system's accessible blue and the negative one takes the muted ink. That
   keeps a red out of a palette that has never had one, and it means the two
   columns still read correctly in greyscale. */
.condition-group li.has-mark {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-weight: 500;
}

.condition-group li.has-mark svg { flex: none; margin-top: 4px; }

.mark-yes { color: var(--blue-ink); }
.mark-no { color: var(--ink-muted); }

@media (max-width: 900px) {
  .statement__grid,
  .model-band__grid,
  .principle-band__grid { grid-template-columns: 1fr; gap: var(--sp-6); }

  .clinic-band__grid { grid-template-columns: 1fr; gap: var(--sp-5); }

  .condition-grid { grid-template-columns: 1fr; }

  .condition-group,
  .condition-group:not(:first-child) {
    padding: var(--sp-5) 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .condition-group:last-child { border-bottom: 0; }

  .text-card-grid { grid-template-columns: 1fr; }
  /* Reset the negative bleed and the column rule once the grid is one across;
     the divider becomes a bottom border instead. */
  .text-card-grid { margin-left: 0; }

  .text-card,
  .text-card:not(:first-child) {
    padding: var(--sp-5) 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .text-card:last-child { border-bottom: 0; }
}

@media (max-width: 480px) {
  .statement, .card-band, .principle-band, .condition-band,
  .model-band, .clinic-band { padding: var(--band) 0; }
  .clinic-facts { grid-template-columns: 1fr; }
}