/* ============================================================
   page-news — News index + article template
   Aurora Glass × Editorial re-skin.

   Scope:
   - .news-index  → the /news/ listing (src/news/index.njk)
   - .news-article → article pages rendered through
     layouts/news-article.njk (markup we don't own, restyled here).

   Tokens, .glass, .btn-link, .eyebrow, .crumbs, .pagehead, etc.
   come from css/aurora.css — we only add page-specific pieces.
   ============================================================ */

/* ------------------------------------------------------------
   NEWS INDEX  (src/news/index.njk)
   ------------------------------------------------------------ */
.news-index .news-band { padding: 34px 0 8px; }

.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Glass article cards — modeled on the design system's
   dispatch/issue cards: uppercase meta with an accent category,
   serif headline, a muted dek, and an accent "read" link. */
.news-card {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.news-card:hover { transform: translateY(-3px); }

.news-card .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.news-card .meta .no { color: var(--accent); }

.news-card .hl {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}

.news-card .card-dek {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  margin: 0;
}

.news-card .more { margin-top: auto; }

/* ------------------------------------------------------------
   NEWS ARTICLE  (layouts/news-article.njk → .article.news-article)
   The layout emits: .breadcrumb, .article-header (.article-meta
   .tag, h1, .lede), optional .article-hero-image, .article-body,
   then the share + pledge partials. We center + skin all of it.
   ------------------------------------------------------------ */
.news-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Breadcrumb (shared partial markup .breadcrumb) styled to match
   the design system's .crumbs. */
.news-article .breadcrumb,
.news-index + * .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  padding: 30px 0 0;
}
.news-article .breadcrumb a { color: var(--muted); }
.news-article .breadcrumb a:hover { color: var(--ink); }
.news-article .breadcrumb span { color: var(--faint); }

/* Article head */
.news-article .article-header { padding: 24px 0 14px; }

.news-article .article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 18px;
}
.news-article .article-meta .tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  padding: 5px 11px;
  border-radius: 99px;
}

.news-article .article-header h1 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: clamp(34px, 4.6vw, 56px);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.news-article .article-header .lede {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--muted);
  margin: 20px 0 0;
  text-wrap: pretty;
}
.news-article .article-header .lede a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
}

/* Hero image */
.news-article .article-hero-image {
  margin: 30px 0 8px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.news-article .article-hero-image img { display: block; width: 100%; height: auto; }

/* ---------- Article body (prose) ---------- */
.news-article .article-body {
  padding: 14px 0 8px;
  border-top: 1px solid var(--hairline);
  margin-top: 22px;
}

.news-article .article-body > p {
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.68;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}
.news-article .article-body > p + p { margin-top: 22px; }
.news-article .article-body > p em { font-style: italic; }
.news-article .article-body > p strong { font-weight: 600; }

.news-article .article-body h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 44px 0 6px;
  scroll-margin-top: 96px;
}
.news-article .article-body h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 28px 0 4px;
}

.news-article .article-body ul,
.news-article .article-body ol {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.news-article .article-body ul li,
.news-article .article-body ol li {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 26px;
  position: relative;
}
.news-article .article-body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.news-article .article-body ol { counter-reset: li; }
.news-article .article-body ol li { counter-increment: li; }
.news-article .article-body ol li::before {
  content: counter(li);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
}

.news-article .article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
}

/* ---------- Callout (glass) ---------- */
.news-article .callout {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: 18px;
  padding: 22px 26px;
  margin: 30px 0;
  border-left: 3px solid var(--accent);
}
.news-article .callout .callout-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.news-article .callout p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.news-article .callout p strong,
.news-article .callout p b { color: var(--ink); }

/* ---------- Peptide list card (glass) ---------- */
.news-article .peptide-list-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: 18px;
  padding: 10px 10px 14px;
  margin: 30px 0;
}
.news-article .peptide-list-card .plc-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 14px 16px 10px;
}
.news-article .peptide-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: baseline;
  padding: 13px 16px;
  border-radius: 14px;
}
.news-article .peptide-row + .peptide-row { box-shadow: 0 -1px 0 var(--hairline); }
.news-article .peptide-name {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.news-article .peptide-use {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--muted);
  text-align: right;
}

/* ---------- Timeline (glass, mono markers) ---------- */
.news-article .timeline {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: 18px;
  padding: 24px 28px;
  margin: 30px 0;
}
.news-article .timeline .timeline-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 18px;
}
.news-article .timeline-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 14px 0 14px 20px;
  position: relative;
  border-left: 2px solid var(--hairline);
}
.news-article .timeline-item:last-child { padding-bottom: 2px; }
.news-article .timeline-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent);
}
.news-article .timeline-date {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
  padding-top: 1px;
}
.news-article .timeline-event {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- Disclaimer (glass, caution) ---------- */
.news-article .disclaimer {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: 18px;
  padding: 20px 24px;
  margin: 34px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  border-left: 3px solid var(--warn);
}

/* ---------- Sources / references (glass, mono markers) ---------- */
.news-article .sources-section {
  margin: 40px 0 0;
}
.news-article .sources-section h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 18px;
}
.news-article .sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.news-article .sources-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  padding: 13px 0;
}
/* Safety net: if an author omits the <span class="src-num"> marker, the lone
   child would otherwise land in the 30px column and wrap one word per line
   (a "skinny column"). Fall back to normal block flow so the layout never
   collapses. The intended look still requires the .src-num marker. */
.news-article .sources-list li:not(:has(.src-num)) {
  display: block;
}
.news-article .sources-list li + li { border-top: 1px solid var(--hairline); }
.news-article .sources-list .src-num {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
}
.news-article .sources-list em { font-style: italic; color: var(--ink); }
.news-article .sources-list a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
}

/* ---------- Related / keep-reading block ---------- */
.news-article .content-section { margin: 42px 0 0; }
.news-article .content-section > h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
}
.news-article .related-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.news-article .related-link {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.news-article .related-link:hover { transform: translateY(-2px); }
.news-article .related-link .arrow {
  color: var(--accent);
  font-size: 18px;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.news-article .related-link:hover .arrow { transform: translateX(3px); }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .news-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .news-article { padding: 0 22px; }
  .news-card { padding: 24px 22px; }
  .news-article .peptide-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .news-article .peptide-use { text-align: left; }
  .news-article .timeline-item { grid-template-columns: 1fr; gap: 6px; }
  .news-article .related-links { grid-template-columns: 1fr; }
}