/*
 * Reference Grid slider.
 * Loaded only on pages containing the mainoslahde/reference-grid block
 * (see inc/reference-slider.php).
 *
 * One reference per slide (photo | own white tagline column | dark CASE
 * panel). The track/slide sizing is pure CSS so the final layout height is
 * correct on first paint, before JS runs -- this is what avoids CLS when
 * the slider script initializes.
 */

.reference-slider {
	position: relative;
}

.reference-slider__viewport {
	overflow: hidden;
}

.reference-slider__track {
	display: flex;
	transition: transform 350ms ease-out;
}

.reference-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
}

/* Photo / tagline column / panel heights, equal side by side from md: up. */
@media (min-width: 768px) {
	.reference-slider__media,
	.reference-slider__panel {
		height: 560px;
	}

	.reference-slider__tags {
		width: 56px;
	}
}

/* Tagline column is desktop-only -- on mobile the tag text (e.g. "Organisaation
   kehittäminen | Brändäys & strategia | Pakkaussuunnittelu") is always dropped. */
.reference-slider__tags {
	display: none;
}

@media (min-width: 768px) {
	.reference-slider__tags {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px 0;
	}

	.reference-slider__tags span {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		white-space: nowrap;
	}
}

/* Arrows sit above the slide, plain icons -- no button chrome. */
.reference-slider__nav {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
	margin-bottom: 12px;
}

.reference-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	transition: opacity 200ms ease;
}

.reference-slider__arrow img {
	width: 20px;
	height: 20px;
}

.reference-slider__arrow[hidden] {
	display: none;
}

.reference-slider__arrow:hover:not(:disabled) {
	opacity: 0.6;
}

.reference-slider__arrow:focus-visible {
	outline: 2px solid #191814;
	outline-offset: 2px;
}

.reference-slider__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.reference-slider__arrow--prev img {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.reference-slider__track {
		transition: none;
	}
}