/**
 * Unusual — Project Slider element
 *
 * Self-contained styles. Uses Core Framework tokens (--primary, --light-100,
 * --text-l, --space-*) where available, each with a hard fallback so the
 * element still looks right if a token is missing.
 *
 * Per-element knobs are set inline on the root by render():
 *   --ups-ratio        featured image aspect-ratio
 *   --ups-thumb-cols   thumbnail columns (desktop)
 */

.unusual-project-slider {
	--ups-gap: var(--space-l, 2rem);
	--ups-gap-sm: var(--space-xs, 0.75rem);
	--ups-fade: 0.6s;
	--ups-accent: var(--primary, #1f6f6b);

	/* Desktop: featured image + content side by side, thumbnails and button
	   full-width below. Named areas let the pieces reorder on mobile. */
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"stage content"
		"thumbs thumbs"
		"button button";
	gap: var(--ups-gap);
	align-items: start;
}

/* Featured image on the right instead of the left. */
.unusual-project-slider.is-reversed {
	grid-template-areas:
		"content stage"
		"thumbs  thumbs"
		"button  button";
}

/* ---- Featured slider ------------------------------------------------- */

.unusual-project-slider .ups__stage {
	grid-area: stage;
	position: relative;
	width: 100%;
	aspect-ratio: var(--ups-ratio, 1 / 1);
	overflow: hidden;
}

.unusual-project-slider .ups__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ups-fade) ease;
}

.unusual-project-slider .ups__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.unusual-project-slider .ups__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Photo credit overlay ------------------------------------------- */
/* Lives inside .ups__slide (which is already position: absolute; inset: 0),
   so absolute positioning anchors to the featured image. Thumbnails never
   receive this markup — credit only appears on the stage image.
   The framework utility classes z-100 / padding-xs / text-s / text-light
   provide the visual treatment when site-wide CSS is loaded; these rules
   add the corner positioning and self-contained fallbacks. */

.unusual-project-slider .ups__stage .copyright__wrap {
	position: absolute;
	z-index: 100;
	padding: var(--space-xs, 0.5rem);
	color: var(--light-100, #fff);
	font-size: var(--text-s, 0.875rem);
	pointer-events: none;
}

/* Subtle dark backdrop for light photos where the credit gets lost. */
.unusual-project-slider .ups__stage .copyright__wrap.has-overlay {
	background-color: rgba(0, 0, 0, 0.35);
}

.unusual-project-slider .ups__stage .copyright__wrap.is-bottom-right {
	bottom: 0;
	right: 0;
}

.unusual-project-slider .ups__stage .copyright__wrap.is-bottom-left {
	bottom: 0;
	left: 0;
}

.unusual-project-slider .ups__stage .copyright__wrap.is-top-right {
	top: 0;
	right: 0;
}

.unusual-project-slider .ups__stage .copyright__wrap.is-top-left {
	top: 0;
	left: 0;
}

.unusual-project-slider .ups__stage .copyright__text,
.unusual-project-slider .ups__stage .copyright__text > p {
	margin: 0;
}

/* ---- Content column -------------------------------------------------- */

.unusual-project-slider .ups__content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	gap: var(--ups-gap);
}

.unusual-project-slider .ups__head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.unusual-project-slider .ups__eyebrow {
	margin: 0;
	color: var(--ups-accent);
	font-family: var(--font-family-primary, inherit);
	font-weight: 700;
}

.unusual-project-slider .ups__title {
	margin: 0;
	color: var(--ups-accent);
	font-family: var(--font-family-secondary, inherit);
	font-size: calc(var(--text-2xl, 1.75rem) * 1.1);
	font-weight: 500;
	line-height: 1.15;
	text-wrap: balance;
}

.unusual-project-slider .ups__desc > :first-child {
	margin-top: 0;
}

.unusual-project-slider .ups__desc > :last-child {
	margin-bottom: 0;
}

/* ---- Thumbnail row --------------------------------------------------- */
/* Fixed window: exactly `--ups-thumb-cols` (default 4) thumbnails are visible.
   Any extras overflow and are clipped — the JS slides `.ups__track` so the
   active thumbnail stays in view. The grid never grows. */

.unusual-project-slider .ups__thumbs {
	grid-area: thumbs;
	overflow: hidden; /* fallback for browsers without `clip` */
	overflow: clip;   /* clip = no scroll container, no focus-scroll fight */
}

.unusual-project-slider .ups__track {
	display: flex;
	gap: var(--ups-gap-sm);
	transition: transform 0.45s ease;
	will-change: transform;
}

.unusual-project-slider .ups__thumb {
	position: relative;
	/* Each thumbnail is exactly 1 / N of the visible window, so N fit and the
	   rest overflow. */
	flex: 0 0 calc(
		(100% - (var(--ups-thumb-cols, 4) - 1) * var(--ups-gap-sm))
		/ var(--ups-thumb-cols, 4)
	);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.2s ease;
}

.unusual-project-slider .ups__thumb .ups__img {
	transition: transform 0.4s ease;
}

.unusual-project-slider .ups__thumb:hover {
	opacity: 0.85;
}

.unusual-project-slider .ups__thumb:hover .ups__img {
	transform: scale(1.05);
}

/* Active-state ring drawn on top of the image. */
.unusual-project-slider .ups__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid var(--ups-accent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.unusual-project-slider .ups__thumb.is-active {
	cursor: default;
}

.unusual-project-slider .ups__thumb.is-active::after {
	opacity: 1;
}

.unusual-project-slider .ups__thumb:focus-visible {
	outline: 2px solid var(--ups-accent);
	outline-offset: 2px;
}

/* ---- Button ---------------------------------------------------------- */
/* The element always outputs the global `btn-arrow` class for the visual
   treatment — that lives in ../buttons/btn-arrow.css (required).
   `.ups__btn` only handles layout: full-width within the slider. As a grid
   item it fills its cell; because btn-arrow reserves space for its bars/arrow
   with margins, that sizes the body to fit exactly — no horizontal overflow. */

.unusual-project-slider .ups__btn {
	grid-area: button;
	/* btn-arrow is inline-flex with no horizontal justification; once it spans
	   the full row the label must be centred explicitly. */
	justify-content: center;
	text-align: center;
}

/* ---- Responsive ------------------------------------------------------ */
/* Mobile: stack as featured image → thumbnails → text → button. */

@media (max-width: 767px) {
	.unusual-project-slider,
	.unusual-project-slider.is-reversed {
		grid-template-columns: 1fr;
		grid-template-areas:
			"stage"
			"thumbs"
			"content"
			"button";
	}
}

/* ---- Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.unusual-project-slider .ups__slide,
	.unusual-project-slider .ups__track,
	.unusual-project-slider .ups__thumb,
	.unusual-project-slider .ups__thumb .ups__img,
	.unusual-project-slider .ups__thumb::after {
		transition: none;
	}
}