/* ════════════════════════════════════════════════════════════
   Blog Article Stylesheet — Go Detailing Auto Spa
   Shared across all 6 article pages. Loaded after wireframe.css.
   ════════════════════════════════════════════════════════════ */

/* Article shell */
.article-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-7);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--s-6);
  align-items: start;
}
@media (max-width: 1000px) {
  .article-shell { grid-template-columns: 1fr; gap: var(--s-5); }
  .article-toc { position: static !important; order: -1; }
}

/* Article column */
.article-main {
  max-width: 740px;
  width: 100%;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 13px;
  color: var(--ink-soft, #6B7280);
  margin-bottom: var(--s-4);
}
.breadcrumb a {
  color: var(--ink-soft, #6B7280);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.breadcrumb a:hover { color: var(--brand-red); border-bottom-color: var(--brand-red); }
.breadcrumb .sep { margin: 0 8px; color: #D1D5DB; }

/* Article header */
.article-header {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.article-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: var(--s-3);
}
.article-h1 {
  font-family: 'Geist', sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 0 0 var(--s-3) 0;
  color: var(--carbon);
}
.article-lede {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: #374151;
  margin: 0 0 var(--s-4) 0;
}
.article-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #6B7280;
}
.byline-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-red);
  color: white;
  display: grid; place-items: center;
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.byline-name { color: var(--carbon); font-weight: 600; }
.byline-sep { color: #D1D5DB; }

/* Article body */
.article-body {
  font-size: 17px;
  line-height: 1.7;
  color: #1F2937;
}
.article-body h2 {
  font-family: 'Geist', sans-serif;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin: var(--s-6) 0 var(--s-3);
  color: var(--carbon);
  scroll-margin-top: 100px;
}
.article-body h3 {
  font-family: 'Geist', sans-serif;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.3px;
  margin: var(--s-5) 0 var(--s-2);
  color: var(--carbon);
  scroll-margin-top: 100px;
}
.article-body p { margin: 0 0 var(--s-3); }
.article-body p strong { color: var(--carbon); font-weight: 600; }
.article-body a {
  color: var(--brand-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(230,0,18,.3);
  transition: border-color .15s;
}
.article-body a:hover { border-bottom-color: var(--brand-red); }
.article-body ul, .article-body ol {
  margin: 0 0 var(--s-4); padding-left: 24px;
}
.article-body li { margin-bottom: 10px; }
.article-body img {
  width: 100%; border-radius: 14px;
  margin: var(--s-4) 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.article-body figure { margin: var(--s-4) 0; }
.article-body figcaption {
  font-size: 13px; color: #6B7280; text-align: center;
  margin-top: 8px;
}

/* Pull quote */
.pull-quote {
  border-left: 4px solid var(--brand-red);
  background: #FFF5F5;
  padding: var(--s-3) var(--s-4);
  margin: var(--s-4) 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--carbon);
  font-weight: 500;
  border-radius: 0 12px 12px 0;
}

/* Call-out boxes */
.callout {
  background: var(--showroom);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--s-4);
  margin: var(--s-4) 0;
}
.callout-title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  margin: 0 0 8px;
  color: var(--carbon);
  display: flex; align-items: center; gap: 8px;
}
.callout-warn {
  background: #FFFBEB;
  border-color: #FCD34D;
}
.callout-tip {
  background: #ECFDF5;
  border-color: #6EE7B7;
}

/* Inline CTA card */
.inline-cta {
  background: linear-gradient(135deg, #0F1115, #1F2937);
  color: white;
  border-radius: 18px;
  padding: var(--s-5);
  margin: var(--s-5) 0;
  text-align: center;
}
.inline-cta h4 {
  font-family: 'Geist', sans-serif;
  font-size: 24px;
  letter-spacing: -0.5px;
  margin: 0 0 10px;
  color: white;
}
.inline-cta p { color: #D1D5DB; margin: 0 0 var(--s-3); }
.inline-cta .btn-cta {
  display: inline-block;
  background: var(--brand-red);
  color: white;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: none;
  transition: transform .15s;
}
.inline-cta .btn-cta:hover { transform: translateY(-2px); border-bottom: none; }
.inline-cta .fineprint {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 10px;
}

/* Comparison table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-4) 0;
  font-size: 15px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.compare-table th, .compare-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.compare-table th {
  background: var(--carbon);
  color: white;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:nth-child(even) td { background: #FAFAFA; }
.compare-table .yes { color: #059669; font-weight: 700; }
.compare-table .no  { color: #DC2626; font-weight: 700; }

/* FAQ block */
.faq-block { margin: var(--s-5) 0; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--s-3) var(--s-4);
  margin-bottom: 10px;
  background: white;
}
.faq-item summary {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--carbon);
}
.faq-item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--brand-red);
  margin-left: 12px;
  transition: transform .2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin: 10px 0 0; color: #374151; font-size: 15px; line-height: 1.6; }

/* TOC sidebar */
.article-toc {
  position: sticky;
  top: 100px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s-4);
}
.toc-title {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-red);
  margin: 0 0 var(--s-3);
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li {
  padding: 6px 0;
  border-bottom: 1px solid #F3F4F6;
}
.toc-list li:last-child { border-bottom: 0; }
.toc-list a {
  font-size: 14px;
  color: #374151;
  text-decoration: none;
  line-height: 1.4;
  display: block;
}
.toc-list a:hover { color: var(--brand-red); }
.toc-list .num {
  display: inline-block;
  width: 22px;
  color: #9CA3AF;
  font-weight: 600;
  font-size: 12px;
}

