/* Student Video Stories: TikTok-style reels that play inside their card.
   Homepage (template-parts/home-video-stories.php): intro | swipeable card stack (front card plays; others fan out
   behind). Success Stories page (#videos): grid of the same cards. Tokens from home.css / stories.css.
   Background: supplied Seoul / Han River line art. */
#mx-home .mx-videos {position:relative; isolation:isolate; overflow:hidden; padding:60px 0 64px; background:#FCF9F3}
#mx-home .mx-videos-art {position:absolute; inset:0; z-index:-1; background:url('../images/home-videos-seoul-1920-v1.webp') center 66%/cover no-repeat; opacity:.6; pointer-events:none}
#mx-home .mx-videos-art:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg,#FCF9F3 0%,rgba(252,249,243,0) 22%,rgba(252,249,243,0) 80%,#FBF9F4 100%)}

#mx-home .mx-videos-layout {display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:64px; align-items:center; max-width:1040px}
#mx-home .mx-videos-intro {position:relative}
#mx-home .mx-videos-intro:before {content:""; position:absolute; inset:-50px -30px; z-index:-1; background:radial-gradient(closest-side,rgba(252,249,243,.94),rgba(252,249,243,.6) 60%,rgba(252,249,243,0)); pointer-events:none}
#mx-home .mx-videos .mx-eyebrow {display:flex; align-items:center; gap:14px; font-size:10px; letter-spacing:.19em; margin-bottom:18px}
#mx-home .mx-videos .mx-eyebrow:after {content:""; width:56px; height:1px; background:var(--gold); flex:none}
#mx-home .mx-videos h2 {font-size:clamp(34px,3.6vw,52px); line-height:1.06; letter-spacing:-.02em; text-wrap:initial}
#mx-home .mx-videos h2 span {color:var(--gold-text); white-space:nowrap}
#mx-home .mx-videos-description {margin:20px 0 26px!important; max-width:400px; font-size:15px!important; line-height:1.65!important; color:#4E5D72!important}
#mx-home .mx-videos .mx-btn {min-height:46px; padding-inline:26px; font-size:13.5px}

