/* ==========================================================================
   Coverage page (coverage-v2.html). Builds on css/home-v2.css.
   Page-specific rules only.
   ========================================================================== */

.cv-page { padding-block: var(--s-7) var(--s-8); }
.cv-page h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.03em; }

/* ---------- Filter tabs ---------- */
.cv-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.chip {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--s-4);
  border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text);
  font-size: .88rem; transition: border-color .15s ease, background-color .15s ease;
}
.chip:hover { border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #000; }

/* ---------- Articles ---------- */
.articles { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 1px solid var(--line); }
.article { padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.article[hidden] { display: none; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font: 400 .74rem/1.4 var(--mono); color: var(--muted); }
.article-meta time { color: var(--text); }
.article-tag { padding: 1px var(--s-2); border: 1px solid var(--line-strong); border-radius: 999px; }
.article h2 { margin-top: var(--s-2); max-width: 60ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.35; letter-spacing: -0.01em; }
.article h2 a:hover { color: var(--accent); }
.article h2 span { color: var(--accent); font-size: .85em; }
.article-summary { margin-top: var(--s-2); max-width: 75ch; color: var(--text); font-size: .92rem; line-height: 1.6; }

/* ---------- Pager ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-6); }
.pager[hidden] { display: none; }
.pager button {
  min-width: 40px; height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: 8px;
  background: none; color: var(--text); font: 500 .85rem/1 var(--mono); cursor: pointer;
}
.pager button:hover:not(:disabled) { border-color: var(--muted); }
.pager button[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #000; }
.pager button:disabled { opacity: .35; cursor: default; }

@media (min-width: 901px) {
  .cv-page { padding-block: var(--s-8) var(--s-9); }
  .article { display: grid; grid-template-columns: 200px 1fr; gap: 0 var(--s-6); }
  .article-meta { flex-direction: column; align-items: flex-start; grid-row: 1 / span 2; padding-top: 3px; }
  .article h2 { margin-top: 0; }
}
