/**
 * Dynamic Gallery block front-end styles.
 *
 * Layout is fully driven by row-level CSS custom properties emitted by
 * render.php — no JS measurement participates in sizing. Controls
 * (arrows, dots) stay hidden until view.js adds `.is-initialized`, so a
 * no-JS visitor sees a clean static first view.
 *
 * @package WpmintyAddon
 */

/* ======================================================================
 * Root container
 * ==================================================================== */

.wp-block-wpminty-dynamic-gallery {
	/*
	 * Active variables switched by the media queries below. The gap chain
	 * deliberately has no terminal fallback: when no blockGap is set the
	 * variable stays invalid, so each consumer's own fallback applies (0px
	 * for the carousel slides, 16px for the stage-to-track spacing, clamp()
	 * for the legacy grid). Adding a 0px default
	 * here would make those fallbacks unreachable.
	 */
	--wpminty-dg-spv: var(--wpminty-dg-spv-desktop, 1);
	--wpminty-dg-gap: var(--wpminty-dg-gap-desktop);
	/*
	 * Active thumbnail width. render.php always emits --wpminty-dg-thumb-width
	 * from the validated thumbnailWidth attribute, and --wpminty-dg-thumb-scale
	 * is the per-breakpoint factor the media queries below switch. Splitting the
	 * two keeps the 80px fallback (the block.json default) in a single place
	 * instead of repeating it per breakpoint, and lets the thumb buttons and the
	 * left/right rails consume one variable so their widths can never drift
	 * apart. The fallback is not optional: a missing property would make the
	 * whole chain invalid at computed-value time and reset width to auto.
	 */
	--wpminty-dg-thumb-scale: 1;
	--wpminty-dg-thumb-w: calc( var(--wpminty-dg-thumb-width, 80px) * var(--wpminty-dg-thumb-scale) );
	position: relative;
}

/* ======================================================================
 * Stage (carousel layout)
 * ==================================================================== */

.wpminty-dg__stage {
	position: relative;
	overflow: hidden;
}

.wpminty-dg__main-viewport {
	overflow: hidden;
}

.wpminty-dg__main-container {
	display: flex;
	gap: var(--wpminty-dg-gap, 0px);
}

/* Each slide. */
.wpminty-dg__slide {
	position: relative;
	flex: 0 0 calc(
		(100% - (var(--wpminty-dg-spv, 1) - 1) * var(--wpminty-dg-gap, 0px)) /
			var(--wpminty-dg-spv, 1)
	);
	min-width: 0;
}

/*
 * Embla loop wrap-around gap. CSS `gap` only exists between consecutive DOM
 * siblings, so the seam where the last slide wraps back to the first has
 * none. Embla measures that seam from the last slide's `margin-{endEdge}`
 * (SlideSizes → measureEndGap), which reads 0 under a container-gap layout
 * and makes the first/last slides touch. Compensate with one gap of trailing
 * margin on the last slide only.
 *
 * Non-loop note: Embla sets readEdgeGap = loop || containScroll, so without
 * loop this margin is ignored by the engine and clipped by the viewport's
 * overflow — spacing stays identical.
 */
.wpminty-dg__main-container > .wpminty-dg__slide:last-child {
	margin-inline-end: var(--wpminty-dg-gap, 0px);
}

/* Aspect ratio enforcement. */
.wpminty-dg__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wpminty-dg-ratio, auto);
	object-fit: cover;
}

/* Slide caption overlay. */
.wpminty-dg__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: clamp(8px, 2vw, 16px);
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
	font-size: 0.875rem;
	line-height: 1.4;
	pointer-events: none;
}

/* ======================================================================
 * Arrows
 * ==================================================================== */

