/* ==========================================================================
   Block: Image Gallery (bga/gallery)
   ========================================================================== */

/* Full-bleed: override the site-container padding/max-width for this block */
.bga-gallery > .site-container {
	max-width: 100%;
	padding: 0;
}

.bga-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3px;
}

.bga-gallery__item {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.bga-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.bga-gallery__item:hover .bga-gallery__image {
	transform: scale(1.04);
}

.bga-gallery__item:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: -2px;
}

@media (min-width: 600px) {
	.bga-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Variant: Strip (horizontal row below hero)
   ========================================================================== */

.bga-gallery--strip {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	overflow: hidden;
}

.bga-gallery--strip .bga-gallery__grid {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 3px;
}

.bga-gallery--strip .bga-gallery__item {
	aspect-ratio: 3 / 2;
}

@media (min-width: 768px) {
	.bga-gallery--strip .bga-gallery__grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ==========================================================================
   Variant: Thumbnails (smaller row mid-page)
   ========================================================================== */

.bga-gallery--thumbs {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	overflow: hidden;
}

.bga-gallery--thumbs .bga-gallery__grid {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 3px;
}

.bga-gallery--thumbs .bga-gallery__item {
	aspect-ratio: 3 / 2;
}

@media (min-width: 768px) {
	.bga-gallery--thumbs .bga-gallery__grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* ==========================================================================
   Full-bleed single image
   ========================================================================== */

.bga-fullbleed-image {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	overflow: hidden;
}

/*
 * Round 5 (Bryce, 20 Jul): show the WHOLE image, full-bleed, at its own natural
 * aspect ratio — no zoom, no crop, and no letterbox bars. The earlier fixed
 * 16:9 `contain` box left large cream margins on the many portrait-ish project
 * images (e.g. a 1.24 image sat in a ~62%-width strip), which read as the image
 * being cropped/boxed. Height now follows each image; wide images are naturally
 * shorter, portrait-ish images taller. Scoped to a direct child `> img` so it
 * never touches the video poster thumbnail (`.bga-fullbleed-image--video > a > img`).
 */
.bga-fullbleed-image > img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Full-bleed video facade (Row 37)
   ========================================================================== */

.bga-fullbleed-video {
	display: block; /* <a> is inline by default; without this, width/aspect-ratio/max-height are ignored and the box collapses to the (possibly 404'd) thumbnail's size in Safari, dragging the absolutely-positioned play button off-screen */
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 85vh; /* Round 5 (Bryce, 20 Jul): taller video container (was 70vh) */
	overflow: hidden;
	cursor: pointer;
	background: var(--color-brown); /* keeps a visible 16:9 area even if the thumb 404s */
}

/* Fallback for Safari/iOS <= 14 (no aspect-ratio support): reserve the 16:9
   height the classic way so the container cannot collapse to 0 and clip the
   thumbnail + play button. Chrome and Safari 15+ support aspect-ratio, so this
   @supports block never applies to them — no regression. */
@supports not (aspect-ratio: 1) {
	.bga-fullbleed-video {
		height: 0;
		padding-bottom: 56.25%; /* 16 / 9 */
	}
	.bga-fullbleed-video__thumb,
	.bga-fullbleed-video__placeholder,
	.bga-fullbleed-video iframe {
		position: absolute;
		inset: 0;
	}
}

.bga-fullbleed-video__facade {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	padding: 0;
	background: var(--color-brown);
	cursor: pointer;
	position: relative;
}

.bga-fullbleed-video__thumb,
.bga-fullbleed-video__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bga-fullbleed-video__placeholder {
	background: var(--color-brown);
}

.bga-fullbleed-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;  /* match intrinsic SVG size; WebKit can resolve auto-size of an out-of-flow <svg> to ~0 */
	height: 48px;
	transform: translate(-50%, -50%);
	transition: transform var(--transition-smooth);
}

.bga-fullbleed-video__facade:hover .bga-fullbleed-video__play {
	transform: translate(-50%, -50%) scale(1.1);
}

.bga-fullbleed-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* ==========================================================================
   Content image grid (2×3 beside text)
   ========================================================================== */

.bga-content-images__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3px;
}

.bga-content-images__item {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.bga-content-images__item .bga-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.bga-content-images__item:hover .bga-gallery__image {
	transform: scale(1.04);
}

.bga-content-images__item:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: -2px;
}