/*
  topics.css
  Two topic columns (e.g. Politics and Environment). Each has one story card,
  then a white panel of headline-only links.
  Needs css/base.css.
*/

/* Phones: columns stack. Tablet and up: side by side (see bottom). */
.fm-topics { display: grid; gap: var(--fm-section) var(--fm-gap); padding-block: var(--fm-section); }

.fm-topics .fm-card h3 { font-size: var(--fm-t-lg); }

/* Panel of headline links under the story card */
.fm-topics ul { display: grid; gap: 0; margin-top: calc(var(--fm-gap) * 0.6); padding-block: 0.4rem; }
.fm-topics li + li { border-top: 1px solid var(--fm-rule); }
.fm-topics li a { display: block; padding-block: 0.9rem; font-family: var(--fm-serif); font-size: var(--fm-t-md); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.fm-topics li a:hover { color: var(--fm-blue); }

@media (min-width: 48rem) { .fm-topics { grid-template-columns: 1fr 1fr; } }