/* components/programs-marquee.css — accredited programs ticker (homepage) */

#courses .programs-marquee {
	margin-top: clamp( 1.25rem, 3vw, 2rem );
}

.programs-marquee {
	--marquee-edge-fade: clamp( 2rem, 9vw, 4.75rem );

	position: relative;
	width: 100%;
	border: none;
	border-radius: var( --card-radius );
	background: var( --surface );
	box-shadow: var( --shadow-soft );
	overflow: hidden;
	transition: box-shadow 160ms ease;
}

.programs-marquee__parallax {
	position: absolute;
	inset: -20% -10%;
	z-index: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			-12deg,
			transparent 0 1.6rem,
			color-mix( in srgb, var( --accent ) 7%, transparent ) 1.6rem 1.65rem,
			transparent 1.65rem 3.2rem,
			color-mix( in srgb, var( --yellow ) 8%, transparent ) 3.2rem 3.25rem
		);
	opacity: 0.55;
}

.programs-marquee--offscreen {
	content-visibility: hidden;
	contain: strict;
}

.programs-marquee--offscreen .programs-marquee__track {
	visibility: hidden;
}

.programs-marquee__viewport {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding-block: clamp( 0.85rem, 2vw, 1.15rem );
	cursor: grab;
	touch-action: pan-y;
	outline: none;
}

.programs-marquee__scroller {
	--marquee-edge-soft: calc( var( --marquee-edge-fade ) * 0.55 );

	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var( --marquee-edge-soft ),
		#000 calc( 100% - var( --marquee-edge-soft ) ),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var( --marquee-edge-soft ),
		#000 calc( 100% - var( --marquee-edge-soft ) ),
		transparent 100%
	);
}

.programs-marquee__fades {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	box-shadow:
		inset var( --marquee-edge-fade ) 0 1.35rem -1.1rem var( --surface ),
		inset calc( -1 * var( --marquee-edge-fade ) ) 0 1.35rem -1.1rem var( --surface );
}

.programs-marquee__viewport:focus-visible {
	box-shadow: inset 0 0 0 2px var( --accent );
}

.programs-marquee.is-dragging .programs-marquee__viewport {
	cursor: grabbing;
	user-select: none;
}

.programs-marquee.is-user-scrolling {
	box-shadow:
		var( --shadow-soft ),
		inset 0 0 0 1px color-mix( in srgb, var( --accent ) 25%, transparent );
}

.programs-marquee__track {
	display: flex;
	width: max-content;
	transform: translate3d( 0, 0, 0 );
	backface-visibility: hidden;
}

.programs-marquee:not( .programs-marquee--offscreen ) .programs-marquee__track {
	will-change: transform;
}

.programs-marquee__group {
	display: flex;
	flex-shrink: 0;
	align-items: stretch;
	gap: 0;
}

.programs-marquee__item {
	display: flex;
	flex-shrink: 0;
	align-items: flex-start;
	gap: 0.85rem;
	width: min( 22rem, calc( 100vw - 2rem ) );
	padding: 0.65rem clamp( 1.1rem, 2.5vw, 1.75rem );
	border-inline-end: 2px solid var( --line );
}

.programs-marquee__icon {
	flex-shrink: 0;
	display: grid;
	width: 2.85rem;
	height: 2.85rem;
	margin: 0;
	place-items: center;
}

.programs-marquee__icon .dashicons {
	width: 1.72rem;
	height: 1.72rem;
	font-size: 1.72rem;
	line-height: 1;
}

.programs-marquee__icon .rtw-program-icon {
	display: block;
	flex-shrink: 0;
	width: 1.72rem;
	height: 1.72rem;
	color: currentColor;
}

/* Atom glyph fills the viewBox — scale to match Dashicons optically. */
.programs-marquee__icon .rtw-program-icon--atom {
	transform: scale( 0.88 );
	transform-origin: center;
}

/* Icon accents by program topic (matches site card-icon language). */
.programs-marquee__item--program-ohrana-truda .programs-marquee__icon {
	background: color-mix( in srgb, var( --accent ) 16%, var( --surface ) );
	box-shadow: 0.16rem 0.16rem 0 var( --accent );
	color: var( --accent-strong );
}

.programs-marquee__item--program-first-aid .programs-marquee__icon {
	background: color-mix( in srgb, var( --coral ) 16%, var( --surface ) );
	box-shadow: 0.16rem 0.16rem 0 var( --coral );
	color: var( --coral );
}

