/* blog.css — blog index + post pages (owned by the blog page agent). */

/* ---------- Shared: 12px category chip (featured + post header) ---------- */
.blog-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 5px 10px;
  font: 500 12px/16px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Index: dark hero ---------- */
.blog-hero { background: var(--sv-noire); }
.blog-hero__inner {
  padding-block: 80px 88px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 72px;
  align-items: end;
}
.blog-hero__eyebrow {
  font: 500 12px/16px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sv-green);
  margin-bottom: 20px;
}
.blog-hero__title {
  font: 700 52px/58px var(--font-sans);
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 20px;
  max-width: 20ch;
  text-wrap: pretty;
}
.blog-hero__copy {
  font: 400 18px/28px var(--font-sans);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Coverage alerts card */
.blog-alerts {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 28px;
}
.blog-alerts__title { font: 600 18px/26px var(--font-sans); color: #FFFFFF; margin-bottom: 8px; }
.blog-alerts__copy {
  font: 400 14px/22px var(--font-sans);
  color: rgba(255, 255, 255, 0.56);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.blog-alerts__form { display: flex; gap: 10px; }
.blog-alerts__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 10px;
  padding: 0 14px;
  font: 400 14px/1 var(--font-sans);
  color: #FFFFFF;
}
.blog-alerts__submit {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 18px;
  background: var(--sv-green);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font: 600 14px/1 var(--font-sans);
}
.blog-alerts__submit:hover { background: var(--sv-green-700); }
.blog-alerts__success {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 14px/22px var(--font-sans);
  color: #FFFFFF;
}
.blog-alerts__success svg { flex: 0 0 auto; fill: var(--sv-green); }
.blog-alerts__error { font: 400 13px/20px var(--font-sans); color: var(--sv-danger); margin: 10px 0 0; }

/* ---------- Index: featured note ---------- */
.blog-featured { background: var(--sv-paper); border-bottom: 1px solid rgba(27, 27, 27, 0.10); }
.blog-featured__inner { padding-block: 72px; }
.blog-featured__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 56px;
  align-items: center;
}
.blog-featured__image { width: 100%; height: 440px; object-fit: cover; border-radius: 20px; }
.blog-featured__meta-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.blog-featured__meta { font: 500 13px/20px var(--font-mono); color: var(--sv-muted); }
.blog-featured__title {
  font: 700 40px/46px var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--sv-text);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.blog-featured__deck {
  font: 400 18px/28px var(--font-sans);
  color: var(--sv-muted);
  margin: 0 0 28px;
  max-width: 48ch;
  text-wrap: pretty;
}
.blog-featured__actions { display: flex; align-items: center; gap: 20px; }
.blog-featured__cta { height: 52px; }
.blog-featured__author { font: 400 14px/20px var(--font-sans); color: var(--sv-muted); }

/* ---------- Index: category pills + grid ---------- */
.blog-grid { background: var(--sv-cream); }
.blog-grid__inner { padding-block: 72px; }
.blog-grid__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.blog-grid__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-grid__pill {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--sv-muted);
  border: 1px solid rgba(27, 27, 27, 0.16);
  border-radius: var(--radius-full);
  height: 38px;
  padding: 0 16px;
  font: 500 14px/1 var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.blog-grid__pill:hover { color: var(--sv-text); border-color: rgba(27, 27, 27, 0.32); }
.blog-grid__pill--active { background: var(--sv-noire); color: #FFFFFF; border-color: var(--sv-noire); }
.blog-grid__pill--active:hover { color: #FFFFFF; border-color: var(--sv-noire); }
.blog-grid__count { font: 400 14px/20px var(--font-sans); color: var(--sv-muted); }
.blog-grid__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------- Index: coverage changelog ---------- */
.blog-changelog { background: var(--sv-paper); border-top: 1px solid rgba(27, 27, 27, 0.10); }
.blog-changelog__inner {
  padding-block: 88px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
}
.blog-changelog__eyebrow { margin-bottom: 16px; }
.blog-changelog__title {
  font: 700 32px/40px var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--sv-text);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.blog-changelog__copy {
  font: 400 16px/26px var(--font-sans);
  color: var(--sv-muted);
  margin: 0 0 24px;
  max-width: 38ch;
  text-wrap: pretty;
}
.blog-changelog__cta { height: 46px; padding: 0 20px; gap: 8px; border-radius: 10px; font-size: 14px; }
.blog-changelog__row {
  display: grid;
  grid-template-columns: 104px 172px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid rgba(27, 27, 27, 0.10);
}
.blog-changelog__date { font: 500 13px/20px var(--font-mono); color: var(--sv-muted); }
.blog-changelog__dest { font: 600 15px/22px var(--font-sans); color: var(--sv-text); }
.blog-changelog__change { font: 400 15px/22px var(--font-sans); color: var(--sv-muted); text-wrap: pretty; }

/* ---------- Post: header ---------- */
.post-header { background: var(--sv-paper); }
.post-header__back-row { padding-top: 28px; }
.post-header__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14px/20px var(--font-sans);
  color: var(--sv-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.post-header__back:hover { color: var(--sv-text); }
.post-header__inner { padding-block: 32px 48px; }
.post-header__content { max-width: 800px; }
.post-header__meta-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.post-header__meta { font: 500 13px/20px var(--font-mono); color: var(--sv-muted); }
.post-header__title {
  font: 700 52px/58px var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--sv-text);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.post-header__standfirst {
  font: 400 21px/32px var(--font-sans);
  color: var(--sv-muted);
  margin: 0 0 32px;
  max-width: 60ch;
  text-wrap: pretty;
}
.post-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(27, 27, 27, 0.10);
}
.post-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--sv-noire);
  color: var(--sv-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 15px/1 var(--font-sans);
  flex: none;
}
.post-avatar--lg { width: 52px; height: 52px; font: 600 17px/1 var(--font-sans); }
.post-byline__name { font: 600 15px/22px var(--font-sans); color: var(--sv-text); }
.post-byline__role { font: 400 14px/20px var(--font-sans); color: var(--sv-muted); text-wrap: pretty; }

/* ---------- Post: article + aside grid ---------- */
.post-body { background: var(--sv-paper); }
.post-body__inner {
  padding-block: 8px 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 72px;
  align-items: start;
}
.post-article { max-width: 760px; }
.post-article__image { width: 100%; height: 380px; object-fit: cover; border-radius: 16px; margin-bottom: 16px; }
.post-article__caption { font: 400 13px/20px var(--font-sans); color: var(--sv-muted); margin-bottom: 48px; }
.post-article__h2 {
  font: 700 30px/38px var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--sv-text);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.post-article__p { font: 400 17px/29px var(--font-sans); color: var(--sv-text); margin: 0 0 20px; text-wrap: pretty; }
.post-article__p--space { margin-bottom: 32px; }
.post-article__p--space-lg { margin-bottom: 40px; }
.post-article__author {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid rgba(27, 27, 27, 0.12);
}
.post-article__author .post-byline__role { line-height: 22px; }

/* Milestone table */
.post-table { border: 1px solid rgba(27, 27, 27, 0.12); border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 32px; }
.post-table__head {
  display: grid;
  grid-template-columns: 1fr 150px 130px;
  gap: 16px;
  padding: 14px 20px;
  background: var(--sv-mist);
  border-bottom: 1px solid rgba(27, 27, 27, 0.10);
}
.post-table__label {
  font: 500 11px/16px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sv-muted);
}
.post-table__row {
  display: grid;
  grid-template-columns: 1fr 150px 130px;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(27, 27, 27, 0.08);
}
.post-table__row:last-child { border-bottom: none; }
.post-table__milestone { font: 400 15px/22px var(--font-sans); color: var(--sv-text); }
.post-table__date { font: 500 14px/22px var(--font-mono); color: var(--sv-text); }
.post-table__status { font: 500 13px/22px var(--font-sans); }
.post-table__status--confirmed { color: var(--sv-green-700); }
.post-table__status--expected { color: var(--sv-warning); }

/* Green-dot bullet list */
.post-bullets { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; }
.post-bullets__item { display: flex; gap: 12px; align-items: baseline; }
.post-bullets__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--sv-green);
  flex: none;
  transform: translateY(-3px);
}
.post-bullets__text { font: 400 17px/29px var(--font-sans); color: var(--sv-text); text-wrap: pretty; }

