.gallery-wrap {
	position: relative;
	--gallery-height: 600px;
	--radius: 20px;
}

.gallery-inner { overflow: hidden; }

.gallery-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 2.4rem;
}
.gallery-eyebrow { display: block; margin-bottom: 1rem; }
.gallery-description { margin-top: 1rem; }

.gallery-track {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }

.gallery-item {
	flex: 0 0 auto;
	height: var(--gallery-height);
	scroll-snap-align: start;
}
.gallery-item a {
	display: block;
	height: 100%;
	cursor: zoom-in;
}
.gallery-item img {
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
	object-fit: cover;
}

.gallery-wrap .gallery-item img {
	border-radius: var(--radius);
}


/* ===== Nav arrows — same treatment as the Hero Carousel's ===== */
.gallery-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 48px; height: 48px; border-radius: 50%;
	background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff; font-size: 1.1rem;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: .25s;
}
.gallery-nav:hover { background: var(--teal); border-color: var(--teal); }
.gallery-prev { left: 24px; }
.gallery-next { right: 24px; }

/* ===== Dots — circular photo thumbnails, not plain dots ===== */
.gallery-dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1.6rem;
	padding: 0 6%;
}
.gallery-dot {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	opacity: 0.6;
	transition: .25s;
}
.gallery-dot:hover { opacity: 0.9; }
.gallery-dot.is-active { opacity: 1; border-color: var(--teal); }

/* Non-standard 980px/560px breakpoints matched deliberately — every other
   module in this theme switches at those two widths (not the agency's
   standard 1024/767/480 ranges), so this module follows the same tiers to
   stay visually consistent with everything else on the same page. See the
   assistant's flagged note on this in the delivered summary. */
@media (max-width: 980px) {
	.gallery-wrap { --gallery-height: 320px; }
	.gallery-prev { left: 12px; }
	.gallery-next { right: 12px; }
}
@media (max-width: 560px) {
	.gallery-wrap { --gallery-height: 240px; }
	.gallery-dot { width: 34px; height: 34px; }
}