/* Single blog post — SVG hero banner. Page-scoped file (is_singular('post')
   only), same convention as this theme's other page-scoped stylesheets
   (product-page.css, shop-page.css, etc.) — carries its own copy of the
   shared brand tokens rather than depending on another file loading first.

   Deliberately a CONTAINED card (normal article width, rounded corners),
   not an edge-to-edge 100vw bleed — Astra's #content > .ast-container is
   display:flex on this theme (confirmed the hard way while building the
   occasion pages, see occasion-page.css) and a 100vw negative-margin
   breakout rendered out of order there; staying inside the normal
   content column sidesteps that entirely and matches how every other
   contained section on this site behaves. Light cream/gold gradient +
   maroon line-art (pl_blog_motif_svg()) — NOT a dark panel. */
:root{
  --plbh-gold:        #C9973A;
  --plbh-gold-light:  #E8C06A;
  --plbh-gold-pale:   #F5E6C4;
  --plbh-maroon:      #7A1E2E;
  --plbh-maroon-dark: #4A0E1A;
  --plbh-cream:       #FAF6EE;
  --plbh-charcoal:    #2A2118;
  --plbh-taupe:       #8A7B6A;
  --plbh-border:      rgba(201,151,58,0.2);
  --plbh-shadow:      0 8px 40px rgba(42,33,24,0.12);
  --plbh-font-display:'Cormorant Garamond', Georgia, serif;
  --plbh-font-body:   'DM Sans', sans-serif;
}

.pl-blog-hero{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  margin: 0.5em 0 2.5em;
  border: 1px solid var(--plbh-border);
  box-shadow: var(--plbh-shadow);
}

.pl-blog-hero-art{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.pl-blog-hero-art svg{
  width: 100%;
  height: 100%;
  display: block;
}

.pl-blog-hero-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 2.5em 2em;
  box-sizing: border-box;
}

.pl-blog-hero-crumb{
  font-family: var(--plbh-font-body);
  font-size: 13px;
  color: var(--plbh-taupe);
  margin-bottom: 1em;
}
.pl-blog-hero-crumb a{ color: var(--plbh-taupe); text-decoration: none; }
.pl-blog-hero-crumb a:hover{ color: var(--plbh-maroon); }
.pl-blog-hero-crumb span{ margin: 0 0.4em; opacity: 0.6; }

.pl-blog-hero-pill{
  display: inline-block;
  font-family: var(--plbh-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plbh-cream);
  background: var(--plbh-maroon);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  text-decoration: none;
  margin-bottom: 0.9em;
}
.pl-blog-hero-pill:hover{ background: var(--plbh-maroon-dark); color: var(--plbh-cream); }

.pl-blog-hero-title{
  font-family: var(--plbh-font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(26px, 3.6vw, 42px) !important;
  line-height: 1.2 !important;
  color: var(--plbh-maroon-dark) !important;
  margin: 0 0 0.6em !important;
}

.pl-blog-hero-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15em;
  font-family: var(--plbh-font-body);
  font-size: 14px;
  color: var(--plbh-charcoal);
}
.pl-blog-hero-avatar{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--plbh-maroon);
  color: var(--plbh-cream);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5em;
}
.pl-blog-hero-author{ font-weight: 600; color: var(--plbh-maroon-dark); }
.pl-blog-hero-dot{ margin: 0 0.55em; opacity: 0.6; }

@media (max-width: 680px){
  .pl-blog-hero{ min-height: 220px; }
  .pl-blog-hero-inner{ padding: 2em 1.2em; }
  .pl-blog-hero-meta{ font-size: 13px; }
}