.wpminty-dg__arrow {
	display: none;
	position: absolute;
	z-index: 2;
	width: 44px;
	height: 44px;
	top: 50%;
	padding: 0;
	color: #fff;
	background: rgba(17, 17, 17, 0.55);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.wpminty-dg__arrow:hover {
	background: rgba(17, 17, 17, 0.8);
}

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

.wpminty-dg__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.wpminty-dg__arrow svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wpminty-dg__arrow--prev {
	left: clamp(8px, 2vw, 16px);
}

.wpminty-dg__arrow--next {
	right: clamp(8px, 2vw, 16px);
}

/* ======================================================================
 * Dots
 * ==================================================================== */

.wpminty-dg__dots {
	display: none;
	position: absolute;
	left: 50%;
	bottom: clamp(10px, 2vw, 20px);
	z-index: 2;
	transform: translateX(-50%);
	gap: 8px;
	max-width: calc(100% - 120px);
	flex-wrap: wrap;
	justify-content: center;
}

.wpminty-dg__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wpminty-dg__dot:hover {
	background: rgba(255, 255, 255, 0.85);
}

.wpminty-dg__dot.is-current {
	background: #fff;
	transform: scale(1.5);
}

.wpminty-dg__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ======================================================================
 * Counter
 * ==================================================================== */

.wpminty-dg__counter {
	position: absolute;
	right: clamp(8px, 2vw, 16px);
	bottom: clamp(10px, 2vw, 20px);
	z-index: 2;
	padding: 4px 10px;
	color: #fff;
	background: rgba(17, 17, 17, 0.55);
	border-radius: 4px;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

/* ======================================================================
 * Reveal controls once initialized
 * ==================================================================== */

.wpminty-dg.is-initialized .wpminty-dg__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wpminty-dg.is-initialized .wpminty-dg__dots:not([hidden]) {
	display: flex;
}

/* ======================================================================
 * Thumbnails (carousel layout)
 * ==================================================================== */

.wpminty-dg__thumbs-viewport {
	overflow: hidden;
}

/*
 * Rail: sizing wrapper around the thumbs viewport. Plain block for
 * bottom/top (natural flow height); for left/right on desktop it becomes
 * the sized, stretched box the absolutely positioned viewport fills, so
 * the row height is driven by the stage only and the track is clipped to
 * it while staying scrollable inside Embla.
 */
.wpminty-dg__rail {
	width: 100%;
	min-width: 0;
}

.wpminty-dg__thumbs-container {
	display: flex;
	gap: var(--wpminty-dg-thumb-gap, 8px);
}

/*
 * Stage ↔ thumbnail track spacing. Every position turns the block root into a
 * flex container so a single shared gap (the Dimensions blockGap value) can
 * separate the stage from the track. Out-of-flow children (injected by Pro
 * extensions) are unaffected by the flex gap.
 * The 16px fallback is the default stage-to-track spacing, mirroring the
 * blockGap __experimentalDefault in block.json.
 */
.wpminty-dg--thumbs-bottom,
.wpminty-dg--thumbs-top,
.wpminty-dg--thumbs-left,
.wpminty-dg--thumbs-right {
	display: flex;
	gap: var(--wpminty-dg-gap, 16px);
}

/* Stacked positions: stage and track share the full block width. */
.wpminty-dg--thumbs-bottom {
	flex-direction: column;
}

.wpminty-dg--thumbs-top {
	flex-direction: column-reverse;
}

/* Horizontal thumbs (default: bottom / top). */
.wpminty-dg--thumbs-bottom .wpminty-dg__thumbs-container,
.wpminty-dg--thumbs-top .wpminty-dg__thumbs-container {
	flex-direction: row;
}

/* Vertical thumbs (left / right). */
.wpminty-dg--thumbs-left,
.wpminty-dg--thumbs-right {
	flex-direction: row;
}

.wpminty-dg--thumbs-left {
	flex-direction: row-reverse;
}

.wpminty-dg--thumbs-left .wpminty-dg__thumbs-container,
.wpminty-dg--thumbs-right .wpminty-dg__thumbs-container {
	flex-direction: column;
	/*
	 * Embla measures the "view size" from the container element itself
	 * (Engine → axis.measureSize(containerRect)), not from the viewport.
	 * A content-sized column (taller than the viewport) would make Embla
	 * conclude everything fits and collapse the scroll snaps to a single
	 * entry. Pinning the container to the viewport height keeps the real
	 * overflow in the slides, so the y track stays scrollable.
	 */
	height: 100%;
}

.wpminty-dg--thumbs-left .wpminty-dg__stage,
.wpminty-dg--thumbs-right .wpminty-dg__stage {
	flex: 1;
	min-width: 0;
}

/*
 * Side rails: the rail stretches to the flex row (height == stage height)
 * and carries no in-flow content of its own, so the row height is decided
 * by the stage alone. The viewport fills the rail absolutely and its own
 * overflow: hidden clips the overflow; Embla still scrolls it internally.
 * The rail is exactly one thumb wide (active variable, breakpoint-scaled),
 * so the column never shows a sliver of the neighbouring thumb.
 */
.wpminty-dg--thumbs-left .wpminty-dg__rail,
.wpminty-dg--thumbs-right .wpminty-dg__rail {
	position: relative;
	align-self: stretch;
	flex: 0 0 auto;
	width: var(--wpminty-dg-thumb-w);
}

.wpminty-dg--thumbs-left .wpminty-dg__thumbs-viewport,
.wpminty-dg--thumbs-right .wpminty-dg__thumbs-viewport {
	position: absolute;
	inset: 0;
	width: 100%;
}

/* Thumb button. */
.wpminty-dg__thumb {
	flex: 0 0 auto;
	width: var(--wpminty-dg-thumb-w);
	height: clamp(50px, 10vw, 80px);
	padding: 0;
	border: 0;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s ease, opacity 0.2s ease;
	opacity: 0.6;
	background: none;
}

.wpminty-dg__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Shared aspect ratio: thumbnails follow the same ratio as the main image.
 * Width follows the thumbnailWidth property (breakpoint-scaled through the
 * active variable), height is derived from the ratio.
 */
.wpminty-dg--has-ratio .wpminty-dg__thumb {
	height: auto;
}

.wpminty-dg--has-ratio .wpminty-dg__thumb img {
	height: auto;
	aspect-ratio: var(--wpminty-dg-ratio);
}

.wpminty-dg__thumb:hover {
	opacity: 0.85;
}

.wpminty-dg__thumb.is-active {
	border-color: #fff;
	opacity: 1;
}

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

/* ======================================================================
 * Grid layout
 * ==================================================================== */

.wpminty-dg--layout-grid .wpminty-dg__grid {
	display: grid;
	grid-template-columns: repeat(var(--wpminty-dg-spv, 3), 1fr);
	/* clamp() fallback keeps pre-blockGap content unchanged. */
	gap: var(--wpminty-dg-gap, clamp(8px, 2vw, 16px));
}

.wpminty-dg--layout-grid .wpminty-dg__slide {
	flex: none;
}

.wpminty-dg--layout-grid .wpminty-dg__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Explicit ratio wins over the stretch-to-row behavior in grid layout. */
.wpminty-dg--has-ratio.wpminty-dg--layout-grid .wpminty-dg__slide img {
	height: auto;
}

/* ======================================================================
 * Fade transition
 * ==================================================================== */

.wpminty-dg--fade .wpminty-dg__main-container .wpminty-dg__slide {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.wpminty-dg--fade .wpminty-dg__main-container .wpminty-dg__slide.is-selected {
	opacity: 1;
}

/* ======================================================================
 * Lightbox overlay
 * ==================================================================== */

.wpminty-dg-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100001;
	align-items: center;
	justify-content: center;
}

.wpminty-dg-lightbox.is-active {
	display: flex;
}

.wpminty-dg-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
}

.wpminty-dg-lightbox__content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90vw;
	max-height: 85vh;
}

