/* blog-pages.css — LabelRoll Pro
   Article-page chrome that sits between the shared article-* stylesheets and post-page.css:
   the hero band, the breadcrumb, the eyebrow and the meta line that render_article.py writes
   into (.blog-hero / .breadcrumb / .article-eyebrow / .article-info).
   Palette is this site's, ⛔ not the reference site's: teal #0F766E primary, amber #FB923C
   accent, ink #111827, muted #6C757D. ⛔ No colour outside that set. */

:root{
  --lrp-teal:#0F766E;
  --lrp-teal-deep:#0B5A54;
  --lrp-accent:#FB923C;
  --lrp-ink:#111827;
  --lrp-muted:#6C757D;
  --lrp-line:#DEE2E6;
  --lrp-surface:#F8FAFA;
}

/* ===== hero band ===== */
.blog-hero{
  background:linear-gradient(135deg,var(--lrp-teal) 0%,var(--lrp-teal-deep) 100%);
  color:#fff;
  padding:56px 0 40px;
  margin-bottom:36px;
}
.blog-hero h1{
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  font-weight:800;
  line-height:1.22;
  margin:8px 0 14px;
  color:#fff;
  max-width:26ch;
  text-wrap:balance;
}

/* breadcrumb — the renderer rewrites the trailing .breadcrumb-item.active in place */
.blog-hero .breadcrumb{
  margin:0 0 14px;
  padding:0;
  background:none;
  font-size:.82rem;
}
.blog-hero .breadcrumb-item,
.blog-hero .breadcrumb-item a{ color:rgba(255,255,255,.82); text-decoration:none; }
.blog-hero .breadcrumb-item a:hover{ color:#fff; text-decoration:underline; }
.blog-hero .breadcrumb-item.active{ color:#fff; font-weight:600; }
.blog-hero .breadcrumb-item + .breadcrumb-item::before{ color:rgba(255,255,255,.5); }

/* eyebrow (category) */
.article-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--lrp-accent);
}

/* meta line — author / date / reading time; the renderer fills the spans in order */
.blog-hero .article-info{
  flex-wrap:wrap;
  gap:8px 18px;
  color:rgba(255,255,255,.85) !important;
  font-size:.84rem !important;
}
.blog-hero .article-info span{ display:inline-flex; align-items:center; gap:6px; }

/* ===== page frame ===== */
.article-page{ padding-bottom:64px; }
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--lrp-teal); color:#fff;
  padding:10px 16px; z-index:2000; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

/* ===== sidebar CTA ===== */
.sidebar-cta{
  background:var(--lrp-surface);
  border:1px solid var(--lrp-line);
  border-top:4px solid var(--lrp-accent);
  border-radius:10px;
  padding:20px 22px;
  margin-bottom:22px;
}
.sidebar-cta h4{ font-size:1.02rem; font-weight:800; color:var(--lrp-ink); margin:0 0 8px; }
.sidebar-cta p{ font-size:.88rem; color:var(--lrp-muted); margin:0 0 14px; }
.sidebar-cta .btn-primary{
  background:var(--lrp-teal);
  border-color:var(--lrp-teal);
  font-weight:700;
  width:100%;
}
.sidebar-cta .btn-primary:hover{ background:var(--lrp-teal-deep); border-color:var(--lrp-teal-deep); }

@media (max-width:991px){
  .blog-hero{ padding:40px 0 30px; margin-bottom:26px; }
  .blog-hero h1{ max-width:none; }
}