/*
  related-news.css
  "More news" after the story: three washed cards (pill + date, headline, excerpt, read more).
  The grid (.fm-grid) and card shell (.fm-card) are in css/base.css.
  Needs css/base.css.
*/

.fm-related { padding-block: calc(var(--fm-gap) * 1.5) var(--fm-gap); }
.fm-related .fm-heading { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }

/* Three across on desktop. Tablet keeps the two-column grid from base.css,
   so the third card sits alone on row two and is kept to half width, not stretched. */
@media (min-width: 62rem) { .fm-related .fm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) and (max-width: 61.99rem) { .fm-related .fm-card:nth-child(3) { grid-column: 1 / 2; } }

/* Cards sit equal height with "Read more" pinned to the bottom */
.fm-related .fm-card { display: flex; flex-direction: column; }
.fm-related .fm-media img { aspect-ratio: 16 / 9; }
.fm-related .fm-card__body { display: flex; flex: 1; flex-direction: column; }
.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-related h3 { margin-top: 0.65rem; font-size: 1.0625rem; line-height: 1.3; }
.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; }