/* =========================================================
   Core Player Styles
   - Default: landscape-friendly (cover)
   - Portrait videos: auto switch to contain via .is-portrait
   - Theatre mode: always contain
========================================================= */

/* -------------------------
   Player container
------------------------- */
.player-wrap{
  position:relative;
  background:#000;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:16/9;
  isolation:isolate; /* keeps overlay z-index sane */
  box-shadow:0 10px 28px rgba(0,0,0,.18);

  /* Helps avoid scroll chaining / accidental gestures on touch devices */
  touch-action: manipulation;
}

/* Make the stage a containing box */
.cs-stage{
  position:relative;
  width:100%;
  height:100%;
}

/* -------------------------
   Video fill behavior (DEFAULT)
------------------------- */
video{
  width:100%;
  height:100%;
  display:block;
  background:#000;

  /* Default: fill the box (landscape-first) */
  object-fit:cover;

  /* Avoid iOS “tap highlights” and selection weirdness */
  -webkit-user-select:none;
  user-select:none;
}

/* Hide native controls */
#player::-webkit-media-controls{ display:none !important; }
#player{ outline:none; }

/* =========================================================
   ✅ PORTRAIT OVERRIDE
   When JS adds `.is-portrait` to .player-wrap,
   the video will no longer be cropped.
========================================================= */
.player-wrap.is-portrait video{
  object-fit:contain;
}

/* Optional: darken the side bars slightly so they feel intentional */
.player-wrap.is-portrait{
  background:#000;
}

/* Ensure overlays remain above video */
.player-wrap > .cs-stage,
.player-wrap > .cs-ui{
  position:relative;
  z-index:1;
}

/* -------------------------
   Theatre layout
------------------------- */
body.theatre main.layout{
  max-width:none;
  width:100%;
  margin:0;
  padding:0;
  grid-template-columns:minmax(0,1fr) var(--sidebar-w);
  grid-template-areas:
    "player player"
    "meta   sidebar";
}

body.theatre .left-col{ display:contents; }
body.theatre .player-row{ grid-area:player; min-width:0; }
body.theatre .meta-col{ grid-area:meta; min-width:0; padding:0 12px; }
body.theatre aside.sidebar{ grid-area:sidebar; min-width:0; padding:0 12px; }

body.theatre .player-wrap{
  width:100%;
  position:relative;
  left:auto;
  transform:none;

  border-radius:0;
  border-left:0;
  border-right:0;

  aspect-ratio:auto;
  height:min(92vh,72vh);
  box-shadow:none;

  transform-origin:center top;
}
@media (min-width: 1400px){
  body.theatre .player-wrap{
    height:min(94vh, 78vh);
  }
}

/* Prefer dynamic viewport units if available (mobile browser bars) */
@supports (width:100dvw){
  body.theatre .player-wrap{ width:100dvw; }
}

body.theatre{ overflow-x: clip; }

/* In theatre, always show full frame */
body.theatre video{ object-fit:contain; }

/* -------------------------
   Narrow screens
------------------------- */
@media (max-width:980px){
  body.theatre main.layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "player"
      "meta"
      "sidebar";
  }

  body.theatre .player-wrap{
    width:100%;
    left:auto;
    transform:none;

    /* keep normal ratio on narrow */
    height:auto;
    aspect-ratio:16/9;
  }
}