/* blog-article.css — single article page, design-system aligned (ba-*). Pairs with design-system.css. */

/* Reading progress */
.ba-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,var(--ds-gold),var(--ds-gold-deep));transition:width .1s linear}

/* Hero — shorter than the full ds-hero, content-led */
.ba-hero{min-height:clamp(46vh,52vh,560px)}
.ba-hero .ds-hero__inner{max-width:860px;padding-block:2.4rem}
.ba-hero h1{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:.9rem}
a.ds-hero__badge{text-decoration:none}
a.ds-hero__badge:hover{color:var(--ds-gold)}
.ba-meta{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:1.3rem;
  font-size:.9rem;color:rgba(247,249,252,.82)}
.ba-meta span{display:inline-flex;align-items:center;gap:.45rem}
.ba-meta svg{width:17px;height:17px;opacity:.85}

/* Breadcrumb relocated below hero */
.ba-breadcrumb{padding-top:1.6rem;padding-bottom:.2rem}

/* Two-column layout */
.ba-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.ba-main{min-width:0}

/* Prose */
.ba-prose{font-size:1.06rem;line-height:1.8;color:var(--ds-ink)}
.ba-prose>*:first-child{margin-top:0}
.ba-prose h2{font-family:var(--ds-font);font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;
  line-height:1.2;margin:2.4rem 0 1rem;color:var(--ds-night);scroll-margin-top:90px}
.ba-prose h3{font-family:var(--ds-font);font-size:1.25rem;font-weight:700;
  margin:1.8rem 0 .8rem;color:var(--ds-night);scroll-margin-top:90px}
.ba-prose p{margin:0 0 1.25rem}
.ba-prose a{color:var(--ds-gold-deep);text-decoration:underline;text-underline-offset:2px}
.ba-prose a:hover{color:var(--ds-evergreen)}
.ba-prose ul,.ba-prose ol{margin:0 0 1.25rem;padding-left:1.4rem}
.ba-prose li{margin:.4rem 0}
.ba-prose img{max-width:100%;height:auto;border-radius:var(--ds-radius);margin:1.6rem 0;box-shadow:var(--ds-shadow)}
.ba-prose blockquote{margin:1.6rem 0;padding:1rem 1.4rem;border-left:4px solid var(--ds-gold);
  background:var(--ds-tint,#edf0ea);border-radius:0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
  font-style:italic;color:var(--ds-ink-soft)}
.ba-prose table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem}
.ba-prose th,.ba-prose td{padding:.7rem .9rem;border:1px solid var(--ds-line-dark);text-align:left}
.ba-prose th{background:var(--ds-tint,#edf0ea);font-weight:700}

/* Tags */
.ba-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:2.2rem 0 0}

/* Share */
.ba-share{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  margin:2rem 0 0;padding:1.3rem 0;border-top:1px solid var(--ds-line-dark);border-bottom:1px solid var(--ds-line-dark)}
.ba-share__label{font-weight:700;color:var(--ds-night)}
.ba-share__btns{display:flex;gap:.6rem}
.ba-share__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--ds-line-dark);background:var(--ds-white,#fff);color:var(--ds-slate);
  cursor:pointer;transition:all .2s}
.ba-share__btn svg{width:18px;height:18px}
.ba-share__btn:hover{background:var(--ds-night);color:var(--ds-snow);border-color:var(--ds-night);transform:translateY(-2px)}
.ba-share__btn.is-copied{background:var(--ds-evergreen);color:#fff;border-color:var(--ds-evergreen)}

/* Author */
.ba-author{display:flex;gap:1.1rem;align-items:flex-start;margin:2rem 0 0;padding:1.4rem;
  background:var(--ds-white,#fff);border:1px solid var(--ds-line-dark);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow)}
.ba-author__avatar{flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--ds-night);color:var(--ds-gold)}
.ba-author__avatar svg{width:30px;height:30px}
.ba-author__info h4{margin:0 0 .3rem;font-size:1.05rem;color:var(--ds-night)}
.ba-author__info p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ds-ink-soft)}

/* Sidebar (sticky) — sticky must live on the grid ITEM (.ba-sidebar), whose
   containing block is the grid track (tall as the article), so it has travel room.
   Putting it on __inner failed because the item shrinks to content (align-items:start). */
.ba-sidebar{align-self:start;position:sticky;top:88px}
.ba-sidebar__inner{display:flex;flex-direction:column;gap:1.2rem}

.ba-toc{background:var(--ds-white,#fff);border:1px solid var(--ds-line-dark);
  border-radius:var(--ds-radius);padding:1.2rem 1.3rem;box-shadow:var(--ds-shadow)}
.ba-toc__head{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;
  color:var(--ds-night);margin-bottom:.8rem}
.ba-toc__head svg{width:18px;height:18px;color:var(--ds-gold-deep)}
.ba-toc__list{list-style:none;margin:0;padding:0}
.ba-toc__item{margin:.15rem 0}
.ba-toc__item.is-sub{padding-left:.9rem}
.ba-toc__list a{display:block;padding:.32rem .5rem;border-radius:6px;font-size:.88rem;line-height:1.4;
  color:var(--ds-ink-soft);text-decoration:none;border-left:2px solid transparent;transition:all .15s}
.ba-toc__list a:hover{color:var(--ds-night);background:var(--ds-tint,#edf0ea)}
.ba-toc__list a.is-active{color:var(--ds-gold-deep);font-weight:600;border-left-color:var(--ds-gold)}

.ba-cta{background:var(--ds-night);color:var(--ds-snow);border-radius:var(--ds-radius);
  padding:1.5rem;box-shadow:var(--ds-shadow)}
.ba-cta h3{margin:0 0 .6rem;font-size:1.15rem;color:var(--ds-gold)}
.ba-cta p{margin:0 0 1.1rem;font-size:.92rem;line-height:1.6;color:rgba(247,249,252,.85)}
.ba-cta__phone{display:block;text-align:center;margin-top:.7rem;font-size:.88rem;
  color:rgba(247,249,252,.75);text-decoration:none}
.ba-cta__phone:hover{color:var(--ds-gold)}

.ba-widget{background:var(--ds-white,#fff);border:1px solid var(--ds-line-dark);
  border-radius:var(--ds-radius);padding:1.2rem 1.3rem;box-shadow:var(--ds-shadow)}
.ba-widget__head{font-weight:700;font-size:.95rem;color:var(--ds-night);margin-bottom:.8rem}
.ba-widget__chips{display:flex;flex-wrap:wrap;gap:.45rem}

/* Mobile TOC (hidden on desktop) */
.ba-toc-mobile{display:none;margin:0 0 1.6rem}

/* Back to top */
.ba-totop{position:fixed;bottom:1.5rem;right:1.5rem;z-index:900;width:46px;height:46px;border:none;
  border-radius:50%;background:var(--ds-night);color:var(--ds-snow);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--ds-shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all .25s}
.ba-totop svg{width:22px;height:22px}
.ba-totop.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.ba-totop:hover{background:var(--ds-gold);color:var(--ds-night)}

/* Responsive */
@media(max-width:900px){
  .ba-layout{grid-template-columns:1fr}
  .ba-sidebar{position:static}
  .ba-sidebar__inner{max-height:none;overflow:visible;margin-top:2rem}
  #tocDesktop{display:none}            /* mobile TOC replaces it; CTA + topics still flow */
  .ba-toc-mobile{display:block}
  .ba-toc-mobile .ba-toc{background:var(--ds-tint,#edf0ea)}
}