/* article-shell.css — WallPrintJet article page layout (ERP REQUIRED_ASSETS).
   Tokens come from wpj.css (charcoal #23272B · signal red #E02B20 · warm white #F8F7F4,
   Archivo headings + Source Sans 3 body); fallbacks keep the page usable without it. */

.article-page{width:min(100% - 2*var(--gut,24px),1180px);margin-inline:auto;padding:56px 0 80px}
.post-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.post-main{min-width:0}

.article-content{max-width:760px;font-family:var(--f-body,"Source Sans 3",system-ui,sans-serif);font-size:var(--fs-body,1.125rem);line-height:1.72;color:var(--ink,#23272B)}
.article-content img{max-width:100%;height:auto;border-radius:var(--radius,6px);margin:0}

/* hero: photo + charcoal overlay (render_article.py swaps the url() per post) */
.blog-hero{position:relative;isolation:isolate;overflow:hidden;background-color:var(--ink,#23272B);color:var(--warm,#F8F7F4);padding:72px 0 64px}
.blog-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url('/assets/images/start-a-wall-printing-business/band-venue-mural.webp') 50% 50%/cover no-repeat;filter:saturate(.6)}
.blog-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(27,30,33,.96) 0%,rgba(27,30,33,.9) 50%,rgba(27,30,33,.66) 100%)}
.blog-hero .hero-in{width:min(100% - 2*var(--gut,24px),1180px);margin-inline:auto}
.blog-hero h1{color:#fff;font-size:clamp(2rem,3.8vw,3.25rem);line-height:1.1;max-width:22ch;margin:0 0 20px}
.blog-hero .post-cat{display:inline-block;margin:0 0 14px;font-family:var(--f-head,Arial,sans-serif);font-size:var(--fs-sm,.875rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FF8A82;text-decoration:none}
.blog-hero .post-cat:hover{text-decoration:underline}
.blog-hero .post-lead{max-width:62ch;color:var(--muted-d,#B9BDC2);font-size:var(--fs-lg,1.25rem);line-height:1.55;margin:0 0 22px}

.blog-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0}
.blog-meta-item{display:inline-flex;align-items:center;gap:8px;color:var(--muted-d,#B9BDC2);font-size:var(--fs-md,1rem)}
.blog-meta-item .ic{width:16px;height:16px;flex:none;color:#FF8A82}
.blog-meta-item a{color:#fff!important}

/* breadcrumb (also used by blog, category and author pages) */
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 22px;padding:0;font-size:var(--fs-sm,.875rem);color:var(--muted-d,#B9BDC2)}
.breadcrumb-item+.breadcrumb-item::before{content:"/";margin-right:6px;opacity:.6}
.breadcrumb a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.breadcrumb a:hover{border-bottom-color:#fff}
.breadcrumb-item.active{color:var(--muted-d,#B9BDC2)}

@media (min-width:992px){.blog-hero::before{transform:scale(1.35)}}
@media (max-width:991px){
  .post-wrap{grid-template-columns:minmax(0,1fr);gap:32px}
  .article-page{padding:32px 0 56px}
}
@media (max-width:768px){
  .blog-hero{padding:48px 0 40px}
}