/* 083 — Spotlight Cards
   Halo lumineux qui suit le curseur à travers la grille (style Linear).
   Le JS ne fait que poser --spot-x / --spot-y (px, relatifs à chaque card) ;
   tout le rendu est CSS :
   - ::before = bordure révélée (radial-gradient masqué sur l'anneau de 1px),
     visible sur TOUTES les cards tant que le curseur est dans la grille —
     chaque card réagit selon la position du curseur, même sur les voisines ;
   - ::after = halo de fond, révélé seulement sur la card survolée. */

.spotlight-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: min(320px, 100%);
}

.spotlight-cards__card {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  border-radius: 14px;
  padding: 14px 14px 12px;
  overflow: hidden;
  background: var(--ml-surface, #151a24);
  /* Bordure de repos, très discrète */
  box-shadow: inset 0 0 0 1px rgba(232, 234, 242, 0.07);
}

/* Bordure spotlight : gradient plein masqué pour ne laisser que l'anneau */
.spotlight-cards__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    170px circle at var(--spot-x) var(--spot-y),
    var(--spotlight-cards-border, rgba(124, 140, 255, 0.85)),
    rgba(124, 140, 255, 0.12) 55%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Halo de fond, seulement sur la card survolée */
.spotlight-cards__card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  background: radial-gradient(
    200px circle at var(--spot-x) var(--spot-y),
    var(--spotlight-cards-glow, rgba(124, 140, 255, 0.12)),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Curseur dans la grille → les bordures de TOUTES les cards s'allument */
.spotlight-cards:hover .spotlight-cards__card::before {
  opacity: 1;
}

.spotlight-cards__card:hover::after {
  opacity: 1;
}

.spotlight-cards__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ml-accent-2, #2dd4bf);
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.22);
}

.spotlight-cards__title {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 640;
  color: var(--ml-fg, #e8eaf2);
}

.spotlight-cards__text {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ml-muted, #8b91a3);
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-cards__card::before,
  .spotlight-cards__card::after {
    transition: none;
  }
  /* Le JS ne met plus --spot-x/--spot-y à jour : halo centré, simple hover. */
}