/* Blog: the listing at /blog/ and each article. Uses the home page's components
   (home.css: ad-*), the about opening (about.css: ab-hero) and the service crumb style. */

.sv-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--ad-faint); }
.sv-crumb a { color: var(--ad-soft); text-decoration: none; transition: color 150ms ease; }
@media (hover: hover) { .sv-crumb a:hover { color: var(--ad-brand); } }

/* ---------- Listing ---------- */

.bl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.bl-chip {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  background: #fff;
  font: 500 14px/1 Inter, system-ui, sans-serif;
  color: var(--ad-soft);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.bl-chip[aria-pressed="true"] { background: var(--ad-brand); border-color: var(--ad-brand); color: #fff; }
@media (hover: hover) { .bl-chip[aria-pressed="false"]:hover { border-color: var(--ad-brand); color: var(--ad-brand); } }
.bl-chip:focus-visible { outline: 2px solid var(--ad-brand); outline-offset: 2px; }

.bl-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .bl-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .bl-grid { grid-template-columns: repeat(3, 1fr); } }

.bl-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--ad-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  color: var(--ad-ink);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.bl-card[hidden] { display: none; }
.bl-card-cat { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--ad-lav); font-size: 12.5px; font-weight: 600; color: var(--ad-brand); }
.bl-card h3 { margin: 16px 0 0; font-size: 20px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }
.bl-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ad-soft); }
.bl-card-meta { margin-top: auto; padding-top: 20px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ad-brand); }
.bl-card-meta i { font-size: 12px; transition: transform 180ms var(--ad-ease-out); }
@media (hover: hover) {
  .bl-card:hover { border-color: rgba(76, 72, 157, .4); box-shadow: 0 20px 40px -24px rgba(76, 72, 157, .35); }
  .bl-card:hover .bl-card-meta i { transform: translateX(3px); }
}
.bl-card:focus-visible { outline: 2px solid var(--ad-brand); outline-offset: 3px; }
/* The newest guide leads the list, across two columns. */
@media (min-width: 700px) {
  .bl-card.is-big { grid-column: 1 / -1; padding: 40px; background: var(--ad-lav); border-color: transparent; }
  .bl-card.is-big h3 { font-size: clamp(26px, 3vw, 36px); max-width: 820px; }
  .bl-card.is-big p { font-size: 17px; max-width: 720px; }
}

/* ---------- Article ---------- */

.bl-narrow { max-width: 860px; }
.bl-hero { padding: 144px 0 32px; text-align: left; }
@media (min-width: 768px) { .bl-hero { padding: 168px 0 40px; } }
.bl-hero h1 {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 54px) !important;
  line-height: 1.08 !important;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ad-ink);
  text-wrap: balance;
}
.bl-lede { margin: 18px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ad-soft); }
.bl-byline { margin-top: 24px; display: flex; align-items: center; gap: 12px; }
.bl-byline img { width: 40px; height: 40px; }
.bl-byline b { display: block; font-size: 15px; }
.bl-byline span { display: block; font-size: 13.5px; color: var(--ad-faint); }

.bl-layout { display: grid; gap: 32px; padding-bottom: 32px; }
@media (min-width: 1100px) { .bl-layout { grid-template-columns: 280px minmax(0, 760px); justify-content: center; gap: 48px; } }

/* ---------- Table of contents ----------
   Wide screens: a sticky card with reading progress, numbered sections, a marker that
   follows the section you're in, ticks on sections already read, and a small CTA.
   Phones: collapsed behind one button above the article. */
.bl-toc {
  align-self: start;
  padding: 20px;
  border: 1px solid var(--ad-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 2px rgba(22, 20, 58, .04);
}
@media (min-width: 1100px) { .bl-toc { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow: auto; scrollbar-width: thin; } }

.bl-toc-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 15px/1.3 Inter, system-ui, sans-serif;
  color: var(--ad-ink);
  cursor: pointer;
}
.bl-toc-toggle > span i { margin-right: 8px; color: var(--ad-brand); }
.bl-toc-chev { font-size: 12px; color: var(--ad-faint); transition: transform 180ms cubic-bezier(.645, .045, .355, 1); }
.bl-toc.is-open .bl-toc-chev { transform: rotate(180deg); }
.bl-toc-toggle:focus-visible { outline: 2px solid var(--ad-brand); outline-offset: 4px; border-radius: 8px; }

.bl-toc-head { display: none; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.bl-toc-head span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ad-faint); }
.bl-toc-pct { font-size: 13px; font-weight: 700; color: var(--ad-brand); font-variant-numeric: tabular-nums; }
.bl-toc-bar { display: none; height: 4px; margin-bottom: 14px; border-radius: 999px; background: var(--ad-lav); overflow: hidden; }
.bl-toc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ad-brand); transform-origin: left center; transform: scaleX(var(--read, 0)); }

.bl-toc-body { position: relative; display: none; margin-top: 12px; }
.bl-toc.is-open .bl-toc-body { display: block; }
@media (min-width: 1100px) {
  .bl-toc-toggle { display: none; }
  .bl-toc-head { display: flex; }
  .bl-toc-bar { display: block; }
  .bl-toc-body { display: block; margin-top: 0; }
}

