/**
 * Shared components.
 *
 * Load after cervento-tokens.css. Pages add a class and keep only what
 * genuinely differs — padding, layout, and anything deliberately off-pattern.
 *
 * Before this file, .cv-card (contact), .cv-stat-card and .cv-job-card (about)
 * each re-declared the same surface with slightly different numbers: corner
 * radii of 24/28/32px, hover lifts at rgba(87,94,254,.45) and .65, shadows at
 * 22px/55px and 24px/60px. Same intent, three answers.
 */

/* ── Flat surface: the default card on a dark section ── */
.cv-surface {
  border-radius: var(--cv-radius-md);
  background: var(--cv-card);
  border: 1px solid var(--cv-border);
}

/* Opt in where the card is interactive or wants to feel liftable. */
.cv-surface--lift {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.cv-surface--lift:hover {
  transform: translateY(-6px);
  border-color: rgba(87, 94, 254, 0.55);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.26);
}

/* ── Featured panel: content on the left, a figure or icon on the right ── */
.cv-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(87, 94, 254, 0.42);
  background:
    radial-gradient(circle at 88% 28%, rgba(56, 213, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(37, 40, 76, 0.95), rgba(30, 33, 66, 0.92));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .cv-surface--lift,
  .cv-surface--lift:hover {
    transition: none;
    transform: none;
  }
}

/* The lift reads as a colour change only when the OS replaces the palette. */
@media (forced-colors: active) {
  .cv-surface,
  .cv-panel {
    border: 1px solid CanvasText;
  }
}