/*
 * image-gallery-slider.css — Home page: Image Gallery Slider section.
 *
 * Centered description + an infinite auto-scrolling logo marquee below it,
 * built with a pure CSS animation (two identical logo groups, track
 * translated by exactly -50% — since both halves are identical, the loop
 * restart is visually seamless). No JavaScript needed, including for the
 * pause-on-hover behaviour.
 *
 * Only enqueued on the front page / Home Page template (see inc/enqueue.php).
 *
 * @package Greenova
 */

.image-gallery-slider {
	padding-block: 56px;
}

.image-gallery-slider__description {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      18px;
	font-weight:    400;
	line-height:    25.2px;
	letter-spacing: 0;
	color:          #000000;
	text-align:     center;
	max-width:      704px;
	margin:         0 auto 40px;
}

/* =============================================================================
   Marquee track
   ============================================================================= */

.image-gallery-slider__track-wrap {
	overflow:     hidden;
	width:        100%;
	/* Soft fade at both edges so logos don't hard-clip mid-scroll. */
	mask-image:    linear-gradient( to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100% );
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100% );
}

.image-gallery-slider__track {
	display:   flex;
	width:     max-content;
	animation: greenova-marquee 30s linear infinite;
}

/* Pause on hover — pure CSS, no JS. */
.image-gallery-slider__track-wrap:hover .image-gallery-slider__track {
	animation-play-state: paused;
}

@keyframes greenova-marquee {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}

.image-gallery-slider__group {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
}

.image-gallery-slider__item {
	display:        flex;
	align-items:    center;
	justify-content: center;
	padding-inline: 32px;
	flex-shrink:    0;
}

.image-gallery-slider__logo {
	height:     32px;
	width:      auto;
	max-width:  140px;
	object-fit: contain; /* Never stretched/distorted — original aspect ratio kept. */
}

/* Respect reduced-motion preferences — freeze on the first frame instead of
   forcing continuous motion on users who've asked to avoid it. */
@media ( prefers-reduced-motion: reduce ) {
	.image-gallery-slider__track {
		animation: none;
	}
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 991.98px ) {
	.image-gallery-slider {
		padding-block: 44px;
	}

	.image-gallery-slider__description {
		font-size:   16px;
		line-height: 1.5;
		padding-inline: 16px;
	}

	.image-gallery-slider__track {
		animation-duration: 24s;
	}

	.image-gallery-slider__item {
		padding-inline: 24px;
	}

	.image-gallery-slider__logo {
		height: 28px;
	}
}

@media ( max-width: 575.98px ) {
	.image-gallery-slider {
		padding-block: 32px;
	}

	.image-gallery-slider__description {
		font-size: 15px;
		margin-bottom: 28px;
	}

	.image-gallery-slider__track-wrap {
		mask-image:         linear-gradient( to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100% );
		-webkit-mask-image: linear-gradient( to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100% );
	}

	.image-gallery-slider__track {
		animation-duration: 18s;
	}

	.image-gallery-slider__item {
		padding-inline: 18px;
	}

	.image-gallery-slider__logo {
		height: 24px;
	}
}