/* ============================================================
   Verity — Guides section (static HTML pages, separate from the
   app.html SPA — plain server-rendered markup for SEO).
   Loaded *after* landing.css: reuses all the same tokens, .nav,
   .btn, .wrap, footer etc. This file only adds the bits specific
   to a guide listing page and a guide article page.
   ============================================================ */

/* ── Listing page ── */
.guides-hero { padding: 72px 0 48px; }
.guides-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 16px 0 14px; max-width: 760px; }
.guides-hero p.lead { font-size: 1.02rem; color: var(--text2); max-width: 620px; }

.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.guide-card {
  display: flex; flex-direction: column; height: 280px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; background: var(--surface);
  box-shadow: var(--depth-highlight), var(--depth-shadow);
  transform-style: preserve-3d;
  transition: border-color .18s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.guide-card:hover {
  border-color: var(--hover-blue);
  box-shadow: var(--depth-highlight), var(--depth-shadow-hover), 0 0 0 1px var(--hover-blue-ring), 0 20px 40px var(--hover-blue-glow);
  transform: translateY(-8px);
}
.guide-card-tag {
  display: inline-block; font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue);
  background: var(--blue-dim); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
}
.guide-card h3 {
  font-size: 1.1rem; margin-bottom: 10px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.guide-card p {
  font-size: 0.88rem; color: var(--text2); line-height: 1.55; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.guide-card-meta { font-size: 0.76rem; color: var(--text3); margin-top: auto; }

/* placeholder card — marks scaffold entries so nobody ships them by accident */
.guide-card.placeholder { border-style: dashed; }
.guide-card.placeholder .guide-card-tag { color: var(--amber); background: var(--amber-dim); }

/* ── Article page ── */
.guide-back { display: flex; align-items: center; gap: 6px; max-width: 720px; margin: 0 auto 24px; font-size: 0.86rem; color: var(--text2); }
.guide-back:hover { color: var(--text); }

.guide-article { padding: 56px 0 40px; }
.guide-article-head { max-width: 720px; margin: 0 auto 40px; }
.guide-article-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 16px 0 16px; }
.guide-meta-row { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text3); margin-top: 18px; }
.guide-meta-row .dot-sep::before { content: '·'; margin: 0 2px; }

.guide-placeholder-banner {
  max-width: 720px; margin: 0 auto 32px; padding: 12px 16px; border-radius: 10px;
  background: var(--amber-dim); border: 1px solid var(--amber); color: var(--amber);
  font-size: 0.85rem; line-height: 1.5;
}

.guide-prose { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 1.02rem; line-height: 1.6; color: var(--text2); }
.guide-prose h2 { font-size: 1.4rem; color: var(--text); margin: 32px 0 12px; }
.guide-prose h3 { font-size: 1.15rem; color: var(--text); margin: 22px 0 10px; }
.guide-prose p { margin-bottom: 14px; }
/* landing.css sets a global `ul { list-style: none }` for the site's card
   lists, which use custom ::before checkmarks instead of real bullets.
   Article prose has no such checkmark styling, so restore real markers
   here or every <ul>/<ol> in a guide renders with nothing in front of it. */
.guide-prose ul, .guide-prose ol { margin: 0 0 14px 22px; }
.guide-prose ul { list-style: disc; }
.guide-prose ol { list-style: decimal; }
.guide-prose li { margin-bottom: 6px; }
.guide-prose li::marker { color: var(--text3); }
.guide-prose a { color: var(--blue); text-decoration: underline; }
.guide-prose strong { color: var(--text); }

.guide-cta {
  max-width: 720px; margin: 48px auto 0; padding: 28px 30px; border-radius: var(--radius-lg);
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.guide-cta p { font-size: 0.95rem; color: var(--text2); margin: 0; max-width: 420px; }

/* .faq-plain / .faq-block (numbered, always-visible Q&A) now lives in
   landing.css — it's shared by the home page FAQ and every guide's FAQ, and
   landing.html doesn't load this file, so it has to live in the file both
   pages actually include. Don't redefine it here. */

@media (max-width: 900px) {
  .guides-grid { grid-template-columns: 1fr; }
}