/* ============================================================
   LVN Drywall — Blog & single-post styles
   Builds on css/style.css tokens (navy / green / plaster).
   ============================================================ */

.crumb{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); font-weight:600; }
.crumb a{ color:var(--green-dk); }
.crumb a:hover{ text-decoration:underline; }

/* ---------- Blog hero ---------- */
.bhero{
  position:relative; background:var(--ink); color:var(--paper);
  padding:calc(clamp(4.5rem,11vh,9rem) + 46px) var(--pad) clamp(3rem,7vh,4.5rem);
  overflow:hidden;
}
.bhero::after{
  content:""; position:absolute; right:-6%; top:-45%;
  width:55%; height:190%; border-radius:50%;
  background:radial-gradient(circle, rgba(39,155,84,.17), transparent 62%);
  pointer-events:none;
}
.bhero__inner{ max-width:var(--maxw); margin:0 auto; position:relative; z-index:2; }
.bhero .crumb{ color:rgba(236,235,228,.55); }
.bhero .crumb a{ color:var(--green-lt); }
.bhero__title{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2.6rem,6.4vw,5.4rem); line-height:1; letter-spacing:-.025em;
  margin:1.1rem 0 1.1rem;
}
.bhero__title em{ font-style:italic; font-weight:400; color:var(--green-lt); }
.bhero__sub{ max-width:60ch; color:rgba(236,235,228,.74); font-size:1.08rem; }

/* ---------- List wrapper ---------- */
.blist{ max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,5vh,4rem) var(--pad) clamp(3rem,6vh,5rem); }

/* ---------- Filter ---------- */
.bfilter{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2rem; }
.bfilter__btn{
  font-family:var(--ff-body); font-size:.82rem; font-weight:600; letter-spacing:.01em;
  padding:.6em 1.15em; border-radius:100px; cursor:pointer;
  background:transparent; color:var(--ink); border:1px solid var(--line);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.bfilter__btn:hover{ border-color:var(--green); color:var(--green-dk); }
.bfilter__btn.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.bfilter__btn span{ opacity:.55; font-variant-numeric:tabular-nums; margin-left:.3em; }

.blist__showing{ color:var(--steel); font-size:.95rem; margin:-.6rem 0 1.6rem; }
.blist__showing strong{ color:var(--ink); }

/* ---------- Grid ---------- */
.bgrid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.1rem,2vw,1.8rem);
}
.bgrid--3{ grid-template-columns:repeat(3,1fr); }

.bcard{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line);
  border-radius:6px; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.bcard:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -26px rgba(12,27,46,.5); border-color:transparent; }
.bcard__media{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--ink-2); }
.bcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.bcard:hover .bcard__media img{ transform:scale(1.06); }
.bcard__chip{
  position:absolute; left:.8rem; top:.8rem; z-index:2;
  font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:var(--green); padding:.42em .7em; border-radius:3px;
}
.bcard__body{ padding:1.2rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.bcard__meta{ font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--steel); font-weight:600; }
.bcard__title{ font-family:var(--ff-disp); font-weight:600; font-size:1.3rem; line-height:1.18; letter-spacing:-.01em; }
.bcard__title a{ color:var(--ink); transition:color .3s; }
.bcard__title a:hover{ color:var(--green-dk); }
.bcard__excerpt{ font-size:.92rem; color:#44505c; line-height:1.55; flex:1; }
.bcard__more{ margin-top:.3rem; font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--green-dk); display:inline-flex; gap:.4em; align-items:center; }
.bcard__more span{ transition:transform .3s var(--ease); }
.bcard:hover .bcard__more span{ transform:translateX(4px); }

/* ---------- Pagination ---------- */
.bpager{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:clamp(2.5rem,5vh,3.5rem); flex-wrap:wrap; }
.bpager__nums{ display:flex; gap:.4rem; }
.bpager__num{
  min-width:40px; height:40px; padding:0 .5rem; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.92rem; font-variant-numeric:tabular-nums;
  border:1px solid var(--line); color:var(--ink);
  transition:background .3s, color .3s, border-color .3s;
}
.bpager__num:hover{ border-color:var(--green); color:var(--green-dk); }
.bpager__num.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.bpager__arrow{
  font-size:.86rem; font-weight:700; letter-spacing:.02em; color:var(--ink);
  display:inline-flex; align-items:center; gap:.45em; padding:.5em .2em;
  transition:color .3s;
}
.bpager__arrow:hover{ color:var(--green-dk); }
.bpager__arrow.is-off{ color:var(--steel); opacity:.45; pointer-events:none; }

