/* ============================================================================
 * Card system — reusable surface for services, features, capabilities, info.
 *
 *   .wb-card                 → base surface
 *   .wb-card--service        → larger spacing, prominent icon, top accent line
 *   .wb-card--feature        → tighter footprint, icon + title + body
 *   .wb-card--capability     → bordered, no shadow, technical look
 *   .wb-card--info           → tonal soft background, no border
 *   .wb-card--ink            → dark surface variant for dark sections
 *
 *   .wb-card--interactive    → adds lift + border tint on hover (anchors)
 *   .wb-card--media          → image header slot
 *
 * Children: __icon, __eyebrow, __title, __body, __meta, __cta, __media
 * ========================================================================== */

.wb-card {
  --wb-card-bg: var(--wb-color-surface);
  --wb-card-border: var(--wb-color-border);
  --wb-card-radius: var(--wb-radius-lg);
  --wb-card-shadow: none;
  --wb-card-pad: var(--wb-space-6);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-3);
  padding: var(--wb-card-pad);
  background: var(--wb-card-bg);
  color: var(--wb-color-text);
  border: var(--wb-border-width) solid var(--wb-card-border);
  border-radius: var(--wb-card-radius);
  box-shadow: var(--wb-card-shadow);
  text-decoration: none;
  transition:
    border-color var(--wb-duration-base) var(--wb-ease),
    box-shadow var(--wb-duration-base) var(--wb-ease),
    transform var(--wb-duration-base) var(--wb-ease),
    background-color var(--wb-duration-base) var(--wb-ease);
  min-width: 0;
  overflow: hidden;
}

/* Premium top-edge hairline highlight (gives cards a "glass" feel on dark) */
.wb-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.18) 65%,
    transparent);
  opacity: 0.6;
  pointer-events: none;
}

/* Interactive (when card itself is <a>) ------------------------------------ */
.wb-card--interactive { cursor: pointer; }
.wb-card--interactive:hover {
  border-color: var(--wb-color-border-strong);
  box-shadow: var(--wb-shadow-md), 0 0 24px -8px rgba(79, 140, 255, 0.25);
  transform: translateY(-2px);
}
.wb-card--interactive:hover::before { opacity: 1; }
.wb-card--interactive:focus-visible {
  outline: var(--wb-focus-width) solid var(--wb-color-focus-ring);
  outline-offset: 2px;
}
.wb-reduce-motion .wb-card--interactive:hover { transform: none; }

/* Variants ----------------------------------------------------------------- */
.wb-card--service {
  --wb-card-pad: var(--wb-space-7);
  --wb-card-shadow: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 50%),
    var(--wb-color-surface);
}
.wb-card--service:hover,
.wb-card--service.wb-card--interactive:hover {
  --wb-card-shadow: var(--wb-shadow-md), 0 0 32px -8px rgba(79, 140, 255, 0.3);
  border-color: rgba(79, 140, 255, 0.25);
}
.wb-card--service::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 140, 255, 0.4), transparent);
  opacity: 0;
  transition: opacity var(--wb-duration-base) var(--wb-ease);
  pointer-events: none;
}
.wb-card--service:hover::after { opacity: 1; }

.wb-card--feature {
  --wb-card-pad: var(--wb-space-5);
}

.wb-card--capability {
  --wb-card-bg: transparent;
  --wb-card-border: var(--wb-color-border);
  --wb-card-pad: var(--wb-space-5);
}

.wb-card--info {
  --wb-card-bg: var(--wb-color-bg-soft);
  --wb-card-border: transparent;
  --wb-card-pad: var(--wb-space-5);
}

.wb-card--ink {
  --wb-card-bg: var(--wb-color-ink-2);
  --wb-card-border: rgba(255, 255, 255, 0.08);
  color: var(--wb-color-text-soft);
}
.wb-card--ink .wb-card__title,
.wb-card--ink .wb-card__eyebrow { color: var(--wb-color-white); }

/* Sizes -------------------------------------------------------------------- */
.wb-card--sm { --wb-card-pad: var(--wb-space-4); }
.wb-card--lg { --wb-card-pad: var(--wb-space-8); }

/* Children ----------------------------------------------------------------- */
.wb-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--wb-radius-md);
  background: var(--wb-color-bg-muted);
  color: var(--wb-color-ink);
  margin-bottom: var(--wb-space-2);
  border: var(--wb-border-width) solid var(--wb-color-border-soft);
}
.wb-card__icon svg { width: 20px; height: 20px; }
.wb-card--ink .wb-card__icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--wb-color-white);
  border-color: rgba(255, 255, 255, 0.1);
}
.wb-card--service .wb-card__icon {
  background: var(--wb-color-brand-soft);
  color: var(--wb-color-brand);
  border-color: transparent;
}

.wb-card__eyebrow {
  font-size: var(--wb-text-xs);
  font-weight: var(--wb-fw-medium);
  letter-spacing: var(--wb-ls-wide);
  text-transform: uppercase;
  color: var(--wb-color-text-muted);
  margin: 0;
}

.wb-card__title {
  font-size: var(--wb-text-xl);
  font-weight: var(--wb-fw-semibold);
  line-height: var(--wb-lh-snug);
  letter-spacing: var(--wb-ls-tight);
  color: var(--wb-color-ink);
  margin: 0;
}
.wb-card--lg .wb-card__title { font-size: var(--wb-text-2xl); }
.wb-card--sm .wb-card__title { font-size: var(--wb-text-lg); }

.wb-card__body {
  font-size: var(--wb-text-sm);
  line-height: var(--wb-lh-relaxed);
  color: var(--wb-color-text);
  margin: 0;
}
.wb-card--ink .wb-card__body { color: var(--wb-color-text-soft); }

.wb-card__meta {
  margin-top: auto;
  padding-top: var(--wb-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-3);
  font-size: var(--wb-text-xs);
  color: var(--wb-color-text-muted);
}

.wb-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-1);
  margin-top: auto;
  padding-top: var(--wb-space-3);
  font-size: var(--wb-text-sm);
  font-weight: var(--wb-fw-medium);
  color: var(--wb-color-brand);
}
.wb-card__cta::after {
  content: "→";
  transition: transform var(--wb-duration-base) var(--wb-ease);
}
.wb-card--interactive:hover .wb-card__cta::after { transform: translateX(3px); }
.wb-reduce-motion .wb-card--interactive:hover .wb-card__cta::after { transform: none; }

.wb-card__media {
  margin: calc(var(--wb-card-pad) * -1) calc(var(--wb-card-pad) * -1) 0;
  overflow: hidden;
  border-top-left-radius: var(--wb-card-radius);
  border-top-right-radius: var(--wb-card-radius);
  aspect-ratio: 16 / 9;
  background: var(--wb-color-bg-muted);
}
.wb-card__media img,
.wb-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Numbered card (for steps / process) -------------------------------------- */
.wb-card__number {
  font-size: var(--wb-text-3xl);
  font-weight: var(--wb-fw-bold);
  letter-spacing: var(--wb-ls-tight);
  color: var(--wb-color-brand);
  line-height: 1;
}