/* l9-media.css - styles for Controls/ctrl_media.ascx (the one media renderer).
   Namespaced .l9-media-* so it never collides with the feed's .l9-mp-* tile styles.
   The frame is width-capped by the Size instruction (inline style from the control) and
   its height follows the asset's aspect-ratio, so a block drops into any container. */
.l9-media { display:block; width:100%; }
.l9-media-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.l9-media-grid .l9-media-frame:only-child { grid-column:1 / -1; }

.l9-media-frame { position:relative; width:100%; background:#000; border-radius:12px; overflow:hidden; }
.l9-media-frame:not([style*="aspect-ratio"]) { aspect-ratio:auto; }
.l9-media-frame:not([style*="aspect-ratio"]) .l9-media-poster { position:static; height:auto; }

/* Poster on top (later in DOM, absolute) until .is-playing fades it. Trap 3. */
.l9-media-poster, .l9-media-video { position:absolute; inset:0; width:100%; height:100%; display:block; }
.l9-media-poster { z-index:2; transition:opacity .25s ease; }
.l9-media-video { z-index:1; background:#000; }
.l9-media-frame.is-playing .l9-media-poster { opacity:0; pointer-events:none; }
.l9-media-frame.is-playing .l9-media-play { display:none; }

.l9-media-vframe { cursor:pointer; }
.l9-media-play { position:absolute; z-index:3; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; pointer-events:none; }
.l9-media-play svg { width:26px; height:26px; fill:#fff; margin-left:3px; }
.l9-media-size-thumb .l9-media-play { width:34px; height:34px; margin:-17px 0 0 -17px; }
.l9-media-size-thumb .l9-media-play svg { width:16px; height:16px; }

.l9-media-iframe { background:transparent; }
.l9-media-img { display:block; width:100%; height:auto; }

/* Auto-generated captions. Sized off the frame so a 160px thumb does not get 20px text,
   and given a solid backing so white words stay readable over a bright gym floor. */
/* CAPTIONS ARE OURS, NOT THE BROWSER'S. renderCaptions() in l9-media.js hides the native
   track and writes the active cue here, because cue geometry could not be controlled
   reliably: Cloudflare's cues carry their own size and position, ::cue cannot set the box,
   and Chrome will not re-flow a painted cue when its size changes (which is why a long line
   clipped at the right edge and stayed clipped through a resize).
   As a plain element it is ordinary CSS: a centred column that wraps to 2 or 3 short lines,
   always the same distance off the bottom, never wider than the frame. */
/* A FULL WIDTH STRIP that flex-centres its text, rather than an absolutely positioned box
   at left:50%. An absolute box shrink-wraps against the space left of its offset, so at
   left:50% it could only ever use half the frame and wrapped to four cramped lines. The
   strip's side padding is what limits the text to a centred column; the inner span sizes
   to its content within that. Deterministic at every width, no transform involved. */
.l9-media-cc {
  position:absolute; z-index:3; left:0; right:0; bottom:15%;
  display:none; justify-content:center; box-sizing:border-box;
  padding:0 18%;                    /* leaves the middle ~64% for the text */
  pointer-events:none;
}
.l9-media-cc.on { display:flex; }
.l9-media-cc > span {
  background:rgba(0,0,0,.72); color:#fff;
  padding:5px 12px; border-radius:6px;
  font-family:system-ui,Segoe UI,Arial,sans-serif; font-size:.8rem; line-height:1.35;
  text-align:center; overflow-wrap:break-word; white-space:normal;
}
/* A narrow player needs more of its width to stay readable; a wide one needs less. */
@media (max-width: 640px) { .l9-media-cc { padding:0 8%; } .l9-media-cc > span { font-size:.75rem; } }
.l9-media-size-medium .l9-media-cc { padding:0 12%; }
.l9-media-size-medium .l9-media-cc > span { font-size:.72rem; }
.l9-media-size-small .l9-media-cc,
.l9-media-size-thumb .l9-media-cc { padding:0 6%; bottom:10%; }
.l9-media-size-small .l9-media-cc > span,
.l9-media-size-thumb .l9-media-cc > span { font-size:.65rem; padding:3px 8px; }
/* No controls in these modes, so the text can sit lower. */
.l9-media-hero .l9-media-cc,
.l9-media-inline .l9-media-cc { bottom:8%; }

/* Shown only when the browser refused unmuted autoplay. */
.l9-media-sound { position:absolute; z-index:4; left:50%; bottom:14%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:rgba(0,0,0,.72); color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:24px; padding:9px 16px; font-size:.85rem; font-family:inherit; }
.l9-media-sound:hover { background:rgba(0,0,0,.85); border-color:#d7a33a; }
.l9-media-sound svg { width:18px; height:18px; fill:currentColor; }

.l9-media-processing { width:100%; height:100%; min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; background:#000; color:#B8B8B8; font-size:.9rem; text-align:center; padding:12px; box-sizing:border-box; }
.l9-media-processing svg { width:34px; height:34px; stroke:#D4A64A; fill:none; stroke-width:1.6; }