/* Previously story-page media module — fix-list #48 (video beside hero) + #49/#54 (ad placements).
   Loaded on ed-template story pages via story-media.css?v=20261002a.
   The video module only renders when the page opts in with data-story-video
   on header.ed-hero — pages without it render exactly as before. */

/* ---------- #48: video module beside the hero image ----------
   Desktop (matches the cinematic hero's own 1021px gate): the hero becomes a
   two-column grid — hero image left, video module beside it on the right.
   At <=1020px the cinematic hero is hidden (<=680, approved mobile layout) or
   unstyled (681-1020); there the image stays hidden and the video module
   renders as a standalone block at the top of the story. */
@media(min-width:1021px){
  .ed-hero.has-video{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:clamp(16px,2vw,28px);
    align-items:start;
  }
  .ed-hero.has-video>*{min-width:0}
  .ed-hero.has-video .ed-hero-media{min-height:min(56vh,480px)}
}
@media(max-width:1020px){
  .ed-hero.has-video{display:block;padding:0 20px}
  .ed-hero.has-video .ed-hero-media{display:none}
  .ed-hero.has-video .story-video{margin:0 0 8px}
}

.story-video{
  border:1px solid var(--ed-line,#2c2c33);
  border-radius:16px;
  background:var(--ed-surface,#16161a);
  overflow:hidden;
  min-width:0;
}
.story-video-head{padding:16px 18px 0}
.story-video-kicker{
  display:inline-block;font-family:Arial,Helvetica,sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:#e03131;margin-bottom:8px;
}
.story-video-title{
  font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.35;
  color:#f4efe6;margin:0 0 12px;font-weight:700;
}
.story-video-frame{position:relative;aspect-ratio:16/9;background:#000}
.story-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.story-video-thumb{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  background:#000 center/cover no-repeat;-webkit-tap-highlight-color:transparent;
}
.story-video-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-video-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.35),rgba(0,0,0,0) 55%);
}
.story-video-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;
}
.story-video-play svg{width:64px;height:64px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));transition:transform .18s ease}
.story-video-thumb:hover .story-video-play svg,
.story-video-thumb:focus-visible .story-video-play svg{transform:scale(1.08)}
.story-video-note{
  padding:12px 18px 16px;font-family:Arial,Helvetica,sans-serif;
  font-size:12.5px;line-height:1.55;color:var(--ed-muted,#9a9aa3);
}
@media(max-width:1020px){
  .ed-hero.has-video{display:block;padding:0 20px}
  .ed-hero.has-video .ed-hero-media{display:none}
  .ed-hero.has-video .story-video{margin:0 0 8px}
}

/* ---------- #49/#54: ad placements ---------- */
.ad-slot{
  margin:2em auto;max-width:728px;width:100%;
  border:1px dashed #4a4a52;border-radius:12px;padding:10px 10px 12px;
  text-align:center;background:rgba(255,255,255,.012);
}
.ad-slot .ad-label{
  font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:#8a8a93;margin:2px 0 8px;
}
.ad-slot ins.adsbygoogle{display:block;min-height:90px}
.ad-leaderboard{margin-top:0}
.ed-prose .ad-slot{max-width:100%}
.ed-side .ad-slot{margin:0 0 28px;max-width:340px}
.ed-side .ad-slot ins.adsbygoogle{min-height:250px}
@media(max-width:760px){
  .ad-slot ins.adsbygoogle{min-height:100px}
  .ed-side .ad-slot ins.adsbygoogle{min-height:250px}
}