/* Pull quote */
.post-quote {
  padding: 32px 0;
  border-top: 1px solid rgba(27, 27, 27, 0.12);
  border-bottom: 1px solid rgba(27, 27, 27, 0.12);
  margin: 0 0 40px;
}
.post-quote__text {
  font: 600 26px/36px var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--sv-text);
  margin: 0;
  text-wrap: pretty;
}

/* Numbered steps */
.post-steps { display: flex; flex-direction: column; gap: 20px; margin: 0 0 32px; }
.post-steps__item { display: flex; gap: 16px; }
.post-steps__num { font: 600 14px/29px var(--font-mono); color: var(--sv-green-700); flex: none; }
.post-steps__text { font: 400 17px/29px var(--font-sans); color: var(--sv-text); margin: 0; text-wrap: pretty; }
.post-steps__lead { font-weight: 600; }

/* Green callout */
.post-callout { background: var(--sv-green-50); border-radius: var(--radius-lg); padding: 24px 28px; margin: 0 0 40px; }
.post-callout__title { font: 600 16px/24px var(--font-sans); color: var(--sv-text); margin-bottom: 6px; }
.post-callout__copy { font: 400 15px/24px var(--font-sans); color: var(--sv-text); margin: 0; text-wrap: pretty; }
.post-callout__mono { font: 500 14px/24px var(--font-mono); }

