/**
 * Gallery Carousel -- sliding image strip with auto-rotation.
 *
 * Structure:
 *   .sahliyeh-gallery-carousel          (overflow-hidden container)
 *     .sahliyeh-gallery-carousel__track  (flex row, translated via JS)
 *       .wp-block-image ...              (individual gallery images)
 *
 * JS clones images for seamless infinite looping, sets
 * --gallery-carousel-image-w on the track, and drives the
 * translateX transition on a 5-second interval.
 */

/* Container -- clips the sliding track. */
.sahliyeh-gallery-carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Override WP flex group justify-content so track aligns left. */
	justify-content: flex-start !important; /* WP applies justify-content via inline style on flex groups */
}

/* Sliding track -- flex row driven by JS transform.
 * justify-content must override WP's inline style from the
 * flexWrap/justifyContent block attributes, hence !important.
 * width: max-content ensures the track expands to fit all images
 * rather than being constrained by the overflow:hidden parent. */
.sahliyeh-gallery-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start !important; /* WP applies justify-content:center via inline style */
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
	width: max-content;
	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

/* Individual images -- sized via a CSS custom property set by JS.
 * !important overrides inline width/height from WP block attributes
 * (e.g. style="width:232px;height:498px") which cannot be beaten by
 * specificity alone since they are inline styles. */
.sahliyeh-gallery-carousel__track .wp-block-image {
	flex: 0 0 var(--gallery-carousel-image-w, 232px);
	min-width: 0;
	width: var(--gallery-carousel-image-w, 232px) !important;
	height: auto !important;
}

/* !important overrides inline width/height attributes on <img> elements
 * set by WordPress when images are resized in the editor. */
.sahliyeh-gallery-carousel__track .wp-block-image img {
	width: 100% !important;
	aspect-ratio: 16/9;
	height: auto !important;
	object-fit: cover;
	display: block;
}

/* Mobile: reduce gap. */
@media (max-width: 767px) {
	.sahliyeh-gallery-carousel__track {
		gap: var(--wp--preset--spacing--20);
	}
}

/* Pause animation on hover for accessibility. */
.sahliyeh-gallery-carousel[data-paused="true"] .sahliyeh-gallery-carousel__track {
	transition-duration: 0s;
}

/* Navigation arrows: centered at bottom of carousel */
.sahliyeh-gallery-carousel__arrows {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	padding-top: var(--wp--preset--spacing--40);
}

.sahliyeh-gallery-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--theme-01);
	cursor: pointer;
	padding: 0;
	transition: opacity 0.2s ease;
}

.sahliyeh-gallery-carousel__arrow:hover {
	opacity: 0.7;
}

.sahliyeh-gallery-carousel__arrow svg {
	width: 16px;
	height: 16px;
}

/* FOUC prevention: before JS initializes, limit visible images
 * to the container width. The overflow:hidden clips excess images,
 * but hide cloned images until JS is ready. */
.sahliyeh-gallery-carousel:not(.is-initialized) .sahliyeh-gallery-carousel__track {
	overflow: hidden;
}

/* Reduced motion -- disable sliding entirely. */
@media (prefers-reduced-motion: reduce) {
	.sahliyeh-gallery-carousel__track {
		transition: none;
	}
}