/* Card — surface with border-radius and optional hover lift.
 * ---------------------------------------------------------------------- */

@layer modules {
  .card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-l);
    padding: var(--card-padding, 1.25rem);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }

  .card--padded {
    --card-padding: var(--space-xl);
  }

  .card--snug {
    --card-padding: var(--space-m);
  }

  .card--flush {
    --card-padding: 0;
    overflow: hidden;
  }

  .card--lift {
    cursor: pointer;
  }

  .card--lift:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 24px 50px -22px oklch(var(--lch-ink-darkest) / 0.22);
    transform: translateY(-3px);
  }

  .card--accent {
    border-color: var(--color-accent);
  }

  .card--dark {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-ink-inverted);
  }

  .card--dark a,
  .card--dark .section-label {
    color: var(--color-ink-inverted);
  }

  .card--gradient-sun {
    background-image: linear-gradient(120deg,
      color-mix(in oklab, var(--color-sun) 40%, transparent),
      var(--color-surface));
  }

  .card--gradient-accent {
    background-image: linear-gradient(135deg,
      var(--color-surface),
      color-mix(in oklab, var(--color-sun) 30%, var(--color-surface)));
  }
}