/*
 * Homepage Browse by Standards
 *
 * Header + ticker both sit inside .qehs-container, so the ticker's
 * overflow:hidden clipping boundary is naturally the same 96px-inset
 * content area as the rest of the homepage (reuses --qehs-container-max
 * / --qehs-container-padding — neither is redefined here).
 *
 * Ticker motion (direction/speed) is driven by JS
 * (assets/js/browse-standards-ticker.js), which sets `transform` on
 * .qehs-standards-ticker__track directly — no CSS @keyframes/animation
 * property is used here, to avoid the two fighting over the same
 * property.
 */

.qehs-browse-standards {
	padding-top: var(--qehs-space-lg);
	padding-bottom: var(--qehs-space-2xl);
	background-color: var(--qehs-background);
	overflow: hidden;
}

.qehs-browse-standards__header {
	text-align: center;
	/*margin-bottom: var(--qehs-space-2xl);*/
	margin-bottom: 64px;
}

.qehs-browse-standards__title {
	margin: 0 0 var(--qehs-space-sm);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--qehs-text);
}

.qehs-browse-standards__subtitle {
	margin: 0;
	font-size: 1.1rem;
	color: var(--qehs-text-muted);
}

/* --- Ticker --- */

/* Nested inside .qehs-container (not full-bleed) — its own width is
   therefore the container's content width (1248px at 1440px viewport,
   96px inset each side, scaling responsively via the same tokens the
   rest of the page already uses). overflow:hidden clips exactly at
   that boundary, so cards never visually extend past it. */
.qehs-standards-ticker {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Soft fade at both edges of the visible (96px-inset) area, fading
	   to the section's white background rather than a hard cut.
	   mask-image (not an extra overlay element) so it never blocks
	   clicks and needs no separate DOM node. */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 48px,
		#000 calc(100% - 48px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 48px,
		#000 calc(100% - 48px),
		transparent 100%
	);
}

.qehs-standards-ticker__track {
	display: flex;
	width: max-content;
	gap: var(--qehs-space-lg);
	will-change: transform;
}

.qehs-standard-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex-shrink: 0;
	width: 260px;
	padding: var(--qehs-space-xl) var(--qehs-space-lg);
	background-color: var(--qehs-background);
	border: 1px solid var(--qehs-border);
	border-radius: var(--qehs-radius-lg);
	color: var(--qehs-text);
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.qehs-standard-card:hover,
.qehs-standard-card:focus-visible {
	border: 1px solid var(--qehs-secondary);
	box-shadow: var(--qehs-shadow-md);
	/*transform: translateY(-2px);*/
}

.qehs-standard-card:focus-visible {
	outline: 4px solid var(--qehs-secondary);
	outline-offset: 2px;
}

.qehs-standard-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 75px;
	height: 75px;
	margin-bottom: var(--qehs-space-lg);
}

.qehs-standard-card__icon img {
	width: 75px;
	height: 75px;
	object-fit: contain;
}

.qehs-standard-card__name {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: var(--qehs-space-xs);
}

.qehs-standard-card__desc {
	font-size: 0.85rem;
	color: var(--qehs-text-muted);
}

/* --- Tablet / mobile: smaller cards and section padding, matching
   the site's existing 1024px breakpoint. Ticker keeps scrolling
   (still the requested behavior) but at a reduced card size. --- */
@media (max-width: 1024px) {
	.qehs-browse-standards__title {
		font-size: 1.875rem;
	}

	.qehs-standard-card {
		width: 220px;
		padding: var(--qehs-space-lg) var(--qehs-space-md);
	}

	.qehs-standards-ticker {
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 28px,
			#000 calc(100% - 28px),
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 28px,
			#000 calc(100% - 28px),
			transparent 100%
		);
	}
}

@media (max-width: 480px) {
	.qehs-browse-standards {
		padding-block: var(--qehs-space-xl);
	}

	.qehs-browse-standards__header {
		margin-bottom: var(--qehs-space-xl);
	}

	.qehs-browse-standards__title {
		font-size: 1.5rem;
	}

	.qehs-browse-standards__subtitle {
		font-size: 1rem;
	}

	.qehs-standard-card {
		width: 190px;
	}

	.qehs-standards-ticker {
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 16px,
			#000 calc(100% - 16px),
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 16px,
			#000 calc(100% - 16px),
			transparent 100%
		);
	}
}