/*
 * emo2026, Referenzen & Distributoren logo strip.
 *
 * Styles for template-parts/references.php, rendered on the front page
 * (one combined strip) and on page-haendler.php (distributors, embedded).
 * Enqueued by inc/references.php on exactly those pages.
 *
 * Mechanics: each strip is a horizontal scroll container whose track
 * holds the logo set twice and drifts via a CSS transform animation
 * (translateX 0 to -50%, identical halves so the wrap is invisible).
 * The animation is compositor-driven, which is why it stays smooth
 * where the previous JS scrollLeft loop stuttered. The container keeps
 * overflow-x auto, so grab, swipe, wheel and the visible thin scrollbar
 * all still work; hover, focus and an active scroll gesture pause the
 * drift (assets/js/references.js only marks .is-engaged, no per-frame
 * work).
 *
 * DESIGN-SPEC.md compliance:
 *   section 1, press feedback on pointer-down (opacity, 80ms);
 *   sections 2 and 3, the strip stays a gesture surface: the reader can
 *     scroll it natively at any moment and the drift yields on contact;
 *   section 5, the strip fades out at its edges (mask) instead of hard
 *     clipping, the scroll-edge treatment;
 *   section 7, owner-directed exemption (2026-08-25): the auto-advance
 *     keeps running under prefers-reduced-motion. The earlier static
 *     fallback read as "broken" on machines with OS animations off, and
 *     the owner wants the moving strip for every visitor; interaction
 *     always pauses it.
 *
 * Tokens come from tokens.css; only strip geometry stays local.
 */

:root {
	/* Logo box: consistent optical height, wide marks letterbox via
	   object-fit against the max-width cap. */
	--references-logo-height:    52px;
	--references-logo-max-width: 240px;
	--references-gap:            var(--space-9);   /* 64px between logos */
	--references-pad-block:      var(--space-11);
	/* One full track half per cycle. Very long on purpose: an ambient
	 * drift you notice only if you watch for it, not a ticker
	 * (owner 2026-08-25, tuned down twice). */
	--references-duration:       420s;
}

/* ============================================================
 * Section frame
 * ============================================================ */

.references {
	/* White ground on purpose: the legacy JPG logos carry a white matte,
	   which disappears here (and only here). Not a wash surface. */
	background-color: var(--color-bg-base);
	padding: var(--references-pad-block) 0;
}

/* Embedded inside another page's flow (Händler): the page hero and the
 * map already provide the breathing room, keep only a modest block gap. */
.references--embedded {
	padding: var(--space-6) 0 var(--space-9);
}

.references__inner {
	max-width: var(--layout-content-max-width);
	margin: 0 auto;
	padding: 0 var(--layout-gutter);
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* ============================================================
 * Head, eyebrow + heading (front page only)
 * ============================================================ */

.references__head {
	text-align: center;
}

.references__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-sans);
	/* Small label: wide tracking per DESIGN-SPEC.md section 6. */
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	/* Brand green, sitewide (owner 2026-08-31): section eyebrows follow
	 * the hero eyebrows. */
	color: var(--color-accent);
}

.references__heading {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-40);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
	text-wrap: balance;
}

/* ============================================================
 * Strip, one native scroll container + duplicated content
 * ============================================================ */

.references__scroller {
	overflow-x: auto;
	overflow-y: hidden;
	/* The reader may take over any time; JS resumes from wherever they
	 * leave the position. Direct scrollLeft writes need auto behavior. */
	scroll-behavior: auto;
	overscroll-behavior-x: contain;
	/* Scrollbar only under attention (owner 2026-08-31): at rest the strip
	 * drifts by transform, so the thumb sat frozen mid-track and read as
	 * clutter. Width stays thin ALWAYS and only the colours toggle: on
	 * classic Windows scrollbars, toggling scrollbar-width none/thin on
	 * hover would resize the content box and jump the logos. */
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	/* Scroll-edge fade instead of a hard clip (spec section 5). */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	/* Room between logos and the scrollbar so the thumb never crowds
	 * the artwork. */
	padding-bottom: var(--space-3);
}

.references__scroller::-webkit-scrollbar {
	height: 6px;
}

.references__scroller::-webkit-scrollbar-track {
	background: transparent;
}

.references__scroller::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: var(--radius-pill);
}

/* The same attention signals that pause the drift reveal the bar:
 * pointer over the strip, keyboard focus inside it, or an active touch
 * scroll (references.js marks .is-engaged, hover never fires there). */
.references__scroller:hover,
.references__scroller:focus-within,
.references__scroller.is-engaged {
	scrollbar-color: var(--grey-300) transparent;
}

.references__scroller:hover::-webkit-scrollbar-thumb,
.references__scroller:focus-within::-webkit-scrollbar-thumb,
.references__scroller.is-engaged::-webkit-scrollbar-thumb {
	background: var(--grey-300);
}

