/* ==========================================================================
   Block: Logos — Ambient Overrides
   ========================================================================== */

/* ---- Section padding ---- */
.logos {
	padding-block: 7.5rem;
	padding-inline: 0;
}

.logos--no-top-padding {
	padding-block-start: 0;
}

.logos--no-bottom-padding {
	padding-block-end: 0;
}

/* ---- Container alignment + max-width ---- */
.logos__container {
	max-inline-size: var(--container-max-width);
	overflow: visible !important;
	text-align: start;
}

/* ---- Title ---- */
.logos__title {
	font-size: 5.625rem;
	line-height: 1.1;
	text-align: start;
}

/* ---- Description ---- */
.logos__description {
	font-size: 1.3125rem;
	line-height: 1.5;
	margin-inline: 0;
	max-inline-size: 39.1875rem;
	text-align: start;
}

/* ---- Background: Dark ---- */
.logos.logos--dark {
	background-color: #020910;
	color: var(--color-white);
}

.logos.logos--dark .logos__title,
.logos.logos--dark .logos__description,
.logos.logos--dark .logos__description p {
	color: var(--color-white);
}

/* ---- Background: White ---- */
.logos.logos--white {
	background-color: var(--color-white);
	color: var(--color-dark);
}

.logos.logos--white .logos__title,
.logos.logos--white .logos__description,
.logos.logos--white .logos__description p {
	color: var(--color-dark);
}

/* ==========================================================================
   Carousel Mode (logos_rows populated)
   Both static drag and animated marquee share this base.
   ========================================================================== */

.logos--carousel {
	overflow: clip;
}

/* ---- Rows wrapper: start at container left edge ---- */
.logos--carousel .logos__rows {
	padding-block-start: 6.25rem;
	padding-inline-start: calc((100vw - var(--container-max-width)) / 2);
}

/* ---- Row ---- */

.logos--carousel .logos__row + .logos__row {
	padding-block-start: 3.75rem;
}

/* ---- Row: allow vertical scroll, JS handles horizontal ---- */
.logos--carousel .logos__row {
	touch-action: pan-y;
}

/* ---- Track ---- */
.logos--carousel .logos__track {
	display: flex;
	inline-size: max-content;
}

/* ---- Animate mode: auto-scroll ---- */
@keyframes logos-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-100% / 3));
	}
}

/* The duration is set per row from JS so every row moves at the same slow
   px/s regardless of how many logos it holds (client note-7 #9). The literal
   is only the no-JS fallback. */
.logos--animate .logos__track {
	animation: logos-scroll var(--logos-duration, 60s) linear infinite;
}

.logos--animate .logos__row--rtl .logos__track {
	animation-direction: reverse;
}

/* ---- Logo ---- */
.logos--carousel .logos__logo {
	block-size: 6rem;
	flex-shrink: 0;
	inline-size: auto;
	margin-inline-end: 6.25rem;
	max-inline-size: 15rem;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.logos--animate .logos__track {
		animation: none;
	}
}

/* ==========================================================================
   Legacy parent template overrides (fallback when no logos_rows)
   ========================================================================== */

.logos.animated {
	overflow: clip;
}

.logos__list {
	--logos-gap: 6.25rem;
	--logos-per-row: 4;
	justify-content: flex-start;
	padding-block-start: 6.25rem;
}

.logos__image {
	block-size: 6rem;
	max-block-size: 6rem;
	max-inline-size: 15rem;
	opacity: 1;
}

/* ---- Responsive: Mobile ---- */
@media (max-width: 48rem) {
	.logos {
		padding-block: 5rem;
	}

	.logos__title {
		font-size: 2.2rem;
		line-height: 2.5rem;
	}

	.logos__description {
		font-size: 1.125rem;
		line-height: 1.571;
		max-inline-size: none;
	}

	.logos__container {
		padding-inline: 0;
	}

	.logos__title,
	.logos__description {
		padding-inline: 1.25rem;
	}

	/* ---- Carousel: mobile ---- */
	.logos--carousel .logos__rows {
		padding-block-start: 3.75rem;
		padding-inline-start: 1.25rem;
	}

	.logos--carousel .logos__row + .logos__row {
		padding-block-start: 2rem;
	}

	.logos--carousel .logos__logo {
		block-size: 3.5rem;
		margin-inline-end: 3rem;
		max-inline-size: 10rem;
	}


	/* ---- Legacy static grid: mobile ---- */
	.logos:not(.animated):not(.logos--carousel) .logos__list {
		display: grid;
		gap: 2.5rem;
		grid-auto-columns: calc((100% - 2.5rem) / 2);
		grid-auto-flow: column;
		grid-template-rows: repeat(2, 1fr);
		overflow-x: auto;
		padding-block-start: 5.625rem;
		padding-inline-start: 5rem;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.logos__list::-webkit-scrollbar {
		display: none;
	}

	.logos:not(.animated):not(.logos--carousel) .logos__list[style] {
		--logos-per-row: 2 !important;
	}

	.logos__image {
		block-size: 3rem;
		max-block-size: 3rem;
		max-inline-size: 8rem;
	}

	.logos.animated .logos__list {
		animation-duration: 10s;
	}
}