/* Aside */
.post-aside { position: sticky; top: 92px; }
.post-aside__label {
  font: 500 11px/16px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sv-muted);
  margin-bottom: 16px;
}
.post-toc { display: flex; flex-direction: column; margin-bottom: 32px; }
.post-toc__item {
  font: 400 14px/22px var(--font-sans);
  color: var(--sv-muted);
  padding: 8px 0 8px 14px;
  border-left: 2px solid rgba(27, 27, 27, 0.10);
}
.post-toc__item--active { font-weight: 500; color: var(--sv-text); border-left-color: var(--sv-green); }
.post-aside .ask-ai { margin-top: 20px; }

.post-demo-card { background: var(--sv-noire); border-radius: 16px; padding: 24px; }
.post-demo-card__title { font: 600 17px/25px var(--font-sans); color: #FFFFFF; margin-bottom: 8px; }
.post-demo-card__copy {
  font: 400 14px/22px var(--font-sans);
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.post-demo-card__cta { width: 100%; height: 44px; border-radius: 10px; font-size: 14px; }

/* ---------- Post: keep reading ---------- */
.post-related { background: var(--sv-cream); border-top: 1px solid rgba(27, 27, 27, 0.08); }
.post-related__inner { padding-block: 80px; }
.post-related__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.post-related__title { font: 700 32px/40px var(--font-sans); letter-spacing: -0.02em; color: var(--sv-text); margin: 0; }
.post-related__all {
  font: 500 14px/20px var(--font-sans);
  color: var(--sv-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.post-related__all:hover { color: var(--sv-text); }
.post-related__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 1140px) {
  .blog-grid__cards, .post-related__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .blog-hero__inner { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .blog-hero__title { font-size: 40px; line-height: 46px; }
  .blog-featured__grid { grid-template-columns: 1fr; gap: 32px; }
  .blog-featured__image { height: 300px; }
  .blog-featured__title { font-size: 32px; line-height: 38px; }
  .blog-grid__cards, .post-related__cards { grid-template-columns: 1fr; }
  .blog-changelog__inner { grid-template-columns: 1fr; gap: 40px; }
  .post-header__title { font-size: 40px; line-height: 46px; }
  .post-header__standfirst { font-size: 18px; line-height: 28px; }
  .post-body__inner { grid-template-columns: 1fr; gap: 48px; }
  .post-aside { position: static; }
  .post-article__image { height: 280px; }
}

@media (max-width: 640px) {
  .blog-alerts__form { flex-wrap: wrap; }
  .blog-changelog__row { grid-template-columns: 88px 1fr; }
  .blog-changelog__change { grid-column: 1 / -1; }
  .post-table__head, .post-table__row { grid-template-columns: 1fr 100px 92px; gap: 10px; padding-inline: 14px; }
}