/**
 * Home "Trusted by IBDP Schools" section styles — Figma node 2617:2413.
 * Cream background, centered title, and an auto-scrolling logo marquee
 * (136×96 rounded cells with full-height dividers) at all breakpoints.
 */

.gh-trusted {
	/* Full-bleed out of the .site-content (max 1120px) wrapper. */
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: var(--gh-accent);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 120px 0px;
	overflow: hidden;
}

.gh-trusted__title {
	margin: 0;
	font-family: 'schibsted_grotesk_demi', Arial, sans-serif;
	font-weight: normal;
	font-size: 20px;
	line-height: 28px;
	color: var(--gh-text-primary);
	text-align: center;
}

/* Marquee viewport + scrolling track (two identical halves → translateX -50%
   loops seamlessly). */
.gh-trusted__marquee {
	width: 100%;
	overflow: hidden;
}

.gh-trusted__track {
	display: flex;
	width: max-content;
	animation: gh-trusted-marquee 45s linear infinite;
}

/* Pause when the user hovers/presses the strip. */
.gh-trusted__track:hover,
.gh-trusted__track:active {
	animation-play-state: paused;
}

.gh-trusted__marquee-group {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Fixed logo cell (Figma node 2617:2413: 136×96, rounded 8). */
.gh-trusted__logo {
	flex: 0 0 auto;
	width: 136px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	overflow: hidden;
}

.gh-trusted__logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Full-height divider between logos (Figma vector 10808). */
.gh-trusted__divider {
	flex: 0 0 auto;
	width: 1px;
	height: 96px;
	background: rgba(51, 51, 51, 0.12);
}

@keyframes gh-trusted-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Laptop / small desktop (1024–1439px): tighter 80px sides + reduced vertical. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.gh-trusted {
		padding: 96px 0px;
	}
}

@media (max-width: 1023px) {
	.gh-trusted {
		padding: 64px 0px;
	}
}

@media (max-width: 768px) {
	/* Full-bleed so the marquee runs edge to edge; the title keeps its gutter. */
	.gh-trusted {
		padding: 48px 0;
		gap: 24px;
	}

	.gh-trusted__title {
		font-size: 14px;
		line-height: 24px;
		padding: 0 16px;
	}
}

/* Respect reduced-motion: stop the auto-scroll and let the user swipe instead. */
@media (prefers-reduced-motion: reduce) {
	.gh-trusted__track {
		animation: none;
	}
	.gh-trusted__marquee {
		overflow-x: auto;
	}
}