/* ==========================================================================
   Image slider ([tech_ae_image_slider]) — continuous loop, pauses on hover, no arrows.
   Images 180 × 100 (or the shortcode's width / height). The track holds the list twice and
   moves left by one copy (-50%).
   ========================================================================== */
.tech-ae-imgs {
	--tech-ae-imgs-gap: 16px;
	position: relative;
	overflow: hidden;
	padding-block: 6px; /* Room for the hover lift. */
	/* Soft fade at both edges */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.tech-ae-imgs__track {
	display: flex;
	width: max-content;
	animation: tech-ae-imgs-scroll var(--tech-ae-imgs-duration, 36s) linear infinite;
	will-change: transform;
}

.tech-ae-imgs:hover .tech-ae-imgs__track,
.tech-ae-imgs:focus-within .tech-ae-imgs__track {
	animation-play-state: paused;
}

.tech-ae-imgs__list {
	display: flex;
	flex-shrink: 0;
	gap: var(--tech-ae-imgs-gap);
	margin: 0;
	padding: 0 var(--tech-ae-imgs-gap) 0 0; /* Same gap after the last image, so the loop has no jump. */
	list-style: none;
}

.tech-ae-imgs__item {
	flex: 0 0 var(--tech-ae-imgs-w, 180px);
	width: var(--tech-ae-imgs-w, 180px);
	height: var(--tech-ae-imgs-h, 100px);
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--tech-ae-border);
	border-radius: var(--tech-ae-radius);
	background: var(--tech-ae-white);
	transition: border-color var(--tech-ae-ease), transform var(--tech-ae-ease), box-shadow var(--tech-ae-ease);
}

.tech-ae-imgs__item:hover {
	border-color: rgba(11, 81, 153, .35);
	box-shadow: 0 10px 22px -16px rgba(11, 81, 153, .6);
	transform: translateY(-3px);
}

/* Two classes, so Elementor's ".elementor img { height: auto }" can't override it */
.tech-ae-imgs .tech-ae-imgs__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tech-ae-imgs--contain .tech-ae-imgs__img {
	padding: 8px;
	object-fit: contain;
}

@keyframes tech-ae-imgs-scroll {
	to { transform: translateX(-50%); }
}

/* Reduced motion: no movement — the images become a row you can scroll sideways */
@media (prefers-reduced-motion: reduce) {
	.tech-ae-imgs {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.tech-ae-imgs__track { animation: none; }
	.tech-ae-imgs__list[aria-hidden="true"],
	.tech-ae-imgs__item[aria-hidden="true"] { display: none; }
	.tech-ae-imgs__item,
	.tech-ae-imgs__item:hover { transition: none; transform: none; }
}