/* ---------- Empty ---------- */
.bempty{ max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vh,6rem) var(--pad); text-align:center; }
.bempty--page{ padding-top:calc(clamp(4.5rem,11vh,9rem) + 80px); }
.bempty h1,.bempty h2{ font-family:var(--ff-disp); font-weight:500; font-size:clamp(1.8rem,3.4vw,2.6rem); letter-spacing:-.02em; margin-bottom:.8rem; color:var(--ink); }
.bempty p{ color:var(--steel); max-width:46ch; margin:0 auto 1.6rem; }
.bempty .crumb{ justify-content:center; margin-bottom:1.5rem; }

/* ---------- CTA band ---------- */
.bcta{ background:var(--green-dk); color:#fff; }
.bcta__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vh,5rem) var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.bcta__head{ font-family:var(--ff-disp); font-weight:500; font-size:clamp(1.8rem,3.6vw,2.9rem); line-height:1.04; letter-spacing:-.02em; max-width:22ch; }
.bcta .btn--light{ --bg:#fff; --fg:var(--green-dk); --bd:#fff; }
.bcta .btn--light:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.post{ max-width:820px; margin:0 auto; padding:calc(clamp(4.5rem,11vh,9rem) + 40px) var(--pad) clamp(2.5rem,5vh,4rem); }
.post__head{ margin-bottom:1.8rem; }
.post__cat{
  display:inline-block; margin:1rem 0 .4rem;
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--green); padding:.45em .8em; border-radius:3px;
}
.post__title{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.04; letter-spacing:-.02em;
  color:var(--ink); margin:.6rem 0 1rem;
}
.post__meta{ font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--steel); font-weight:600; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.post__feature{ margin:0 0 2.2rem; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.post__feature img{ width:100%; height:auto; display:block; }

/* Prose typography */
.prose{ font-size:1.08rem; line-height:1.75; color:#2c3540; }
.prose > *:first-child{ margin-top:0; }
.prose p{ margin:0 0 1.3rem; }
.prose h2{ font-family:var(--ff-disp); font-weight:600; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.15; letter-spacing:-.015em; color:var(--ink); margin:2.4rem 0 1rem; }
.prose h3{ font-family:var(--ff-disp); font-weight:600; font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.2; color:var(--ink); margin:2rem 0 .8rem; }
.prose h4{ font-weight:700; font-size:1.1rem; color:var(--ink); margin:1.6rem 0 .6rem; }
.prose a{ color:var(--green-dk); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--green); }
.prose ul,.prose ol{ margin:0 0 1.3rem; padding-left:1.4rem; }
.prose li{ margin:.4rem 0; padding-left:.3rem; }
.prose ul li::marker{ color:var(--green); }
.prose ol li::marker{ color:var(--green-dk); font-weight:700; }
.prose img{ max-width:100%; height:auto; border-radius:6px; margin:1.4rem 0; }
.prose figure{ margin:1.6rem 0; }
.prose figcaption{ font-size:.85rem; color:var(--steel); text-align:center; margin-top:.5rem; }
.prose blockquote{
  margin:1.8rem 0; padding:1rem 1.5rem; border-left:4px solid var(--green);
  background:var(--paper); border-radius:0 6px 6px 0;
  font-family:var(--ff-disp); font-style:italic; font-size:1.2rem; color:var(--ink);
}
.prose blockquote p:last-child{ margin-bottom:0; }
.prose pre{ background:var(--ink); color:#e6edf3; padding:1.1rem 1.3rem; border-radius:6px; overflow:auto; font-size:.9rem; margin:0 0 1.3rem; }
.prose code{ background:rgba(12,27,46,.07); padding:.15em .4em; border-radius:4px; font-size:.9em; }
.prose pre code{ background:none; padding:0; }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 1.4rem; font-size:.95rem; }
.prose th,.prose td{ border:1px solid var(--line); padding:.6rem .8rem; text-align:left; }
.prose th{ background:var(--paper); font-weight:700; }
.prose hr{ border:none; border-top:1px solid var(--line); margin:2.2rem 0; }

.post__share{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.post__share span{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); font-weight:700; }
.post__share a{ font-size:.9rem; font-weight:600; color:var(--green-dk); }
.post__share a:hover{ text-decoration:underline; }

/* Related */
.related{ border-top:1px solid var(--line); }
.related__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,6vh,5rem) var(--pad); }
.related__title{ font-family:var(--ff-disp); font-weight:500; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.02em; color:var(--ink); margin-bottom:1.8rem; }

/* ---------- Responsive ---------- */
@media(max-width:1180px){ .bgrid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:820px){
  .bgrid,.bgrid--3{ grid-template-columns:repeat(2,1fr); }
  .bcta__inner{ flex-direction:column; align-items:flex-start; }
}
@media(max-width:520px){
  .bgrid,.bgrid--3{ grid-template-columns:1fr; }
  .bpager{ gap:.6rem; }
}