/* ==========================================================================
   AE Creative — Blog article page components
   Introduced for pages/blog-post.html: the reading-progress bar, the cover
   image, the two-column article layout (prose + sticky sidebar), the
   sticky Table of Contents, the share-button rail, and the in-article CTA
   box. Everything here is built from existing design tokens (colors,
   radii, shadows, ease, fonts) — no new colors, no new framework. The
   hero/breadcrumb/meta strip reuse page-hero.css and case-study.css's
   .case-hero__meta as-is. Pairs with assets/js/blog-data.js and
   assets/js/blog-post-page.js.
   ========================================================================== */

/* ---- Reading progress bar ---- */
.article-progress{
  position:fixed;top:0;inset-inline:0;height:3px;z-index:60;
  background:transparent;pointer-events:none;
}
.article-progress__bar{
  height:100%;width:0%;background:var(--grad);transform-origin:right;
  transition:width .1s linear;
}
:root[dir="rtl"] .article-progress__bar,[dir="rtl"] .article-progress__bar{transform-origin:right}

/* ---- Cover image ---- */
.article-cover-section{padding:0 var(--space-section-x);margin-top:-1px}
.article-cover{
  max-width:var(--container);margin:0 auto;position:relative;
  border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:21/9;background:var(--bg-1);
}
.article-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-cover img.is-broken{opacity:0}

/* ---- Two-column layout ---- */
.article-layout{
  max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start;
}
.article-layout__aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}

/* ---- Table of Contents ---- */
.article-toc{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.article-toc__title{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--text-3);margin:0 0 16px}
.article-toc__list{display:flex;flex-direction:column;gap:11px;list-style:none;margin:0;padding:0}
.article-toc__link{font-size:13.5px;line-height:1.5;color:var(--text-2);transition:color .2s var(--ease);display:block}
.article-toc__link:hover,.article-toc__link:focus-visible{color:var(--text)}
.article-toc__link.is-active{color:var(--brand);font-weight:600}

/* ---- Share rail ---- */
.article-share{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.article-share__title{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--text-3);margin:0 0 16px}
.article-share__buttons{display:flex;flex-wrap:wrap;gap:10px}
.article-share__btn{
  width:40px;height:40px;border-radius:99px;background:var(--surface-tint);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  color:var(--text-2);cursor:pointer;transition:all .25s var(--ease);
}
.article-share__btn svg{width:18px;height:18px;display:block}
.article-share__btn:hover,.article-share__btn:focus-visible{
  border-color:var(--brand-line);color:var(--text);background:var(--brand-soft);transform:translateY(-2px);
}
.article-share__btn.is-copied{border-color:var(--ok);color:var(--ok)}

/* ---- Prose ---- */
.article-prose{max-width:720px}
.article-prose__h2{
  font-family:var(--ff-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(24px,3vw,32px);margin:48px 0 18px;scroll-margin-top:110px;
}
.article-prose__h2:first-child{margin-top:0}
.article-prose__h3{
  font-family:var(--ff-display);font-weight:600;font-size:19px;
  margin:30px 0 12px;scroll-margin-top:110px;
}
.article-prose__p{font-size:15.5px;line-height:1.9;color:var(--text-2);margin:0 0 18px}
.article-prose__ul{margin:0 0 22px;padding-inline-start:22px;display:flex;flex-direction:column;gap:10px}
.article-prose__ul li{font-size:15px;line-height:1.8;color:var(--text-2)}
.article-link{color:var(--brand);text-decoration:underline;text-decoration-color:var(--brand-line);text-underline-offset:3px;transition:color .2s var(--ease)}
.article-link:hover,.article-link:focus-visible{color:var(--text)}

/* ---- Previous / Next pager ---- */
.article-pager{
  max-width:720px;margin-top:20px;padding-top:28px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.article-pager__link{
  padding:20px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:8px;min-width:0;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.article-pager__link:hover,.article-pager__link:focus-visible{border-color:var(--brand-line);transform:translateY(-2px)}
.article-pager__link--next{grid-column:2;text-align:end;align-items:flex-end}
.article-pager__label{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--brand);
  display:flex;align-items:center;gap:6px;
}
.article-pager__title{
  font-family:var(--ff-display);font-weight:600;font-size:14.5px;line-height:1.5;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* ---- In-article CTA box ---- */
.article-cta{
  margin:38px 0;padding:28px;border-radius:var(--r-xl);
  background:linear-gradient(160deg,var(--bg-2),var(--bg-1));border:1px solid var(--brand-line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.article-cta__heading{font-family:var(--ff-display);font-weight:700;font-size:19px;margin:0 0 8px}
.article-cta__text{margin:0;font-size:14px;line-height:1.7;color:var(--text-2);max-width:46ch}
.article-cta__btn{flex:none}

/* ---- Author/meta line above prose ---- */
.article-byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;
  font-family:var(--ff-mono);font-size:12.5px;color:var(--text-3);
}
.article-byline__dot{opacity:.6}

@media (max-width:960px){
  .article-layout{grid-template-columns:1fr}
  .article-layout__aside{
    position:static;flex-direction:row;flex-wrap:wrap;order:-1;
  }
  .article-toc,.article-share{flex:1;min-width:240px}
  .article-cover{aspect-ratio:16/9}
}
@media (max-width:640px){
  .article-layout__aside{flex-direction:column}
}
@media (max-width:480px){
  .article-pager{grid-template-columns:1fr}
  .article-pager__link--next{grid-column:1;text-align:start;align-items:flex-start}
}