/* ============================================================================
   QP COMPONENTS — Stage 2 PROPOSAL (Family C: cards / FAQ / buttons)
   markdimercurio.com · PREVIEW ONLY. Loaded by /design-system/components, NOT by any live page.
   Built on the existing Quiet-Precision tokens (quiet-precision.css) + qp-quick (qp-motion.css).
   Consolidates: cards 5 variants -> 1 base + modifiers; buttons 4 classes -> base + 3 roles + size.
   Quiet vocabulary: transform/opacity only, reduced-motion-safe, on-palette, no bounce.
   Spec: review/qp-components-stage2-familyC.md
   ========================================================================== */

/* ---------- CARDS: one base + modifiers ---------- */
.qp-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface-0); border:1px solid var(--border); border-radius:14px;
  padding:clamp(24px,2.4vw,32px); box-shadow:0 1px 2px rgba(20,30,55,.04);
}
.qp-card > h3{ font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.3px; color:var(--text-strong); margin:0 0 8px; }
.qp-card > p{ font-size:var(--fs-body); line-height:1.6; color:var(--text); margin:0; }
.qp-card .qp-card-icon{ width:44px; height:44px; border-radius:50%; background:var(--surface-1);
  color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }

/* hover = qp-quick lift; transform/opacity only, reduced-motion-safe */
@media (prefers-reduced-motion: no-preference){
  .qp-card{ transition: transform var(--dur-fast,160ms) var(--ease-out), box-shadow var(--dur-fast,160ms) var(--ease-out), border-color var(--dur-fast,160ms) var(--ease-out); }
  .qp-card.is-interactive:hover, a.qp-card:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(20,30,55,.10); border-color:var(--border-strong); }
}

