/* Blog: article pages and the paginated listings. Loaded only for `article` and `blogs-index`
   pages, via TYPE_ASSETS in src/templates/layout.mjs. Tokens come from site.css. */

:root {
  /* One measure for the whole article column — breadcrumbs, thumbnail, category, title, meta and
     body all share it, so their edges line up. Narrower than the global 1300px `--maxw`, which
     reads too wide for editorial pages. Only loaded on blog pages, so it can't leak. */
  --blog-w: 900px;
}

/* ---------------- article ---------------- */

/* Keeps `.page-hero`'s own 60px bottom padding. It used to be zeroed so the thumbnail sat flush
   with the band's bottom edge; now that the thumbnail is at the top and the lede ends the band,
   the copy needs the padding back or it butts against the colour boundary. */

/* The article column, centred inside the 1300px `.wrap`. `margin-inline: auto` has to be set
   explicitly: these are blocks *inside* the wrap, not the wrap itself, so they'd otherwise sit
   flush against its left edge with ~200px of dead space on the right.
   Centring is scoped to the article — blogs-index reuses `__head` above a full-width card grid,
   where a centred headline would float free of the cards it introduces. */
.article-col,
.article-hero .article-hero__head,
.article-hero__media,
.article-body { max-width: var(--blog-w); margin-inline: auto; }

.article-hero__head { max-width: var(--blog-w); margin-top: 26px; }
.article-hero__head .h-display { margin: 14px 0 0; }
.article-hero__head .lede { margin-top: 18px; }

/* On an article the head follows the thumbnail rather than the breadcrumbs, so it needs the
   larger gap. Scoped to `.article-hero` because blogs-index reuses `__head` directly under its
   breadcrumbs with no image above it, where 26px is still right. */
.article-hero .article-hero__head { margin-top: 34px; }

.eyebrow--plain a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.eyebrow--plain a:hover { color: var(--blue); }

.article-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 16px 0 0; font-size: 14px; color: var(--ink-50);
}
.article-meta__dot { color: var(--grey); }

/* Fixed 16:9 frame. Without it a portrait source renders at its own ratio and the hero swallows
   the viewport before a word of the article is visible. Sits directly under the breadcrumbs. */
/* `margin-top`, not the `margin` shorthand — the shorthand resets `margin-inline` to 0 and would
   silently un-centre the frame set by the article-column rule above. */
.article-hero__media {
  margin-top: 26px;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--panel-fill); box-shadow: var(--shadow-md);
}
.article-hero__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* Shares `--blog-w` with the hero head and thumbnail so all five blocks align. Like them it is a
   block *inside* the wrap, never the wrap itself — a narrowed `.wrap` keeps its auto margins and
   would centre the prose while the headline above it stayed left-aligned. */
.article-body { max-width: var(--blog-w); }

.article-section + .article-section { margin-top: 38px; }
.article-section .h-section { margin: 0 0 14px; }
.article-body p {
  margin: 0 0 16px; font-size: 16.5px; line-height: 1.75; color: var(--ink-70);
}
.article-body p:last-child { margin-bottom: 0; }
.article-body a {
  color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.article-body a:hover { color: var(--navy); }
.article-body .checklist { margin: 4px 0 18px; }

.article-terms { margin: 4px 0 18px; }
.article-terms dt { font-weight: 600; color: var(--navy); margin-top: 14px; }
.article-terms dd { margin: 4px 0 0; font-size: 16px; line-height: 1.7; color: var(--ink-70); }

/* ---------------- labels ---------------- */

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-block; padding: 6px 13px; border-radius: var(--radius-pill);
  background: var(--blue-50); border: 1px solid var(--line);
  font-size: 12.5px; letter-spacing: .02em; color: var(--grey-500); text-decoration: none;
}

.chip-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip--link { transition: background .15s, color .15s, border-color .15s; }
.chip--link:hover { background: var(--blue-100); color: var(--navy); border-color: var(--blue-400); }
.chip--current { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 600; }

/* ---------------- listing cards ---------------- */

/* Four fixed columns so PER_PAGE = 8 always fills two complete rows. `auto-fill` used to give a
   column count that depended on the viewport, which left a ragged half-empty second row. */
.acard-grid { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1180px) { .acard-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px)  { .acard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .acard-grid { grid-template-columns: 1fr; } }

.acard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.acard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.acard__media { display: block; aspect-ratio: 16 / 9; background: var(--ice); overflow: hidden; }
.acard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.acard__body { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 22px; }
.acard__cat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue-600);
}
.acard__title { margin: 0; font-size: 18px; line-height: 1.35; color: var(--navy); font-weight: 700; }
.acard__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
.acard__meta { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--ink-50); }

/* ---------------- faq ---------------- */

.faq { margin-top: 22px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 2px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; color: var(--navy);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { flex: none; width: 15px; height: 15px; color: var(--blue); transition: transform .18s ease; }
.faq__icon svg { width: 100%; height: 100%; }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__answer { padding: 0 2px 20px; }

/* ---------------- pagination ---------------- */

.pager {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center;
  margin-top: 40px;
}
.pager__nums { display: flex; gap: 6px; }
.pager__num,
.pager__step {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 40px; height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none;
  justify-content: center;
}
.pager__num:hover,
.pager__step:not(.pager__step--off):hover { border-color: var(--blue-400); background: var(--blue-50); }
.pager__num--current { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pager__step--off { opacity: .4; }
.pager__step svg { width: 15px; height: 15px; }

@media (max-width: 600px) {
  .pager__step span { display: none; }
}