/* =====================================================================
   Poop Scoop Dude - blog layer (2026-09-06)
   Sits on top of site.css. Uses ONLY site.css tokens so the blog reads
   as the same site: same fonts, same red accent, same warm neutrals,
   same one elevation token, same pill buttons.
   ===================================================================== */

/* ============ BLOG INDEX GRID ============ */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.post-card{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:30px 28px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.post-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:#e0d6c9;
}
.post-card .tag{
  font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:12px;
}
.post-card h3{font-size:1.14rem;font-weight:700;line-height:1.25;margin-bottom:10px;}
.post-card p{font-size:.96rem;color:var(--ink-soft);margin-bottom:18px;}
.post-card .read{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-weight:600;font-size:.94rem;color:var(--red);
}
.post-card .read svg{width:16px;height:16px;transition:transform .25s var(--ease);}
.post-card:hover .read svg{transform:translateX(4px);}

/* ============ ARTICLE BODY ============ */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr);max-width:760px;margin:0;}
.post-body{font-size:1.06rem;color:var(--ink-soft);}
.post-body > *:first-child{margin-top:0;}
.post-body p{margin-top:18px;line-height:1.75;}
.post-body h2{
  font-size:clamp(1.5rem,2.6vw,1.95rem);
  color:var(--ink);margin:44px 0 0;padding-top:8px;
}
.post-body h3{font-size:1.16rem;color:var(--ink);margin:30px 0 0;}
.post-body h2 + p, .post-body h3 + p{margin-top:14px;}
.post-body a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(237,28,40,.35);}
.post-body a:hover{text-decoration-color:var(--red);}
.post-body strong{color:var(--ink);font-weight:600;}
.post-body ul,.post-body ol{margin:20px 0 0;display:grid;gap:12px;}
.post-body ol{padding-left:22px;list-style:decimal;}
.post-body ul li{position:relative;padding-left:26px;line-height:1.7;}
.post-body ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--red);opacity:.55;
}
.post-body ol li{line-height:1.7;padding-left:4px;}

.article-meta{
  font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:8px;
}

.post-body .callout{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--red);
  border-radius:var(--radius);
  padding:24px 26px;margin:32px 0 0;
  font-size:1.08rem;color:var(--ink);font-style:normal;
}

/* ============ TABLES ============ */
.table-card{
  margin:30px 0 0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.table-card table{border-collapse:collapse;width:100%;min-width:520px;font-size:.96rem;}
.table-card th,.table-card td{
  text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:top;
}
.table-card thead th{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;
  background:#FCFAF7;
}
.table-card tbody td{color:var(--ink-soft);}
.table-card tbody tr:last-child td{border-bottom:none;}

/* ============ INLINE QUOTE CTA ============ */
.post-cta{
  margin:40px 0 0;background:#FCFAF7;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 30px;display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;
}
.post-cta p{margin:0;font-size:1rem;color:var(--ink);font-weight:500;max-width:420px;}
.post-cta .btn{flex:none;}

/* ============ RELATED ============ */
.related{border-top:1px solid var(--border);}
.related h2{font-size:clamp(1.5rem,2.6vw,1.95rem);margin-bottom:26px;}

.back-blog{
  display:inline-flex;align-items:center;gap:8px;margin-top:42px;
  font-family:var(--body);font-weight:600;font-size:.96rem;color:var(--ink-soft);
}
.back-blog:hover{color:var(--red);}
.back-blog svg{width:16px;height:16px;}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .blog-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:700px){
  .blog-grid{grid-template-columns:1fr;gap:18px;}
  .post-card{padding:26px 24px;}
  .post-body{font-size:1.02rem;}
  .post-body h2{font-size:1.42rem;margin-top:36px;}
  .post-body h3{font-size:1.08rem;}
  .post-body .callout{padding:20px 22px;font-size:1.02rem;}
  .table-card{border-radius:var(--radius);}
  .table-card table{min-width:460px;font-size:.9rem;}
  .table-card th,.table-card td{padding:12px 14px;}
  .post-cta{padding:24px 22px;flex-direction:column;align-items:flex-start;}
  .post-cta .btn{width:100%;}
}

/* ============ INDEX CLUSTER HEADINGS ============ */
.cluster-head{
  font-size:clamp(1.35rem,2.2vw,1.7rem);
  margin:0 0 24px;padding-bottom:14px;
  border-bottom:1px solid var(--border);
}

/* ============ SPECIFICITY GUARD ============
   .post-body a{color:var(--red)} outranks .btn-red{color:#fff}, which renders
   red-on-red (invisible) buttons inside the article. Re-assert button colors
   and kill the article link underline on anything shaped like a button. */
.post-body .btn{text-decoration:none;font-weight:600;}
.post-body .btn-red,.post-body .btn-red:hover{color:#fff;}
.post-body .btn-outline,.post-body .btn-ghost{color:var(--ink);}
.post-body .back-blog{color:var(--ink-soft);text-decoration:none;font-weight:600;}
.post-body .back-blog:hover{color:var(--red);}

/* --- in-article imagery ------------------------------------------------
   Added 2026-09-06 with the 30-post expansion. Before this batch NO blog
   post had an <img> inside the article, so there was no rule and a portrait
   asset rendered ~760px tall and swallowed the reading column. Cap it. */
.post-body img{
  display:block;width:100%;height:auto;max-height:430px;object-fit:cover;
  margin:28px 0 0;border-radius:var(--radius-lg);border:1px solid var(--border);
  background:#f3efe9;
}
@media (max-width:760px){ .post-body img{max-height:300px;} }