/* ==========================================================================
   Classic Countertops — blog-only styles
   Loaded after styles.css on /blog/ and /blog/<slug>.html. Reuses the site's
   existing tokens (--burgundy, --cream, --serif, --sans, etc.) so the blog
   looks like a section of the site, not a bolted-on template.
   ========================================================================== */

/* ---------- Post list (blog index) ---------- */
.blog-list .frame{display:flex;flex-direction:column;gap:56px}
.lede-empty{font-family:var(--serif);font-size:20px;color:var(--stone)}

.post-card{
  display:block;padding-bottom:40px;border-bottom:1px solid var(--line);
}
.post-card:last-child{border-bottom:none;padding-bottom:0}
.post-card__meta{
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone);margin:0 0 14px;
}
.post-card__title{
  font-family:var(--serif);font-weight:700;letter-spacing:-.015em;margin:0 0 12px;
  font-size:clamp(26px,3.4vw,40px);line-height:1.05;
}
.post-card--featured .post-card__title{font-size:clamp(32px,4.6vw,56px)}
.post-card__title a{color:var(--ink);transition:color .2s}
.post-card__title a:hover{color:var(--burgundy)}
.post-card__desc{
  font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink-soft);
  margin:0;max-width:62ch;
}
.post-card__cta{margin:18px 0 0}
.post-card__cta a{
  font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--burgundy);display:inline-flex;align-items:center;gap:8px;
}
.post-card__cta .arrow{transition:transform .2s}
.post-card__cta a:hover .arrow{transform:translateX(3px)}

.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.post-grid .post-card{grid-column:span 1}
@media (max-width:780px){
  .post-grid{grid-template-columns:1fr}
}

/* ---------- Post header (page-hero extras) ---------- */
.post-hero-band .lede{align-items:start}
.post-hero-band .meta{flex-direction:row;gap:14px;align-items:center;text-align:left}
.post-tags{display:inline-flex;gap:8px;flex-wrap:wrap}
.pill{
  font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--burgundy);background:var(--cream-2);
  border:1px solid var(--line);padding:5px 10px;border-radius:999px;
}
@media (max-width:880px){
  .post-hero-band .meta{flex-wrap:wrap}
}

/* ---------- Post body ---------- */
.post-container{max-width:760px}
.post-hero{margin:0 0 48px;border:1px solid var(--ink)}
.post-hero img{width:100%;height:auto;display:block}

.post-body{font-family:var(--serif);font-size:19px;line-height:1.65;color:var(--ink)}
.post-body h2{
  font-family:var(--serif);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(26px,3.4vw,36px);line-height:1.1;margin:48px 0 20px;
}
.post-body h3{
  font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--burgundy);margin:36px 0 14px;
}
.post-body p{margin:0 0 22px}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:26px}
.post-body li{margin-bottom:10px}
.post-body li:last-child{margin-bottom:0}
.post-body a{color:var(--burgundy);text-decoration:underline;text-underline-offset:2px}
.post-body strong{font-weight:700;color:var(--ink)}
.post-body blockquote{
  margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--burgundy);
  font-style:italic;color:var(--ink-soft);
}
.post-body blockquote p{margin:0}
.post-body hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.post-body code{
  font-family:var(--mono);font-size:16px;background:var(--cream-2);
  padding:2px 6px;border-radius:4px;
}
.post-body pre{
  background:var(--ink);color:var(--cream);padding:20px;border-radius:4px;
  overflow-x:auto;margin:0 0 22px;
}
.post-body pre code{background:none;padding:0;color:inherit}
.table-wrap{overflow-x:auto;margin:0 0 22px;border-top:1px solid var(--ink)}
.post-body table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px}
.post-body th,.post-body td{
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;
}
.post-body th{
  font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
}
@media (max-width:780px){
  .post-body{font-size:17px}
}

/* ---------- Up next ---------- */
.post-next{
  margin-top:56px;padding-top:32px;border-top:1px solid var(--ink);
}
.post-next__label{
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);margin:0 0 12px;
}
.post-next__title{margin:0 0 8px;font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.15}
.post-next__title a{color:var(--ink);transition:color .2s}
.post-next__title a:hover{color:var(--burgundy)}
.post-next p:last-child{
  font-family:var(--serif);font-size:16px;color:var(--ink-soft);margin:0;max-width:56ch;
}