/**
 * Galleries — front end.
 *
 * Column counts, gap and crop shape arrive as custom properties set inline on the
 * container, so one stylesheet serves every gallery and each one can differ without
 * a single extra rule being written.
 */

.adg {
	--adg-cd: 3;
	--adg-ct: 2;
	--adg-cm: 1;
	--adg-gap: 8px;
	display: grid;
	grid-template-columns: repeat(var(--adg-cd), minmax(0, 1fr));
	gap: var(--adg-gap);
	margin: 0;
}

/* Masonry: CSS columns keep natural heights, which is what mixed 4:5 and 9:16
   material needs. Order runs down each column rather than across, which is the
   known trade and is why grid stays the default. */
.adg--masonry {
	display: block;
	column-count: var(--adg-cd);
	column-gap: var(--adg-gap);
}
.adg--masonry .adg-item {
	break-inside: avoid;
	margin-bottom: var(--adg-gap);
}

.adg-item {
	margin: 0;
	position: relative;
	min-width: 0;
}

.adg-media {
	position: relative;
	overflow: hidden;
	background: var(--bg-3, #eee);
	display: block;
	line-height: 0;
}

.adg-img,
.adg-vid {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--transition, .35s ease), opacity var(--transition, .35s ease);
}

/* Cropped mode: every tile takes the same shape. Only applied when a ratio is
   chosen, because these clips arrive in two shapes and a forced crop cuts one. */
.adg--cropped .adg-media {
	aspect-ratio: var(--adg-ratio);
}
.adg--cropped .adg-img,
.adg--cropped .adg-vid {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- hover ---------- */

.adg--hover-zoom .adg-media:hover .adg-img,
.adg--hover-zoom .adg-media:hover .adg-vid,
.adg--hover-zoom .adg-media:focus-visible .adg-img { transform: scale(1.04); }

.adg--hover-fade .adg-media:hover .adg-img,
.adg--hover-fade .adg-media:hover .adg-vid { opacity: .82; }

.adg-media[data-full],
.adg-media[data-embed] { cursor: zoom-in; }
.adg-media[data-embed] { cursor: pointer; }

.adg-media:focus-visible {
	outline: 2px solid var(--gold, #FFD646);
	outline-offset: 2px;
}

/* ---------- video ---------- */

.adg-media--video { cursor: pointer; }

.adg-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(10, 10, 10, .55);
	pointer-events: none;
	transition: opacity .25s var(--ease-out, ease);
}
.adg-play::after {
	content: "";
	position: absolute;
	left: 54%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #fff;
}
.adg-play--lg { width: 62px; height: 62px; }
.adg-play--lg::after { border-width: 10px 0 10px 17px; }

/* Once it is playing the button gets out of the way. */
.adg-media--video.is-playing .adg-play { opacity: 0; }

/* ---------- captions ---------- */

.adg-cap {
	margin: 8px 0 0;
	font-family: var(--font-body, sans-serif);
	font-size: .8rem;
	line-height: 1.4;
	color: var(--text-faint, #888);
}

/* ---------- lightbox ---------- */

.adg-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(8, 8, 8, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	opacity: 0;
	transition: opacity .2s var(--ease-out, ease);
}
.adg-lb.is-open { opacity: 1; }

.adg-lb img,
.adg-lb iframe {
	max-width: 100%;
	max-height: 100%;
	display: block;
}
.adg-lb iframe {
	width: min(1200px, 100%);
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.adg-lb-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 42px;
	height: 42px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.adg-lb-close:focus-visible { outline: 2px solid var(--gold, #FFD646); }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.adg { grid-template-columns: repeat(var(--adg-ct), minmax(0, 1fr)); }
	.adg--masonry { column-count: var(--adg-ct); }
}

@media (max-width: 640px) {
	.adg { grid-template-columns: repeat(var(--adg-cm), minmax(0, 1fr)); }
	.adg--masonry { column-count: var(--adg-cm); }
	.adg-play { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.adg-img,
	.adg-vid,
	.adg-play,
	.adg-lb { transition: none; }
	.adg--hover-zoom .adg-media:hover .adg-img,
	.adg--hover-zoom .adg-media:hover .adg-vid { transform: none; }
}