.wpminty-dg-lightbox__content img {
	display: block;
	max-width: 100%;
	max-height: 85vh;
	object-fit: contain;
}

.wpminty-dg-lightbox__close {
	position: absolute;
	top: clamp(12px, 3vw, 24px);
	right: clamp(12px, 3vw, 24px);
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wpminty-dg-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.wpminty-dg-lightbox__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 48px;
	height: 48px;
	padding: 0;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s ease;
}

.wpminty-dg-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.3);
}

.wpminty-dg-lightbox__nav--prev {
	left: clamp(12px, 3vw, 24px);
}

.wpminty-dg-lightbox__nav--next {
	right: clamp(12px, 3vw, 24px);
}

.wpminty-dg-lightbox__counter {
	position: absolute;
	bottom: clamp(12px, 3vw, 24px);
	left: 50%;
	z-index: 2;
	padding: 6px 14px;
	color: #fff;
	background: rgba(17, 17, 17, 0.6);
	border-radius: 4px;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	transform: translateX(-50%);
}

/* ======================================================================
 * Responsive switching. Breakpoint values must mirror theme.json
 * settings.viewport (mobile: 600px, tablet: 960px).
 * ==================================================================== */

/* Must mirror theme.json settings.viewport (tablet: 960px). */
@media (max-width: 960px) {
	.wpminty-dg {
		--wpminty-dg-spv: var(--wpminty-dg-spv-tablet, var(--wpminty-dg-spv-desktop, 1));
		--wpminty-dg-gap: var(--wpminty-dg-gap-tablet, var(--wpminty-dg-gap-desktop));
		/* Thumbnails scale to 85% of the configured width; height rule unchanged. */
		--wpminty-dg-thumb-scale: 0.85;
	}

	.wpminty-dg--layout-grid .wpminty-dg__grid {
		grid-template-columns: repeat(var(--wpminty-dg-spv-tablet, 2), 1fr);
	}
}

