/*
 * content-pages.css — hand-written styles for the guide/blog pages built
 * 2026-08-03 (guides.php, guide.php, blog.php, blog-post.php,
 * category.php's guide-link section).
 *
 * Deliberately a SEPARATE file from site.css, loaded after it. site.css is
 * a compiled Tailwind v4 build artifact with no source/build tooling
 * present on this server -- editing it directly would work until the next
 * real rebuild silently wipes it out. Uses the exact same design tokens
 * (--color-*, --radius-*, --text-*, --spacing) already defined in site.css
 * so these pages match the established visual system.
 */

.guides-index,
.blog-index,
.guides-index__category {
  width: 100%;
}

.guides-index__category,
.blog-index__list {
  margin-top: calc(var(--spacing) * 10);
}

.guides-index__category h2,
.blog-post-page h1,
.guide-page h1 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: calc(var(--spacing) * 4);
}

.guides-index__list,
.blog-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: grid;
  gap: calc(var(--spacing) * 4);
  /* auto-fit (not auto-fill) -- guides-index__list has exactly 2 items per
     category (budget + buying-guide angles); auto-fill would reserve empty
     phantom column tracks for a row that could theoretically hold more
     items, leaving the 2 real cards stuck on the left with dead space to
     the right. auto-fit collapses those empty tracks so the real cards
     actually expand to fill the row. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.guides-index__list li,
.blog-index__list li {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  padding: calc(var(--spacing) * 5);
  box-shadow: 0 1px 2px #1c19170a, 0 1px 3px #1c19170f;
}

.guides-index__list a,
.blog-index__list a {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: none;
  line-height: 1.35;
}

.guides-index__list a:hover,
.blog-index__list a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

.guides-index__desc,
.blog-index__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin-top: calc(var(--spacing) * 2);
  line-height: 1.5;
}

.blog-index__meta {
  font-size: var(--text-sm);
  color: var(--color-accent-dark);
  margin-top: calc(var(--spacing) * 1);
  font-weight: 500;
}

/* Category-page "Buying Guides" link row (see category.php) */
.category-guides {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
  margin: calc(var(--spacing) * 4) 0 calc(var(--spacing) * 6);
}

.category-guides__link {
  display: inline-block;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-white));
  color: var(--color-brand-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.category-guides__link:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

/* Guide + blog post article body */
.guide-body,
.blog-post-body {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink);
  max-width: 68ch;
}

.guide-body p,
.blog-post-body p {
  margin-bottom: calc(var(--spacing) * 4);
}

.guide-body h2,
.blog-post-body h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-brand-dark);
  margin: calc(var(--spacing) * 8) 0 calc(var(--spacing) * 3);
}

.guide-body strong,
.blog-post-body strong {
  color: var(--color-ink);
  font-weight: 600;
}

.blog-post-page__date {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  margin-bottom: calc(var(--spacing) * 6);
}

.blog-post-page__date a {
  color: var(--color-brand);
  text-decoration: none;
  font-weight: 500;
}

.guide-top-products {
  margin-top: calc(var(--spacing) * 10);
  padding-top: calc(var(--spacing) * 8);
  border-top: 1px solid var(--color-line);
}

.guide-top-products h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: calc(var(--spacing) * 5);
}

.guide-cta {
  margin-top: calc(var(--spacing) * 5);
}

.guide-cta a {
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: none;
}

.guide-cta a:hover {
  text-decoration: underline;
}

.lede {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  max-width: 68ch;
  margin-bottom: calc(var(--spacing) * 6);
}