/**
 * Reusable media gallery (carousel/grid swiper).
 *
 * Markup: myde_gallery_html() (inc/gallery.php). Slider: assets/js/gallery-slider.js.
 * Shared across post types (portfolio floors, blog posts).
 */

.media-gallery {
	display: block;
}

.media-gallery__item {
	display: block;
	aspect-ratio: 390 / 278;
	overflow: hidden;
	background: #000;
}

.media-gallery--hero-main .media-gallery__item {
	aspect-ratio: 16 / 9;
}

.media-gallery--full-width .media-gallery__item {
	aspect-ratio: 1360 / 613;
}

.media-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.media-gallery__item:hover img {
	transform: scale(1.03);
}

.media-gallery__swiper {
	position: relative;
	overflow: hidden;
}

/*
 * Safari/macOS respects aspect-ratio on a flex item only when it is not
 * stretched on the cross axis. The default align-items: stretch on Swiper's
 * .swiper-wrapper makes the slides grow vertically, so pin them to the start.
 */
.media-gallery__swiper .swiper-wrapper {
	align-items: flex-start;
}

.media-gallery__swiper .media-gallery__item {
	height: auto;
	align-self: flex-start;
	min-height: 0;
}

.media-gallery__nav.glass-button {
	--glass-size: 40px;
	padding: 0;
}

.media-gallery__nav--prev .glass-button__content img {
	transform: scaleX(-1);
}

.media-gallery__nav {
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
}

.media-gallery__nav--prev {
	left: 0;
}

.media-gallery__nav--next {
	right: 0;
}

.media-gallery__nav.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}