/* ==================================================================
 * Blog layer — article template + PVC FREE hubs (2026-10-21)
 *
 * Loaded only on single posts and category archives (functions.php 6c),
 * after /style.css, so it extends the design system instead of fighting
 * it. Tokens are the ones already defined site-wide.
 * ================================================================== */

/* ---- article head ---- */
.art-hero-head{padding-bottom:8px;}
.art-hero-head h1{max-width:900px;}
.art-meta{font-size:14.5px;margin:14px 0 0;display:flex;gap:10px;align-items:center;}
.art-meta time{font-variant-numeric:tabular-nums;}

.art-figure{margin:26px 0 0;}
.art-figure img{display:block;width:100%;height:auto;border-radius:12px;}

/* ---- body column ---- */
.art-blog-wrap,.art-wrap{max-width:820px;margin:0 auto;}
.art-prose{font-size:17px;line-height:1.78;color:var(--ink,#1f2937);}
.art-prose p{margin:0 0 18px;}
.art-prose h2{font-size:24px;line-height:1.3;color:var(--navy,#0f172a);margin:34px 0 12px;}
.art-prose h3{font-size:19px;line-height:1.35;color:var(--navy,#0f172a);margin:26px 0 10px;}
.art-prose ul,.art-prose ol{margin:0 0 18px 22px;}
.art-prose li{margin:0 0 8px;}
.art-prose a{color:var(--primary,#2563eb);text-decoration:underline;text-underline-offset:2px;}
.art-prose img{max-width:100%;height:auto;border-radius:10px;}
.art-prose blockquote{margin:22px 0;padding:14px 18px;border-left:3px solid var(--primary,#2563eb);
  background:var(--bg,#f6f8f7);color:var(--slate,#46524a);font-size:16px;}
.art-prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px;}
.art-prose th,.art-prose td{border:1px solid var(--border,#e5e7eb);padding:9px 12px;text-align:left;vertical-align:top;}
.art-prose th{background:var(--bg,#f6f8f7);font-weight:600;color:var(--navy,#0f172a);}
.art-prose code{background:var(--bg,#f6f8f7);padding:2px 5px;border-radius:4px;font-size:14px;}

/* ---- the 120-160 word answer block (AI summary target) ---- */
.art-answer{background:var(--bg,#f6f8f7);border:1px solid var(--border,#e5e7eb);
  border-left:4px solid var(--primary,#2563eb);border-radius:10px;padding:20px 24px;margin:0 0 30px;}
.art-answer-label{margin:0 0 8px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--primary,#2563eb);}
.art-answer p{font-size:16.5px;line-height:1.75;color:var(--ink,#1f2937);margin:0 0 12px;}
.art-answer p:last-child{margin-bottom:0;}

/* ---- related reading + hub cross-links share the card grid ---- */
.art-h2{font-size:22px;color:var(--navy,#0f172a);margin:0 0 20px;}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.gcard{display:block;background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);
  border-radius:10px;padding:22px 24px;text-decoration:none;transition:box-shadow .15s ease,transform .15s ease;}
.gcard:hover{box-shadow:0 6px 18px rgba(15,23,42,.10);transform:translateY(-2px);}
.gcard h2,.gcard h3{font-size:17px;line-height:1.35;color:var(--navy,#0f172a);margin:0 0 8px;}
.gcard p{font-size:14.5px;line-height:1.65;color:var(--body,#374151);margin:0 0 12px;}
.gcard .gcard-more{font-size:14px;font-weight:600;color:var(--primary,#2563eb);}
.art-related{border-top:1px solid var(--border,#e5e7eb);}

/* ---- hub strip (category archives) ---- */
.hubstrip{border-top:1px solid var(--border,#e5e7eb);}
.hubstrip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.hubstrip-card{display:block;padding:16px 18px;border:1px solid var(--border,#e5e7eb);border-radius:10px;
  text-decoration:none;background:var(--card,#fff);transition:border-color .15s ease,box-shadow .15s ease;}
.hubstrip-card:hover{border-color:var(--primary,#2563eb);box-shadow:0 4px 14px rgba(15,23,42,.08);}
.hubstrip-card b{display:block;font-size:15.5px;color:var(--navy,#0f172a);margin-bottom:4px;}
.hubstrip-card span{display:block;font-size:13.5px;line-height:1.5;color:var(--body,#374151);}
.hubstrip-card.is-current{border-color:var(--primary,#2563eb);background:var(--bg,#f6f8f7);}

/* ---- closing CTA + inquiry form ---- */
.art-cta{background:var(--bg,#f6f8f7);border-top:1px solid var(--border,#e5e7eb);}
.art-cta-box{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;}
.art-cta-copy h2{font-size:24px;line-height:1.3;color:var(--navy,#0f172a);margin:0 0 12px;}
.art-cta-copy p{font-size:16px;line-height:1.7;color:var(--body,#374151);margin:0 0 14px;}
.art-cta-list{margin:0;padding-left:20px;font-size:15px;line-height:1.7;color:var(--body,#374151);}
.art-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.art-form .form-full{grid-column:1 / -1;}
.art-form label{display:block;font-size:14px;font-weight:600;color:var(--navy,#0f172a);margin-bottom:6px;}
.art-form .req{color:#b91c1c;}
.art-form input[type=text],.art-form input[type=email],.art-form textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border,#e5e7eb);border-radius:8px;
  font:inherit;font-size:15px;color:var(--ink,#1f2937);background:#fff;}
.art-form input:focus,.art-form textarea:focus{outline:2px solid var(--primary,#2563eb);outline-offset:1px;}

@media (max-width:820px){
  .art-cta-box{grid-template-columns:1fr;gap:24px;}
  .art-form{grid-template-columns:1fr;}
  .art-prose{font-size:16.5px;}
}