/* Blog article page — premium reading layout (every /blog/<slug>/ page).
   Loaded after style.css and restyles the shared v2 article template:
   one palette (ink, warm paper, crimson accent), a calm reading column, and a sticky sidebar
   with the lead offer and table of contents. Lead widgets themselves are built by js/lead/blog.js
   (styles in css/lead-blog.css); layout enhancements by js/blog-article.js. */

body.blog-page {
  --ba-ink: #1C1410;
  --ba-ink-2: #3D3530;
  --ba-muted: #6F665F;
  --ba-line: #E9E3DB;
  --ba-paper: #FBF9F6;
  --ba-card: #FFFFFF;
  --ba-accent: #8B1A1A;
  --ba-accent-hover: #6B1212;
  --ba-accent-tint: #F7EEEB;
  --ba-dark: #1C1410;
  --ba-gold: #D4B45E;
  --ba-radius: 16px;
  --ba-shadow: 0 1px 2px rgba(28,20,16,.04), 0 12px 32px rgba(28,20,16,.07);
  background: var(--ba-paper);
}

/* ── Reading progress ───────────────────────────────────────── */
.ba-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: 3px; pointer-events: none;
  background: transparent;
}
.ba-progress__bar { height: 100%; width: 100%; background: var(--ba-accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ── Shell ──────────────────────────────────────────────────── */
body.blog-page .blog-article-shell-v2 { background: var(--ba-paper); padding: 28px 0 88px; }
body.blog-page .blog-breadcrumb-trail { font-size: 13px; margin-bottom: 28px; color: var(--ba-muted); }
body.blog-page .blog-breadcrumb-trail a { color: var(--ba-muted); }
body.blog-page .blog-breadcrumb-trail a:hover { color: var(--ba-accent); }
body.blog-page .blog-breadcrumb-trail__current { color: var(--ba-ink-2); max-width: 280px; }

body.blog-page .blog-article-two-col {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: stretch;
}
body.blog-page .blog-article-main-v2 { min-width: 0; }

/* ── Hero: open layout on paper, no card ────────────────────── */
body.blog-page .blog-article-hero-v2 {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 32px; overflow: visible;
}
body.blog-page .blog-article-hero-v2 .blog-article-hero__meta { gap: 14px; margin-bottom: 18px; }
body.blog-page .blog-article-hero__tag,
body.blog-page .blog-article-hero__tag[class*="blog-tag--"] {
  background: var(--ba-accent-tint); color: var(--ba-accent); border: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
body.blog-page .blog-article-hero__readtime { font-size: 13px; color: var(--ba-muted); }
body.blog-page .blog-article-hero-v2 h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.35rem); line-height: 1.06; letter-spacing: -.03em;
  margin-bottom: 18px; max-width: 820px; text-wrap: balance;
}
body.blog-page .blog-article-hero-v2 .blog-article-hero__lede {
  font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.65; color: var(--ba-ink-2); margin-bottom: 24px; max-width: 680px;
}
body.blog-page .blog-article-author-row-v2 { padding: 18px 0; border-top: 1px solid var(--ba-line); border-bottom: 1px solid var(--ba-line); margin-bottom: 28px; }
body.blog-page .blog-article-author-avatar-v2,
body.blog-page .blog-article-author-bio__avatar { background: var(--ba-dark) !important; color: #fff; }
body.blog-page .blog-article-author-date-v2 { font-size: 13px; color: var(--ba-muted); }

body.blog-page .blog-article-main-v2 .blog-article-cover-v2 {
  border-radius: var(--ba-radius); background: #F3EEE7; box-shadow: var(--ba-shadow);
}

/* ── Article body: a clean reading column, not a boxed card ─── */
body.blog-page .blog-article-body-v2 {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}
body.blog-page .blog-article-body-v2 > p,
body.blog-page .blog-article-body-v2 > ul li,
body.blog-page .blog-article-body-v2 > ol li {
  font-size: 1.075rem; line-height: 1.8; color: var(--ba-ink-2);
}
body.blog-page .blog-article-body-v2 > p { margin-bottom: 20px; }
body.blog-page .blog-article-body-v2 > h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem); line-height: 1.15; letter-spacing: -.02em;
  margin: 56px 0 16px; scroll-margin-top: 96px; text-wrap: balance;
}
body.blog-page .blog-article-body-v2 > h3 {
  font-family: var(--sans); font-size: 1.15rem; font-weight: 700; color: var(--ba-ink);
  margin: 32px 0 10px; scroll-margin-top: 96px;
}
/* Prose links only: widgets style their own links. */
body.blog-page .blog-article-body-v2 > :is(p, ul, ol, .ba-table, .ba-faq, .ba-sources) a:not([class]) {
  color: var(--ba-accent); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ba-accent) 40%, transparent);
}
body.blog-page .blog-article-body-v2 > :is(p, ul, ol, .ba-table, .ba-faq, .ba-sources) a:not([class]):hover { text-decoration-color: currentColor; }
body.blog-page .blog-article-body-v2 strong { color: var(--ba-ink); }

