/**
 * Partners Component
 *
 * Recognition section for sponsor logos. The component keeps a restrained,
 * editorial rhythm and consumes only the existing design system variables.
 */

.se-partners {
	overflow-x: clip;
	color: var(--color-text-primary);
	background: var(--color-white);
}

.se-partners__inner {
	padding-block: var(--space-32) var(--space-64);
}

.se-partners__header {
	max-width: var(--measure-readable);
	margin-block-end: 1.875rem;
	text-align: center;
	margin-inline: auto;
}

.se-partners__label {
	margin: var(--space-0);
	color: var(--color-primary);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-small);
	letter-spacing: 0.3125rem;
	text-transform: uppercase;
}

.se-partners__title {
	margin: var(--space-0);
	color: var(--color-text-primary);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-default);
}

.se-partners__carousel {
	position: relative;
	width: var(--size-full);
	max-width: var(--size-full);
	overflow: hidden;
	contain: layout paint;
}

.se-partners__carousel::before,
.se-partners__carousel::after {
	content: "";
	position: absolute;
	top: var(--space-0);
	bottom: var(--space-0);
	z-index: 1;
	width: var(--space-64);
	pointer-events: none;
}

.se-partners__carousel::before {
	left: var(--space-0);
	background: linear-gradient(90deg, var(--color-white), transparent);
}

.se-partners__carousel::after {
	right: var(--space-0);
	background: linear-gradient(270deg, var(--color-white), transparent);
}

.se-partners__track {
	display: flex;
	width: max-content;
	animation: se-partners-marquee 48s linear infinite;
}

.se-partners__list {
	display: flex;
	align-items: center;
	gap: var(--space-48);
	margin: var(--space-0);
	padding: var(--space-0) var(--space-24);
	list-style: none;
}

.se-partners__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: calc(var(--space-160) + var(--space-80));
}

.se-partners__logo {
	width: auto;
	max-width: calc(var(--space-160) * 1.25);
	max-height: calc(var(--space-64) * 1.25);
	filter: grayscale(1);
	opacity: 0.72;
	object-fit: contain;
	transition:
		filter var(--duration-medium) var(--ease-standard),
		opacity var(--duration-medium) var(--ease-standard);
}

.se-partners__placeholder-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--space-64) * 1.25);
	color: var(--color-black);
	font-size: var(--font-size-body-large);
	font-weight: var(--font-weight-black);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-default);
	text-align: center;
	text-transform: uppercase;
	filter: grayscale(1);
	opacity: 0.78;
}

.se-partners__item:focus-within .se-partners__logo,
.se-partners__item:hover .se-partners__logo,
.se-partners__item:focus-within .se-partners__placeholder-logo,
.se-partners__item:hover .se-partners__placeholder-logo {
	filter: grayscale(1);
	opacity: 1;
}

@keyframes se-partners-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (min-width: 48rem) {
	.se-partners__inner {
		padding-block: var(--space-40) var(--space-64);
	}

	.se-partners__item {
		min-width: calc((var(--space-160) * 1.25) + var(--space-24));
	}
}

@media (min-width: 64rem) {
	.se-partners__header {
		margin-block-end: 1.875rem;
	}

	.se-partners__item {
		min-width: calc(var(--space-160) * 1.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	.se-partners__track {
		animation: none;
	}
}