/* Blog index and article pages. Design System tokens only (css/design-tokens.css). Loaded after hero.css and page-body.css. */

/* Hero tweaks for articles: long titles need a smaller display size than the page heroes */
.hero--blog h1.hero__title { font-size: clamp(30px, calc(30px + 14 * (100vw - 768px) / 256), 44px); line-height: 1.1; }
.hero__meta { margin: 0 0 var(--ds-s5); font-size: 15px; line-height: 1.5; color: var(--ds-on-dark-soft); }
.hero__meta time { color: var(--ds-on-dark); }

/* Breadcrumbs */
.ds-body > section.bl-crumbs { padding-block: var(--ds-s2); background: var(--ds-paper); }
.bl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ds-s2); list-style: none; margin: 0; padding: 0; font-size: 15px; color: var(--ds-ink-soft); }
.bl-crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.bl-crumbs li + li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: var(--ds-s2);
  background: var(--ds-slate-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bl-crumbs a { color: var(--ds-link); text-decoration: underline; text-underline-offset: 3px; }
.bl-crumbs a:hover { color: var(--ds-link-hover); }

/* Article */
.ds-body > section.bl-article { background: var(--ds-white); }
.bl-article__body { max-width: 760px; margin-inline: auto; }
.bl-article__body p, .bl-article__body li { font-size: 17px; line-height: 1.7; color: var(--ds-ink); }
.bl-article__body p { margin: 0 0 var(--ds-s4); }
.bl-article__body .bl-intro p { font-size: 19px; line-height: 1.6; color: var(--ds-ink-soft); }
@media (min-width: 1024px) { .bl-article__body .bl-intro p { font-size: 20px; } }
.bl-article__body h2 {
  margin: var(--ds-s7) 0 var(--ds-s4);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(26px, calc(26px + 6 * (100vw - 768px) / 256), 32px);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: normal;
  color: var(--ds-ink);
}
.bl-article__body h3 {
  margin: var(--ds-s5) 0 var(--ds-s3);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: normal;
  color: var(--ds-ink);
}
.bl-article__body h2[id], .bl-article__body h3[id] { scroll-margin-top: calc(72px + var(--ds-s4)); }
.bl-article__body ul, .bl-article__body ol { margin: 0 0 var(--ds-s4); padding-left: var(--ds-s5); }
.bl-article__body li { margin: 0 0 var(--ds-s2); }
.bl-article__body a { color: var(--ds-link); text-decoration: underline; text-underline-offset: 3px; }
.bl-article__body a:hover { color: var(--ds-link-hover); }
.bl-article a:focus-visible, .bl-card a:focus-visible, .bl-crumbs a:focus-visible { outline: 3px solid var(--ds-focus-light); outline-offset: 2px; }

/* Table of contents (always directly under the introduction) */
.bl-toc { margin: var(--ds-s6) 0; padding: var(--ds-s5); background: var(--ds-paper); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.bl-toc__title { margin: 0 0 var(--ds-s3); font-family: var(--ds-font-display); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--ds-ink); }
.bl-article__body .bl-toc ol { margin: 0; padding-left: var(--ds-s5); }
.bl-article__body .bl-toc ol ol { margin: var(--ds-s1) 0 0; list-style-type: lower-alpha; }
.bl-article__body .bl-toc li { margin: 0; font-size: 17px; line-height: 1.4; }
.bl-article__body .bl-toc a { display: inline-flex; align-items: center; min-height: 44px; }

/* Callout */
.bl-callout { margin: var(--ds-s5) 0; padding: var(--ds-s5); background: var(--ds-mist); border-radius: var(--ds-radius-card); }
.bl-article__body .bl-callout p { margin: 0; }

/* Comparison table */
.bl-table-wrap { margin: 0 0 var(--ds-s5); overflow-x: auto; }
.bl-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.bl-table th, .bl-table td { padding: var(--ds-s3) var(--ds-s4); text-align: left; vertical-align: top; border: 1px solid var(--ds-line); }
.bl-table thead th { background: var(--ds-mist); font-weight: 600; color: var(--ds-ink); }
.bl-table tbody th { font-weight: 600; background: var(--ds-paper); }

/* FAQ inside an article: the existing accordion styles apply (.bc-faq__*); just keep the spacing tidy */
.bl-article__body .bc-faq__list { max-width: none; margin: 0 0 var(--ds-s5); }

/* Cards (index + related articles) */
.ds-body > section.bl-related, .ds-body > section.bl-cat--paper { background: var(--ds-paper); }
.ds-body > section.bl-cat { background: var(--ds-white); }
.bl-section-title {
  margin: 0 0 var(--ds-s2);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(30px, calc(30px + 14 * (100vw - 768px) / 256), 44px);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: normal;
  color: var(--ds-ink);
}
.bl-section-lede { margin: 0 0 var(--ds-s5); max-width: 40rem; font-size: 18px; line-height: 1.5; color: var(--ds-ink-soft); }
.bl-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-s4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .bl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s5); } }
@media (min-width: 1024px) { .bl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-card { display: flex; flex-direction: column; padding: var(--ds-s5); background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-sm); }
.bl-card__label { margin: 0 0 var(--ds-s2); font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--ds-amber-text); }
.bl-card__title { margin: 0 0 var(--ds-s3); font-family: var(--ds-font-display); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: 0; text-transform: none; overflow-wrap: normal; }
.bl-card__title a { color: var(--ds-ink); text-decoration: none; }
.bl-card__title a:hover { color: var(--ds-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.bl-card__text { margin: 0 0 var(--ds-s4); color: var(--ds-ink); }
.bl-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-s2);
  align-self: flex-start;
  min-height: 48px;
  margin-top: auto;
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ds-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bl-card__link:hover { color: var(--ds-link-hover); }
.bl-card__link::after {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bl-note { margin: 0 0 var(--ds-s6); max-width: 48rem; font-size: 17px; color: var(--ds-ink-soft); }

/* Blog index: category sections are compact (each holds only one or two cards at the moment) */
.ds-body > section.bl-cat { padding-block: var(--ds-s7); }
.ds-body > section.bl-article.bl-article--note { padding-block: var(--ds-s6) 0; }