/* =====================================================================
   VIDEO SECTION · "NJ Education Leaders: in conversation"
   Education360 homepage · Figma: NJSBA file, node 2752:2341
   Self-contained: every rule is scoped to .oq / .oq-*, so it can be
   dropped into the live site without touching other sections.
   ===================================================================== */

/* ---------- design tokens (Figma: Navy Blue #012147, Metallic Gold #FFC301) ---------- */
.oq{
  --oq-navy:#012147;
  --oq-yellow:#FFC301;
  --oq-serif:"Kaisei Decol","Iowan Old Style",Georgia,serif;
  --oq-sans:"Figtree","Helvetica Neue",Arial,sans-serif;
  --oq-wrap:1328px;                       /* content width in Figma (1920 frame, 296px sides) */
  --oq-gut:clamp(20px,4vw,56px);          /* side gutter */
  font-family:var(--oq-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
/* local reset, scoped to the section (zero specificity, so the rules below always win) */
.oq,.oq *,.oq *::before,.oq *::after{box-sizing:border-box}
:where(.oq) :is(h2,h3,p){margin:0}
:where(.oq) button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:where(.oq) img{max-width:none}
.oq [hidden]{display:none!important}

/* ---------- section ---------- */
.oq{--ease-oq:cubic-bezier(.22,.61,.36,1);margin:0;background:var(--oq-navy);color:#fff;position:relative;overflow:hidden;overflow:clip;padding-block:120px}
.oq-glow{position:absolute;left:50%;top:-360px;width:1190px;height:1190px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,116,255,.28),rgba(0,116,255,.1) 55%,rgba(0,116,255,0))}
.oq .oq-wrap{position:relative;max-width:calc(var(--oq-wrap) + var(--oq-gut)*2);margin-inline:auto;padding-inline:var(--oq-gut);display:flex;flex-direction:column;gap:48px}

.oq-eb{margin:0;font-family:var(--oq-sans);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--oq-yellow)}

