/* Insights: topic filter, featured article, article page typography. */

.page-header__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin-right: var(--space-5);
  vertical-align: -0.1em;
  background: rgba(255, 255, 255, 0.3);
}

/* --- Topic filter ------------------------------------------------------------------ */
.topic-nav { margin-bottom: var(--space-10); border-bottom: var(--hairline); }
.topic-nav ul { list-style: none; display: flex; gap: var(--space-6); margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.topic-nav ul::-webkit-scrollbar { display: none; }
.topic-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.topic-nav__link:hover { color: var(--color-text); }
.topic-nav__link.is-active { color: var(--color-text); border-bottom-color: var(--gm-green); }
.topic-nav__count { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }

/* --- Featured article -------------------------------------------------------------- */
.feature-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: var(--hairline);
}
@media (min-width: 1024px) {
  .feature-article { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
}
.feature-article__media { display: block; overflow: hidden; border-radius: var(--radius-media); }
.feature-article__media .site-img,
.feature-article__media .img-placeholder { border-radius: var(--radius-media); }
.feature-article__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: 600; }
.feature-article__label > span:first-child { padding: 2px var(--space-2); background: var(--gm-forest); color: var(--gm-white); border-radius: var(--radius-chip); font-size: var(--text-xs); }
.feature-article__topic { color: var(--gm-green); }
.feature-article__title { margin: 0 0 var(--space-4); font-size: var(--text-2xl); line-height: 1.15; }
@media (min-width: 1280px) { .feature-article__title { font-size: 2.5rem; } }
.feature-article__title a { color: var(--color-text); text-decoration: none; }
.feature-article__title a:hover { color: var(--gm-green); }
.feature-article__excerpt { margin: 0 0 var(--space-5); font-size: var(--text-md); line-height: 1.6; color: var(--color-text-muted); }
.feature-article .article-card__meta { margin-bottom: var(--space-6); }
.feature-article__cta { align-self: start; }

.article-grid-head { margin-bottom: var(--space-8); }
.article-grid-head__title { margin: 0; font-size: var(--text-xl); }

/* --- Article page ------------------------------------------------------------------ */
.page-header--article { padding-bottom: var(--space-20); }
.page-header--article h1 { max-width: 24ch; }
@media (min-width: 1024px) { .page-header--article { padding-bottom: 7.5rem; } }

.article-page { background: var(--gm-white); padding-bottom: var(--space-16); }
.article-cover { position: relative; margin-top: calc(var(--space-12) * -1); margin-bottom: var(--space-12); }
@media (min-width: 1024px) { .article-cover { margin-top: calc(var(--space-16) * -1); } }
.article-cover .site-img,
.article-cover .img-placeholder { border-radius: var(--radius-media); }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 720px) 280px; justify-content: space-between; gap: var(--space-16); }
  .article-aside { position: sticky; top: calc(64px + var(--space-6)); align-self: start; }
}

/* Long-form reading type: a measure around 68 characters, generous leading. */
.prose { font-size: var(--text-md); line-height: 1.75; color: var(--color-text); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--space-6); max-width: 68ch; }
.prose h2 { margin: var(--space-12) 0 var(--space-4); font-size: var(--text-xl); line-height: 1.25; }
.prose h3 { margin: var(--space-10) 0 var(--space-3); font-size: var(--text-lg); }
.prose ul,
.prose ol { margin: 0 0 var(--space-6); padding-left: var(--space-6); max-width: 66ch; }
.prose li { margin-bottom: var(--space-3); padding-left: var(--space-2); }
.prose ul li::marker { color: var(--gm-green); }
.prose strong { font-weight: 600; }
.prose a { color: var(--gm-green); text-underline-offset: 0.2em; }
.prose blockquote { margin: var(--space-8) 0; padding-left: var(--space-6); border-left: 3px solid var(--gm-green); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; }

.article-facts { margin: 0 0 var(--space-8); border-top: 2px solid var(--gm-ink); }
.article-facts > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--hairline); font-size: var(--text-sm); }
.article-facts dt { color: var(--color-text-muted); }
.article-facts dd { margin: 0; font-weight: 600; color: var(--color-text); text-align: right; }
.article-facts dd a { color: var(--gm-green); }

.article-aside__cta { padding: var(--space-6); background: var(--gm-paper); border-left: 3px solid var(--gm-green); }
.article-aside__cta p { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-muted); }
.article-aside__title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-weight: 700; font-size: var(--text-md) !important; color: var(--color-text) !important; }
.article-aside__cta .btn { margin-top: var(--space-2); }
.article-aside__cta .link-more { margin-top: var(--space-2); }

.article-back { margin: var(--space-12) 0 0; padding-top: var(--space-6); border-top: var(--hairline); }
@media (min-width: 1024px) { .article-back { max-width: 720px; } }