/* News archive (T9, scripts/lib/templates/news-archive.mjs; ops/design/templates/news-archive/
   contract.md). The quest log is the page: its rows, detail pane and month groups come from
   public/components/quest-log.css. This file lays out the page around it and the guide
   hand-off. */

.na-head .wfg-page-head { padding-bottom: var(--s-3); }
.na-rss { display: inline-flex; align-items: center; min-height: 1.75rem; color: var(--ink-2); text-decoration-color: var(--line-control); }
.na-rss:hover { color: var(--ink); }
.na-log { padding-bottom: var(--s-5); }
.na-partner .affiliate-break { margin: 0 0 var(--s-6); }
.na-guides { padding-bottom: var(--s-section); }
.na-guide-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* The quest log fills the page's width here, so its pane gets the room the home slice lacks;
   the pane script keeps it level with the row it shows and in view while the page scrolls. */
@media (min-width: 60rem) {
  .na-log [data-pane] { min-height: 30rem; }
}

/* Under 60rem the newest story opens under its own row, which already shows its date,
   category and title: the detail keeps the source line, two lines of excerpt and the button. */
@media (max-width: 59.99rem) {
  .na-log .wfg-quest-detail .wfg-quest-kicker, .na-log .wfg-quest-detail .wfg-quest-name { display: none; }
  .na-log .wfg-quest-detail { margin-top: 0; }
  .na-log .wfg-quest-detail .wfg-dispatch-count { display: none; }
}
/* Between 40 and 60rem the rows keep their date column: the open detail lines up with the
   titles, so it reads as that row's detail. */
@media (min-width: 40.01rem) and (max-width: 59.99rem) {
  .na-log .wfg-quest-detail { margin-left: calc(3.4rem + 18px); }
}