/* =============================================================================
   Media (Custom) — image / mp4 / Vimeo at a fixed ratio, optional caption pill
   + lightbox
   Caption pill styling per Figma node 1:304 (#FDFBF3 pill, 21px plus icon,
   15px text). Desktop: pill hangs above the media (absolute) so the media top
   stays aligned with copy in adjacent columns; <756px it sits in flow above
   the media with a 15px gap.

   The media area is always a plain <div>; anything clickable is a separate
   full-bleed button laid over it (.media--overlay). That is what lets an
   <iframe> or a <video controls> live inside a clickable tile at all — both
   count as interactive content, which may not be nested in a <button>.
   ============================================================================= */

.media--figure {
	position: relative;
	margin: 0;
}

/* --- media area --- */
.media--media {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 12px;
}

/* --media-ar is the same crop expressed as a number, for the Vimeo cover
   maths further down — CSS cannot divide an `aspect-ratio` value. */
.media--ratio-16-9 { --media-ar: 1.77778; }
.media--ratio-9-16 { --media-ar: 0.5625; }
.media--ratio-1-1  { --media-ar: 1; }
.media--ratio-2-3  { --media-ar: 0.66667; }
.media--ratio-2-1  { --media-ar: 2; }
.media--ratio-4-3  { --media-ar: 1.33333; }
.media--ratio-3-4  { --media-ar: 0.75; }

.media--ratio-16-9 .media--media { aspect-ratio: 16 / 9; }
.media--ratio-9-16 .media--media { aspect-ratio: 9 / 16; }
.media--ratio-1-1 .media--media { aspect-ratio: 1 / 1; }
.media--ratio-2-3 .media--media { aspect-ratio: 2 / 3; }
.media--ratio-2-1 .media--media { aspect-ratio: 2 / 1; }
.media--ratio-4-3 .media--media { aspect-ratio: 4 / 3; }
.media--ratio-3-4 .media--media { aspect-ratio: 3 / 4; }

.media--media img,
.media--media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- click layer (lightbox trigger, or the play button for a still) --- */
.media--overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 2;
}

/* =============================================================================
   Vimeo
   The tile is a fixed crop and the video is whatever ratio it is, so an
   autoplaying loop is cover-cropped the way object-fit crops an <img>:
   oversize the iframe on whichever axis falls short and let .media--media clip
   it. --media-vimeo-ar comes from Vimeo's oEmbed record at render time; with no
   record both sides resolve to 100% and the iframe simply fills the tile.

   Only the chrome-less background player is cropped. Once there are controls
   they must stay on screen, so the interactive player fits instead of fills.
   ============================================================================= */
.media--vimeo {
	position: absolute;
	inset: 0;
}

/* Absolute so the injected iframe lands ON the poster rather than under it.
   In the editor canvas the same class sits directly inside .media--media,
   which is also positioned — either way it fills the tile. */
.media--vimeo-frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.media--vimeo-cover .media--vimeo-frame {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	/* Mind the axes: `width:%` resolves against the tile's WIDTH and
	   `height:%` against its HEIGHT, so each side is scaled by the ratio of
	   the two aspect ratios and only the short one ever grows.
	   Video wider than the tile -> height pins at 100%, width overflows;
	   video taller -> width pins at 100%, height overflows. */
	width: max(100%, calc(100% * var(--media-vimeo-ar, var(--media-ar, 1.77778)) / var(--media-ar, 1.77778)));
	height: max(100%, calc(100% * var(--media-ar, 1.77778) / var(--media-vimeo-ar, var(--media-ar, 1.77778))));
	/* Background mode has no controls to click, and swallowing pointer events
	   here would break the lightbox button sitting over it. */
	pointer-events: none;
}

/* Play bar (client, 2026-09-30): the loop keeps Vimeo's controls, so it is
   FITTED like any interactive player, never cover-cropped — a crop would cut
   the play button and the full-screen toggle off the ends of the bar. Where
   the tile's ratio differs from the video's, the player letterboxes inside
   it; black reads as a video player, the page showing through would read as
   a broken crop. */
.media--vimeo-controls {
	background: #000;
}

/* The poster stays until the iframe lands, then gets out of its way. */
.media--vimeo.is-playing img {
	visibility: hidden;
}

