/* ============================================================
   card.css — kapy.ch v2 · Task 6
   Variants:  default | pricing
   Modifiers: featured (brand border + glow)
              interactive (hover-lift, auto on <a>)
   Slots:     .card__badge, .card__eyebrow, .card__price,
              .card__price-unit, .card__body, .card__footer
   ============================================================ */

.card {
  /* Component-scoped tokens (overridable per use) */
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-5);
  --card-bg: var(--bg-surface);
  --card-border-color: var(--border-subtle);
  --card-border-width: 1px;
  --card-shadow: var(--shadow-sm);
  --card-gap: var(--space-4);

  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  position: relative;
  padding: var(--card-padding);
  background-color: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  color: var(--text-primary);
  /* Allow card to fill its grid-cell so footers can be aligned via .stack--split */
  height: 100%;
  min-width: 0;
}

/* When card is a link, kill default <a> styling */
a.card {
  text-decoration: none;
  color: inherit;
}

/* ---------- Interactive (hover-lift) ---------- */

.card--interactive {
  cursor: pointer;
  transition:
    transform var(--dur-normal) var(--ease-spring),
    box-shadow var(--dur-normal) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}

@media (hover: hover) {
  .card--interactive:hover {
    --card-bg: var(--bg-elevated);
    --card-border-color: var(--border-strong);
    --card-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.card--interactive:active {
  --card-shadow: var(--shadow-xs);
  transform: translateY(0);
}

.card--interactive:focus-visible {
  outline: none;
  box-shadow:
    var(--card-shadow),
    0 0 0 2px var(--bg-canvas),
    0 0 0 5px var(--brand-500);
}

@media (prefers-reduced-motion: reduce) {
  .card--interactive {
    transition-duration: 0.01ms;
  }
  .card--interactive:hover {
    transform: none;
  }
}

/* ---------- Featured (prominent border + subtle glow) ---------- */

.card--featured {
  --card-border-color: var(--brand-500);
  --card-border-width: 2px;
  --card-shadow: var(--shadow-sm), 0 0 0 1px oklch(52% 0.22 270 / 0.1);
  padding-block-start: calc(var(--card-padding) + var(--space-2));
}

[data-theme='dark'] .card--featured {
  --card-shadow: var(--shadow-md), 0 0 0 1px oklch(68% 0.165 270 / 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .card--featured {
    --card-shadow: var(--shadow-md), 0 0 0 1px oklch(68% 0.165 270 / 0.2);
  }
}

@media (hover: hover) {
  .card--featured.card--interactive:hover {
    --card-shadow: var(--shadow-md), var(--glow-brand);
  }
}

/* ---------- Variant: Pricing ---------- */

.card--pricing {
  --card-padding: var(--space-6);
  --card-gap: var(--space-5);
  text-align: left;
}

/* ============================================================
   SLOTS — kleine Helpers für gängige Card-Bausteine
   ============================================================ */

/* Top-Center Badge ("Empfohlen", "Beliebt", "Neu") */
.card__badge {
  position: absolute;
  inset-block-start: calc(var(--space-3) * -1);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-3);
  background-color: var(--brand-500);
  color: var(--text-on-brand);
  border-radius: var(--radius-pill);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: var(--lh-caps);
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}

/* Small eyebrow text above the headline (e.g. Tier-Name) */
.card__eyebrow {
  font-family: inherit;
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--lh-caps);
}

/* Pricing number + unit */
.card__price {
  font-family: var(--font-display);
  font-size: var(--fs-headline-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-headline);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    'tnum' 1,
    'lnum' 1;
  margin: 0;
}

.card__price-unit {
  display: inline-block;
  margin-inline-start: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--text-secondary);
}

/* Card-Body — generic content area, takes remaining height */
.card__body {
  flex: 1 1 auto;
}

/* Card-Footer — pushes to the bottom (use with .stack--split or alone) */
.card__footer {
  margin-block-start: auto;
}

/* Subtle separator inside cards (used between feature-list and CTA) */
.card__divider {
  border: 0;
  height: 1px;
  background-color: var(--border-subtle);
  margin: 0;
}