/* ---------- reel card (shared) ---------- */
:is(#mx-home,#mx-stories,#mx-gallery) .mv-reel {min-width:0; margin:0; list-style:none}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-reel-frame {position:relative; width:100%; aspect-ratio:9/16; border:3px solid #FFFEFA; border-radius:18px; overflow:hidden; background:#121417; box-shadow:0 14px 34px rgba(6,39,77,.18); color:#fff}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-reel-frame .mv-poster,:is(#mx-home,#mx-stories,#mx-gallery) .mv-preview {position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center 22%; user-select:none; -webkit-user-drag:none}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-preview {opacity:0; transition:opacity .5s ease}
:is(#mx-home,#mx-stories,#mx-gallery) .is-previewing .mv-preview {opacity:1}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-reel-frame:after {content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,20,38,.3) 0%,rgba(8,20,38,0) 20%,rgba(8,20,38,0) 50%,rgba(8,20,38,.88) 100%); pointer-events:none; transition:opacity .3s}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-duration {position:absolute; right:12px; top:12px; z-index:2; padding:5px 9px; border-radius:999px; background:rgba(6,39,77,.62); font:600 11.5px/1 var(--sans); color:#fff}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-play {position:absolute; left:50%; top:46%; z-index:3; display:grid; place-items:center; width:64px; height:64px; margin:-32px 0 0 -32px; padding:0; border:0; border-radius:50%; background:rgba(255,254,250,.95); color:var(--navy); cursor:pointer; box-shadow:0 6px 18px rgba(6,39,77,.28); transition:transform .2s}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-play svg {width:26px; height:26px; margin-left:4px}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-play:hover {transform:scale(1.06)}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-play:focus-visible {outline:3px solid var(--gold-light,#D2AC67); outline-offset:3px}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-reel-text {position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; gap:4px; padding:20px 22px 22px; pointer-events:none}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-reel-tag {align-self:flex-start; margin-bottom:8px; padding:6px 12px; border-radius:999px; background:var(--gold-light,#D2AC67); font:700 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--navy-deep,#06274D)}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-reel-text strong {font:400 26px/1.12 var(--serif); color:#fff; text-wrap:balance}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-reel-meta {font:500 12.5px/1.35 var(--sans); color:rgba(255,255,255,.85)}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-reel-topic {display:flex; align-items:center; gap:8px; margin-top:2px; font:500 13px/1.35 var(--sans); color:#F1DEB5}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-reel-topic:before {content:""; width:14px; height:1px; background:currentColor; flex:none}

/* playing: the in-card player covers the card; overlays step aside */
:is(#mx-home,#mx-stories,#mx-gallery) .mv-player {position:absolute; inset:0; z-index:4; display:none; background:#000}
:is(#mx-home,#mx-stories,#mx-gallery) .is-playing .mv-player {display:block}
:is(#mx-home,#mx-stories,#mx-gallery) .mv-player video,:is(#mx-home,#mx-stories,#mx-gallery) .mv-player iframe {display:block; width:100%; height:100%; border:0; object-fit:contain; background:#000}
:is(#mx-home,#mx-stories,#mx-gallery) .is-playing :is(.mv-play,.mv-reel-text,.mv-duration) {display:none}

/* ---------- homepage card stack ---------- */
#mx-home .mv-deck {display:flex; flex-direction:column; align-items:center; gap:22px; padding-right:70px}
#mx-home .mv-stack {position:relative; width:320px; aspect-ratio:9/16; margin:0; padding:0; list-style:none; touch-action:pan-y; outline:none}
#mx-home .mv-stack,#mx-home .mv-stack * {touch-action:pan-y; -webkit-touch-callout:none}
#mx-home .mv-stack :is(.mv-poster,.mv-preview,.mv-reel-frame:after) {pointer-events:none}
#mx-home .mv-stack .is-playing .mv-player video {touch-action:pan-y}
#mx-home .mv-stack:focus-visible {outline:2px solid var(--blue); outline-offset:8px; border-radius:20px}
#mx-home .mv-stack .mv-reel {position:absolute; inset:0; transform-origin:50% 100%; transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s,filter .45s; will-change:transform}
#mx-home .mv-stack .mv-reel[data-pos="0"] {z-index:3}
#mx-home .mv-stack .mv-reel[data-pos="1"] {z-index:2; transform:translateX(38px) rotate(5deg) scale(.94); cursor:pointer}
#mx-home .mv-stack .mv-reel[data-pos="2"] {z-index:1; transform:translateX(70px) rotate(9.5deg) scale(.88); cursor:pointer; opacity:.9}
#mx-home .mv-stack .mv-reel[data-pos="hidden"] {z-index:0; transform:translateX(90px) rotate(13deg) scale(.82); opacity:0; visibility:hidden}
#mx-home .mv-stack .mv-reel:not([data-pos="0"]) :is(.mv-play,.mv-reel-text,.mv-duration) {opacity:0}
#mx-home .mv-stack .mv-reel:not([data-pos="0"]) .mv-reel-frame {filter:saturate(.85) brightness(.92); box-shadow:0 8px 22px rgba(6,39,77,.12)}
#mx-home .mv-stack .mv-reel.is-dragging {transition:none; cursor:grabbing}
#mx-home .mv-stack .mv-reel :is(.mv-play,.mv-reel-text,.mv-duration) {transition:opacity .3s}
#mx-home .mv-deck-nav {display:flex; align-items:center; gap:16px}
#mx-home .mv-deck-nav button {display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(196,154,86,.45); border-radius:50%; background:#FFFEFA; color:var(--navy); cursor:pointer; box-shadow:0 4px 12px rgba(6,39,77,.08); transition:transform .2s,border-color .2s}
#mx-home .mv-deck-nav button:hover {border-color:var(--gold); transform:scale(1.04)}
#mx-home .mv-deck-nav svg {width:18px; height:18px}
#mx-home .mv-deck-count {min-width:64px; text-align:center; font:600 14px/1 var(--sans)!important; color:var(--navy)!important}
#mx-home .mv-deck-count span {color:var(--gold-text)}
#mx-home .mv-deck-hint {margin-top:-12px!important; font:500 11px/1 var(--sans)!important; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)!important}

/* ---------- Success Stories page grid (#videos) ---------- */
#mx-stories .sx-videos {padding:60px 0 8px; background:var(--ivory)}
#mx-stories .sx-videos h2 {font-size:42px; line-height:1.1; margin-bottom:8px}
:is(#mx-stories,#mx-gallery) .mv-reel-grid {display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 66px) / 4); gap:22px; margin:0; padding:4px 2px 16px; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#D9C49B transparent; -webkit-overflow-scrolling:touch}
:is(#mx-stories,#mx-gallery) .mv-reel-grid .mv-reel {scroll-snap-align:start}
:is(#mx-stories,#mx-gallery) .mv-reel-grid .mv-reel-text strong {font-size:20px}
:is(#mx-stories,#mx-gallery) .mv-reel-grid .mv-reel-text {padding:16px 16px 18px}

/* ---------- ≤1100 ---------- */
@media (max-width:1100px) {
  #mx-home .mx-videos-layout {grid-template-columns:minmax(0,1fr) 380px; gap:40px}
  #mx-home .mv-stack {width:280px}
  #mx-home .mv-deck {padding-right:60px}
  :is(#mx-stories,#mx-gallery) .mv-reel-grid {grid-auto-columns:calc((100% - 44px) / 3)}
}
/* ---------- ≤760: stacked ---------- */
@media (max-width:760px) {
  #mx-home .mx-videos-layout {grid-template-columns:1fr; gap:36px}
  #mx-home .mv-deck {padding-right:56px}
  #mx-home .mv-stack {width:min(300px,68vw)}
  #mx-home .mx-videos-art {background-image:url('../images/home-videos-seoul-900-v1.webp'); background-size:auto 260px; background-position:left bottom; opacity:.35}
  :is(#mx-stories,#mx-gallery) .mv-reel-grid {grid-auto-columns:calc((100% - 14px) / 2.2); gap:14px; margin-right:-24px; padding-right:24px}
  :is(#mx-stories,#mx-gallery) .mv-reel-grid .mv-reel-text strong {font-size:17px}
  :is(#mx-stories,#mx-gallery) .mv-reel-grid .mv-play {width:52px; height:52px; margin:-26px 0 0 -26px}
}
@media (max-width:600px) {
  #mx-home .mx-videos {padding:44px 0 40px}
  #mx-home .mx-videos .mx-eyebrow {font-size:11px; margin-bottom:14px}
  #mx-home .mx-videos h2 {font-size:38px}
  #mx-home .mx-videos-description {font-size:15.5px!important}
  #mx-home .mx-videos .mx-btn {width:100%; min-height:50px; font-size:15px}
  #mx-home .mv-deck {padding-right:48px}
  #mx-home .mv-deck-nav button {width:50px; height:50px}
  :is(#mx-home,#mx-stories,#mx-gallery) .mv-reel-text strong {font-size:23px}
  #mx-home .mx-videos-art {opacity:.25}
  #mx-stories .sx-videos h2 {font-size:clamp(30px,8.2vw,34px)}
}
@media (max-width:420px) {
  :is(#mx-stories,#mx-gallery) .mv-reel-grid {grid-auto-columns:72%; margin-right:-20px; padding-right:20px}
  :is(#mx-stories,#mx-gallery) .mv-reel-grid .mv-reel-text strong {font-size:22px}
}
@media (prefers-reduced-motion:reduce) {
  #mx-home .mv-stack .mv-reel,:is(#mx-home,#mx-stories,#mx-gallery) .mv-play {transition:none!important}
}