/*
  category-list.css
  The story cards on a category page: one featured story and a grid of cards (more are added by the "Load more" button, see category-more.css).
  The card shell (.fm-card, .fm-media) is in css/base.css.
  Needs css/base.css.
*/

/* ---------- Bits shared by every card: pill + date, excerpt, read more ---------- */
.fm-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.65rem; font-size: var(--fm-t-xs); color: var(--fm-muted); }
.fm-tag { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--fm-blue-tint); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fm-blue); }
.fm-card__excerpt { margin-top: 0.5rem; font-size: var(--fm-t-sm); line-height: 1.5; color: var(--fm-muted); }
.fm-card__more { margin-top: auto; padding-top: 0.9rem; font-size: var(--fm-t-xs); font-weight: 700; color: var(--fm-blue); }
.fm-card:hover .fm-card__more { text-decoration: underline; text-underline-offset: 4px; }

/* Cards sit equal height with "Read more" pinned to the bottom */
.fm-category .fm-card { display: flex; flex-direction: column; }
.fm-category .fm-card__body { display: flex; flex: 1; flex-direction: column; }
.fm-category .fm-media img { aspect-ratio: 16 / 9; }

/* ---------- Featured story ---------- */
.fm-featured h2 { margin-top: 0.7rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.12; }
.fm-featured .fm-card__body { padding: 1.25rem 1.4rem 1.5rem; }
.fm-featured .fm-card__excerpt { font-size: 1rem; }

/* Room for side-by-side: image left, text right */
@container (min-width: 44rem) {
  .fm-featured { flex-direction: row; }
  .fm-featured .fm-media { flex: 1.15; }
  .fm-featured .fm-media img { height: 100%; aspect-ratio: auto; }
  .fm-featured .fm-card__body { flex: 1; justify-content: center; padding: 1.75rem; }
}

/* ---------- Card grid ---------- */
.fm-list { display: grid; gap: calc(var(--fm-gap) * 0.7) calc(var(--fm-gap) * 0.6); }
.fm-list h3 { margin-top: 0.65rem; font-size: 1.0625rem; line-height: 1.3; }
@container (min-width: 34rem) { .fm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }