/* QOS v2.1 media: the full video in a filled work window, its info panel, and the case-study hero image. Loads after qos.css. */

/* ---- the play facade: the item's own picture + a play button; nothing from YouTube loads until it is clicked ---- */
.win-media .vp-face { display: none; position: absolute; inset: 0; z-index: 5; width: 100%; padding: 0; border: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); color: #fff; cursor: pointer; align-items: flex-end; justify-content: flex-start; gap: 14px; }
.win.max .win-media .vp-face { display: flex; }
.win-media .vp-btn { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 2px solid #fff; background: rgba(11,11,12,.72); transition: background .15s, transform .25s cubic-bezier(.2,1,.3,1); }
.win-media .vp-btn::after { content: ""; position: absolute; left: 29px; top: 21px; border-style: solid; border-width: 17px 0 17px 28px; border-color: transparent transparent transparent #fff; }
.win-media .vp-lab { margin: 0 0 16px 18px; padding: 5px 9px; background: rgba(11,11,12,.78); font: 500 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; }
.win-media .vp-face:hover .vp-btn, .win-media .vp-face:focus-visible .vp-btn { background: var(--c, #163BEF); transform: scale(1.06); }
.win-media .vp-face:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.win-media.vp-live .vp-face { display: none !important; }
.win-media.vp-live > img, .win-media.vp-live > video[data-src] { visibility: hidden; }
.win-media .vp-frame, .win-media video.vp-video { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; border: 0; background: #000; opacity: 1; object-fit: contain; object-position: center; display: block; }

/* ---- the info panel of a video piece: wider, scrolls, description on top of nothing else ---- */
.win.max.has-vp .win-info { width: min(430px, 40%); }
.win-info { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.info-dl dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.info-dl dd a:hover, .info-dl dd a:focus-visible { background: var(--ink); color: var(--bg); text-decoration: none; }
.info-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.info-acts .info-go { margin-top: 0; padding: 0 16px; }
.info-yt { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--ink); color: var(--ink); font: 500 round(down, max(11px, var(--mono-min)), var(--mono-step)) var(--mono); letter-spacing: calc(.12em * var(--ls-mono)); text-transform: uppercase; text-decoration: none; -webkit-font-smoothing: var(--mono-smooth); font-synthesis: none; transition: background .15s, color .15s; }
.info-yt:hover, .info-yt:focus-visible { background: var(--ink); color: var(--bg); }
.info-d { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.info-d .info-k { margin-bottom: 12px; }
.info-d p:not(.info-k) { margin: 0 0 12px; font-size: round(down, max(15px, var(--sans-min)), var(--sans-step)); line-height: 1.45; letter-spacing: calc(-.005em * var(--ls-sans)); overflow-wrap: anywhere; }
body.font-all .info-d p:not(.info-k) { font-size: 16px; line-height: 24px; }

/* phone: no fill button, so the facade plays in place on the card */
@media (max-width: 699px) {
  .win-media .vp-face { display: flex; }
  .win-media .vp-btn { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .win-media .vp-btn::after { left: 20px; top: 14px; border-width: 12px 0 12px 20px; }
  .win-media .vp-lab { display: none; }
}

/* ---- case study hero: an image at the top of the reading column, before the text ---- */
.rd-hero { margin: 0 0 44px; }
.rd-hero .rd-img { aspect-ratio: var(--hero-ar, 16 / 10) !important; height: auto; min-height: 0; max-height: min(72vh, 760px); }   /* never cropped (Q) */

.rd-hero .rd-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.rd-hero figcaption { padding-top: 10px; }

/* a cross-origin player (YouTube) can't sit under the CRT warp filter on <html>: the whole page would draw blank.
   The warp pauses while a player is on screen and comes back when it's dropped. */
html.crt-warp:has(.vp-frame) { filter: none !important; }
/* long titles (articles, tutorials) in the filled panel */
.win.is-long .info-t { font-size: round(down, max(clamp(20px, 1.9vw, 28px), var(--sans-min)), var(--sans-step)); line-height: 1.1; overflow-wrap: anywhere; }