/* === Card framework === */
/* Owned by Agent C. Per-type cards (Agent D) extend this base by:
 *   1. Setting `data-type="<slug>"` on the .card root
 *   2. Mounting their interactive content into .card__body
 * The header color, label color, and chip glow all key off `data-type`,
 * so a per-type card needs zero CSS to pick up its theming. */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);

  padding: var(--sp-5);
  border-radius: var(--r-card);
  border: 1px solid var(--border-card);
  background: var(--surface-card);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);

  /* GPU-friendly + makes the card a paint container so children that
   * use ::before glows don't bleed outside the rounded corners. */
  isolation: isolate;
  overflow: hidden;
  contain: layout paint;

  /* Per-type accent — overridden by [data-type=...] rules below.
   * Defaults to the active gradient's mid-stop so a card with no
   * declared type still picks up the room temperature. */
  --card-accent: var(--grad-active-2);
}

/* Inner highlight: a thin top sheen so the card looks lifted off the
 * gradient. Pure cosmetic — sits at z-index -1 within the card. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0)   28%,
      rgba(255, 255, 255, 0)   100%
    );
  z-index: -1;
}

/* ── Header / label ────────────────────────────────────────────────── */

.card__label { display: none; }

.card__header {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--letterspace-display);
  text-transform: uppercase;
  text-align: center;
  color: var(--card-accent);
  /* Slight stroke through text-shadow to keep the bold Bungee glyph
   * legible on the brightest gradient stops. */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  margin: 0;
  word-break: break-word;
}

/* ── Body ──────────────────────────────────────────────────────────── */

.card__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.card__body > p { margin: 0 0 var(--sp-3); }
.card__body > p:last-child { margin-bottom: 0; }

/* ── Footer ────────────────────────────────────────────────────────── */

.card__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

.card__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Make CTAs themselves flex-grow so a single button reads as full-width and
 * two buttons share the row evenly. Centered either way. */
.card__cta-row .btn,
.card__cta-row .card__btn {
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 100%;
}

/* ── Card buttons (extends .btn from base.css) ─────────────────────── */

.card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-min);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);

  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition:
    transform var(--dur-fast) var(--ease-smooth),
    background-position var(--dur-base) var(--ease-smooth),
    background-color var(--dur-fast) var(--ease-smooth);
  will-change: transform;
}

.card__btn:active { transform: scale(0.97); }

.card__btn--primary {
  color: var(--text-on-bright);
  background: linear-gradient(
    135deg,
    var(--grad-active-1),
    var(--grad-active-2),
    var(--grad-active-3)
  );
  background-size: 200% 200%;
  background-position: 0% 50%;
  border: 0;
}
.card__btn--primary:hover { background-position: 100% 50%; }

.card__btn--ghost {
  color: var(--text-primary);
  background: transparent;
  border: 1.5px solid var(--border-card-hi);
}
.card__btn--ghost:hover { background: rgba(255, 255, 255, 0.06); }

/* ── Points chip ───────────────────────────────────────────────────── */

.card__points-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);

  border-radius: var(--r-chip);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--card-accent);
  /* Marquee-bulb glow keyed off the per-type accent. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 18px -4px var(--card-accent);

  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--card-accent);
  letter-spacing: 0.02em;

  flex-shrink: 0;
}

.card__points-chip small {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--letterspace-label);
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ── Per-type accents ──────────────────────────────────────────────── */

.card[data-type="intro"]     { --card-accent: var(--c-cyan); }
.card[data-type="trivia"]    { --card-accent: var(--c-pink); }
.card[data-type="scratcher"] { --card-accent: var(--c-green-light); }
.card[data-type="video"]     { --card-accent: var(--c-cyan); }
.card[data-type="shop"]      { --card-accent: var(--c-green-light); }
.card[data-type="ugc"]       { --card-accent: var(--c-pink); }
.card[data-type="outro"]     { --card-accent: var(--c-cyan); }
.card[data-type="message"]   { --card-accent: var(--c-cyan); }