/* ============================================================
   Budget Finance — additive stylesheet for the on-site Reviews
   archive (customer-reviews.html) + the Blog (blog.html + articles).
   Loaded AFTER css/styles.css. Reuses the site's existing design
   tokens (var(--ink)/--dim/--faint/--card/--accent/--radius) and the
   existing .rv-card/.rv-inner/.rv-stars/.rv-text/.rv-meta/.rv-ago
   classes already defined in styles.css for the homepage carousel —
   this file only adds what those pages don't already have: a full
   grid layout for the reviews archive, and the blog list/article
   layout. Pattern mirrors website-rebuild/reviews-site/css/
   reviews-site.css (same idea, kept separate so styles.css itself
   stays an easy diff against the rest of the site). Added 06/08/2026.
   ============================================================ */

/* ---------- Reviews archive: stat header ---------- */
.rv-stats{
  display:flex;justify-content:center;align-items:baseline;gap:10px;
  margin:22px auto 0;flex-wrap:wrap;
}
.rv-stats .stars{color:#f5a623;font-size:22px;letter-spacing:3px}
.rv-stats .num{font-size:22px;font-weight:700;letter-spacing:-.01em}
.rv-stats .count{font-size:15px;color:var(--dim)}
.rv-source{font-size:12.5px;color:var(--faint);margin-top:10px}

/* ---------- Reviews archive: full grid (all reviews, not the marquee) ---------- */
.rv-grid{
  display:grid;grid-template-columns:1fr;gap:14px;
  max-width:900px;margin:12px auto 0;text-align:left;
}
/* override the homepage marquee's flex-item sizing so cards fill grid cells */
.rv-grid .rv-card{flex:none;margin-right:0}
.rv-grid .rv-inner{min-height:0}
.rv-grid .rv-badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);margin-top:16px;
}
@media(min-width:768px){
  .rv-grid{grid-template-columns:1fr 1fr;gap:18px}
}

/* ---------- Simple info intro block (reused prose pattern) ---------- */
.rv-info{max-width:720px;margin:0 auto;text-align:center}
.rv-info p{font-size:clamp(16px,4.4vw,19px);color:var(--ink);line-height:1.65;margin-top:18px}
.rv-info p:first-child{margin-top:0}

/* ---------- Blog index: article card grid ---------- */
.blog-grid{
  max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:16px;
  text-align:left;
}
.blog-card{
  background:var(--card);border-radius:var(--radius);padding:28px 26px 30px;
  display:flex;flex-direction:column;
}
.blog-card .blog-tag{
  display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#c9760c;
  border-radius:999px;padding:4px 10px;margin-bottom:14px;
}
.blog-card h3{font-size:22px;font-weight:700;letter-spacing:-.016em;line-height:1.25}
.blog-card h3 a{color:var(--ink)}
.blog-card h3 a:hover{color:var(--accent)}
.blog-card p{font-size:15.5px;color:var(--dim);margin-top:10px;line-height:1.55;flex:1}
.blog-card .blog-readmore{margin-top:16px;font-size:14.5px;font-weight:650}
@media(min-width:768px){
  .blog-grid{grid-template-columns:1fr 1fr}
}

/* ---------- Draft banner (blog index + articles, pending Marc review) ---------- */
.draft-banner{
  max-width:640px;margin:0 auto 34px;text-align:center;
  background:#fff4e0;border:1px solid #f0cf94;border-radius:16px;
  padding:14px 20px;font-size:14px;color:#6b4a09;line-height:1.55;
}
.draft-banner b{font-weight:700}

/* ---------- Article body ---------- */
.article-prose{max-width:680px;margin:0 auto;text-align:left}
.article-prose p{font-size:clamp(16px,4.2vw,18px);color:var(--ink);line-height:1.7;margin-top:18px}
.article-prose p:first-child{margin-top:0}
.article-prose h2{
  font-size:clamp(21px,5vw,27px);font-weight:700;letter-spacing:-.016em;
  margin-top:42px;line-height:1.25;
}
.article-prose h2:first-child{margin-top:0}
.article-prose ul{margin:18px 0 0;padding-left:22px}
.article-prose li{font-size:16px;color:var(--ink);line-height:1.65;margin-top:8px}
.article-meta{
  text-align:center;font-size:13.5px;color:var(--faint);
  margin-top:14px;letter-spacing:.01em;
}
.article-cta{
  max-width:680px;margin:46px auto 0;padding:26px 28px;
  background:var(--card);border-radius:var(--radius);text-align:center;
}
.article-cta p{font-size:16px;color:var(--ink);margin-bottom:16px}