/**
 * Contact Gallery Pattern
 *
 * A single top row of three image carousels under the studio/map section:
 * one wide feature (a) + two tall tiles (b, c). Each carousel cross-fades its
 * stacked images with a clip-path wipe (contact-gallery.js — same transition
 * as the services slideshow), on staggered timing so the row feels organic.
 * One pause/play button (JS-injected, shared .ad-pause-btn) sits at the row's
 * bottom-right and controls all three.
 *
 * The slides are absolutely stacked; before JS runs (or with JS disabled) only
 * the first slide of each carousel shows. The grid is excluded from the global
 * scroll-reveal (reveal.js excludeContainers + the custom.css un-hide list), so
 * the stacked slides are never pre-hidden.
 *
 * Pattern: atomicdust/contact-gallery
 * Loaded only when the wrapper class `ad-contact-gallery` appears on the page —
 * see ad_pattern_asset_map() in functions.php.
 */

.ad-contact-gallery__head {
	max-width: 48rem;
}

/* About-page variant only: the intro lead sits above a title|text two-column
   row. Keep the lead to a readable measure; the columns span full content width. */
.ad-contact-gallery__lead {
	max-width: 38rem;
}

.ad-contact-gallery__title {
	line-height: 1;
	letter-spacing: -0.02em;
	font-weight: 300;
	margin: 0;
}

/* --- Row of carousels ------------------------------------------------- */
.ad-contact-gallery__grid {
	position: relative; /* anchors the row-level pause button */
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* Right column = two rows: the small b + c on top, the wide d (≥400px)
	   beneath. The left feature (a) spans BOTH rows, so its height tracks the
	   right column automatically. */
	grid-template-rows: clamp(11rem, 18vw, 15rem) clamp(400px, 30vw, 30rem);
	grid-template-areas:
		"a a b c"
		"a a d d";
	gap: clamp(0.6rem, 1vw, 1rem);
}

/* Neutralise the flow-layout block spacing WP would add between children. */
.ad-contact-gallery__grid > * {
	margin-top: 0;
	margin-bottom: 0;
}

.ad-contact-gallery__carousel--a { grid-area: a; }
.ad-contact-gallery__carousel--b { grid-area: b; }
.ad-contact-gallery__carousel--c { grid-area: c; }
.ad-contact-gallery__carousel--d { grid-area: d; }

/* --- Carousel = stacking context for its slides ----------------------- */
.ad-contact-gallery__carousel {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 0.25rem;
	background-color: var(--wp--preset--color--muted);
}

.ad-contact-gallery__slide {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ad-contact-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: clip-path;
}

/* Pre-JS / no-JS resting state: only the first slide of each carousel shows.
   JS sets these clip-paths inline once it takes over. */
.ad-contact-gallery__slide:not(:first-child) {
	clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}

/* --- Row-level pause/play control (sits below the row, right-aligned) -- */
.ad-contact-gallery__controls {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* --- Tablet: feature on top, two small below, wide module last -------- */
@media (max-width: 1024px) {
	.ad-contact-gallery__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: clamp(11rem, 22vw, 15rem) clamp(9rem, 19vw, 13rem) clamp(400px, 40vw, 26rem);
		grid-template-areas:
			"a a"
			"b c"
			"d d";
	}
}

/* --- Phone: single column stack -------------------------------------- */
@media (max-width: 600px) {
	.ad-contact-gallery__grid {
		grid-template-columns: 1fr;
		grid-template-rows: 56vw 50vw 50vw clamp(320px, 80vw, 400px);
		grid-template-areas:
			"a"
			"b"
			"c"
			"d";
	}
}