/*
 * RETI Gallery Slider — kiểu "Slide chạy ngang" cho core/gallery.
 *
 * Dải trượt = hai lượt ảnh giống hệt nhau nối đuôi. Dịch đúng -50% rồi lặp lại
 * là liền mạch, vì lúc ấy lượt hai nằm đúng chỗ lượt một lúc bắt đầu. Để -50%
 * chính xác, khoảng cách giữa ảnh đi bằng padding của từng ảnh chứ không bằng
 * `gap`: `gap` có N-1 khe cho N ảnh, nên một nửa dải không còn là một lượt.
 *
 * Core gallery đặt độ rộng ảnh bằng `figure.wp-block-image:not(#individual-image)`
 * (có độ đặc hiệu của một id). Các selector bên dưới mang cùng `:not(#…)` để
 * thắng nó bằng độ đặc hiệu, không cần !important.
 */

.wp-block-gallery.has-nested-images.is-style-reti-slide {
	display: block;
}

.reti-gallery-slider {
	--reti-slider-visible: 4.5;
	--reti-slider-gap: var(--wp--style--unstable-gallery-gap, var(--wp--preset--spacing--xs, 1rem));
	container-type: inline-size;
	overflow: hidden;
	width: 100%;
	/* Mờ dần hai mép để ảnh trôi vào/ra chứ không bị cắt ngang. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.reti-gallery-slider__track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: reti-gallery-slide var(--reti-slider-duration, 32s) linear infinite;
}

/* Dừng lại khi người xem trỏ chuột vào hoặc Tab tới một ảnh. */
.reti-gallery-slider:hover .reti-gallery-slider__track,
.reti-gallery-slider:focus-within .reti-gallery-slider__track {
	animation-play-state: paused;
}

.reti-gallery-slider__item {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: calc(100cqi / var(--reti-slider-visible));
	margin: 0;
	padding-inline-end: var(--reti-slider-gap);
}

.wp-block-gallery.has-nested-images.is-style-reti-slide .reti-gallery-slider__item figure.wp-block-image:not(#reti-slide) {
	width: 100%;
	max-width: none;
	margin: 0;
	flex: none;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md, 0.75rem);
}

.wp-block-gallery.has-nested-images.is-style-reti-slide .reti-gallery-slider__item figure.wp-block-image:not(#reti-slide) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.wp-block-gallery.has-nested-images.is-style-reti-slide .reti-gallery-slider__item figure.wp-block-image:not(#reti-slide) a {
	display: block;
	width: 100%;
}

.reti-gallery-slider__link:hover img,
.reti-gallery-slider__link:focus-visible img {
	transform: scale(1.04);
}

.reti-gallery-slider__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand, currentColor);
	outline-offset: -2px;
}

@keyframes reti-gallery-slide {
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 1024px) {
	.reti-gallery-slider {
		--reti-slider-visible: 3.2;
	}
}

@media (max-width: 600px) {
	.reti-gallery-slider {
		--reti-slider-visible: 1.6;
	}
}

/*
 * Người dùng đã xin giảm chuyển động: không trôi nữa, thay bằng một dải vuốt
 * ngang có bắt điểm, và bỏ các ảnh lặp (chúng chỉ tồn tại để vòng trôi liền).
 */
@media (prefers-reduced-motion: reduce) {
	.reti-gallery-slider {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.reti-gallery-slider__track {
		animation: none;
	}

	.reti-gallery-slider__item {
		scroll-snap-align: start;
	}

	.reti-gallery-slider__item.is-clone {
		display: none;
	}

	.reti-gallery-slider__link:hover img,
	.reti-gallery-slider__link:focus-visible img {
		transform: none;
	}
}