.programs-marquee__item--program-info-security .programs-marquee__icon {
	background: color-mix( in srgb, #22a06b 18%, var( --surface ) );
	box-shadow: 0.16rem 0.16rem 0 #22a06b;
	color: #15803d;
}

.programs-marquee__item--program-height-work .programs-marquee__icon {
	background: color-mix( in srgb, var( --orange ) 22%, var( --surface ) );
	box-shadow: 0.16rem 0.16rem 0 var( --orange );
	color: #101418;
}

.programs-marquee__item--program-radiation-safety .programs-marquee__icon {
	background: color-mix( in srgb, #6b9fff 22%, var( --surface ) );
	box-shadow: 0.16rem 0.16rem 0 #6b9fff;
	color: #6b9fff;
}

@media ( prefers-color-scheme: dark ) {
	:root:not( [data-theme="light"] ) .programs-marquee__item--program-ohrana-truda .programs-marquee__icon {
		background: color-mix( in srgb, var( --accent-strong ) 22%, var( --surface-soft ) );
		color: var( --accent-strong );
	}

	:root:not( [data-theme="light"] ) .programs-marquee__item--program-first-aid .programs-marquee__icon {
		background: color-mix( in srgb, var( --coral ) 22%, var( --surface-soft ) );
	}

	:root:not( [data-theme="light"] ) .programs-marquee__item--program-info-security .programs-marquee__icon {
		background: color-mix( in srgb, #3dd68c 24%, var( --surface-soft ) );
		box-shadow: 0.16rem 0.16rem 0 #3dd68c;
		color: #7dffb8;
	}

	:root:not( [data-theme="light"] ) .programs-marquee__item--program-height-work .programs-marquee__icon {
		background: color-mix( in srgb, var( --orange ) 24%, var( --surface-soft ) );
		color: #050505;
	}

	:root:not( [data-theme="light"] ) .programs-marquee__item--program-radiation-safety .programs-marquee__icon {
		background: color-mix( in srgb, #6b9fff 28%, var( --surface-soft ) );
		box-shadow: 0.16rem 0.16rem 0 #6b9fff;
		color: var( --accent-strong );
	}
}

:root[data-theme="dark"] .programs-marquee__item--program-ohrana-truda .programs-marquee__icon {
	background: color-mix( in srgb, var( --accent-strong ) 22%, var( --surface-soft ) );
	color: var( --accent-strong );
}

:root[data-theme="dark"] .programs-marquee__item--program-first-aid .programs-marquee__icon {
	background: color-mix( in srgb, var( --coral ) 22%, var( --surface-soft ) );
}

:root[data-theme="dark"] .programs-marquee__item--program-info-security .programs-marquee__icon {
	background: color-mix( in srgb, #3dd68c 24%, var( --surface-soft ) );
	box-shadow: 0.16rem 0.16rem 0 #3dd68c;
	color: #7dffb8;
}

:root[data-theme="dark"] .programs-marquee__item--program-height-work .programs-marquee__icon {
	background: color-mix( in srgb, var( --orange ) 24%, var( --surface-soft ) );
	color: #050505;
}

:root[data-theme="dark"] .programs-marquee__item--program-radiation-safety .programs-marquee__icon {
	background: color-mix( in srgb, #6b9fff 28%, var( --surface-soft ) );
	box-shadow: 0.16rem 0.16rem 0 #6b9fff;
	color: var( --accent-strong );
}

.programs-marquee__copy {
	min-width: 0;
}

.programs-marquee__title {
	margin: 0 0 0.35rem;
	font-family: var( --font-display );
	font-size: 0.98rem;
	font-weight: 900;
	line-height: 1.2;
}

.programs-marquee__text {
	margin: 0;
	color: var( --muted );
	font-size: 0.88rem;
	line-height: 1.45;
}

@media ( prefers-reduced-motion: reduce ) {
	.programs-marquee__parallax {
		display: none;
	}

	.programs-marquee__viewport {
		overflow-x: auto;
		cursor: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}

	.programs-marquee__scroller {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.programs-marquee__fades {
		display: none;
	}

	.programs-marquee__track {
		transform: none !important;
	}

	.programs-marquee__item {
		scroll-snap-align: start;
	}

	.programs-marquee__group[aria-hidden="true"] {
		display: none;
	}
}