/* ============================================================================
 * Odahl — Cards
 * Editorial cards. Hairline frames, no shadows by default. Lift on hover
 * via transform + faint Vespera shadow. Requires tokens.css.
 * ============================================================================ */

/* ── Base card ─────────────────────────────────────────────────────── */
.odahl-card {
  background: var(--bone-warm);
  border: 1px solid var(--seam);
  padding: var(--gap-lg);
  transition: transform var(--speed-standard) var(--ease-out),
              box-shadow var(--speed-standard) var(--ease-out),
              border-color var(--speed-standard) var(--ease-out);
}
.odahl-card-eyebrow {
  font-family: var(--display); font-style: italic; font-size: 0.92rem;
  color: var(--ink-mute); margin-bottom: 0.6rem;
}
.odahl-card-title {
  font-family: var(--display); font-weight: 500; font-size: 1.4rem;
  letter-spacing: -0.018em; color: var(--ink); margin-bottom: 0.8rem;
  line-height: 1.2;
}
.odahl-card-title em { font-style: italic; color: var(--aether-deep); }
.odahl-card-body {
  font-family: var(--body); font-size: var(--type-body-sm);
  color: var(--ink-soft); line-height: 1.6;
}
.odahl-card-foot {
  margin-top: var(--gap); padding-top: var(--gap-sm);
  border-top: 1px solid var(--seam);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--gap-sm);
}

/* ── Interactive card (clickable, with lift) ──────────────────────── */
.odahl-card-interactive {
  cursor: pointer;
}
.odahl-card-interactive:hover {
  transform: translateY(-2px);
  border-color: var(--aether-deep);
  box-shadow: 0 12px 28px -16px rgba(142, 123, 163, 0.25);
}
.odahl-card-interactive:active { transform: translateY(0); }

/* ── Pricing card ──────────────────────────────────────────────────── */
.odahl-pricing-card {
  background: var(--bone-warm); border: 1px solid var(--seam);
  padding: var(--gap-lg); position: relative;
  display: flex; flex-direction: column; gap: var(--gap-sm);
}
.odahl-pricing-card[data-featured="true"] {
  border: 2px solid var(--aether-deep);
  background: var(--bone);
}
.odahl-pricing-card-flag {
  position: absolute; top: -10px; right: 1rem;
  background: var(--aether-deep); color: var(--bone);
  font-family: var(--display); font-style: italic; font-size: 0.78rem;
  padding: 0.18rem 0.7rem; letter-spacing: 0.04em;
}
.odahl-pricing-tier {
  font-family: var(--display); font-style: italic; font-size: 0.85rem;
  color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase;
}
.odahl-pricing-name {
  font-family: var(--display); font-weight: 500; font-size: 2rem;
  letter-spacing: -0.025em; line-height: 1;
}
.odahl-pricing-price {
  display: flex; align-items: baseline; gap: 0.3rem;
  margin: 0.5rem 0 0;
}
.odahl-pricing-amount {
  font-family: var(--mono); font-size: 2.4rem; font-weight: 400;
  font-variant-numeric: tabular-nums; color: var(--ink);
  line-height: 1;
}
.odahl-pricing-cycle {
  font-family: var(--body); font-size: 0.85rem; color: var(--ink-mute);
}
.odahl-pricing-features {
  list-style: none; padding: 0; margin: var(--gap-sm) 0 0;
  border-top: 1px solid var(--seam); padding-top: var(--gap-sm);
}
.odahl-pricing-features li {
  padding: 0.4rem 0 0.4rem 1.4rem; position: relative;
  font-family: var(--body); font-size: var(--type-body-sm);
  color: var(--ink-soft); line-height: 1.5;
}
.odahl-pricing-features li::before {
  content: '—'; position: absolute; left: 0; top: 0.4rem;
  color: var(--aether-deep); font-family: var(--display); font-style: italic;
}
.odahl-pricing-features li[data-excluded="true"] {
  color: var(--ink-mute); opacity: 0.6;
}
.odahl-pricing-features li[data-excluded="true"]::before { content: '×'; color: var(--ink-mute); font-style: normal; }

/* ── Class card (homepage / classes page) ───────────────────────────── */
.odahl-class-card {
  background: var(--bone-warm); border: 1px solid var(--seam);
  padding: var(--gap-lg); position: relative;
  transition: all var(--speed-standard) var(--ease-out);
}
.odahl-class-card-tier {
  font-family: var(--display); font-style: italic; font-size: 0.85rem;
  color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.odahl-class-card-numeral {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: 4rem; line-height: 1; letter-spacing: -0.06em;
  color: var(--class-color, var(--aether-deep));
  position: absolute; top: var(--gap-lg); right: var(--gap-lg);
}
.odahl-class-card[data-class="cardinal"] { --class-color: var(--class-cardinal); }
.odahl-class-card[data-class="proper"]   { --class-color: var(--class-proper); }
.odahl-class-card[data-class="minor"]    { --class-color: var(--class-minor); }
.odahl-class-card[data-class="minima"]   { --class-color: var(--class-minima); }
.odahl-class-card-name {
  font-family: var(--display); font-weight: 500; font-size: 1.6rem;
  letter-spacing: -0.018em; margin: 0.5rem 0 0.7rem;
}
.odahl-class-card-name em { font-style: italic; color: var(--class-color); }
.odahl-class-card-desc {
  font-family: var(--body); font-size: var(--type-body-sm);
  color: var(--ink-soft); line-height: 1.6; max-width: 38ch;
}

/* ── Stat card: a single number, prominently displayed ──────────────── */
.odahl-stat-card {
  border: 1px solid var(--seam); padding: var(--gap);
  background: var(--bone-warm);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.odahl-stat-label {
  font-family: var(--display); font-style: italic;
  font-size: var(--type-body-sm); color: var(--ink-mute);
}
.odahl-stat-value {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--type-stat); color: var(--ink); font-weight: 400;
  line-height: 1;
}
.odahl-stat-delta {
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--ink-mute); display: flex; gap: 0.3rem; align-items: center;
}
.odahl-stat-delta[data-direction="up"]   { color: var(--ash-deep); }
.odahl-stat-delta[data-direction="down"] { color: var(--ember-deep); }

/* ── Comparison card: side-by-side feature comparison ──────────────── */
.odahl-compare {
  border: 1px solid var(--seam); padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bone-warm);
}
.odahl-compare-cell {
  padding: var(--gap-sm); border-right: 1px solid var(--seam);
}
.odahl-compare-cell:last-child { border-right: 0; }
.odahl-compare-cell[data-better="true"] { background: var(--aether-trace); }

@media (prefers-reduced-motion: reduce) {
  .odahl-card, .odahl-class-card { transition: none; }
}