/* ============================================================
   STUDENT SHORTS — the 3D sliding section, based on the Ecommerce page.
   Used on every page with shorts. Colours come from each page's own
   settings (see shorts-stage.js), so the design stays one colour per page.
   ============================================================ */
.sps{ --sps-accent:#EF4444; --sps-btn:#EF4444; --sps-on:#fff; position:relative; width:100%; max-width:100%; overflow:hidden; user-select:none; -webkit-user-select:none; }
.sps-hint{ display:none; }
.sps-hint svg{ width:14px; height:14px; color:var(--sps-accent); flex:none; }
.sps-stage{ position:relative; padding:8px 0 24px; touch-action:pan-y; }
.sps-view{ position:relative; width:100%; height:400px; display:flex; align-items:center; justify-content:center; overflow:hidden; perspective:750px; transform-style:preserve-3d; touch-action:pan-y; cursor:grab; }
.sps-view.is-dragging{ cursor:grabbing; }

.sps-card{ position:absolute; width:205px; aspect-ratio:9/16; border-radius:16px; overflow:hidden; background:#0A1024; border:1px solid rgba(148,163,184,.22); box-shadow:0 25px 50px -12px rgba(0,0,0,.65); cursor:pointer; transform-style:preserve-3d; will-change:transform,opacity; transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, border-color .2s ease, box-shadow .2s ease; }
.sps-card:hover{ border-color:color-mix(in srgb,var(--sps-accent) 60%,transparent); }
.sps-card.is-active{ border-color:var(--sps-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--sps-accent) 28%,transparent), 0 25px 50px -12px rgba(0,0,0,.65); }

.sps-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.sps-shade{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.2) 50%,transparent); pointer-events:none; }
.sps-tag{ position:absolute; top:10px; left:10px; z-index:2; padding:2px 8px; border-radius:6px; background:rgba(0,0,0,.75); border:1px solid rgba(255,255,255,.2); font:700 9px/1.5 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.05em; color:#fff; pointer-events:none; }
.sps-icon{ position:absolute; top:10px; right:10px; z-index:3; width:28px; height:28px; display:grid; place-items:center; padding:0; border-radius:6px; background:rgba(0,0,0,.75); border:1px solid rgba(255,255,255,.2); color:#fff; cursor:pointer; opacity:0; transition:opacity .2s ease; }
.sps-icon svg{ width:14px; height:14px; }
.sps-card:hover .sps-icon, .sps-icon:focus-visible{ opacity:1; }
@media (hover:none){ .sps-card.is-active .sps-icon{ opacity:1; } }

.sps-center{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.sps-play{ width:48px; height:48px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--sps-btn); color:var(--sps-on); box-shadow:0 12px 24px -6px color-mix(in srgb,var(--sps-btn) 60%,transparent); cursor:pointer; pointer-events:auto; transform:scale(.9); opacity:.8; transition:transform .3s ease, opacity .3s ease; }
.sps-play svg{ width:20px; height:20px; margin-left:2px; fill:currentColor; }
.sps-card.is-active .sps-play{ transform:scale(1); opacity:1; }
.sps-card.is-active:hover .sps-play{ transform:scale(1.1); }
.sps-watch{ display:none; margin-top:8px; font:700 10px/1.4 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.05em; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.sps-card.is-active .sps-watch{ display:block; }
.sps-chip{ position:absolute; left:10px; right:10px; bottom:10px; z-index:2; text-align:center; pointer-events:none; }
.sps-chip span{ display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:2px 8px; border-radius:6px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.15); font:600 9px/1.5 'JetBrains Mono',ui-monospace,monospace; color:var(--sps-accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sps-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }

.sps-nav{ position:absolute; top:44%; z-index:30; width:40px; height:40px; display:grid; place-items:center; padding:0; border-radius:50%; background:rgba(9,15,36,.9); border:1px solid rgba(148,163,184,.3); color:#E2E8F0; cursor:pointer; transform:translateY(-50%); box-shadow:0 25px 50px -12px rgba(0,0,0,.65); transition:transform .2s ease, border-color .2s ease, color .2s ease; }
.sps-nav svg{ width:20px; height:20px; }
.sps-nav:hover{ border-color:var(--sps-accent); color:#fff; transform:translateY(-50%) scale(1.1); }
.sps-nav:active{ transform:translateY(-50%) scale(.95); }
.sps-prev{ left:8px; }
.sps-next{ right:8px; }

/* Larger screens: same sizes as the Ecommerce page */
@media (min-width:640px){
  .sps-view{ height:480px; perspective:1100px; }
  .sps-card{ width:250px; }
  .sps-nav{ width:48px; height:48px; }
  .sps-nav svg{ width:24px; height:24px; }
  .sps-prev{ left:16px; } .sps-next{ right:16px; }
  .sps-play{ width:56px; height:56px; } .sps-play svg{ width:24px; height:24px; }
  .sps-tag{ font-size:10px; padding:4px 10px; }
  .sps-chip span{ font-size:10px; }
  .sps-watch{ font-size:11px; }
}
@media (min-width:768px){
  .sps-view{ height:530px; }
  .sps-card{ width:280px; }
  .sps-prev{ left:24px; } .sps-next{ right:24px; }
  .sps-play{ width:64px; height:64px; } .sps-play svg{ width:28px; height:28px; }
}
@media (min-width:1024px){
  .sps-prev{ left:32px; } .sps-next{ right:32px; }
}

/* Full-screen player */
.sps-modal{ position:fixed; inset:0; z-index:99300; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.9); }
.sps-modal__box{ position:relative; height:min(calc(100dvh - 32px), 860px); aspect-ratio:9/16; max-width:100%; border-radius:16px; overflow:hidden; background:#000; border:1px solid rgba(255,255,255,.18); box-shadow:0 25px 50px -12px rgba(0,0,0,.8); }
.sps-modal__close{ position:absolute; top:10px; right:10px; z-index:3; width:36px; height:36px; display:grid; place-items:center; padding:0; border-radius:50%; background:rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.25); color:#fff; cursor:pointer; }
.sps-close{ position:absolute; top:10px; right:10px; z-index:3; width:30px; height:30px; display:grid; place-items:center; padding:0; border-radius:50%; background:rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.2); color:#fff; cursor:pointer; }
.sps-close svg, .sps-modal__close svg{ width:15px; height:15px; }

@media (prefers-reduced-motion:reduce){
  .sps-card, .sps-play, .sps-nav{ transition:none; }
}

/* Laptops and larger: the shorts intro line stays on one row */
@media (min-width:961px){
  .reels-sec .section-head, .reels-sec .reels-head{ max-width:none; }
  .reels-sec .section-head p:not(.eyebrow), .reels-sec .reels-head p:not(.reels-eyebrow){ max-width:none; white-space:nowrap; }
}