/*
 * Glow-Card · spotlight-hover-effekt på Bricks-cards
 * Aktivera per kort i Bricks → Style → CSS classes → "glow-card"
 *
 * Implementation:
 *   JS sätter --mx / --my per kort (mouse-position relativt kortet)
 *   CSS ritar två lager: en mjuk inre glow + en stark border-glow
 */

.glow-card {
  --glow-color: 158, 230, 39;       /* RGB för brand-grön (#9ee627) */
  --glow-radius-inner: 380px;        /* yttre mjuk glow */
  --glow-radius-border: 280px;       /* skarp border-spotlight */
  --glow-opacity-inner: .22;         /* mjuk-glow alpha */
  --glow-opacity-border: 1;          /* border-glow alpha */
  --glow-border-width: 2px;          /* tjocklek på border-glow */
  --mx: -200px;                      /* off-screen default = ingen synlig glow */
  --my: -200px;

  position: relative;
  isolation: isolate;                /* säkerställ egen stacking-context */
  transition: border-color .25s ease;
}

/* Inner soft glow — mjuk lyster inuti kortet */
.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    var(--glow-radius-inner) circle at var(--mx) var(--my),
    rgba(var(--glow-color), var(--glow-opacity-inner)),
    transparent 70%
  );
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}

/* Border spotlight — vassa kant-glow där musen är nära */
.glow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glow-border-width);
  background: radial-gradient(
    var(--glow-radius-border) circle at var(--mx) var(--my),
    rgba(var(--glow-color), var(--glow-opacity-border)),
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}

/* Aktiveras när muspekaren är nära/inuti kortet */
.glow-card.is-glowing::before,
.glow-card.is-glowing::after {
  opacity: 1;
}

/* Säkerställ att kortets eget innehåll ligger ovanför pseudo-elementen */
.glow-card > * {
  position: relative;
  z-index: 2;
}

/* Touch-enheter och reduced-motion: ingen effekt */
@media (hover: none), (pointer: coarse) {
  .glow-card::before,
  .glow-card::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glow-card::before,
  .glow-card::after { display: none; }
}