/*
 * CoolThings — Editorial / Long-form Article Styles
 * Applied to single post pages.
 * Ported from mockup article.css.
 */

/* ── Article layout ────────────────────────────────────────────────────────── */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
@media (max-width: 1040px) { .article-layout { grid-template-columns: 1fr; } .article-sidebar { display: none; } }

/* ── Article header ────────────────────────────────────────────────────────── */
.article-header {
  padding: var(--space-8) 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-7);
}
.article-header .eyebrow { margin-bottom: var(--space-4); }
.article-header h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
  max-width: 840px;
}
.article-header .lede { max-width: 660px; margin-bottom: var(--space-5); }
.article-meta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.article-meta-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.product-hero-price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── Article featured image ────────────────────────────────────────────────── */
.article-hero-img {
  width: 100%; aspect-ratio: 16/9; overflow: hidden;
  border-radius: var(--radius-lg); margin-bottom: var(--space-7);
}
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Article body prose ────────────────────────────────────────────────────── */
.article-body {
  font-size: var(--text-md);
  line-height: 1.72;
  color: var(--text);
  max-width: var(--container-narrow);
}
.article-body p { margin-bottom: 1.45em; }
.article-body h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin: 2.2em 0 0.7em; letter-spacing: -0.015em; }
.article-body h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin: 1.8em 0 0.6em; letter-spacing: -0.01em; }
.article-body h4 { font-size: var(--text-lg); margin: 1.4em 0 0.5em; }
.article-body ul, .article-body ol { padding-left: var(--space-5); margin-bottom: 1.4em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.5em; line-height: 1.6; }
.article-body blockquote {
  border-left: 3px solid var(--primary);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.45;
}
.article-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--primary-hover); }
.article-body img { border-radius: var(--radius); margin: var(--space-6) 0; }
.article-body .wp-caption { margin: var(--space-6) 0; }
.article-body .wp-caption-text { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); text-align: center; }
.article-body figure { margin: var(--space-6) 0; }
.article-body figcaption { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }

/* ── Pull quote ────────────────────────────────────────────────────────────── */
.pull-quote {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-7) 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin: var(--space-7) 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ── Product buy box ───────────────────────────────────────────────────────── */
.product-buy-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); margin: var(--space-7) 0;
}
.product-buy-box-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.pbb-price { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: -0.02em; }
.pbb-meta { font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; }
.pbb-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.article-sidebar { position: sticky; top: calc(var(--nav-h) + var(--space-5)); display: flex; flex-direction: column; gap: var(--space-5); }
.sidebar-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.sidebar-box h4 { font-size: var(--text-sm); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: var(--space-4); }

/* ── Tags ──────────────────────────────────────────────────────────────────── */
.article-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-7) 0 var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.article-tags .chip { font-size: var(--text-xs); height: 30px; padding: 0 12px; }

/* ── Related products ──────────────────────────────────────────────────────── */
.related-section { padding: var(--space-7) 0; border-top: 1px solid var(--border); }
.related-section h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); }