/* ════════════════════════════════════════════════════════════════════
 * LISTICLE TEMPLATE - vetted directory w/ transparency + FTC disclosure
 * Reuses tokens.css + homepage.css + guide.css (breadcrumb, author-box,
 * related-grid, cat-pill, byline). This file = listicle-specific pieces.
 * ════════════════════════════════════════════════════════════════════ */

/* ── FTC affiliate disclosure ── */
.ftc{ max-width:820px; margin:var(--space-8) auto 0; background:#FEFCE8; border:1px solid #FDE68A; border-left:4px solid var(--color-warning); border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); }
.ftc p{ margin:0; font-size:var(--text-body-sm); font-style:italic; color:#854D0E; line-height:var(--leading-relaxed); }
.ftc strong{ font-style:normal; }

/* ── Selection criteria ── */
.criteria-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:560px){ .criteria-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .criteria-grid{ grid-template-columns:repeat(5,1fr); } }
.crit{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-5); border-top:3px solid var(--brand-purple); }
.crit .n{ font-family:var(--font-mono); font-size:var(--text-h4); font-weight:var(--weight-black); color:var(--brand-purple-light); letter-spacing:var(--tracking-tight); line-height:1; margin-bottom:var(--space-3); }
.crit .n::before{ content:counter(crit, decimal-leading-zero); }
.criteria-grid{ counter-reset:crit; }
.crit{ counter-increment:crit; }
.crit h3{ font-size:var(--text-body); margin-bottom:var(--space-2); }
.crit p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); }
.criteria-note{ text-align:center; max-width:600px; margin:var(--space-10) auto 0; font-size:var(--text-body-sm); color:var(--text-tertiary); font-style:italic; }

/* ── Methodology note ── */
.method-note{ max-width:var(--container-prose); margin-inline:auto; }
.method-note p{ font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-relaxed); }

/* ── Items list ── */
.items{ max-width:820px; margin-inline:auto; }
.item{ padding-block:var(--space-12); border-bottom:1px solid var(--border-subtle); scroll-margin-top:88px; }
.item:first-child{ padding-top:var(--space-4); }
.item:last-child{ border-bottom:0; }
.item-rank{ font-family:var(--font-mono); font-size:var(--text-caption); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-purple); margin-bottom:var(--space-2); }
.item h2{ font-size:clamp(26px,3.4vw,34px); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-2); }
.item-vp{ font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-snug); margin-bottom:var(--space-6); }

.item-meta{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-5); margin-bottom:var(--space-6); }
@media (min-width:560px){ .item-meta{ grid-template-columns:repeat(4,1fr); } }
.im{ text-align:center; }
.im .k{ font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-tertiary); margin-bottom:var(--space-1); }
.im .v{ font-family:var(--font-mono); font-size:var(--text-body); font-weight:var(--weight-bold); color:var(--text-primary); }
.im.score .v{ font-size:32px; font-weight:var(--weight-black); letter-spacing:var(--tracking-tight); background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

.proscons{ display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-bottom:var(--space-6); }
@media (min-width:560px){ .proscons{ grid-template-columns:1fr 1fr; align-items:start; } }
.pc{ border-radius:var(--radius-lg); padding:var(--space-5); }
.pc.pros{ background:var(--color-success-bg); border:1px solid #A7F3D0; }
.pc.cons{ background:var(--color-warning-bg); border:1px solid #FDE68A; }
.pc h4{ font-size:var(--text-body-sm); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; margin-bottom:var(--space-3); }
.pc.pros h4{ color:var(--color-success-text); }
.pc.cons h4{ color:var(--color-warning-text); }
.pc ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-2); }
.pc li{ display:flex; gap:var(--space-2); font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-snug); }
.pc.pros li::before{ content:'✓'; color:var(--color-success-text); font-weight:var(--weight-bold); flex:none; }
.pc.cons li::before{ content:'✕'; color:var(--color-warning-text); font-weight:var(--weight-bold); flex:none; }

.item-for{ margin-bottom:var(--space-6); }
.item-for h4{ font-size:var(--text-caption); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-tertiary); margin-bottom:var(--space-2); }
.item-for p{ font-size:var(--text-body); color:var(--text-secondary); line-height:var(--leading-relaxed); }

/* ── Methodology deep-dive ── */
.deepdive{ background:var(--bg-subtle); }
.deepdive-inner{ max-width:var(--container-prose); margin-inline:auto; text-align:center; }
.deepdive-inner p{ font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-relaxed); margin-bottom:var(--space-6); }

/* ── Agency CTA (dark accent strip) ── */
.list-agency-card{ position:relative; max-width:820px; margin-inline:auto; background:var(--bg-dark); border-radius:var(--radius-2xl); padding:var(--space-12) var(--space-8); text-align:center; overflow:hidden; }
.list-agency-card::before{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:360px; background:radial-gradient(ellipse, rgba(124,58,237,.28) 0%, transparent 70%); pointer-events:none; }
.list-agency-card > *{ position:relative; z-index:1; }
.list-agency-card .eyebrow{ color:var(--brand-glow); }
.list-agency-card h2{ color:var(--text-on-dark); font-size:var(--text-h2); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-4); }
.list-agency-card p{ color:var(--text-mid-dark); font-size:var(--text-body-lg); line-height:var(--leading-relaxed); max-width:520px; margin:0 auto var(--space-8); }