.bl-toc-list { list-style: none; margin: 0; padding: 0 0 0 12px; display: grid; gap: 2px; border-left: 2px solid var(--ad-line); }
.bl-toc-list a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ad-soft);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.bl-toc-n {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  margin-top: -2px;
  border-radius: 8px;
  background: #f3f2f9;
  font-size: 11px;
  font-weight: 700;
  color: var(--ad-faint);
  font-variant-numeric: tabular-nums;
  transition: background-color 150ms ease, color 150ms ease;
}
.bl-toc-list a.is-done { color: var(--ad-ink); }
.bl-toc-list a.is-done .bl-toc-n { background: var(--ad-lav); color: var(--ad-brand); font-size: 0; }
.bl-toc-list a.is-done .bl-toc-n::before { content: "\f00c"; font: 900 10px/1 "Font Awesome 6 Free"; }
.bl-toc-list a.is-active { background: var(--ad-lav); color: var(--ad-brand); font-weight: 600; }
.bl-toc-list a.is-active .bl-toc-n { background: var(--ad-brand); color: #fff; }
@media (hover: hover) { .bl-toc-list a:not(.is-active):hover { background: #f7f6fc; color: var(--ad-ink); } }
.bl-toc-list a:focus-visible { outline: 2px solid var(--ad-brand); outline-offset: 1px; }

/* The marker sits on the rail and moves to the current section: an on-screen move,
   so it eases in and out. */
.bl-toc-marker {
  position: absolute;
  left: -1px;
  top: 0;
  width: 4px;
  height: var(--mh, 0);
  border-radius: 999px;
  background: var(--ad-brand);
  opacity: 0;
  transform: translateY(var(--my, 0));
  transition: transform 240ms cubic-bezier(.645, .045, .355, 1), height 240ms cubic-bezier(.645, .045, .355, 1), opacity 150ms ease;
}
.bl-toc-marker.is-on { opacity: 1; }

.bl-toc-cta {
  position: relative;
  display: none;
  margin-top: 16px;
  padding: 16px 44px 16px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--ad-brand), var(--ad-brand-deep));
  color: #fff;
  text-decoration: none;
}
@media (min-width: 1100px) { .bl-toc-cta { display: block; } }
.bl-toc-cta b { display: block; font-size: 14.5px; }
.bl-toc-cta span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: #dcdaf7; }
.bl-toc-cta i { position: absolute; right: 16px; top: 50%; margin-top: -7px; font-size: 13px; transition: transform 180ms var(--ad-ease-out); }
@media (hover: hover) { .bl-toc-cta:hover i { transform: translateX(3px); } }
.bl-toc-cta:focus-visible { outline: 2px solid var(--ad-brand); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .bl-toc-marker, .bl-toc-chev { transition: none; } }

.bl-body { min-width: 0; font-size: 17.5px; line-height: 1.75; color: #2c2b45; }
.bl-body section { scroll-margin-top: 110px; }
.bl-body h2 {
  margin: 48px 0 0;
  font-size: clamp(26px, 2.6vw, 32px) !important;
  line-height: 1.2 !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ad-ink);
}
.bl-body h3 { margin: 32px 0 0; font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--ad-ink); }
.bl-body p { margin: 16px 0 0; }
.bl-body ul, .bl-body ol { margin: 16px 0 0; padding-left: 24px; display: grid; gap: 8px; }
.bl-body li::marker { color: var(--ad-brand); }
.bl-body a { color: var(--ad-brand); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(76, 72, 157, .35); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
@media (hover: hover) { .bl-body a:hover { text-decoration-color: var(--ad-brand); } }
.bl-body code { padding: 2px 6px; border-radius: 6px; background: var(--ad-lav); font-size: .88em; }
.bl-body strong { color: var(--ad-ink); }

.bl-takeaways { padding: 24px 28px; border-radius: 20px; background: var(--ad-lav); }
.bl-takeaways b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ad-brand); }
.bl-takeaways ul { margin-top: 12px; font-size: 16.5px; line-height: 1.6; }

.bl-callout { margin: 24px 0 0; padding: 20px 24px; border-left: 4px solid var(--ad-brand); border-radius: 0 16px 16px 0; background: #fff; }
.bl-callout b { display: block; font-size: 14px; letter-spacing: .02em; color: var(--ad-brand); }
.bl-callout p { margin-top: 6px; font-size: 16.5px; }

.bl-table { margin: 24px 0 0; overflow-x: auto; border: 1px solid var(--ad-line); border-radius: 16px; background: #fff; }
.bl-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.bl-table th { padding: 12px 16px; background: #f6f5fc; text-align: left; font-weight: 700; color: var(--ad-ink); white-space: nowrap; }
.bl-table td { padding: 12px 16px; border-top: 1px solid var(--ad-line); vertical-align: top; }

.bl-faq { margin-top: 56px; }
.bl-faq .ad-faq { margin-top: 16px; }
.bl-faq .ad-faq p { font-size: 16px; }

.bl-author { margin-top: 48px; display: flex; gap: 16px; padding: 24px; border: 1px solid var(--ad-line); border-radius: 20px; background: #fff; }
.bl-author img { width: 56px; height: 56px; flex-shrink: 0; }
.bl-author b { font-size: 16px; color: var(--ad-ink); }
.bl-author p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--ad-soft); }