/* ════════════════════════════════════════════════════════════════════════════
   CARDS.CSS — Three Sidebar Card Visual Styles
   SmartDigitalInvesting.com — Digital Asset Intelligence

   card-reserve : exclusive, premium — gold accent, quiet authority
   card-signal  : informational, educational — subtle blue glow
   card-alert   : urgent, action-oriented — warm accent, elevated
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Shared card base ─────────────────────────────────────────────────────── */
.sidebar-card {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  transition: box-shadow var(--transition-base);
}

.sidebar-card:last-child {
  margin-bottom: 0;
}

.sidebar-card__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.sidebar-card__heading {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-tight);
}

.sidebar-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.sidebar-card__cta {
  display: block;
  width: 100%;
  text-align: center;
}

/* ── CARD RESERVE ────────────────────────────────────────────────────────────
   Exclusive. Restrained. Gold top-line accent.
   Presence through stillness — no animation noise.
   ─────────────────────────────────────────────────────────────────────────── */
.card-reserve {
  background: var(--color-panel);
  border: 1px solid var(--border-gold);
  border-top: 2px solid var(--color-premium-gold);
  box-shadow:
    0 0 28px var(--glow-gold),
    0 4px 16px rgba(0,0,0,0.45);
  position: relative;
}

.card-reserve::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(214, 178, 94, 0.04) 0%, transparent 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
}

.card-reserve:hover {
  box-shadow:
    0 0 36px rgba(214, 178, 94, 0.12),
    0 6px 24px rgba(0,0,0,0.5);
}

.card-reserve .sidebar-card__eyebrow {
  color: var(--color-premium-gold);
}

.card-reserve .sidebar-card__heading {
  color: var(--color-text-primary);
}

.card-reserve .sidebar-card__body {
  color: var(--color-text-secondary);
}

/* ── CARD SIGNAL ─────────────────────────────────────────────────────────────
   Informational. Educational. Soft blue luminescence.
   Used for framework CTAs, scorecard prompts, content callouts.
   ─────────────────────────────────────────────────────────────────────────── */
.card-signal {
  background: var(--color-surface);
  border: 1px solid var(--border-blue);
  box-shadow:
    0 0 0 1px rgba(70, 167, 255, 0.06),
    0 4px 20px rgba(70, 167, 255, 0.08),
    inset 0 1px 0 rgba(70, 167, 255, 0.05);
}

.card-signal:hover {
  box-shadow:
    0 0 0 1px rgba(70, 167, 255, 0.10),
    0 6px 28px rgba(70, 167, 255, 0.14),
    inset 0 1px 0 rgba(70, 167, 255, 0.08);
}

.card-signal .sidebar-card__eyebrow {
  color: var(--color-accent-blue);
}

.card-signal .sidebar-card__heading {
  color: var(--color-text-primary);
}

/* ── CARD ALERT ──────────────────────────────────────────────────────────────
   Urgent. Action-oriented. Warm accent for private access / limited offers.
   ─────────────────────────────────────────────────────────────────────────── */
.card-alert {
  background: var(--color-surface);
  border: 1px solid rgba(214, 178, 94, 0.18);
  border-left: 3px solid var(--color-premium-gold);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.card-alert:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}

.card-alert .sidebar-card__eyebrow--alert {
  color: var(--color-premium-gold);
}

.card-alert .sidebar-card__heading {
  color: var(--color-text-primary);
}

/* ── Tier badge (shared utility) ─────────────────────────────────────────── */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.tier-badge--reserve {
  background: rgba(214, 178, 94, 0.10);
  border: 1px solid rgba(214, 178, 94, 0.22);
  color: var(--color-premium-gold);
}

.tier-badge--standard {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.tier-badge--signal {
  background: rgba(70, 167, 255, 0.06);
  border: 1px solid rgba(70, 167, 255, 0.18);
  color: var(--color-accent-blue);
}