/* /what-we-build: the hub for the eight capabilities. Layers on top of
   base.css.

   Section order matches src/views/what-we-build.ejs and
   SITE-ARCHITECTURE.md section 7.

   Most of this page is already in base.css. The eight cards are the
   shared .hub-grid and .hub-card that /example uses, and the teal rule
   above the dark headline is the shared .accent-rule. What is left here
   is the hero, the three-column argument inside the dark band, and the
   centred closing block. */

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

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

/* base.css gives .line to h2 only, because until this page every
   explicit line break sat in one. */
.wb-hero h1 .line { display: block; }
.wb-hero h1 .line + .line { margin-top: 0.1em; }

/* Set smaller than the site's h1 so each of the two sentences holds one
   line on a desktop width. At the standard clamp they each wrapped, and
   a headline built out of two deliberate lines that then wrap into four
   stops reading as two thoughts. It still wraps on a phone, where there
   is no width to be had and the .line breaks keep the grouping. */
.wb-hero h1 {
  font-size: clamp(33px, 4.5vw, 57px);
  max-width: 22em;
}

.wb-hero-lede { font-size: 19.5px; max-width: 40em; }
.wb-hero-lede + .wb-hero-lede { margin-top: 18px; }

/* ── Switches, not stages ───────────────────────────────────────── */

.wb-switches { padding: 78px 0 84px; }
.wb-switches h2 { max-width: 14em; }

.wb-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 52px;
  padding-top: 44px;
  border-top: 1px solid var(--rule-dark);
}
@media (max-width: 900px) {
  .wb-points { grid-template-columns: 1fr; gap: 32px; }
}

.wb-point h3 { margin-bottom: 10px; }
.wb-point p {
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--dark-body);
}

/* ── The capabilities ──────────────────────────────────────────────────── */

.wb-caps h2 { max-width: 10em; }

/* Each capability card is three tiers plus a link out to the example.
   The heading is the short label, so it can go back to the site's h3
   treatment: tight tracking flatters two or three words. The sub-heading
   carries the sentence, set in the body face at semi-bold so it reads as
   a sentence rather than as a second heading. The paragraph is muted, so
   the card has three clear levels rather than two sizes of the same
   thing.

   Laid out as a column so the example link can be pushed to the bottom
   edge: cards in a row stretch to match each other, and without this the
   links sit at eight different heights. */
.wb-grid .hub-card {
  display: flex;
  flex-direction: column;
  padding: 24px 28px 22px;
}

.wb-grid .hub-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Scoped through .wb-grid .hub-card, not set on .wb-cap-lead alone.
   base.css styles .hub-card p, which is two selectors to this one's one
   and therefore wins: on a single class both tiers came out at 16px in
   the same colour, so the card had a heading and then two paragraphs
   that differed only in weight. */
.wb-grid .hub-card .wb-cap-lead {
  font-family: var(--text);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 11px;
  max-width: 34em;
  text-wrap: pretty;
}

.wb-grid .hub-card .wb-cap-body {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 34em;
}

/* The whole card is the link, so this is a cue rather than a control:
   an arrow on the bottom edge, above a hairline, so the eight line up
   across the grid. margin-top:auto does the pushing.

   Uniform on all eight. Two of the cards reach a capability page and
   the rest reach the example, and labelling that difference would read
   as two kinds of card when it is only a difference in what is built. */
.wb-cap-go {
  display: block;
  align-self: flex-end;
  margin-top: auto;
  padding-top: 18px;
  font-size: 17px;
  /* Set as text, so --teal-deep. */
  color: var(--teal-deep);
  transition: transform 180ms ease;
}
a.hub-card:hover .wb-cap-go { transform: translateX(3px); }

/* The rule spans the card rather than the arrow, so it reads as a
   divider under the content and not as an underline on a glyph.

   position: relative is for the hairline below. There is no
   scroll-margin-top here: this carried 84px to clear the sticky bar,
   but html already sets scroll-padding-top: 76px for the same reason
   and the two stack, so a reader following /example/an-account's
   #capability-9 link landed 160px down the viewport with the row above
   still in shot. The 76px on html clears the 60px bar on its own. */
.wb-cap {
  position: relative;
}
.wb-cap-go::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  margin-top: -18px;
  border-top: 1px solid var(--rule);
}

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

.wb-cta-inner { text-align: center; }
.wb-cta h2 { max-width: 16em; margin: 0 auto; }
.wb-cta .lede { margin-left: auto; margin-right: auto; max-width: 40em; }
.wb-cta .actions { justify-content: center; }