/**
 * Layout: Trusted by Developers and Hyperscalers (Figma 696:305, #f0f0f0).
 *
 * Logo card 307 × 134, #f5f5f7, 1px #ddd, radius 28. The carousel scrolls
 * continuously: view.js clones the set and measures it, so the loop never
 * jumps. Hover, focus or the pause button stop it; reduced motion
 * disables it (the strip scrolls by hand instead).
 *
 * @package GagaMuller
 */

.gm-trusted {
	background: #f0f0f0;
	padding-block: clamp(2.5rem, 1.7rem + 3.4vw, 4.875rem);
}

.gm-trusted__title {
	margin-bottom: var(--gm-space-32);
}

.gm-marquee {
	--gm-logo-w: clamp(13.5rem, 11rem + 10vw, 19.1875rem); /* 307 */
	--gm-logo-h: clamp(6.75rem, 6rem + 3vw, 8.375rem);     /* 134 */
	--gm-logo-gap: var(--gm-space-24);
}

.gm-marquee__viewport {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.gm-marquee__viewport::-webkit-scrollbar {
	display: none;
}

.gm-marquee__track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0 0 0 var(--gm-gutter);
	list-style: none;
}

.gm-logo {
	display: flex;
	flex: 0 0 var(--gm-logo-w);
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--gm-logo-w);
	height: var(--gm-logo-h);
	margin: 0 var(--gm-logo-gap) 0 0;
	padding: var(--gm-space-24);
	border: 1px solid #ddd;
	border-radius: 28px;
	background: var(--gm-surface-subtle);
	transition: border-color 300ms var(--gm-ease), background-color 300ms var(--gm-ease);
}

.gm-logo:hover {
	border-color: rgb(114 21 244 / 0.4);
	background: var(--gm-color-white);
}

.gm-logo__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	text-decoration: none;
}

.gm-logo__link:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color);
	outline-offset: 4px;
}

.gm-logo__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 3.5rem; /* Figma logos 42–65px tall */
	object-fit: contain;
}

.gm-logo__text {
	color: var(--gm-color-text-tertiary);
	font-family: var(--gm-font-heading);
	font-size: var(--gm-text-h3);
	font-weight: var(--gm-weight-bold);
	text-align: center;
}

/* ---- Running state (set by view.js) --------------------------------- */

.gm-marquee.is-running .gm-marquee__viewport {
	overflow: hidden;
}

.gm-marquee.is-running .gm-marquee__track {
	animation: gm-marquee var(--gm-marquee-duration, 40s) linear infinite;
}

.gm-marquee.is-running:hover .gm-marquee__track,
.gm-marquee.is-running:focus-within .gm-marquee__track,
.gm-marquee.is-paused .gm-marquee__track {
	animation-play-state: paused;
}

@keyframes gm-marquee {
	to {
		transform: translateX(var(--gm-marquee-shift, -50%));
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm-marquee.is-running .gm-marquee__track {
		animation: none;
	}
}

/* ---- Pause / play ------------------------------------------------------ */

.gm-marquee__bar {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--gm-space-12);
}

.gm-marquee__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gm-touch-target);
	height: var(--gm-touch-target);
	padding: 0;
	border: 1.5px solid var(--gm-color-text-tertiary);
	border-radius: var(--gm-radius-round);
	background: transparent;
	color: var(--gm-color-text-tertiary);
	cursor: pointer;
	transition: background-color 300ms var(--gm-ease), color 300ms var(--gm-ease), border-color 300ms var(--gm-ease);
}

.gm-marquee__toggle[hidden] {
	display: none;
}

.gm-marquee__toggle .gm-icon {
	width: 20px;
	height: 20px;
}

.gm-marquee__toggle .gm-icon--play,
.gm-marquee__toggle[aria-pressed="true"] .gm-icon--pause {
	display: none;
}

.gm-marquee__toggle[aria-pressed="true"] .gm-icon--play {
	display: block;
}

.gm-marquee__toggle:hover,
.gm-marquee__toggle:focus-visible {
	border-color: var(--gm-color-purple);
	background: var(--gm-color-purple);
	color: var(--gm-color-white);
}

.gm-marquee__toggle:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color);
	outline-offset: var(--gm-focus-offset);
}

/* ---- Editor preview ----------------------------------------------------- */

.gm-trusted__preview {
	padding: var(--gm-space-24);
	border: 2px dashed #b9b9c4;
	border-radius: 28px;
	color: var(--gm-color-text-tertiary);
}

.gm-trusted__preview p {
	margin: var(--gm-space-16) 0 0;
	font-size: var(--gm-text-legal);
}

.gm-trusted__preview-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-logo__placeholder {
	display: block;
	width: 60%;
	height: 1.5rem;
	border-radius: 6px;
	background: #d9d9e0;
}