/*
 * AtomicLimits Sponsors
 *
 * Shared styles for:
 * - carousel
 * - sidebar
 * - grid
 */


/* ==========================================================
   Base sponsor styles
   ========================================================== */

.atomic-sponsors {
	--atomic-sponsor-gap: 32px;
	--atomic-sponsor-padding: 6px;
	--atomic-sponsor-radius: 8px;

	width: 100%;
	box-sizing: border-box;
}

.atomic-sponsors *,
.atomic-sponsors *::before,
.atomic-sponsors *::after {
	box-sizing: border-box;
}

.atomic-sponsor {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.atomic-sponsor__link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--atomic-sponsor-padding);
	border-radius: var(--atomic-sponsor-radius);
	text-decoration: none;
	line-height: 1;
	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		background-color 180ms ease;
}

.atomic-sponsor__link:hover,
.atomic-sponsor__link:focus-visible {
	transform: scale(1.05);
	box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}

.atomic-sponsor__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.atomic-sponsor__link--static {
	cursor: default;
}

.atomic-sponsor__link--static:hover {
	transform: none;
	box-shadow: none;
}

.atomic-sponsor__image {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}


/* ==========================================================
   Carousel
   ========================================================== */

.atomic-sponsors--carousel {
	position: relative;
	overflow: hidden;
}

.atomic-sponsors--carousel .atomic-sponsors__viewport {
	width: 100%;
	overflow: hidden;
}

.atomic-sponsors--carousel .atomic-sponsors__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation:
		atomic-sponsors-scroll
		var(--atomic-sponsor-duration, 35s)
		linear
		infinite;
	will-change: transform;
}

.atomic-sponsors--carousel .atomic-sponsors__group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--atomic-sponsor-gap);
	padding: 10px var(--atomic-sponsor-gap) 10px 0;
}

.atomic-sponsors--carousel:hover .atomic-sponsors__track,
.atomic-sponsors--carousel:focus-within .atomic-sponsors__track {
	animation-play-state: paused;
}

@keyframes atomic-sponsors-scroll {
	from {
		transform: translateX(0);
	}

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


/* ==========================================================
   Optional edge fade
   ========================================================== */

.atomic-sponsors--carousel::before,
.atomic-sponsors--carousel::after {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: 40px;
	content: "";
	pointer-events: none;
}

.atomic-sponsors--carousel::before {
	left: 0;
	background: linear-gradient(
		to right,
		var(--base, #ffffff),
		transparent
	);
}

.atomic-sponsors--carousel::after {
	right: 0;
	background: linear-gradient(
		to left,
		var(--base, #ffffff),
		transparent
	);
}


/* ==========================================================
   Sidebar
   ========================================================== */

.atomic-sponsors--sidebar {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.atomic-sponsors--sidebar .atomic-sponsor__link {
	width: 100%;
}

.atomic-sponsors--sidebar .atomic-sponsor__image {
	width: 200px;
	max-width: 100%;
	height: auto;
}


/* ==========================================================
   Grid
   ========================================================== */

.atomic-sponsors--grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(180px, 1fr)
	);
	gap: 32px;
	align-items: stretch;
}

.atomic-sponsors--grid .atomic-sponsor {
	min-height: 130px;
}

.atomic-sponsors--grid .atomic-sponsor__link {
	width: 100%;
	height: 100%;
}

.atomic-sponsors--grid .atomic-sponsor__image {
	max-width: 200px;
	max-height: 80px;
}


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

@media (max-width: 768px) {

	.atomic-sponsors {
		--atomic-sponsor-gap: 16px;
		--atomic-sponsor-padding: 4px;
	}

	.atomic-sponsor__image {
		max-width: 160px;
	}

	.atomic-sponsors--carousel::before,
	.atomic-sponsors--carousel::after {
		width: 32px;
	}

	.atomic-sponsors--grid {
		grid-template-columns: repeat(
			2,
			minmax(0, 1fr)
		);
		gap: 20px;
	}

	.atomic-sponsors--grid .atomic-sponsor {
		min-height: 110px;
	}

}

@media (max-width: 480px) {

	.atomic-sponsors {
		--atomic-sponsor-gap: 28px;
	}

	.atomic-sponsors--grid {
		grid-template-columns: 1fr;
	}

	.atomic-sponsors--carousel::before,
	.atomic-sponsors--carousel::after {
		display: none;
	}
}


/* ==========================================================
   Reduced-motion accessibility
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.atomic-sponsors--carousel .atomic-sponsors__track {
		animation: none;
	}

	.atomic-sponsors--carousel .atomic-sponsors__viewport {
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.atomic-sponsor__link {
		transition: none;
	}
}