/**
 * SAD ACF Gallery
 *
 * Deliberately unopinionated. Every visible value comes from a CSS custom
 * property that an Elementor control writes, so the widget inherits the
 * site's design rather than imposing one.
 *
 * Thumbnail placement is variable-driven rather than class-driven. That is
 * what lets a responsive Elementor control put the thumbnails down the left
 * on desktop and underneath on a phone: classes can't vary by breakpoint,
 * custom properties can.
 */

.sadg {
	--sadg-gap: 12px;
	--sadg-cols: 3;
	--sadg-ratio: auto;
	--sadg-fit: cover;

	/* Written by the thumbnail position control. */
	--sadg-dir: column;
	--sadg-thumbs-dir: row;
	--sadg-rail-basis: auto;
	--sadg-thumb-main: var(--sadg-thumb-basis);
	--sadg-thumb-w: auto;

	--sadg-thumb-basis: 90px;
	--sadg-thumb-count: 5;
	--sadg-thumb-fit: calc(
		(100% - (var(--sadg-gap) * (var(--sadg-thumb-count) - 1))) / var(--sadg-thumb-count)
	);
	--sadg-thumbs-justify: flex-start;
	--sadg-thumb-dim: 0.55;
	--sadg-thumb-active: #111;
	--sadg-thumb-active-width: 2px;

	--sadg-arrow-size: 44px;
	--sadg-arrow-color: #111;
	--sadg-arrow-bg: rgba(255, 255, 255, 0.9);
	--sadg-counter-color: #fff;
	--sadg-counter-bg: rgba(0, 0, 0, 0.6);

	--sadg-play-size: 72px;
	--sadg-play-color: #fff;
	--sadg-play-bg: rgba(0, 0, 0, 0.55);
	--sadg-play-radius: 50%;
	--sadg-badge-size: 24px;
	--sadg-video-fit: cover;
}

.sadg *,
.sadg *::before,
.sadg *::after {
	box-sizing: border-box;
}

.sadg figure {
	margin: 0;
}

.sadg__frame {
	position: relative;
	overflow: hidden;
	max-height: var(--sadg-max-h, none);
	line-height: 0;
}

/* Adaptive stage: the viewport height is set by script to whichever slide is
   showing, so a shorter slide pulls the thumbnails up instead of leaving a
   hole. Slides must not stretch for that to work. */
.sadg--adaptive .sadg__viewport {
	transition: height 0.25s ease;
}

.sadg--adaptive .sadg__slide {
	align-self: flex-start;
}

.sadg__img {
	display: block;
	width: 100%;
	height: auto;
}

/* The height cap works with or without a fixed aspect ratio. With one, the
   frame is capped and the media fills it. Without one, the image caps itself. */
.sadg__img--main,
.sadg__link {
	max-height: var(--sadg-max-h, none);
}

.sadg__img--main {
	object-fit: var(--sadg-fit);
}

/* On original proportions, "show the whole image" means scale it down to the
   cap and centre it. Letterboxing a full-width box would leave dead bars down
   both sides, which is not what anyone wants from that setting. */