/* Must mirror theme.json settings.viewport (mobile: 600px). */
@media (max-width: 600px) {
	.wpminty-dg {
		--wpminty-dg-spv: var(--wpminty-dg-spv-mobile, var(--wpminty-dg-spv-tablet, var(--wpminty-dg-spv-desktop, 1)));
		--wpminty-dg-gap: var(--wpminty-dg-gap-mobile, var(--wpminty-dg-gap-tablet, var(--wpminty-dg-gap-desktop)));
		/* Thumbnails scale to 70% of the configured width; height rule unchanged. */
		--wpminty-dg-thumb-scale: 0.7;
	}

	.wpminty-dg--layout-grid .wpminty-dg__grid {
		grid-template-columns: repeat(var(--wpminty-dg-spv-mobile, 1), 1fr);
	}

	/* Force horizontal thumbs on mobile regardless of desktop position. */
	.wpminty-dg--thumbs-left,
	.wpminty-dg--thumbs-right {
		flex-direction: column;
	}

	/* Back to natural flow: static rail + horizontal track below the stage. */
	.wpminty-dg--thumbs-left .wpminty-dg__rail,
	.wpminty-dg--thumbs-right .wpminty-dg__rail {
		position: static;
		width: 100%;
	}

	.wpminty-dg--thumbs-left .wpminty-dg__thumbs-viewport,
	.wpminty-dg--thumbs-right .wpminty-dg__thumbs-viewport {
		position: static;
		width: 100%;
	}

	.wpminty-dg--thumbs-left .wpminty-dg__thumbs-container,
	.wpminty-dg--thumbs-right .wpminty-dg__thumbs-container {
		flex-direction: row;
		/* Horizontal track: the row height is content-driven again. */
		height: auto;
	}
}

/* ======================================================================
 * Reduced motion
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wpminty-dg__arrow,
	.wpminty-dg__dot,
	.wpminty-dg__thumb,
	.wpminty-dg-lightbox__nav,
	.wpminty-dg-lightbox__close {
		transition: none;
	}

	.wpminty-dg__dot.is-current {
		transform: none;
	}
}