/* ─── Ecto Image Loop ─── */

.ecto-il-wrap {
	--ecto-il-gap:       16px;
	--ecto-il-rows-gap:  16px;
	--ecto-il-card-h:    200px;
	--ecto-il-radius:    10px;
	--ecto-il-lift:      8px;
	--ecto-il-hover-dur: 300ms;
	--ecto-il-fade-w:    120px;
	--ecto-il-fade-color: #ffffff;

	display: flex;
	flex-direction: column;
	gap: var(--ecto-il-rows-gap);
	width: 100%;
	box-sizing: border-box;
}

/* ── Linha ── */

.ecto-il-row {
	width: 100%;
	position: relative;
}

/* ── Outer (área de clip horizontal) ── */

.ecto-il-outer {
	overflow: hidden;
	position: relative;
	/*
	 * Padding vertical reserva espaço para o efeito de lift
	 * sem que o card seja cortado pelo overflow:hidden.
	 */
}

.ecto-il-wrap--lift .ecto-il-outer {
	padding-block: var(--ecto-il-lift);
}

/* ── Gradient fades ── */

.ecto-il-fade {
	position: absolute;
	top:    0;
	bottom: 0;
	width:  var(--ecto-il-fade-w);
	z-index: 2;
	pointer-events: none;
}

.ecto-il-fade--l {
	left: 0;
	background: linear-gradient(to right, var(--ecto-il-fade-color) 0%, transparent 100%);
}

.ecto-il-fade--r {
	right: 0;
	background: linear-gradient(to left, var(--ecto-il-fade-color) 0%, transparent 100%);
}

/* ── Faixa em movimento ── */

.ecto-il-inner {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: var(--ecto-il-gap);
	width: max-content;
	will-change: transform;
	animation: ecto-il-scroll var(--ecto-il-duration, 40s) linear infinite;
}

.ecto-il-row[data-direction="right"] .ecto-il-inner {
	animation-direction: reverse;
}

.ecto-il-row[data-pause="yes"]:hover .ecto-il-inner {
	animation-play-state: paused;
}

/* ── Card ── */

.ecto-il-card {
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: var(--ecto-il-radius);
	transition: transform var(--ecto-il-hover-dur) ease,
	            box-shadow var(--ecto-il-hover-dur) ease;
	line-height: 0;
}

.ecto-il-card a {
	display: block;
	line-height: 0;
	outline-offset: 3px;
	text-decoration: none;
}

.ecto-il-card img {
	display: block;
	height: var(--ecto-il-card-h);
	width: var(--ecto-il-card-w, auto);
	max-width: none;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* ── Efeito hover (lift) ── */

.ecto-il-wrap--lift .ecto-il-card:hover {
	transform: translateY(calc(-1 * var(--ecto-il-lift)));
}

/* ── Keyframes ── */

@keyframes ecto-il-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── Respeita preferência de movimento reduzido ── */

@media (prefers-reduced-motion: reduce) {
	.ecto-il-inner {
		animation: none !important;
	}
}