/* Media block: an image (or video) that fills its box. Until the real image exists use .media--placeholder (flat grey).
   <div class="media media--placeholder" role="img" aria-label="Describe the image"></div>
   <div class="media"><img src="…" alt="…"></div> */
/* RULE: an image container never has a stroke (no border, outline or shadow): only a fill, and only as the placeholder before the picture is added (.media--placeholder). Any outline you see is in the picture file. */
.media, .gallery-slide__image, .large-image__stack, .hero-image { border: 0; outline: 0; box-shadow: none; }
.media { position: relative; width: 100%; height: 100%; min-height: 20rem; overflow: hidden; }
.media > img, .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Phone: a screen recording (or screenshot) shown inside a phone frame. The recording is the plain app screen, 720 x 1558 (the shape of the frame's screen window); the frame is a transparent PNG
   (assets/images/phone-frame.png, made from phone_video_mask.jpg: bezel kept, everything else see-through) laid over it, so the page colour shows round the phone and one frame serves every video.
   Inside a .media box the phone fills the height and is centred (the box keeps its shape and has no fill):
   <div class="media"><div class="phone"><video src="….mp4" muted loop playsinline autoplay preload="metadata" width="720" height="1558" aria-label="…"></video></div></div>      (an <img> works too)
   Placement numbers come from the frame picture (800 x 1094): the screen window is 490 x 1060 at 143, 16. */
.phone { position: relative; aspect-ratio: 800 / 1094; height: 100%; }
.phone > video, .phone > img { position: absolute; left: 17.875%; top: 1.4625%; width: 61.25%; height: 96.89%; object-fit: cover; border-radius: 7.8% / 3.6%; }   /* rounded like the frame's screen window (38px of 490 x 1060), so the picture's square corners never show outside the bezel */
.phone::after { content: ""; position: absolute; inset: 0; background: url("../../assets/images/phone-frame.png") center / 100% 100% no-repeat; pointer-events: none; }
/* A recording that already has a phone in it (a mock-up on a dark background, like the Luno portfolio walkthrough): wrap the video in .phone__screen and say where the phone's SCREEN is inside the video, as
   percentages of the screen window: --vw / --vh = the video's size, --vx / --vy = its offset (negative). The video is cropped to its screen, then the same frame goes over it.
   For a screen at left L, top T, width Sw, height Sh (each as a fraction of the whole video): --vw = 100 / Sw, --vh = 100 / Sh, --vx = -100 * L / Sw, --vy = -100 * T / Sh.
   <div class="media" style="--media-ratio: 800 / 1094"><div class="phone"><div class="phone__screen"><video src="….mov" muted loop playsinline autoplay preload="metadata" style="--vw:223.2%; --vh:117.65%; --vx:-61.4%; --vy:-8.85%"></video></div></div></div> */
.phone > .phone__screen { position: absolute; left: 17.875%; top: 1.4625%; width: 61.25%; height: 96.89%; overflow: hidden; border-radius: 7.8% / 3.6%; }
.phone__screen > video, .phone__screen > img { position: absolute; max-width: none; object-fit: fill; width: var(--vw, 100%); height: var(--vh, 100%); left: var(--vx, 0); top: var(--vy, 0); }
.media > .phone { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
/* Slim phone (.phone--slim): the same phone with less empty space either side, from assets/images/mands/phone_video_mask.jpg (546 x 1094) made see-through as assets/images/phone-frame-slim.png.
   The screen window is the same size as the standard frame's (488 x 1060), at 26, 16 in the slim picture. <div class="phone phone--slim"><video …></video></div> */
.phone--slim { aspect-ratio: 546 / 1094; }
.phone--slim > video, .phone--slim > img, .phone--slim > .phone__screen { left: 4.7619%; width: 89.3773%; }
.phone--slim::after { background-image: url("../../assets/images/phone-frame-slim.png"); }
/* Fade phone (.phone--fade): only the TOP of a phone, from assets/images/phone-frame-fade.png (800 x 800: the page colour round the phone, the screen window at 119, 21 and 546 wide, and a gradient that fades the lower part of the
   screen into the page colour). The video is the full-screen recording cropped to the part that shows (1180 x 1684 = the window's shape); only its top is seen. <div class="phone phone--fade"><video …></video></div> */
.phone--fade { aspect-ratio: 1; }
.phone--fade > video, .phone--fade > img { left: 14.875%; top: 2.625%; width: 68.25%; height: 97.375%; border-radius: 0; }
.phone--fade::after { background-image: url("../../assets/images/phone-frame-fade.png"); }
.media--placeholder { background: var(--color-placeholder); }