/*
  lead.css
  The first screen of the homepage, laid out like the BBC's news headlines:
  a five-column grid with equal columns and a 20px gap.
    - big story: two columns wide, two rows tall
    - four image cards: one column wide, one row tall, 16:9 images
    - one column of four short text-only cards, each half a row tall
  The cards themselves (white box, padding) come from css/base.css.
  Needs css/base.css.
*/

/* Phones: everything stacks in one column */
.fm-lead { display: grid; gap: 1.25rem; padding-block: 1.25rem calc(var(--fm-section) * 0.7); }
.fm-lead__list { display: grid; gap: 1.25rem; }

/* All cards in the lead: headline at the top, category label pinned to the bottom.
   That keeps the cards lined up whatever the headline length. */
.fm-lead .fm-card { display: flex; flex-direction: column; }
.fm-lead .fm-card__body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.1rem 1.1rem; }
.fm-lead .fm-kicker { order: 2; margin: auto 0 0; padding-top: 0.75rem; }
.fm-lead h2 { font-size: 1.15rem; line-height: 1.25; }
.fm-lead .fm-media img { aspect-ratio: 16 / 9; }

/* Big story: label stays above the headline, and the type is larger */
.fm-lead__main .fm-card__body { padding: 1.25rem 1.5rem 1.5rem; }
.fm-lead__main .fm-kicker { order: 0; margin: 0 0 0.75rem; padding-top: 0; }
.fm-lead__main h1 { font-size: clamp(1.75rem, 1.3rem + 1.1vw, 2.2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; }
.fm-lead__standfirst { margin-top: 0.75rem; font-size: var(--fm-t-md); line-height: 1.5; color: var(--fm-muted); }

/* ---------- Tablet (768px and up) ----------
   Big story across the top, image cards two across, text cards two across */
@media (min-width: 48rem) {
  .fm-lead { grid-template-columns: repeat(2, 1fr); }
  .fm-lead__main, .fm-lead__list { grid-column: 1 / -1; }
  .fm-lead__list { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Desktop (1152px and up): the five-column grid ---------- */
@media (min-width: 72rem) {
  .fm-lead { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); }
  .fm-lead__main { grid-column: span 2; grid-row: span 2; }
  .fm-lead__list { grid-column: 5; grid-row: 1 / span 2; grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
}