/* Mosaic photo grid — CSS Grid only. Tokens fall back when main.css is absent (admin). */

.mosaic-stack {
	--su-bg-elevated: var(--su-bg-elevated, #ffffff);
	--su-ink: var(--su-ink, #1a1d21);
	--su-hero-ink: var(--su-hero-ink, #f7f8f9);
	--su-ease: var(--su-ease, cubic-bezier(0.22, 1, 0.36, 1));
	--su-text-xs: var(--su-text-xs, 0.75rem);
	--su-font-body: var(--su-font-body, inherit);
}

.mosaic {
	--gap: 12px;
	--tile-ar: 1;
	list-style: none;
	margin: 0 0 var(--gap);
	padding: 0;
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(4, 1fr);
}

.mosaic > .tile {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: var(--lqip, var(--su-bg-elevated));
}

.mosaic > .tile--1x1 {
	aspect-ratio: var(--tile-ar);
}

.mosaic > .tile--tall {
	aspect-ratio: 2 / 3;
}

.mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focal, 50% 50%);
	display: block;
	transition: transform 300ms var(--su-ease);
}

.tile__link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.tile__link:hover img,
.tile__link:focus-visible img {
	transform: scale(1.03);
}

.m-a  { grid-template-areas: "b b p1 p2" "b b p3 p4"; }
.m-ar { grid-template-areas: "p1 p2 b b" "p3 p4 b b"; }
.m-d  { grid-template-areas: "p1 b b p3" "p2 b b p4"; }
.m-b  { grid-template-areas: "p1 p2 p3 p4"; }
.m-c  { grid-template-areas: "w w p1 p2"; }
.m-cr { grid-template-areas: "p1 p2 w w"; }
.m-e  { grid-template-areas: "v1 v2 v3 v4"; }
.m-row {
	grid-template-columns: repeat(var(--cols, 2), 1fr);
	grid-template-areas: none;
}

.tile--big  { grid-area: b; }
.tile--wide { grid-area: w; }
.tile--p1   { grid-area: p1; }
.tile--p2   { grid-area: p2; }
.tile--p3   { grid-area: p3; }
.tile--p4   { grid-area: p4; }
.tile--v1   { grid-area: v1; }
.tile--v2   { grid-area: v2; }
.tile--v3   { grid-area: v3; }
.tile--v4   { grid-area: v4; }

.tile__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.75rem 0.7rem 0.55rem;
	font-family: var(--su-font-body);
	font-size: var(--su-text-xs);
	letter-spacing: 0.03em;
	color: var(--su-hero-ink);
	background: linear-gradient(transparent, rgba(26, 29, 33, 0.62));
	opacity: 0;
	pointer-events: none;
}

.tile:hover .tile__caption,
.tile:focus-within .tile__caption {
	opacity: 1;
}

@media (max-width: 767px) {
	.mosaic {
		--gap: 8px;
		grid-template-columns: repeat(2, 1fr);
	}

	.m-a,
	.m-ar,
	.m-d {
		grid-template-areas: "b b" "b b" "p1 p2" "p3 p4";
	}

	.m-b { grid-template-areas: "p1 p2" "p3 p4"; }
	.m-c,
	.m-cr { grid-template-areas: "w w" "p1 p2"; }
	.m-e { grid-template-areas: "v1 v2" "v3 v4"; }
	.m-row { grid-template-columns: repeat(min(2, var(--cols, 2)), 1fr); }

	.tile--show-cap .tile__caption {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mosaic img {
		transition: none;
	}

	.tile__link:hover img,
	.tile__link:focus-visible img {
		transform: none;
	}
}

/* Lightbox */
.mosaic-lb[hidden] {
	display: none;
}

.mosaic-lb {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(26, 29, 33, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.mosaic-lb__img {
	max-width: 100%;
	max-height: calc(100vh - 5rem);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.mosaic-lb__caption {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 0.75rem;
	text-align: center;
	color: var(--su-hero-ink, #f7f8f9);
	font-size: var(--su-text-sm, 0.875rem);
}

.mosaic-lb__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: #f7f8f9;
	font-size: 2rem;
	line-height: 1;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

.mosaic-lb__prev { left: 0.25rem; }
.mosaic-lb__next { right: 0.25rem; }

.mosaic-lb__close {
	top: 0.75rem;
	right: 0.75rem;
	transform: none;
	font-size: 1.75rem;
}

body.mosaic-lb-lock {
	overflow: hidden;
}