/* ==========================================================================
   Risos Shared — Card Components
   From: web/static/css/style.css lines 667-707 (section 7. CARDS)
   Glass variant: derived from journey.css project-card + legal.html .lg-toc

   Extracted + extended: 28 Mei 2026

   Variants:
     .card              base surface card
     .card-header       top section with bottom border
     .card-body         content area
     .card-footer       bottom section with top border
     .glass-card        glassmorphism — translucent + backdrop blur
     .card-flat         flat (no shadow on hover) variant

   Depends: tokens.css
   ========================================================================== */

.card {
  background: var(--bg-surface, var(--bg-elev, #ffffff));
  border: 1px solid var(--border-default, var(--line, #e2e8f0));
  border-radius: var(--radius-lg, 18px);
  padding: 28px 32px;
  transition: all 200ms cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--c-brand, #1e40af) 25%, var(--border-default, var(--line, #e2e8f0)));
  box-shadow: var(--shadow-glow, var(--sh-md, 0 4px 18px -4px rgba(15,23,42,0.08)));
}

.card-flat:hover {
  transform: none;
  box-shadow: none;
}

/* child cards stack tightly */
.card + .card { margin-top: 0; }

.card-header {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle, var(--line, #e2e8f0));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-body {
  flex: 1;
}

.card-footer {
  padding-top: 16px;
  margin-top: 20px;
  border-top: 1px solid var(--border-subtle, var(--line, #e2e8f0));
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Glassmorphism variant ──────────────────────────────────────────────
   Pattern from legal.html .lg-toc + journey.css project-card style.
   Translucent surface with backdrop blur — for layered marketing pages.
   ──────────────────────────────────────────────────────────────────── */
.glass-card {
  background: color-mix(in oklab, var(--bg-elev, #ffffff) 88%, transparent);
  border: 1px solid var(--line, var(--border-default, #e2e8f0));
  border-radius: var(--r-lg, 22px);
  padding: 22px 26px;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: var(--sh-md, 0 4px 18px -4px rgba(15,23,42,0.08));
  transition: border-color var(--t-fast, 180ms),
              transform var(--t-fast, 180ms),
              box-shadow var(--t-fast, 180ms);
}
.glass-card:hover {
  border-color: var(--line-2, color-mix(in oklab, var(--c-brand, #1e40af) 25%, transparent));
  transform: translateY(-3px);
  box-shadow: var(--sh-lg, 0 14px 50px -16px rgba(15,23,42,0.18));
}