/**
 * Masonry tile grid + fullscreen modal for the site's video/picture grids
 * (Latest Works today; a Director's movie grid is meant to reuse this later).
 *
 * The grid uses a JS-measured CSS Grid masonry (see tile-grid.js): a fine
 * grid-auto-rows unit, with each tile's row-span calculated from its image's
 * real rendered height. This keeps left-to-right/top-to-bottom reading order
 * intact (unlike CSS column-count masonry), which matters since these tiles
 * are manually curated and reordered by the client.
 */

/*
 * auto-fill, not auto-fit: auto-fit collapses column tracks that have no
 * item in ANY row, and lets the remaining 1fr tracks expand into the freed
 * space — so a short last row (or a grid with just one tile) stretches to
 * fill the full container width. The only tile that's ever meant to be
 * deliberately full-width is the separate .uandme-featured-media banner,
 * never a tile inside this grid — auto-fill keeps unused tracks in place
 * (just empty) instead, so every tile stays a consistent column width
 * regardless of how many tiles end up in a given row.
 */
.uandme-tile-grid {
	--uandme-tile-gap: 3px;
	--uandme-tile-row: 8px;
	--uandme-tile-min: 480px;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--uandme-tile-min), 100%), 1fr));
	grid-auto-rows: var(--uandme-tile-row);
	gap: var(--uandme-tile-gap);
}

/*
 * Breaks out to the true viewport width regardless of the block's own
 * alignment or whatever content column it sits in — a standard full-bleed
 * technique (works because the parent is normally centered in the viewport).
 *
 * The "div." in front of the class is load-bearing: Gutenberg auto-generates
 * a `.wp-container-core-group-is-layout-xxxxx > * { margin-block: 0 }` rule
 * for every core/group block (its own blockGap implementation), which has
 * equal specificity to a bare `.uandme-featured-media` and loads after this
 * stylesheet — it was silently zeroing out margin-bottom below. Adding the
 * element type bumps specificity just enough to win without `!important`.
 */
div.uandme-featured-media {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-right: -50vw;
	margin-left: -50vw;
	margin-bottom: var(--uandme-tile-gap, 3px);
}

/*
 * 100vw is measured against the full window width, before the browser
 * subtracts its own vertical scrollbar — so on any browser that reserves
 * real space for that scrollbar (most non-macOS browsers, and macOS with
 * "Always show scrollbars" on; this doesn't reproduce with macOS's default
 * overlay scrollbars, which take no layout space), .uandme-featured-media's
 * width: 100vw ends up a few pixels wider than what's actually visible,
 * producing a permanent few-pixel horizontal scroll on every page that
 * loads this stylesheet. Nothing on this site ever needs to scroll
 * horizontally, so suppressing it here is a direct fix, not a band-aid.
 */
html {
	overflow-x: hidden;
}

.uandme-featured-media .uandme-tile {
	width: 100%;
	aspect-ratio: 21 / 9;
	max-height: 70vh;
}

.uandme-featured-media .uandme-tile__image {
	height: 100%;
	object-fit: cover;
}

.uandme-tile {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background: #111;
}

.uandme-tile__image {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Zoom in place on hover — the tile's own overflow: hidden clips it to the
   original footprint, so the tile itself never grows. Pictures only; movie
   tiles already have their own hover behavior (the preview video). */
.uandme-tile[data-type="picture"]:hover .uandme-tile__image {
	transform: scale(1.08);
}

/*
 * While the hover-preview video is loading, the injected iframe is briefly
 * transparent, which let the thumbnail underneath show through at the edges
 * (visible as a flash of stale frame if the video's aspect ratio doesn't
 * exactly match the thumbnail's). Hiding the thumbnail for the duration of
 * the preview exposes the tile's own solid background instead.
 */
.uandme-tile[data-hover-active] .uandme-tile__image {
	opacity: 0;
}

/*
 * Width/height are set inline by sizeIframeToCover() in tile-grid.js, sized
 * larger than the tile and centered — the standard trick for making an
 * iframe's video content cover its container (object-fit doesn't apply to
 * iframes, and Vimeo's background mode has no fill/cover option of its own).
 */
.uandme-tile__preview {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	border: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

/*
 * One SVG per tile type (assets/images/icon-video.svg, icon-photo.svg),
 * inlined by uandme_get_tile_type_icon() so `fill: currentColor` in the SVGs
 * picks up this `color`. Sized on the <svg> itself, not this wrapper, so the
 * two icons can have different footprints (the video icon's circle reads
 * visually smaller than the photo icon's more rectangular shape at the same
 * pixel size) while still sharing the same top-right anchor point.
 */
.uandme-tile__icon {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	color: #fff;
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.uandme-tile:hover .uandme-tile__icon {
	opacity: 1;
}

.uandme-tile__icon svg {
	display: block;
	width: 32px;
	height: 32px;
}

.uandme-tile[data-type="picture"] .uandme-tile__icon svg {
	width: 28px;
	height: 28px;
}

.uandme-tile__caption {
	position: absolute;
	right: 16px;
	bottom: 14px;
	left: 16px;
	z-index: 3;
	color: #f5f5f5;
	font-size: 18px;
	font-weight: 600;
}

/* ---------- Fullscreen lightbox (GLightbox) ---------- */

/*
 * The modal itself is GLightbox's own (assets/vendor/glightbox/glightbox.min.css).
 * A couple of small overrides to match the site's dark design instead of its default
 * "clean" skin, which is a light theme (white description background, black title —
 * the description text itself has no explicit color in that skin, so it was inheriting
 * the site's own light/white body text color, landing as invisible white-on-white).
 *
 * Scoped under .glightbox-clean to match that skin's own selector specificity — a plain
 * .gslide-description rule has lower specificity than .glightbox-clean .gslide-description
 * and silently loses regardless of stylesheet load order.
 */
.glightbox-clean .gslide-description {
	background: rgba( 10, 10, 10, 0.9 );
	text-align: center;
	font-size: 0.9375rem;
}

.glightbox-clean .gslide-description p {
	margin: 0;
}

.glightbox-clean .gslide-title,
.glightbox-clean .gslide-desc {
	color: #f5f5f5;
}

.gclose,
.gnext,
.gprev {
	color: #f5f5f5;
}

/*
 * GLightbox's own .glightbox-container is height: 100% on a position: fixed element,
 * which on iOS Safari is measured against the browser's static "layout" viewport
 * rather than the actually-visible area whenever the address bar is still expanded
 * (not yet collapsed by a scroll) at the moment the lightbox opens — leaving a gap at
 * the top where real page content (and the status bar) shows through instead of the
 * lightbox's own black background. Reported by the client as happening "sometimes" on
 * mobile, which matches this exactly: it depends on the address bar's state when the
 * lightbox is triggered, not a constant miscalculation.
 *
 * 100dvh (dynamic viewport height) tracks the browser chrome's actual current state
 * instead of assuming it's collapsed — the CSS-native fix for this. Declared after the
 * 100vh fallback so browsers without dvh support (pre-Safari 15.4) just keep the old
 * value instead of breaking.
 */
.glightbox-container {
	height: 100vh;
	height: 100dvh;
}