/* =========================================================
   Gallery page (page-gallery.php)

   Live is black end to end, and lays the photographs out in a repeating
   five-image cycle: a row of two wide ones, then a row of three tall ones.
   A six-column grid reproduces that exactly — wide spans three columns,
   tall spans two — and the two crops carry the live aspect ratios.
   ========================================================= */
/* The banner carries the FAQs photograph, so it keeps the shared dark
   treatment and gradient; only the lead needs more room than the 640px
   default, since live runs the intro paragraph wider. */
.page-banner--gallery .page-banner__text { max-width: 980px; }

.sp-gallery { background: #000; }

.sp-gallery__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 11px;
}
.sp-gallery__item { margin: 0; }
/* [hidden] on a grid child loses to `display: grid/block`, so say it louder. */
.sp-gallery__item[hidden] { display: none; }

.sp-gallery__item--wide { grid-column: span 3; }
.sp-gallery__item--tall { grid-column: span 2; }
.sp-gallery__item--wide .sp-gallery__link { aspect-ratio: 714 / 492; }
.sp-gallery__item--tall .sp-gallery__link { aspect-ratio: 473 / 534; }

.sp-gallery__link {
	display: block;
	position: relative;
	overflow: hidden;
	background: #111;
}
.sp-gallery__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease, opacity .3s ease;
}
.sp-gallery__link:hover img { transform: scale(1.05); opacity: .88; }
.sp-gallery__link:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }

/* A magnifier badge, so the thumbnails read as openable rather than as links
   to another page. */
.sp-gallery__link::after {
	content: "";
	position: absolute;
	right: .85rem;
	bottom: .85rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 1.3rem no-repeat;
	opacity: 0;
	transform: scale(.85);
	transition: opacity .3s ease, transform .3s ease;
}
.sp-gallery__link:hover::after,
.sp-gallery__link:focus-visible::after { opacity: 1; transform: scale(1); }

.sp-gallery__more { display: flex; justify-content: center; margin-top: 2.5rem; }

@media (max-width: 575.98px) {
	.sp-gallery__grid { gap: 8px; }
	.sp-gallery__more { margin-top: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sp-gallery__link img,
	.sp-gallery__link::after { transition: none; }
	.sp-gallery__link:hover img { transform: none; }
}