/* ===== CARD COMPONENT (ri-card) ===== */

.ri-card {
  position: relative;
  z-index: 0;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: background-color 0.3s ease, border-color 0.2s ease;
}

/* --- Hover variant --- */
.ri-card--hover {
  cursor: pointer;
}

.ri-card--hover:hover {
  border-color: rgba(var(--glow-rgb), .25);
}

[data-theme="light"] .ri-card--hover:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

/* --- Accent line variant --- */
.ri-card--accent {
  border: none;
  background:
    linear-gradient(90deg, transparent, rgba(var(--glow-rgb), 0.78), transparent) bottom / 100% 1px no-repeat,
    var(--bg-white);
  contain: layout style paint;
}

.ri-card--accent::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  border-radius: calc(var(--radius-lg) + 1px);
  background: radial-gradient(var(--glow-size, 400px) circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--glow-rgb), .3), transparent 40%);
}

.ri-card--accent::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: calc(var(--radius-lg) - 1px);
  background: var(--bg-white);
}

.ri-card--accent:hover::before {
  opacity: 1;
}

[data-theme="light"] .ri-card--accent {
  box-shadow: var(--shadow);
  background: var(--bg-white);
  border: 1px solid var(--border);
  contain: unset;
}

[data-theme="light"] .ri-card--accent::before,
[data-theme="light"] .ri-card--accent::after {
  display: none;
}