/* /what-we-build/buying-group: the third capability page. Layers on top
   of base.css.

   Section order matches src/views/what-we-build-buying-group.ejs and the
   capability-page structure in SITE-ARCHITECTURE.md section 5.

   Deliberately close to build.segments.css and build.ranking.css. The
   three capability pages should read as the same page type, so the hero,
   the settles grid, the dark two-column split, the onward cards and the
   closing block are the same shapes at the same sizes. Where a rule here
   is identical to one there, that is on purpose and not a copy-paste to
   be factored out: they are separate pages and any one can move without
   dragging the other two.

   The genuinely new component is the person row. It is a row rather than
   a card because six of them stacked as cards would fill two screens
   before the gap section, and the gap is what the page is for. The full
   card treatment lives on the proof view at /example/the-buying-group,
   where there is room for it. */

/* ── Hero ───────────────────────────────────────────────────────── */

.bg-hero { padding: 70px 0 76px; }

.bg-hero h1 .line { display: block; }
.bg-hero h1 .line + .line { margin-top: 0.1em; }

.bg-hero h1 {
  font-size: clamp(33px, 4.5vw, 57px);
  max-width: 21em;
}

.bg-hero-lede { font-size: 19.5px; max-width: 38em; }

/* Shared measure for a paragraph sitting under a section headline. */
.bg-measure { max-width: 40em; }

/* ── What this settles ──────────────────────────────────────────── */

.bg-settles h2 { max-width: 16em; }
.bg-settles-grid { margin-top: 42px; }

@media (min-width: 901px) {
  .bg-settles-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── What it looks like ─────────────────────────────────────────── */

.bg-looks h2 { max-width: 16em; }

.bg-looks-list {
  margin-top: 40px;
  display: grid;
  gap: 30px;
  max-width: 46em;
}

.bg-looks-item {
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.bg-looks-item h3 { margin-bottom: 8px; }

.bg-looks-item p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}

/* The panel separating this from a contact database, which is the
   nearest wrong box a new reader will put us in. */
.bg-distinction {
  margin-top: 40px;
  max-width: 46em;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px 26px;
}

.bg-distinction p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--body);
}

/* ── Titles don't travel ────────────────────────────────────────── */

.bg-real { padding: 78px 0 84px; }
.bg-real h2 { max-width: 13em; }
.bg-real .lede + .lede { margin-top: 18px; }

.bg-real-grid {
  margin-top: 44px;
  display: grid;
  gap: 34px;
  max-width: 52em;
}

@media (min-width: 761px) {
  .bg-real-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
}

.bg-real-col { padding-top: 18px; border-top: 1px solid var(--rule-dark); }

.bg-real-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

.bg-real-col p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--dark-body);
}

.bg-real-pointer {
  margin-top: 40px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
}

/* ── One company's group ────────────────────────────────────────── */

.bg-group h2 { max-width: 15em; }

/* Run metadata. Instrument type: chrome reporting what the run was. */
.bg-run {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.bg-run span { margin: 0 6px; color: var(--rule); }

/* The company the group belongs to. Sits above the people rather than
   beside them, because a reader has to know what this bank is going
   through before a single name means anything. */
.bg-company {
  margin-top: 30px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 26px 28px;
  display: grid;
  gap: 24px;
}

@media (min-width: 841px) {
  .bg-company {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 40px;
  }
}

.bg-company-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.bg-company-head h3 { margin-bottom: 10px; text-wrap: balance; }

.bg-company-situation {
  font-size: 16px;
  line-height: 1.58;
  color: var(--body);
  max-width: 40em;
}

.bg-company-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 22px;
}

@media (min-width: 841px) {
  .bg-company-stats { gap: 30px; }
}

.bg-stat dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
  white-space: nowrap;
}

.bg-stat-num {
  font-family: var(--mono);
  font-size: 19px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The people, compact. Full detail is on the proof view. */
.bg-people {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.bg-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

/* Three columns once there is room: who, role, confidence. Below that
   the role and the confidence stack under the name rather than
   squeezing to a width where neither reads. */
@media (min-width: 781px) {
  .bg-person {
    grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr) 190px;
    gap: 20px;
    align-items: center;
  }
}

/* The rank numeral. Instrument type, matching the run line. */
.bg-person-rank {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.bg-person-who h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 3px;
}

.bg-person-title {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--body);
}

.bg-person-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.bg-person-role p {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--body);
}

/* Below the three-column breakpoint the role and confidence sit in the
   second column, under the name, so they line up with it. */
@media (max-width: 780px) {
  .bg-person-role,
  .bg-person-conf { grid-column: 2; margin-top: 10px; }
}

.bg-person-conf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bg-person-conf .bg-person-label { flex: 0 0 100%; margin-bottom: 6px; }

.bg-bar {
  display: block;
  flex: 1 1 auto;
  min-width: 60px;
  height: 5px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}

/* Teal, the same fill the score bars use elsewhere. A second color here
   would imply confidence measures something of a different kind from
   fit and timing, and it does not: it is another 0 to 100 reading. */
.bg-bar-fill { display: block; height: 100%; background: var(--teal); }

.bg-person-conf .bg-stat-num { font-size: 14px; min-width: 24px; text-align: right; }

/* The gap. Tinted panel so it reads as a finding rather than as a
   footnote to the list above it. This is what proves the argument on
   the dark band, so it is the last thing in the section. */
.bg-gap {
  margin-top: 30px;
  max-width: 46em;
  background: var(--tint);
  border-radius: 12px;
  padding: 24px 26px;
}

.bg-gap h3 { margin-bottom: 12px; text-wrap: balance; }

.bg-gap-missing {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 10px;
}

.bg-gap-reading {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

.bg-provisional {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44em;
}

/* ── What the list shows ────────────────────────────────────────── */

/* Quiet by design, matching the segments page's read section: one
   measure of text on the tint, no panel, no figure and no rule. */
.bg-read-inner { max-width: 44em; }
.bg-read h2 { max-width: 14em; }
.bg-read .lede { margin-top: 16px; }

.bg-read-link {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--teal-deep);
  text-decoration: none;
}

.bg-read-link span,
.bg-onward-link span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 160ms ease;
}

.bg-read-link:hover span,
.bg-onward-link:hover span { transform: translateX(3px); }

/* ── Two that work with it ──────────────────────────────────────── */

.bg-onward h2 { max-width: 14em; }
.bg-onward-grid { margin-top: 38px; }

@media (min-width: 901px) {
  .bg-onward-grid { grid-template-columns: repeat(2, 1fr); }
}

.bg-onward-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--teal-deep);
  text-decoration: none;
}

/* ── Closing ────────────────────────────────────────────────────── */

.bg-cta-inner { text-align: center; }
.bg-cta h2 { max-width: 18em; margin: 0 auto; }

.bg-cta .lede {
  max-width: 40em;
  margin: 18px auto 0;
}

.bg-cta .actions { justify-content: center; }

/* ── Narrow ─────────────────────────────────────────────────────── */

@media (max-width: 460px) {
  .bg-company { padding: 22px 20px; }
  .bg-company-stats { grid-template-columns: repeat(3, auto); gap: 16px; }
  .bg-gap { padding: 20px 20px; }
}

/* ── Motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bg-read-link span,
  .bg-onward-link span { transition: none; }
}