/* ========== Spotlight Mask Component (For Divi 5) ========== */

.spotlight-mask{
  position: relative;
  overflow: hidden;
  background: transparent; /* let Divi do whatever; we render layers above */
}

/* UNDER layer */
.spotlight-mask::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-color: #000;
  background-image: var(--spot-under, none);
  background-size: cover;
  background-position: center;
}

/* OVER layer + mask + edge + glow */
.spotlight-mask::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Top-to-bottom background layers:
     1) glow (outside)
     2) solid ring (edge)
     3) over image
  */
  background-image:
    radial-gradient(
      circle at var(--spot-x, 50%) var(--spot-y, 50%),
      transparent 0 calc(var(--spot-r) + var(--spot-edge)),
      var(--spot-glow-color) calc(var(--spot-r) + var(--spot-edge) + 1px),
      transparent calc(var(--spot-r) + var(--spot-edge) + var(--spot-glow))
    ),
    radial-gradient(
      circle at var(--spot-x, 50%) var(--spot-y, 50%),
      transparent 0 calc(var(--spot-r)),
      var(--spot-edge-color) calc(var(--spot-r) + 0.5px),
      var(--spot-edge-color) calc(var(--spot-r) + var(--spot-edge)),
      transparent calc(var(--spot-r) + var(--spot-edge) + 0.5px)
    ),
    var(--spot-over, none);

/* Solid over color (shows if no over image, or sits behind it) */
  background-color: var(--spot-over-color, rgba(0,0,0,0.90));
	
  /* Mask hole: mostly solid edge, tiny feather optional */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-image: radial-gradient(
  circle at var(--spot-x, 50%) var(--spot-y, 50%),
  transparent 0,
  transparent var(--spot-r),
  #000 var(--spot-r),
  #000 100%
);

mask-image: radial-gradient(
  circle at var(--spot-x, 50%) var(--spot-y, 50%),
  transparent 0,
  transparent var(--spot-r),
  #000 var(--spot-r),
  #000 100%
);

}


/* Keep content above both layers */
.spotlight-mask .et_pb_row,
.spotlight-mask .et_pb_module{
  position: relative;
  z-index: 2;
}


/* Keep your actual content above both layers */
.spotlight-mask .et_pb_row,
.spotlight-mask .et_pb_module{
  position: relative;
  z-index: 2;
}

/* Section variants */
/* Auto-scaling spotlight sizes */
.spotlight-hero{
 min-height: clamp(620px, 78vh, 860px);

  /* Spotlight sizing (responsive) */
  --spot-r: clamp(90px, 13vw, 240px);        /* radius scales by viewport */
  --spot-feather: 0px; /*clamp(0px, 0.4vw, 10px);*/    /* keep edge mostly solid */
  --spot-edge: clamp(2px, 0.35vw, 6px);       /* solid ring thickness */
  --spot-glow: clamp(14px, 2.2vw, 44px);      /* glow spread */
  --spot-edge-color: rgba(255,255,255,0.95);
  --spot-glow-color: rgba(255,255,255,0.55);
}

.spotlight-articles{
 min-height: clamp(520px, 78vh, 700px);

  --spot-r: clamp(90px, 12vw, 220px);
  --spot-feather: 0px; /*clamp(0px, 0.35vw, 8px);*/
  --spot-edge: clamp(2px, 0.3vw, 5px);
  --spot-glow: clamp(10px, 1.6vw, 34px);
  --spot-edge-color: rgba(255,255,255,0.95);
  --spot-glow-color: rgba(255,255,255,0.5);
}

/* Tablet */
@media (max-width: 980px){
  .spotlight-hero{
    min-height: clamp(580px, 74vh, 760px);

    --spot-r: clamp(80px, 18vw, 170px);
    --spot-edge: clamp(2px, 0.5vw, 5px);
    --spot-glow: clamp(10px, 2.2vw, 22px);
  }
}

/* Phone */
@media (max-width: 480px){
  .spotlight-hero{
    min-height: clamp(520px, 78vh, 680px);

    --spot-r: clamp(70px, 20vw, 140px);
    --spot-edge: clamp(2px, 0.6vw, 4px);
    --spot-glow: clamp(8px, 1.6vw, 18px);
  }
}

/* Tablet */
@media (max-width: 980px){
  .spotlight-articles{
    min-height: clamp(480px, 62vh, 640px);

    --spot-r: clamp(70px, 16vw, 160px);
    --spot-edge: clamp(2px, 0.5vw, 5px);
    --spot-glow: clamp(10px, 2.0vw, 22px);
  }
}

/* Phone */
@media (max-width: 480px){
  .spotlight-articles{
    min-height: clamp(400px, 56vh, 540px);

    --spot-r: clamp(60px, 18vw, 130px);
    --spot-edge: clamp(2px, 0.6vw, 4px);
    --spot-glow: clamp(8px, 1.8vw, 16px);
  }
}
/* Mobile tuning */


/* If user prefers reduced motion, keep static spotlight */
@media (prefers-reduced-motion: reduce){
  .spotlight-mask{
    --spot-x: 50%;
    --spot-y: 50%;
  }
}