/* Author bio block */
.author-bio {
  background: var(--showroom);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--s-4);
  margin: var(--s-6) 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
@media (max-width: 640px) { .author-bio { flex-direction: column; text-align: center; } }
.author-bio-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--brand-red);
  color: white;
  display: grid; place-items: center;
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: 24px;
  flex-shrink: 0;
}
.author-bio-name {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--carbon);
}
.author-bio-text { font-size: 14px; line-height: 1.6; color: #4B5563; margin: 0; }

/* Related posts */
.related-posts {
  background: var(--showroom);
  border-top: 1px solid var(--line);
  padding: var(--s-6) 0;
}
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}
@media (max-width: 900px) { .related-posts-grid { grid-template-columns: 1fr; } }
.related-card {
  display: block;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s-3);
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}
.related-card .cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-red);
}
.related-card h4 {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  letter-spacing: -0.3px;
  margin: 8px 0;
  color: var(--carbon);
  line-height: 1.25;
}
.related-card p {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
  line-height: 1.45;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .article-card, .related-card, .inline-cta .btn-cta { transition: none !important; }
}

/* ============================================================
   v16 Visual Polish — Article rhythm refinements
   ============================================================ */

.article-hero,
.post-hero {
  background: linear-gradient(135deg, var(--carbon-900) 0%, var(--carbon-800) 100%);
  color: #fff;
  border-radius: var(--card-radius-lg);
  padding: var(--space-10) var(--space-8);
  position: relative;
  overflow: hidden;
}
.article-hero h1, .post-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-32), 4vw, var(--fs-56));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: #fff;
  margin-bottom: var(--space-4);
}
.article-hero .eyebrow, .post-hero .eyebrow { color: #FF8088; }
.article-hero p, .post-hero p { color: rgba(255,255,255,.78); }

/* Lede — larger, calmer intro paragraph */
.article-lede, .post-lede, .lede {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-7);
}

/* Body rhythm */
.article-body, .post-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--text-primary);
}
.article-body p, .post-body p {
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  line-height: 1.75;
}
.article-body h2, .post-body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  letter-spacing: var(--ls-tight);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}
.article-body h3, .post-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  letter-spacing: var(--ls-tight);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}
.article-body ul, .article-body ol,
.post-body ul, .post-body ol {
  margin: var(--space-4) 0 var(--space-6);
  padding-left: var(--space-6);
}
.article-body li, .post-body li {
  margin-bottom: var(--space-2);
  line-height: var(--lh-relaxed);
}
.article-body a, .post-body a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-body a:hover, .post-body a:hover {
  color: var(--brand-hover);
}

/* Callouts */
.callout, .info-box, .tip-box {
  background: var(--mist-100);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  color: var(--text-primary);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
}
.callout strong, .info-box strong { color: var(--carbon-900); font-weight: 700; }

.callout--warn {
  background: var(--amber-50);
  border-left-color: var(--amber-500);
}
.callout--success {
  background: var(--green-50);
  border-left-color: var(--green-500);
}

/* Pull quote */
blockquote, .pull-quote {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  border-left: 3px solid var(--brand);
  padding: var(--space-5) 0 var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
  letter-spacing: var(--ls-tight);
}

/* Sticky TOC */
.article-toc, .post-toc, .toc {
  position: sticky;
  top: 100px;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--elev-1);
  font-size: var(--fs-14);
}
.article-toc h4, .post-toc h4, .toc h4 {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.article-toc a, .post-toc a, .toc a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 0;
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
  margin-left: calc(-1 * var(--space-3));
  transition: all var(--dur-base) var(--ease-out);
  line-height: var(--lh-snug);
}
.article-toc a:hover, .post-toc a:hover, .toc a:hover {
  color: var(--text-primary);
  border-left-color: var(--border-default);
}
.article-toc a.active, .post-toc a.active, .toc a.active {
  color: var(--brand);
  border-left-color: var(--brand);
  font-weight: 600;
}

/* FAQ within article */
.article-faq, .post-faq {
  margin-top: var(--space-10);
}
.article-faq .faq-q { font-family: var(--font-display); }

/* Related posts */
.related-posts, .post-related {
  margin-top: var(--space-12);
  padding-top: var(--space-9);
  border-top: 1px solid var(--border-subtle);
}

/* Article meta */
.article-meta, .post-meta {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  color: var(--text-inverse-muted);
  font-size: var(--fs-14);
  margin-top: var(--space-4);
}

/* Featured image */
.article-feature-img, .post-feature-img, .hero-image {
  border-radius: var(--card-radius-lg);
  box-shadow: var(--elev-3);
  margin: var(--space-7) 0;
}