.sadg--fit-contain:not(.sadg--fixed-ratio) [data-sadg-type="image"] .sadg__frame,
.sadg--fit-contain:not(.sadg--fixed-ratio) .sadg__link {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sadg--fit-contain:not(.sadg--fixed-ratio) .sadg__img--main {
	width: auto;
	max-width: 100%;
}

/* Fixed-ratio mode: the frame owns the box, the media fills it. This is what
   keeps the layout from shifting while images decode. */
.sadg--fixed-ratio .sadg__frame {
	aspect-ratio: var(--sadg-ratio);
}

.sadg--fixed-ratio .sadg__img {
	height: 100%;
	object-fit: var(--sadg-fit);
}

/* A video slide can be given its own shape. Left unset it inherits the
   gallery ratio, so every slide stays the same height. */
.sadg--fixed-ratio [data-sadg-type="video"] .sadg__frame {
	aspect-ratio: var(--sadg-video-ratio, var(--sadg-ratio));
}

.sadg__link {
	display: block;
	line-height: 0;
}

.sadg__caption {
	line-height: 1.4;
	margin-top: 8px;
}

/* ---------------------------------------------------------------- Grid */

.sadg--grid {
	display: grid;
	grid-template-columns: repeat(var(--sadg-cols), minmax(0, 1fr));
	gap: var(--sadg-gap);
}

/* -------------------------------------------------------------- Slider */

.sadg--slider {
	display: flex;
	flex-direction: var(--sadg-dir);
	gap: var(--sadg-gap);
	align-items: stretch;
}

.sadg__stage {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

/* Scroll-snap does the sliding. No Swiper, no version conflicts with
   Elementor's own copy, and it still works with JavaScript disabled. */
.sadg__viewport {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.sadg__viewport::-webkit-scrollbar {
	display: none;
}

.sadg__viewport:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sadg__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.sadg__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sadg-arrow-size);
	height: var(--sadg-arrow-size);
	padding: calc(var(--sadg-arrow-size) / 4);
	border: 0;
	border-radius: 50%;
	background: var(--sadg-arrow-bg);
	color: var(--sadg-arrow-color);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.sadg__arrow svg {
	width: 100%;
	height: 100%;
}

.sadg__arrow--prev {
	left: 12px;
}

.sadg__arrow--next {
	right: 12px;
}

.sadg__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.sadg__counter {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sadg-counter-bg);
	color: var(--sadg-counter-color);
	font-size: 0.8125rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- Thumbnails */

.sadg__thumbs {
	display: flex;
	flex: 0 0 var(--sadg-rail-basis);
	flex-direction: var(--sadg-thumbs-dir);
	justify-content: var(--sadg-thumbs-justify);
	gap: var(--sadg-gap);
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	max-height: 100%;
}

.sadg__thumbs::-webkit-scrollbar {
	display: none;
}

.sadg__thumb {
	position: relative;
	flex: 0 0 var(--sadg-thumb-main);
	width: var(--sadg-thumb-w);
	padding: 0;
	border: 0;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: var(--sadg-thumb-dim);
	outline: 0 solid var(--sadg-thumb-active);
	outline-offset: calc(var(--sadg-thumb-active-width) * -1);
	transition: opacity 0.2s ease, outline-width 0.15s ease;
}

/* "How many fit across" mode. Only meaningful for a horizontal rail, which
   is why the side positions override the basis back to a fixed width. */
.sadg--thumbs-fit {
	--sadg-thumb-basis: var(--sadg-thumb-fit);
}

.sadg__thumb.is-active {
	opacity: 1;
	outline-width: var(--sadg-thumb-active-width);
}

.sadg__thumb:hover {
	opacity: 1;
}

.sadg__thumb:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sadg__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--sadg-thumb-ratio, var(--sadg-ratio));
	object-fit: cover;
}

.sadg__thumb-blank {
	display: block;
	width: 100%;
	aspect-ratio: var(--sadg-thumb-ratio, var(--sadg-ratio, 3 / 2));
	background: currentColor;
	opacity: 0.12;
}

.sadg__thumb-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sadg-badge-size, 24px);
	height: var(--sadg-badge-size, 24px);
	border-radius: 50%;
	background: var(--sadg-play-bg);
	color: var(--sadg-play-color);
	pointer-events: none;
}

.sadg__thumb-badge svg {
	width: 55%;
	height: 55%;
	/* A play triangle sits visually left of centre when centred
	   geometrically, so nudge it back. */
	margin-left: 6%;
}

/* -------------------------------------------------------------- Video */

/* The poster, the player and the play button all occupy the same box. The
   player is injected at click time, so it has to be positioned rather than
   left in normal flow — otherwise it lands underneath the poster. */
.sadg__video {
	position: relative;
	width: 100%;
	aspect-ratio: var(--sadg-video-ratio, 16 / 9);
	overflow: hidden;
	line-height: 0;
	background: #000;
}

.sadg--fixed-ratio .sadg__video {
	aspect-ratio: auto;
	height: 100%;
}

.sadg__video > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
}

.sadg__video .sadg__img,
.sadg__video-el {
	display: block;
	object-fit: var(--sadg-video-fit, var(--sadg-fit));
}

.sadg__video iframe {
	display: block;
}

/* Once the player is in, the poster has done its job. */
.sadg__video.is-playing .sadg__img,
.sadg__video.is-playing .sadg__video-blank {
	opacity: 0;
	visibility: hidden;
}

.sadg__video-blank {
	background: #000;
}

.sadg__play {
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	color: var(--sadg-play-color);
	cursor: pointer;
}

.sadg__play::before {
	content: "";
	position: absolute;
	width: var(--sadg-play-size);
	height: var(--sadg-play-size);
	border-radius: var(--sadg-play-radius);
	background: var(--sadg-play-bg);
	transition: transform 0.2s ease;
}

