/* Analysis hub front door. Page layout only; colours/spacing from core.css tokens.
   Shared pieces (.card, .card-grid, .stat-grid, .badge) live in components.css. */

.analysis-hub { padding-block: var(--space-4) var(--space-7); }
/* The problem this solves is `.prose`'s `margin-inline: auto`, NOT its width cap:
   centring turned the lead into a narrow column floating in dead margins. The
   previous fix removed the cap entirely (`max-width: none`), which measured 161
   characters per line at 1440px and 215 at 1920px. Cap the measure, kill the
   centring — the lead then sits flush left under the heading, as intended. */
.analysis-intro { max-width: var(--measure-lead); margin-inline: 0; margin-bottom: var(--space-5); }

/* `.stat-grid` tracks are `minmax(150px, 1fr)`, so they stretch to fill the row.
   Two of these three stats are conditional, and in practice usually only one
   resolves — which rendered a single number centred in a box spanning the whole
   1320px container, reading as a banner rather than a stat. Cap the track so
   one tile stays tile-sized and the row packs from the left. */
.analysis-assurance {
  margin: var(--space-5) 0 var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
  justify-content: start;
}
.analysis-assurance-note { margin: 0 0 var(--space-6); font-size: var(--text-sm); }

/* `.card__body` is a card REGION class (`padding: var(--space-4) var(--space-5)`),
   meant for a wrapper <div>. Applied to a <p> already inside `.card--pad`, it
   pushed the description ~24px further right than the `.card__title` directly
   above it, so title and body did not share a left edge. */
.surface-card { display: flex; flex-direction: column; }
.surface-card .card__body { padding: 0; margin: 0 0 var(--space-3); }
/* Pin the "For: …" audience line to the bottom so it sits on one baseline
   across a row instead of tracking each card's description length. */
.surface-card .card__body + .card__meta { margin-top: auto; }

/* This closing paragraph carries `.prose`, whose `margin-inline: auto` centred
   it under a left-aligned <h2> — the heading and its own paragraph disagreed,
   with dead space either side. Reading width is right; the centring is not. */
.analysis-hub .section .prose { margin-inline: 0; }

.analysis-surfaces { margin-bottom: var(--space-6); }

.surface-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.surface-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex: none;
  border-radius: var(--radius-md);
  background: var(--colour-primary-alpha-10);
  color: var(--colour-primary);
  font-size: var(--text-lg);
}
.surface-card.card--link:hover .surface-card__icon {
  background: var(--colour-primary);
  color: var(--colour-bg);
}