/* --- caption pill (Figma 1:304) --- */
.media--caption {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 9px 16px 9px 12px;
	border: 0;
	border-radius: 10px;
	background: #fdfbf3;
	font-family: "instrument-sans-variable", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.038em;
	color: #000;
	text-align: left;
	margin: 0 0 15px; /* mobile only — the ≥756px rule below resets margin to 0 */
	cursor: pointer;
	transition: background-color .3s;
}
.media--caption:hover { background: #f2efe2; }

.media--caption-icon {
	width: 21px;
	height: 21px;
	flex: none;
}

/* --- play icon (any clickable video: lightbox trigger or inline play) --- */
.media--play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform .3s;
}
.media--play svg { display: block; }
.media--overlay:hover .media--play { transform: translate(-50%, -50%) scale(1.08); }

/* --- focus ---
   Both states are reset, not just :focus-visible: reset.min.css ships
   `button:focus{outline:-webkit-focus-ring-color auto 5px}`, which otherwise
   survives a mouse click and paints a browser outline on the tile. */
.media--figure .media--caption:focus,
.media--figure .media--overlay:focus {
	outline: none;
}
.media--figure .media--caption:focus-visible,
.media--figure .media--overlay:focus-visible {
	outline: 2px solid var(--wp--preset--color--green, #1a3d39);
	outline-offset: 2px;
}

/* --- desktop: pill hangs just above the media, out of flow --- */
@media (min-width: 756px) {
	.media--caption {
		position: absolute;
		bottom: calc(100% + 10px);
		left: 0;
		margin: 0;
		/* Above .media--overlay (2): bento pulls the pill back inside the tile,
		   where the overlay would otherwise take its hover and its clicks. */
		z-index: 3;
		white-space: nowrap;
	}
}

/* --- editor placeholder (no media selected) --- */
.media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	background: #f0f0f0;
	color: #757575;
	font-size: 14px;
}

/* =============================================================================
   Lightbox slide (GLightbox inline content) — media constrained to the block's
   aspect ratio, sized to the viewport
   ============================================================================= */
.media--lb { position: relative; }
.media--lb-16-9 { width: min(92vw, calc(86vh * 16 / 9)); aspect-ratio: 16 / 9; }
.media--lb-9-16 { width: min(92vw, calc(86vh * 9 / 16)); aspect-ratio: 9 / 16; }
.media--lb-1-1 { width: min(92vw, 86vh); aspect-ratio: 1 / 1; }
.media--lb-2-3 { width: min(92vw, calc(86vh * 2 / 3)); aspect-ratio: 2 / 3; }
.media--lb-2-1 { width: min(92vw, calc(86vh * 2)); aspect-ratio: 2 / 1; }
.media--lb-4-3 { width: min(92vw, calc(86vh * 4 / 3)); aspect-ratio: 4 / 3; }
.media--lb-3-4 { width: min(92vw, calc(86vh * 3 / 4)); aspect-ratio: 3 / 4; }

/* Vimeo opens at the video's own ratio (--media-lb-ar, set inline by media.js)
   rather than the tile's crop: the crop is a layout choice, and cropping a
   player would take its controls off screen with it.
   Vimeo BUTTONS reuse this slide and the chrome reset below (inc/video-lightbox.php
   enqueues this file for them) — keep the class names. */
.media--lb-vimeo {
	width: min(92vw, calc(86vh * var(--media-lb-ar, 1.77778)));
	aspect-ratio: var(--media-lb-ar, 1.77778);
}

.media--lb img,
.media--lb video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 12px;
}

.media--lb iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	border-radius: 12px;
}

/* strip GLightbox's inline-content chrome so only the media shows —
   GLightbox stamps inline width/height styles on the slide, hence !important */
.glightbox-clean .gslide-inline {
	background: transparent;
	box-shadow: none;
	width: auto !important;
	height: auto !important;
	max-width: none;
	overflow: visible;
}
.glightbox-clean .ginlined-content {
	background: transparent;
	padding: 0;
	width: auto;
	max-width: none;
	overflow: hidden;
}
/* every media lightbox is a single slide — no prev/next chrome */
.glightbox-clean .gprev,
.glightbox-clean .gnext {
	display: none !important;
}

/* --- reduced motion ---
   Nothing here stops the loops themselves: media.js does that by leaving
   autoplaying MP4s paused and never building the Vimeo iframe at all, so the
   poster is what those visitors see. */
@media (prefers-reduced-motion: reduce) {
	.media--caption,
	.media--play {
		transition: none;
	}
	.media--overlay:hover .media--play { transform: translate(-50%, -50%); }
}