/* arrow-link (res-card, post-item) — base class works on any card; --link pushes it to the footer */
.qp-card-link{ font-size:var(--fs-small); font-weight:600; color:var(--accent-ink);
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.qp-card--link .qp-card-link{ margin-top:auto; padding-top:16px; }
@media (prefers-reduced-motion: no-preference){
  .qp-card-link{ transition:gap var(--dur-fast,160ms) var(--ease-out), color var(--dur-fast,160ms) var(--ease-out); }
  .qp-card-link:hover, .qp-card--link:hover .qp-card-link{ gap:10px; color:var(--accent); }
}

/* --primary : gold top-border, elevated (the webinar path) */
.qp-card--primary{ border-top:3px solid var(--accent); box-shadow:0 18px 44px rgba(20,30,55,.12); }

/* --dark : navy panel, light text (inherits the .qp dark-surface heading guard) */
.qp-card--dark{ background:linear-gradient(180deg,#1d2c44,#15233a); border-color:rgba(168,132,61,.4); color:#fff; }
.qp-card--dark > h3{ color:#fff; }
.qp-card--dark > p{ color:var(--text-on-dark-muted); }

/* --cover : 3:4 dark image lead-magnet cover (guide-cover) */
.qp-card--cover{ aspect-ratio:3/4; border-radius:10px; overflow:hidden; justify-content:center; text-align:center;
  color:#fff; border:1px solid rgba(168,132,61,.4); box-shadow:0 24px 50px rgba(20,30,55,.3);
  background:linear-gradient(160deg, rgba(29,44,68,.78), rgba(17,25,42,.92)), var(--cover-img, none); background-size:cover; background-position:center; }
.qp-card--cover .qp-cover-k{ font-size:var(--fs-fine); letter-spacing:.2em; text-transform:uppercase; color:var(--accent-soft); }
.qp-card--cover .qp-cover-t{ font-family:'Playfair Display','Playfair Fallback',serif; font-style:italic; font-size:22px; line-height:1.25; margin-top:8px; }
/* cover actions: primary "Read" (opens PDF inline) + quiet "Download" link on the dark cover */
.qp-card--cover .qp-cover-act{ margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:10px; }
.qp-card--cover .qp-cover-dl{ font-size:var(--fs-fine); font-weight:600; letter-spacing:.04em; color:#dbe2ed;
  text-decoration:none; border-bottom:1px solid rgba(219,226,237,.35); padding-bottom:1px; }
@media (hover:hover){ .qp-card--cover .qp-cover-dl{ transition:color var(--dur-fast,160ms) var(--ease-out), border-color var(--dur-fast,160ms) var(--ease-out); }
  .qp-card--cover .qp-cover-dl:hover{ color:#fff; border-bottom-color:#fff; } }
.qp-card--cover .qp-cover-dl:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; border-radius:2px; }
/* library-wide actions row (read-all + download-all) under the section intro */
.lib-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:18px; }
.lib-actions .lib-dl-all{ font-size:var(--fs-small); font-weight:600; color:var(--accent-ink); text-decoration:none;
  border-bottom:1px solid var(--border-strong); padding-bottom:1px; }
@media (hover:hover){ .lib-actions .lib-dl-all{ transition:color var(--dur-fast,160ms) var(--ease-out), border-color var(--dur-fast,160ms) var(--ease-out); }
  .lib-actions .lib-dl-all:hover{ color:var(--accent); border-bottom-color:var(--accent); } }
.lib-actions .lib-dl-all:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* --row : borderless list row with a divider (blog index) */
.qp-card--row{ background:none; border:0; border-radius:0; border-bottom:1px solid var(--border); box-shadow:none; padding:24px 0; }
.qp-card--row .qp-card-meta{ font-size:var(--fs-fine); letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--accent-ink); margin-bottom:6px; }

/* ---------- BUTTONS: one base + roles + size ---------- */
.qp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:16px; font-weight:700; line-height:1; padding:16px 32px; border-radius:8px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; }
@media (prefers-reduced-motion: no-preference){
  .qp-btn{ transition: transform var(--dur-fast,160ms) var(--ease-out), box-shadow var(--dur-fast,160ms) var(--ease-out), background-color var(--dur-fast,160ms) var(--ease-out), border-color var(--dur-fast,160ms) var(--ease-out); }
  .qp-btn:hover{ transform:translateY(-1px); }
}
.qp-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* NAVY text for WCAG AA (white-on-gold was 3.48). Gold dark-stop nudged lighter so navy clears 4.5
   (deepening gold would lower navy contrast). Measured navy-on-gold ~5.3. */
.qp-btn--gold{ background:linear-gradient(180deg,#c2a04a,var(--accent-2)); color:var(--text-strong); box-shadow:0 14px 30px rgba(168,132,61,.30); }
.qp-btn--gold:hover{ box-shadow:0 18px 38px rgba(168,132,61,.38); }
.qp-btn--gold:focus-visible{ outline-color:var(--surface-ink); }

.qp-btn--dark{ background:linear-gradient(180deg,#1d2c44,#15233a); color:#fff; border-color:rgba(168,132,61,.4); padding:15px 30px; }

.qp-btn--ghost{ background:none; color:#fff; border-color:rgba(255,255,255,.4); font-weight:600; }
.qp-btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

/* --sm : the nav CTA size (folds .nav-cta into .qp-btn--gold.qp-btn--sm) */
.qp-btn--sm{ font-size:15px; padding:9px 18px; border-radius:7px; box-shadow:none; }

/* ---------- FAQ: native details, qp-quick marker ---------- */
.qp-faq{ max-width:820px; margin:0 auto; }
.qp-faq details{ border-bottom:1px solid var(--border); }
.qp-faq details:first-of-type{ border-top:1px solid var(--border); }
.qp-faq summary{ list-style:none; cursor:pointer; padding:20px 0; font-size:18px; font-weight:600;
  color:var(--text-strong); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.qp-faq summary::-webkit-details-marker{ display:none; }
.qp-faq summary::after{ content:'+'; color:var(--accent); font-size:24px; line-height:1; font-weight:400; }
@media (prefers-reduced-motion: no-preference){
  .qp-faq summary::after{ transition: transform var(--dur-fast,160ms) var(--ease-out), color var(--dur-fast,160ms) var(--ease-out); }
}
.qp-faq details[open] summary::after{ content:'−'; }
.qp-faq summary:hover{ color:var(--accent-ink); }
.qp-faq details > p{ font-size:var(--fs-body); line-height:1.65; color:var(--text); margin:0 0 18px; max-width:68ch; }

/* ---------- Family B (PREVIEW ONLY): disclosure-fine AA-clear color ----------
   Proposes the footer-fine fix: HOLD 14px, lighten color #5d6a82 -> #7d8aa0 so the legal disclosure
   clears AA on the dark footer (~5.5 vs the current 3.59). NOT applied to any live .footer-fine —
   Taylor-gated. Shown on /design-system/components for sign-off. */
.qp-disclosure-fine{ font-size:14px; line-height:1.75; color:#7d8aa0; }
.qp-disclosure-fine.is-old{ color:#5d6a82; }