/* =====================================================================
   Studios page (Figma 15:1464). Dark hero + dark content + dark footer.
   ===================================================================== */
body:has(.studios-hero, .series-hero){background:#14120f}
/* Nav floats over a dark studios or series hero: keep the filled bar on from the start.
   Other pages stay transparent until scroll (see interactions.css). */
body:has(.studios-hero, .series-hero) .nav .nav__inner{background:var(--surface-default);box-shadow:inset 0 0 0 1px var(--border-subtle)}

.studios-hero{position:relative;min-height:926px;box-sizing:border-box;display:flex;align-items:flex-end;padding:64px;overflow:hidden;background:#0d0c0a;color:#f7f3ec}
.studios-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.studios-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,12,10,.92) 0%,rgba(13,12,10,.75) 38%,rgba(13,12,10,.2) 75%,transparent 100%),linear-gradient(180deg,rgba(13,12,10,.55) 0%,rgba(13,12,10,.35) 35%,rgba(13,12,10,.9) 78%,#0d0c0a 100%)}
.studios-hero__inner{position:relative;width:100%;max-width:1312px;margin-inline:auto;display:flex;flex-direction:column;gap:48px}
.studios-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:709px}
.studios-hero__copy h1{margin:0;line-height:0}
.studios-hero__title{display:block;width:min(709px,100%);height:auto}
.studios-hero__desc{margin:0;font:var(--text-lg);color:#f0ebe0;max-width:560px}
.studios-hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.studios-hero__actions .btn{height:48px}
.btn--ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.btn--ghost-light:hover{background:rgba(255,255,255,.14);border-color:#fff}
.studios-hero__rail{position:relative;display:flex;flex-direction:column;gap:16px}
.studios-hero__shade{background:linear-gradient(180deg,rgba(20,18,16,.65) 0%,rgba(20,18,16,.65) 45%,rgba(13,12,10,.92) 78%,#0d0c0a 100%)}
.btn--ghost-light{background:transparent;color:#fffbf5;border:0}
.btn--ghost-light:hover{background:rgba(255,255,255,.14)}

/* Hero arrows: follow the pointer — the arrow on the side the mouse is moving over fades in, and fades out when it stops or leaves (JS sets data-reveal). Focus shows both. */
/* Hero arrows: appear on hover/focus, one per direction, vertically centred on the thumbnails */
.studios-hero__arrow{position:absolute;top:calc(280px * 156.375 / 278 / 2 - 24px);z-index:3;width:48px;height:48px;opacity:0;visibility:hidden;transition:opacity .2s var(--ease-out),visibility .2s}
.studios-hero__arrow--prev{left:0}.studios-hero__arrow--next{right:0}
.studios-hero__rail[data-reveal="prev"] .studios-hero__arrow--prev,.studios-hero__rail[data-reveal="next"] .studios-hero__arrow--next,.studios-hero__rail:focus-within .studios-hero__arrow{opacity:1;visibility:visible}
.studios-hero__rail[data-at-start] .studios-hero__arrow--prev,.studios-hero__rail[data-at-end] .studios-hero__arrow--next{opacity:0;visibility:hidden}

/* Carousel: scroll-snap strip moved by JS (autoplay + arrows) */
.carousel{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-2px;padding:2px}
.carousel::-webkit-scrollbar{display:none}
.carousel__track{display:flex;gap:16px;width:max-content}
.carousel__item{width:280px;flex:none;scroll-snap-align:start}
.carousel__item .video-card{height:auto}

/* Studios cards (Figma 720:18506): sans 14/20 titles, 2-line clamp, 16px body padding on the hero */
.studios .video-card__title{font:var(--text-sm);-webkit-line-clamp:2}
.carousel .video-card__body{padding:16px}
.carousel .video-card__title{-webkit-line-clamp:1}

/* Content on dark */
.studios-body{background:#14120f;padding:64px 80px 80px}
.studios-body__inner{max-width:1280px;margin-inline:auto;display:flex;flex-direction:column;gap:64px}
.studios-sec{display:flex;flex-direction:column;gap:24px}
.studios-sec__head{display:flex;flex-direction:column;gap:12px}
.studios-sec__desc{margin:0;max-width:664px;font:var(--text-sm);color:var(--neutral-300)}
.section-header--dark .section-header__title{color:#fff;text-transform:uppercase}
.studios-row{display:grid;gap:24px}
.studios-row--origin{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;align-items:start}
.studios-row--origin>.video-card{height:auto}
.studios-row--origin .video-card__thumb{flex:none;aspect-ratio:9/16}
.studios-row--two{grid-template-columns:repeat(2,290px);gap:24px;align-items:start}
.studios-row--two>.video-card{height:auto}
.studios-row--two .video-card__thumb{flex:none;aspect-ratio:290/516}

/* Naismith 5 / Roundtable: horizontal card stays pinned while the vertical cards scroll past */
.studios-split{display:grid;grid-template-columns:555px minmax(0,1fr);gap:24px;align-items:start}
.studios-split__fixed{position:sticky;top:136px}
.studios-split__scroll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.studios-split__scroll>.video-card{height:auto}
.studios-split__scroll .video-card__thumb{flex:none;aspect-ratio:217/386}
.studios-split--two{grid-template-columns:610px minmax(0,1fr)}
.studios-split--two .studios-split__scroll{grid-template-columns:repeat(2,minmax(0,1fr))}
.studios-split--two .studios-split__scroll .video-card__thumb{aspect-ratio:290/516}
@media (max-width:1100px){
  .studios-hero{padding:32px 24px}
  .studios-body{padding:48px 24px}
  .studios-row--origin{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studios-row--two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studios-split,.studios-split--two{grid-template-columns:1fr}
  .studios-split__fixed{position:static}
  .studios-split__scroll,.studios-split--two .studios-split__scroll{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Video modal */
#video-modal{background:rgba(13,12,10,.85)}
.video-modal__panel{position:relative;width:min(1000px,100%);display:flex;flex-direction:column;gap:12px;transform:translateY(16px) scale(.97);transition:transform .45s var(--ease-out)}
#video-modal.is-open .video-modal__panel{transform:none}
.video-modal__frame{aspect-ratio:16/9;background:#000;border-radius:var(--radius-md);overflow:hidden}
.video-modal__frame iframe{width:100%;height:100%;border:0;display:block}
.video-modal__title{margin:0;color:#f0ebe0;font:var(--text-base)}
.video-modal__x{position:absolute;top:-52px;right:0}

/* Dark footer: same footer, dark semantic tokens (Figma 592:6112) */
.footer--dark{--surface-background:#14120f;--border-default:#6b5e4d;--border-strong:#6b5e4d;--text-primary:#f7f3ec;--text-secondary:#c4b9a6;background:#14120f;color:#f7f3ec}
.footer--dark .footer__col a,.footer--dark .footer__explore a{color:#f7f3ec}
.footer--dark .footer__col a,.footer--dark .footer__col h4+a{border-color:rgba(107,94,77,.3)}
.footer--dark .footer__bottom{border-color:rgba(107,94,77,.3)}
.footer--dark .footer__ghost{color:#232a25}
.footer--dark .footer__bigs{filter:brightness(.28)}
.footer--dark .footer__tagline{color:#f7f3ec}