.references__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--references-gap);
	width: max-content;
	/* Drift as a compositor-driven transform: smooth at the display's
	 * refresh rate, including over remote desktop. (A JS scrollLeft loop
	 * lived here until 2026-08-25 and stuttered, it quantised to whole
	 * pixels.) Both track halves are identical, so translating by exactly
	 * -50% wraps invisibly. */
	animation: references-drift var(--references-duration) linear infinite;
	will-change: transform;
}

/* Attention pauses the drift: pointer over the strip, keyboard focus
 * inside it, or an active scroll gesture (references.js marks
 * .is-engaged for a grace period). */
.references__scroller:hover .references__track,
.references__scroller:focus-within .references__track,
.references__scroller.is-engaged .references__track {
	animation-play-state: paused;
}

@keyframes references-drift {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Static variant (Händler page, QM-25): every logo once, wrapping and
 * centred, nothing moves, nothing scrolls, no edge fade. */
.references--static .references__scroller {
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
	padding-bottom: 0;
}

.references--static .references__track {
	width: auto;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: var(--space-6);
	animation: none;
	will-change: auto;
}

/* ============================================================
 * Logos, grayscale at rest, colour on attention
 * ============================================================ */

.references__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--references-logo-height);
}

.references__logo img {
	display: block;
	width: auto;
	height: var(--references-logo-height);
	max-width: var(--references-logo-max-width);
	object-fit: contain;
	/* Quiet by default; hover/focus lifts to full colour. A fade of
	   250ms or less is non-gesture micro-feedback (spec section 2). */
	filter: grayscale(1);
	opacity: 0.55;
	transition:
		filter var(--motion-duration-base) var(--motion-ease-standard),
		opacity var(--motion-duration-base) var(--motion-ease-standard);
}

.references__logo:hover img,
.references__logo-link:focus-visible img {
	filter: none;
	opacity: 1;
}

/* Distributor logos link out to the company's own site (live-site
 * behavior); press/focus affordances per spec section 1. */
.references__logo-link {
	display: flex;
	align-items: center;
	height: 100%;
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.references__logo-link:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 6px;
	border-radius: var(--radius-sm);
}

.references__logo-link:active {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

/* Group: static label above its own strip (owner 2026-08-25: the two
 * lists stay split; an in-track label read messy). */
.references__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.references__group-label {
	margin: 0;
	text-align: center;
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* ============================================================
 * Trailing "Alle Händler & Distributoren" link, quiet chevron
 * link in the home-cta manner (own copy, home.css is front-page-only
 * and this section also renders on the Händler page).
 * ============================================================ */

.references__more {
	margin: 0;
	text-align: center;
}

.references__more-link {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	font-weight: 400;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-link);
	text-decoration: none;
	padding: var(--space-1) 0;
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.references__more-link:hover,
.references__more-link:focus-visible {
	color: var(--color-link);
	text-decoration: none;
}

.references__more-link:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

.references__more-link:active {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

.references__more-chevron {
	display: inline-block;
	font-size: 1em;
	line-height: 1;
	transform: translateX(0);
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.references__more-link:hover .references__more-chevron,
.references__more-link:focus-visible .references__more-chevron {
	transform: translateX(4px);
}

/* ============================================================
 * Anchor target on the Händler page: the front page's distributor
 * links land on #distributoren; clear the sticky navbar so the region
 * title is not hidden underneath it. --nav-height comes from
 * header.css (48px), the fallback covers a stylesheet race.
 * ============================================================ */

#distributoren {
	scroll-margin-top: calc(var(--nav-height, 48px) + var(--space-4));
}

/* ============================================================
 * Responsive, same 833px cutover as the rest of the chrome.
 * ============================================================ */

@media (max-width: 833px) {
	:root {
		--references-logo-height:    44px;
		--references-logo-max-width: 190px;
		--references-gap:            var(--space-7);
		--references-pad-block:      var(--space-10);
	}

	.references__heading {
		font-size: var(--font-size-28);
	}
}

/* ============================================================
 * Accessibility fallbacks.
 * ============================================================ */

/* Muted grayscale logos are a stylistic choice, not an information
 * hierarchy; users asking for more contrast get the real artwork. */
@media (prefers-contrast: more) {
	.references__logo img {
		filter: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* OWNER DECISION (2026-08-25): the strip's auto-advance keeps running
	 * under prefers-reduced-motion (see the file header). Only the
	 * decorative chevron nudge yields here. */

	.references__more-chevron {
		transition: none;
	}

	.references__more-link:hover .references__more-chevron,
	.references__more-link:focus-visible .references__more-chevron {
		transform: none;
	}
}