/**
 * Block: Media Slider (dhukr/media-slider).
 * Depends on tokens.css, global.css and the shared slider and video assets.
 */

.dh-media-slider__intro {
	display: flex;
	flex-direction: column;
	gap: var(--dh-space-12);
	margin-bottom: var(--dh-space-32);
}

.dh-media-slider__title {
	color: var(--dh-color-heading);
	text-transform: uppercase;
}

.dh-media-slider__slider--4 {
	--dh-slider-per-view: 4;
}

.dh-media-slider__slider--3 {
	--dh-slider-per-view: 3;
}

/* Images: portrait cards (342 x 402 in Figma). Videos: 16:9 (video.css). */
.dh-media-slider__img {
	width: 100%;
	height: auto;
	border-radius: var(--dh-radius-card);
	aspect-ratio: 342 / 402;
	object-fit: cover;
}

@media screen and (max-width: 1200px) {
	.dh-media-slider__slider--4,
	.dh-media-slider__slider--3 {
		--dh-slider-per-view: 2;
	}
}

@media only screen and (max-width: 768px) {
	.dh-media-slider__slider--4,
	.dh-media-slider__slider--3 {
		--dh-slider-per-view: 1.2;
	}
}


/* ==========================================================================
   Lightbox (images only). Not designed in Figma: built from tokens.
   ========================================================================== */

/* Image trigger is a <button>: remove the default button look. */
.dh-media-slider__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.dh-lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--dh-space-64) calc(var(--dh-slider-arrow-size) + var(--dh-space-32));
	border: 0;
	background: transparent;
}

.dh-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.dh-lightbox::backdrop {
	background: var(--dh-overlay-lightbox);
}

/* No page scroll behind the open lightbox. */
html:has(.dh-lightbox[open]) {
	overflow: hidden;
}

/* The whole image, in its real proportions. */
.dh-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: var(--dh-radius-card);
	object-fit: contain;
}

.dh-lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dh-slider-arrow-size);
	height: var(--dh-slider-arrow-size);
	padding: 0;
	border: var(--dh-border-width) solid var(--dh-color-white);
	border-radius: var(--dh-radius-round);
	background: transparent;
	color: var(--dh-color-white);
	cursor: pointer;
	transition: background-color var(--dh-transition-fast), color var(--dh-transition-fast);
	--dh-color-focus: var(--dh-color-focus-on-dark);
}

.dh-lightbox__btn:hover {
	background-color: var(--dh-color-white);
	color: var(--dh-color-green-900);
}

.dh-lightbox__btn[hidden] {
	display: none;
}

.dh-lightbox__close {
	top: var(--dh-space-16);
	right: var(--dh-space-16);
}

.dh-lightbox__prev,
.dh-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
}

.dh-lightbox__prev {
	left: var(--dh-space-16);
}

.dh-lightbox__next {
	right: var(--dh-space-16);
}

@media only screen and (max-width: 768px) {
	.dh-lightbox {
		padding: var(--dh-space-64) var(--dh-space-16);
	}

	/* Arrows move below the image on small screens. */
	.dh-lightbox__prev,
	.dh-lightbox__next {
		top: auto;
		bottom: var(--dh-space-16);
		transform: none;
	}

	.dh-lightbox__prev {
		left: calc(50% - var(--dh-slider-arrow-size) - var(--dh-space-8));
	}

	.dh-lightbox__next {
		right: calc(50% - var(--dh-slider-arrow-size) - var(--dh-space-8));
	}
}