/* question + video */
.oq-main{display:flex;justify-content:space-between;align-items:center;gap:32px}
.oq-content{flex:0 1 648px;min-width:0;display:flex;flex-direction:column;gap:36px}
.oq.in .oq-sub{animation:oqUp .5s ease-out both}
.oq-slides{position:relative;min-height:381px}
.oq-slide{position:absolute;left:0;top:0;width:100%;display:flex;flex-direction:column;gap:36px}
.oq-slide.out{pointer-events:none}
.oq-q{margin:0;font-family:var(--oq-serif);font-weight:700;font-size:48px;line-height:1.2;letter-spacing:.01em;word-spacing:-2.5px;color:#fff;text-wrap:wrap}
.oq-q mark{display:inline-block;background:var(--oq-yellow);color:var(--oq-navy);padding:0 6px;border-radius:6px;margin-block:1.5px}
.oq-ins{margin:0;padding:4px 8px 4px 12px;border-left:3px solid var(--oq-yellow);background:rgba(1,33,71,.05);font-size:22px;font-style:italic;line-height:1.6;color:rgba(255,255,255,.8)}
.oq-id{display:flex;align-items:center;gap:24px;padding-bottom:32px}
.oq-av{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;background:#fff;display:grid;place-items:center;color:var(--oq-navy);font-family:var(--oq-serif);font-weight:700;font-size:22px}
.oq-av img{width:100%;height:100%;object-fit:cover;display:block}
.oq-id .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.oq-id b{font-family:var(--oq-serif);font-weight:700;font-size:22px;line-height:1.2;color:#fff}
.oq-id small{font-size:16px;font-weight:400;line-height:1.5;color:#fff}

/* player (9:16 card, 337 × 600, centred in a 648px column) */
.oq-player{flex:0 1 648px;min-width:0;display:flex;justify-content:center}
.oq-stage{position:relative;flex:none;width:337px;height:600px;border-radius:22px;overflow:hidden;background:var(--oq-navy);box-shadow:0 40px 80px -36px rgba(0,0,0,.7)}
.oq-poster{position:absolute;inset:0}
.oq-layer{position:absolute;inset:0;opacity:0;transition:opacity .8s ease-out}
.oq-layer.in{opacity:1}
.oq-layer>img,.oq-stage iframe,.oq-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.oq-stage iframe,.oq-stage video{z-index:4;background:#000}
.oq-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:12% 12% 16%;background:linear-gradient(160deg,#F5A11C 0%,#E8890A 100%);color:var(--oq-navy)}
.oq-card b{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.oq-card em{font-style:normal;font-family:var(--oq-serif);font-weight:700;font-size:26px;line-height:1.2}
.oq-card mark{background:var(--oq-navy);color:#fff;padding:0 .15em;border-radius:6px}
.oq-ring{position:absolute;left:50%;top:50%;width:100px;height:100px;margin:-50px 0 0 -50.5px;border-radius:50%;border:2px solid rgba(255,255,255,.7);z-index:2;pointer-events:none;opacity:0;animation:oqRing 2.6s infinite}
@keyframes oqRing{0%{opacity:0;animation-timing-function:ease-out}30.8%{opacity:1;animation-timing-function:ease-out}99.6%{opacity:0}100%{opacity:0}}
.oq-play{position:absolute;left:50%;top:50%;margin:-42px 0 0 -42.5px;z-index:3;width:84px;height:84px;border:0;border-radius:50%;background:#fff;color:var(--oq-navy);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.55);transition:transform .35s var(--ease-oq)}
.oq-play:hover{transform:scale(1.06)}
.oq-play svg{width:27px;height:27px;margin-left:4px}
.oq-play:focus-visible,.oq-lead:focus-visible{outline:3px solid var(--oq-yellow);outline-offset:3px}
.oq-stage.playing .oq-play,.oq-stage.playing .oq-ring{display:none}
.oq-msg{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;padding:12px 14px;border-radius:12px;background:rgba(1,16,36,.92);color:#fff;font-size:13px;line-height:1.45;animation:oqUp .4s var(--ease-oq)}
@keyframes oqUp{from{opacity:0;transform:translateY(16px)}}

/* leaders: four names in ONE row, the active one carries the 10-second progress line.
   Wide screens: four equal columns (Figma). Narrower: the row scrolls sideways (swipe), never wraps. */
.oq-rail{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--oq-gut);scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--oq-gut)*-1);padding-inline:var(--oq-gut)}
.oq-rail::-webkit-scrollbar{display:none}
/* soft edge fade only while there is more to scroll that way */
.oq-rail.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.oq-rail.more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 56px),transparent)}
.oq-rail.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.oq-lead{flex:0 0 max(260px,calc((100% - 72px)/4));min-width:0;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 36px 20px 0;border:0;border-bottom:1px solid rgba(255,255,255,.2);background:none;color:#fff;text-align:left;font:inherit;cursor:pointer}
.oq-lead b{font-family:var(--oq-serif);font-weight:700;font-size:18px;line-height:1.25;color:#fff}
.oq-lead small{font-size:16px;line-height:1.5;color:rgba(255,255,255,.6);transition:color .3s}
.oq-lead:hover small{color:rgba(255,255,255,.8)}
.oq-lead .pr{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.oq-lead .pr i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--oq-yellow);transform:scaleX(0);transform-origin:left;opacity:0;transition:opacity .45s ease-out}
.oq-lead[aria-selected="true"] .pr i{opacity:1}
.oq-lead .pr i.done{opacity:0}


@media (max-width:1199px){
  .oq{padding-block:96px}
  .oq-player{flex-basis:337px}
  .oq-q{font-size:clamp(34px,4.2vw,48px)}
  .oq-lead{padding-right:24px}
}
/* phone & small tablet: head → label → question → video → leaders */
@media (max-width:900px){
  .oq{padding-block:72px}
  .oq .oq-wrap{gap:36px}
  .oq-main{flex-direction:column;align-items:stretch;gap:32px;padding-block:0}
  .oq-content{flex:none;gap:24px}
  .oq-slides{min-height:0}
  .oq-slide:not(.out){position:relative}
  .oq-slide.leaving{position:absolute}
  .oq-player{flex:none}
  .oq-stage{width:min(100%,337px);height:auto;aspect-ratio:337/600}
}
@media (max-width:560px){
  .oq-q{font-size:32px}
  .oq-eb{font-size:13px}
  .oq-slide{gap:24px}
  .oq-ins{font-size:18px}
  .oq-id{gap:16px;padding-bottom:0}
  .oq-av{width:56px;height:56px;font-size:18px}
  .oq-id b{font-size:20px}
  .oq-id small{font-size:14px}
  .oq-rail{gap:20px}
  .oq-lead{flex-basis:min(78vw,280px);padding:16px 24px 16px 0}
  .oq-lead small{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .oq-layer,.oq-lead .pr i{transition:none}
  .oq-ring{animation:none;opacity:0}
}