/* wte — feature cards.
   Almost everything comes from .card and .grid--cards in base.css. Note the
   ground is set via --section-bg, never `background`: that is what lets an
   editor's tone choice win without this file having to know tone exists. */
.wte { --section-bg: var(--gray-50); }
.wte .sec__inner { display: flex; flex-direction: column; align-items: flex-start; }
.wte__grid { width: 100%; }
.wte-card .card__name { font-size: var(--fs-h2); }

/* Intro copy under the headline; joins the heading column in the aside layout. */
.wte__body { color: var(--text-muted); max-width: 60ch; margin: 0 0 32px; }

/* A short flag over the card photo, and the sightline under the title. The
   photo span is no longer purely decorative when it carries a badge, so it
   keeps its own stacking context. */
.wte-card .card__photo { position: relative; }
.wte-card .card__badge {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-white);
}
.wte-card .card__where { margin: 0 0 6px; color: var(--text-subtle); }

/* 32px matches .sec__intro in base.css. A standfirst that sits directly above
   a grid needs the same space below it whatever block it belongs to. */

/* ---------------------------------------------------------------------------
   Pastel #97, #98, #79 (Las Vegas), all three the same component.

   #97: .sec__inner is a flex column with no gap, so the section heading and
   the card grid were flush - measured at 1440px the heading's bottom edge and
   the grid's top edge were the same pixel. A section head needs air under it.

   #79 and #98: the card CTA simply followed the description, so a card whose
   copy wrapped one line further pushed its link down and the row of links
   stopped lining up - measured 24px of drift across the three cards on the
   home page. margin-top:auto drops every link to the bottom of its card, which
   lines them up however the copy falls, and the padding guarantees the link is
   never crowded against the text above it even when a card has no slack
   (#98: that gap was 10px).
--------------------------------------------------------------------------- */
.wte .sec__inner { gap: 40px; }

.wte-card__link {
  margin-top: auto;
  padding-top: 14px;
}