.sadg__play svg {
	position: relative;
	width: calc(var(--sadg-play-size) * 0.5);
	height: calc(var(--sadg-play-size) * 0.5);
	margin-left: calc(var(--sadg-play-size) * 0.04);
}

.sadg__play:hover::before {
	transform: scale(1.08);
}

.sadg__play:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.sadg__video.is-playing .sadg__play {
	display: none;
}

/* The bar exists only in arrows mode. It stands in for the rail as the flex
   child, so it takes on the rail's sizing and direction. */
.sadg__thumbs-bar {
	display: flex;
	flex: 0 0 var(--sadg-rail-basis);
	flex-direction: var(--sadg-thumbs-dir);
	align-items: center;
	gap: calc(var(--sadg-gap) / 2);
	min-width: 0;
	min-height: 0;
}

.sadg__thumbs-bar .sadg__thumbs {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}

.sadg__thumb-nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sadg-nav-size, 28px);
	height: var(--sadg-nav-size, 28px);
	padding: calc(var(--sadg-nav-size, 28px) / 5);
	border: 0;
	border-radius: 50%;
	background: var(--sadg-arrow-bg);
	color: var(--sadg-arrow-color);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.sadg__thumb-nav svg {
	width: 100%;
	height: 100%;
	/* A side-mounted rail scrolls vertically, so the chevrons turn with it. */
	transform: rotate(var(--sadg-nav-rotate, 0deg));
}

.sadg__thumb-nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

.sadg__thumb-nav[hidden] {
	display: none;
}

/* Wrap mode: nothing scrolls, the thumbnails flow onto as many rows as they
   need. Sizing by "how many fit across" is what makes the rows even. */
.sadg--thumbs-wrap .sadg__thumbs {
	flex-wrap: wrap;
	overflow: visible;
	max-height: none;
}

/* --------------------------------------------------------- 360 spin */

/* Everything inside is absolutely positioned, so this box has no in-flow
   content and must get its height from the ratio or from the frame. The
   fallback here has to be a concrete ratio: chaining it to --sadg-ratio would
   resolve to "auto" on original proportions and collapse the slide. */
.sadg__spin {
	position: relative;
	width: 100%;
	aspect-ratio: var(--sadg-spin-ratio, 1 / 1);
	max-height: var(--sadg-max-h, none);
	overflow: hidden;
	line-height: 0;
}

/* The ratio is written inline per slide by the renderer, so the spin box has
   a definite height in every mode without measuring anything. */

.sadg__spin > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
}

.sadg__spin .sadg__img {
	display: block;
	object-fit: var(--sadg-fit);
	/* The container already owns the sizing here. */
	max-height: none;
}

/* The poster is absolutely positioned inside the spin box, so it must not
   inherit the width:auto that contain mode applies to in-flow main images.
   Stated at the same weight as that rule, and later, so it wins. */
.sadg--fit-contain .sadg__spin > .sadg__spin-poster,
.sadg--fit-cover .sadg__spin > .sadg__spin-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: var(--sadg-fit);
	object-position: center;
}

/* In contain mode the frame becomes a flex box to centre the image. Media
   containers must not be shrunk by that. */
.sadg__spin,
.sadg__video {
	flex: 1 0 100%;
}

/* The poster covers Sirv's container until their viewer has started. */
.sadg__spin.is-live .sadg__img,
.sadg__spin.is-live .sadg__play,
.sadg__spin.is-live .sadg__video-blank {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.sadg__spin.is-loading .sadg__play {
	opacity: 0.5;
	cursor: progress;
}

/* Sirv injects its own markup here and measures the box, so it must not be
   collapsed or hidden while it initializes. */
.sadg__spin-stage {
	z-index: 0;
}

.sadg__play--spin svg {
	width: calc(var(--sadg-play-size) * 0.55);
	height: calc(var(--sadg-play-size) * 0.55);
	margin-left: 0;
}

.sadg__thumb-badge--spin svg {
	width: 65%;
	height: 65%;
	margin-left: 0;
}

/* ------------------------------------------------------ Editor notice */

.sadg-notice {
	padding: 16px 20px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	opacity: 0.6;
	font-size: 0.875rem;
	text-align: center;
}

/* --------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.sadg__viewport {
		scroll-behavior: auto;
	}

	.sadg__arrow,
	.sadg__thumb,
	.sadg__play::before {
		transition: none;
	}
}