/* Lists: quiet dots and numbers instead of badge ticks */
body.blog-page .blog-article-body-v2 > ul li { padding-left: 26px; }
body.blog-page .blog-article-body-v2 > ul li::before {
  content: ''; width: 7px; height: 7px; top: .72em; margin: 0; left: 6px; border-radius: 50%; background: var(--ba-accent);
}
body.blog-page .blog-article-body-v2 > ol li { padding-left: 38px; }
body.blog-page .blog-article-body-v2 > ol li::before {
  top: .2em; margin: 0; width: 26px; height: 26px; background: var(--ba-accent-tint); color: var(--ba-accent); font-size: .8rem;
}

/* Quick answer */
body.blog-page .blog-article-quickanswer {
  position: relative; background: var(--ba-card); border: 1px solid var(--ba-line); border-left: 0;
  border-radius: var(--ba-radius); padding: 22px 24px 22px 28px; margin: 0 0 20px;
  font-size: 1.02rem; line-height: 1.75; color: var(--ba-ink-2); box-shadow: var(--ba-shadow); overflow: hidden;
}
body.blog-page .blog-article-quickanswer::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ba-accent);
}
body.blog-page .blog-article-quickanswer > strong:first-child {
  display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ba-accent);
}

/* Tables: contained, scrollable on small screens */
.ba-table { margin: 24px 0 32px; border: 1px solid var(--ba-line); border-radius: 14px; background: var(--ba-card); overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 1px 2px rgba(28,20,16,.04); }
body.blog-page .blog-article-body-v2 .ba-table table { margin: 0; border: 0; border-radius: 0; min-width: 560px; font-size: .95rem; }
body.blog-page .blog-article-body-v2 table thead { background: #F6F2EC; }
body.blog-page .blog-article-body-v2 th { color: var(--ba-ink-2); font-size: .74rem; font-weight: 700; padding: 12px 16px; }
body.blog-page .blog-article-body-v2 td { color: var(--ba-ink-2); padding: 14px 16px; border-bottom-color: #F0EBE4; }
body.blog-page .blog-article-body-v2 td:first-child { color: var(--ba-ink); font-weight: 600; }
body.blog-page .blog-article-body-v2 tbody tr:hover td { background: #FCFAF7; }

/* FAQ accordion (built by js/blog-article.js from h3 + answer) */
.ba-faq { display: grid; gap: 10px; margin: 8px 0 24px; }
.ba-faq__item { background: var(--ba-card); border: 1px solid var(--ba-line); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.ba-faq__item[open] { border-color: #DCCFC3; box-shadow: var(--ba-shadow); }
.ba-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none;
  font-family: var(--sans); font-size: 1.02rem; font-weight: 700; color: var(--ba-ink); line-height: 1.4;
}
.ba-faq__q::-webkit-details-marker { display: none; }
.ba-faq__q::after {
  content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ba-accent); border-bottom: 2px solid var(--ba-accent);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
.ba-faq__item[open] .ba-faq__q::after { transform: translateY(2px) rotate(-135deg); }
.ba-faq__q:focus-visible { outline: 2px solid var(--ba-accent); outline-offset: 2px; border-radius: 12px; }
.ba-faq__a { padding: 0 20px 18px; }
body.blog-page .blog-article-body-v2 .ba-faq__a p { font-size: 1rem; line-height: 1.75; color: var(--ba-ink-2); margin: 0 0 10px; }
body.blog-page .blog-article-body-v2 .ba-faq__a p:last-child { margin-bottom: 0; }

/* Sources: reference-style, quieter */
.ba-sources { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ba-line); }
body.blog-page .blog-article-body-v2 .ba-sources > h2 { font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ba-muted); margin: 0 0 12px; }
body.blog-page .blog-article-body-v2 .ba-sources p,
body.blog-page .blog-article-body-v2 .ba-sources li { font-size: .9rem; line-height: 1.65; color: var(--ba-muted); }
body.blog-page .blog-article-body-v2 .ba-sources ul { gap: 6px; }
body.blog-page .blog-article-body-v2 .ba-sources li { padding-left: 18px; }
body.blog-page .blog-article-body-v2 .ba-sources li::before { content: ""; margin: 0; width: 5px; height: 5px; left: 2px; top: .7em; background: #B9AEA4; }

/* Author bio */
body.blog-page .blog-article-author-bio {
  margin-top: 40px; background: var(--ba-card); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); box-shadow: none; padding: 24px;
}
body.blog-page .blog-article-author-bio__label { color: var(--ba-accent); }

/* The old inline newsletter is replaced by the end-of-article call box (js/lead/blog.js). */
body.blog-page .blog-article-newsletter-inline { display: none; }

/* Keep reading (related posts moved out of the sidebar) */
.ba-keep { margin-top: 48px; }
.ba-keep__title { font-family: var(--serif); font-size: 1.6rem; color: var(--ba-ink); margin: 0 0 16px; letter-spacing: -.01em; }
.ba-keep__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ba-keep__card {
  display: flex; flex-direction: column; background: var(--ba-card); border: 1px solid var(--ba-line); border-radius: 14px; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ba-keep__card:hover { transform: translateY(-2px); box-shadow: var(--ba-shadow); }
.ba-keep__thumb { aspect-ratio: 16 / 9; background: #F3EEE7; overflow: hidden; }
.ba-keep__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ba-keep__body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.ba-keep__name { font-weight: 700; font-size: .95rem; line-height: 1.35; color: var(--ba-ink); }
.ba-keep__meta { font-size: 12px; color: var(--ba-muted); }

/* ── Sidebar: one sticky column (lead offer + contents) ─────── */
body.blog-page .blog-article-shell-v2 .blog-sidebar-v2 {
  position: relative; top: auto; display: block; align-self: stretch; height: 100%;
}
/* Old sidebar cards (program image ad, logo wall, "ask about this resource") are replaced by the lead card. */
body.blog-page .blog-sidebar-v2.ba-side-ready > :not(.ba-side) { display: none !important; }
.ba-side { position: sticky; top: 92px; display: grid; gap: 18px; }

.ba-toc { padding: 4px 0 0; }
.ba-toc__title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ba-muted); margin: 0 0 10px; }
.ba-toc__list { position: relative; list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--ba-line); max-height: calc(100vh - 560px); min-height: 120px; overflow-y: auto; scrollbar-width: thin; }
.ba-toc__link {
  display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent;
  font-size: 13.5px; line-height: 1.4; color: var(--ba-muted); transition: color .15s ease, border-color .15s ease;
}
.ba-toc__link:hover { color: var(--ba-ink); }
.ba-toc__link.is-active { color: var(--ba-ink); font-weight: 600; border-left-color: var(--ba-accent); }

/* Floating WhatsApp: compact icon on articles so it doesn't compete with the offers */
body.blog-page .iss-wa-float { width: 52px; height: 52px; padding: 0; justify-content: center; }
body.blog-page .iss-wa-float span { display: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  body.blog-page .blog-article-two-col { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; }
}
@media (max-width: 1024px) {
  body.blog-page .blog-article-two-col { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.blog-page .blog-article-main-v2 { max-width: 720px; margin: 0 auto; width: 100%; }
  body.blog-page .blog-article-shell-v2 .blog-sidebar-v2.ba-side-ready { display: none; }
}
@media (max-width: 760px) {
  body.blog-page .blog-article-shell-v2 { padding: 16px 0 72px; }
  body.blog-page .blog-article-shell-v2 .container { padding: 0 16px; }
  body.blog-page .blog-breadcrumb-trail { margin-bottom: 18px; }
  body.blog-page .blog-article-hero-v2 h1 { font-size: 2rem; }
  body.blog-page .blog-article-body-v2 > p,
  body.blog-page .blog-article-body-v2 > ul li,
  body.blog-page .blog-article-body-v2 > ol li { font-size: 1.02rem; }
  body.blog-page .blog-article-body-v2 > h2 { margin-top: 44px; }
  body.blog-page .blog-article-main-v2 .blog-article-cover-v2 { border-radius: 12px; }
  .ba-keep__grid { grid-template-columns: 1fr; }
  .ba-keep__card { flex-direction: row; }
  .ba-keep__thumb { width: 112px; flex: none; aspect-ratio: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-keep__card, .ba-faq__q::after { transition: none; }
}
@media print {
  .ba-progress, .ba-side, .ba-keep { display: none !important; }
}