/* Featured image frame (no layout shift on hover) */
.df-framed{
  /* Direction: 1 = right (default), -1 = left */
  --df-shadow-dir: 1;

  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: clamp(260px, 28vw, 420px);
  height: auto;

  border: 1.5px solid #000;
  border-radius: 10px;

  /* Stacked shadow; X offsets flip via --df-shadow-dir */
  box-shadow:
    calc(var(--df-shadow-dir) * 2px) 4px 4px rgba(0,204,255,1),
    calc(var(--df-shadow-dir) * 3px) 6px 10px rgba(0,0,0,1),
    calc(var(--df-shadow-dir) * 3px) 6px 12px rgba(51,214,255,1) !important;

  transition: box-shadow .25s ease;
}

/* Hover: same offsets, bigger blur + cyan glow (still anchored) */
.df-framed:hover{
  box-shadow:
    calc(var(--df-shadow-dir) * 2px) 4px 8px rgba(0,204,255,1),
    calc(var(--df-shadow-dir) * 3px) 6px 20px rgba(0,0,0,1),
    calc(var(--df-shadow-dir) * 3px) 6px 26px rgba(51,214,255,1),
    0 0 28px rgba(0,204,255,0.38) !important;
}

/* Utilities to flip the side */
.df-shadow-right{ --df-shadow-dir: 1; }
.df-shadow-left { --df-shadow-dir: -1; }

/* Optional: cap a bit tighter on very large screens */
@media (min-width: 1600px){
  .df-framed{ max-width: 400px; }
}

/* === PADDED VARIANTS (opt-in) ===========================================
   Keep featured-media.css as the single source of truth for .df-framed shadows.
   These rules only apply when you add .df-has-pad on an ancestor OR .df-pad on the <img>.
   ====================================================================== */

/* Direction helpers already exist in this file:
   .df-shadow-right { --df-shadow-dir: 1; }
   .df-shadow-left  { --df-shadow-dir: -1; }
*/

/* A) Rest state with pad: pad ring + black pad-border + subtle soft drop (no cyan) */
.df-has-pad img.df-framed.df-shadow-left,
.df-has-pad img.df-framed.df-shadow-right,
img.df-framed.df-pad.df-shadow-left,
img.df-framed.df-pad.df-shadow-right{
  /* read pad vars from the nearest ancestor or the img; defaults shown */
  --_pad:       var(--frame-pad, 12px);
  --_pbd:       var(--pad-border, 1.5px);
  --_edge:      calc(var(--_pad) + var(--_pbd));
  --_pad-color: var(--pad-color, #F9FAFB);
  --_dir:       var(--df-shadow-dir, 1);

  /* rest:  */
  box-shadow:
    0 0 0 var(--_pad)  var(--_pad-color),                   /* pad ring */
    0 0 0 var(--_edge) #111,                                /* pad-border ring */
    calc(var(--_dir) * 2px) 3px  4px  var(--_edge) rgba(0,204,255,1),
    calc(var(--_dir) * 3px) 5px 10px  var(--_edge) rgba(0,0,0,1),
    calc(var(--_dir) * 3px) 5px 12px  var(--_edge) rgba(51,214,255,1),
    0 0 0px var(--_edge) rgba(0,204,255,.38) !important;
}

/* B) Hover with pad: replicate your featured stack starting at pad’s outer edge */
.df-has-pad img.df-framed.df-shadow-left:hover,
.df-has-pad img.df-framed.df-shadow-right:hover,
img.df-framed.df-pad.df-shadow-left:hover,
img.df-framed.df-pad.df-shadow-right:hover{
  --_pad:       var(--frame-pad, 12px);
  --_pbd:       var(--pad-border, 1.5px);
  --_edge:      calc(var(--_pad) + var(--_pbd));
  --_pad-color: var(--pad-color, #F9FAFB);
  --_dir:       var(--df-shadow-dir, 1);

  box-shadow:
    0 0 0 var(--_pad)  var(--_pad-color),                   /* pad ring */
    0 0 0 var(--_edge) #111,                                /* pad-border ring */
    calc(var(--_dir) * 2px) 4px  8px  var(--_edge) rgba(0,204,255,1),
    calc(var(--_dir) * 3px) 6px 20px  var(--_edge) rgba(0,0,0,1),
    calc(var(--_dir) * 3px) 6px 26px  var(--_edge) rgba(51,214,255,1),
    0 0 28px var(--_edge) rgba(0,204,255,.38) !important;
}


img.df-framed { aspect-ratio: var(--df-aspect, auto); }