/* Sports & Injuries bands.

   Loaded after shell.css by sports-injuries.html only. These four bands are the
   ones that exist on no other page: the icon strip, the capacity chart, the
   body-region tiles, and the step row. Everything else on that page is a shell
   or interior.css band.

   Ported from editorial.css when the site converged on the navy system. The
   shapes are the same; the tokens are the navy ones. */

/* ---------- Icon strip ---------- */

.activity-row {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.activity-row__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.activity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-2);
  border-right: 1px solid var(--line);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 160ms ease, background-color 160ms ease;
}

.activity:last-child { border-right: 0; }
.activity svg { color: var(--ink); }
.activity:hover { background: var(--paper-muted); color: var(--ink); }

/* ---------- Capacity vs demand chart ---------- */

.chart-band { padding: var(--band) 0; }

.chart-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: start;
}

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

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

.chart-band__body p {
  /* --measure-body measures 62ch, which Instrument Sans renders near 80
     characters a line — past the range a paragraph reads comfortably at. The
     body column keeps a shorter measure than the shared token allows. */
  max-width: 58ch;
  margin: 0 0 var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.chart-band__body p:last-of-type { margin-bottom: 0; }

.chart { position: relative; }

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-3);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* The legend swatch line is drawn with a border so it can be dashed; the colour
   matches the stroke it explains, which is why it reads --warn and --blue. */
.chart__legend i {
  display: inline-block;
  width: 26px;
  height: 0;
  margin-right: var(--sp-2);
  border-top: 2px solid var(--warn);
  vertical-align: middle;
}

.chart__legend i.solid { border-top: 2px solid var(--blue); }
.chart__legend i.dashed { border-top-style: dashed; }

.chart__body { display: flex; align-items: center; gap: var(--sp-4); }
.chart svg { flex: 1 1 auto; min-width: 0; height: auto; }

.chart__note {
  flex: 0 0 148px;
  color: var(--blue-ink);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-snug);
}

/* ---------- Body-region tiles ---------- */

.region-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
}

.region-tile {
  position: relative;
  display: block;
  min-height: 160px;
  overflow: hidden;
  background: var(--navy-deep);
}

.region-tile img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.03);
  transition: transform 300ms ease;
}

.region-tile::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, oklch(0.13 0.05 255 / 0.84), oklch(0.13 0.05 255 / 0.16) 62%);
  content: "";
}

.region-tile:hover img { transform: scale(1.04); }

.region-tile span {
  position: absolute;
  z-index: 2;
  right: var(--sp-4);
  bottom: var(--sp-4);
  left: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: 0.01em;
  line-height: var(--lh-tight);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .activity-row__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .activity:nth-child(4n) { border-right: 0; }
  .activity:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .chart-band__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

@media (max-width: 860px) {
  .region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .activity-row__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity { border-bottom: 1px solid var(--line); }
  .activity:nth-child(2n) { border-right: 0; }
  .activity:nth-last-child(-n+2) { border-bottom: 0; }
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The chart's fixed-width annotation column has nowhere to go once the plot
     is phone-width, so it moves under the plot instead of squeezing it. */
  .chart__body { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .chart__note { flex: none; max-width: none; }
}

/* Hero aside placement.

   The "Same Trails. Stronger Days." note is the one hand-note that floats over
   a photograph instead of sitting in a panel, so it needs its own coordinates.
   Top-right keeps it clear of the headline (left) and the facts row
   (bottom-left): 84px clears the header bar, one more --sp-5 drops it into the
   photograph, and --gutter lines its right edge up with the shell it floats
   over. This file loads only on sports-injuries.html, so scoping to
   .page-hero is already page-specific. */
.page-hero .hand-note--over-photo {
  top: calc(84px + var(--sp-5));
  right: max(var(--gutter), calc((100% - var(--max-width)) / 2));
}

/* ---------- Photographs ride the content column ----------

   The hero trail photo and the closing sunset were the last two layers on this
   page running edge to edge while the copy sat in the centred .shell column.
   Both now take the shell's width and centring, so every photograph on the page
   shares one content column with the text. This file loads after shell.css, so
   the 780px block below restores the mobile hero height shell.css sets. */
.page-hero__media,
.page-hero__scrim,
.final-cta .final-media,
.final-cta .final-scrim {
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(100% - (var(--gutter) * 2), var(--max-width));
  transform: translateX(-50%);
}

.page-hero__media,
.final-cta .final-media { overflow: hidden; border-radius: 16px; }

.page-hero__scrim,
.final-cta .final-scrim { border-radius: 16px; }

@media (max-width: 780px) {
  .page-hero__media,
  .page-hero__scrim {
    top: 0;
    bottom: auto;
    height: clamp(220px, 42vh, 340px);
  }
}