/* ═══════════════════════════════════════════════════════════════════════════
   HOME — SCHOOL LOGOS MARQUEE (auto-scrolling, no buttons)
   ═══════════════════════════════════════════════════════════════════════════ */

.logo-ticker {
	padding: var(--ci-section-padding) 0;
	background-color: #253d47;
	border-top: 0.3rem solid #ffffff;
}

/* Label */
.logo-ticker__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	margin: 0 0 2rem;
}

/* Marquee: full width, clips track, edge fades */
.logo-ticker__marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 6%,
		black 94%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 6%,
		black 94%,
		transparent 100%
	);
}

/* Track: scrolls horizontally via JS transform */
.logo-ticker__track {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.75rem 0;
	will-change: transform;
}

/* Logo tiles */
.logo-ticker__item {
	flex-shrink: 0;
	width: 110px;
	height: 110px;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-ticker__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ── Mobile ── */
@media (max-width: 767px) {
	.logo-ticker {
		padding: var(--ci-section-padding-mobile) 0;
	}

	.logo-ticker__label {
		font-size: clamp(1.2rem, 4vw, 1.5rem);
		margin-bottom: 1.5rem;
	}

	.logo-ticker__item {
		width: 80px;
		height: 80px;
	}
}