/* Partial: project-popup (opened by Fancybox, see assets/js/partials/project-grid.js) */
/* Fancybox container (mainClass: sw-fancybox) */
.sw-fancybox {
	--fancybox-backdrop-bg: var(--color-backdrop);
	--f-html-padding: 0;
	--f-html-bg: transparent;
	--f-html-color: var(--color-text);
	--f-carousel-slide-padding: var(--space-16);
}

.sw-fancybox .fancybox__slide { overflow-x: hidden; } /* the popup's own sliders scroll sideways, the slide must not */

.sw-project-popup {
	inline-size: 100%;
	max-inline-size: 81rem;
}

.sw-project-popup__dialog { position: relative; display: grid; background: var(--color-bg); }

.sw-project-popup__gallery { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-bg-alt); }

/* Endless slider (ProjectGallery): moved with transform; clones of the first/last slide sit at the ends */
.sw-project-popup__track {
	display: flex;
	block-size: 100%;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sw-project-popup__track--dragging { cursor: grabbing; }

.sw-project-popup__slide { flex: 0 0 100%; }
.sw-project-popup__image { inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }

.sw-project-popup__arrow { position: absolute; inset-block-end: var(--space-24); }
.sw-project-popup__arrow--prev { inset-inline-start: var(--space-24); }
.sw-project-popup__arrow--next { inset-inline-end: var(--space-24); }

.sw-project-popup__counter {
	position: absolute;
	inset-block-end: var(--space-24);
	inset-inline-start: 50%;
	translate: -50% 0;
	padding: var(--space-4) var(--space-16);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-family: var(--font-heading);
	font-size: var(--text-small);
	line-height: var(--leading-small);
	font-weight: var(--weight-medium);
	word-spacing: 0.25em;
	text-transform: uppercase;
}

.sw-project-popup__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-24);
	min-inline-size: 0;
}

.sw-project-popup__close { position: absolute; z-index: 1; inset-block-start: var(--space-16); inset-inline-end: var(--space-16); }

/*
 * Thumbnail strip: scrolls to keep the active thumbnail in view and fades out on each side that
 * has more thumbnails (--fade-start / --fade-end, set by ProjectGallery). The fade widths are
 * registered properties so they animate.
 */
@property --thumbs-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --thumbs-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }

.sw-project-popup__thumbs {
	--thumbs-fade-start: 0px;
	--thumbs-fade-end: 0px;
	position: relative;
	display: flex;
	gap: var(--space-8);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--thumbs-fade-start), #000 calc(100% - var(--thumbs-fade-end)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--thumbs-fade-start), #000 calc(100% - var(--thumbs-fade-end)), transparent);
	transition: --thumbs-fade-start 300ms ease, --thumbs-fade-end 300ms ease;
}
.sw-project-popup__thumbs::-webkit-scrollbar { display: none; }
.sw-project-popup__thumbs--fade-start { --thumbs-fade-start: var(--space-64); }
.sw-project-popup__thumbs--fade-end { --thumbs-fade-end: var(--space-64); }

.sw-project-popup__thumb {
	position: relative;
	flex: 0 0 var(--space-96);
	padding: 0;
	border: 0;
	background: none;
}

/* Active border: the old one fades out first, then the new one fades in */
.sw-project-popup__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--color-primary);
	opacity: 0;
	transition: opacity 250ms ease;
}
.sw-project-popup__thumb--active::after { opacity: 1; transition-delay: 250ms; }
.sw-project-popup__thumb-image { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }

.sw-project-popup__details {
	display: grid;
	gap: var(--space-40);
	padding-block-start: var(--space-24);
	border-block-start: var(--border);
}

.sw-project-popup__summary { display: grid; gap: var(--space-24); }
.sw-project-popup__heading { display: grid; gap: var(--space-4); }
.sw-project-popup__service { display: grid; gap: var(--space-4); }

.sw-project-popup__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--space-8);
	margin-block-start: var(--space-8);
}

.sw-project-popup__nav-button { flex: 1 1 100%; }

/* Pair: Previous (orange) is cut top-left, Next (navy) bottom-right */
.sw-project-popup__nav-button--prev { --button-cut-tl: var(--cut-s); --button-cut-br: 0px; }

@media (min-width: 48em) {
	.sw-project-popup__nav-button { flex: 0 0 auto; }
}

@media (min-width: 62em) {
	.sw-project-popup__dialog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: minmax(0, 1fr); /* the photo may not grow the row */
		gap: var(--space-40);
		/* 576px, but never taller than the window minus the popup's padding and the prev/next buttons */
		block-size: min(36rem, calc(100svh - var(--space-128)));
		min-block-size: 22rem;
	}

	.sw-project-popup__gallery { aspect-ratio: auto; min-block-size: 0; }
	.sw-project-popup__track,
	.sw-project-popup__slide { min-block-size: 0; }
	.sw-project-popup__info { padding-block-end: 0; min-block-size: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
	.sw-project-popup__thumbs { flex: none; }
	.sw-project-popup__close { position: static; align-self: flex-end; flex: none; }
	.sw-project-popup__thumb { flex-basis: 9.375rem; }
	.sw-project-popup__details { margin-block: 0 var(--space-32); } /* sits under the text, at least 32px above the info bottom */
}

@media (prefers-reduced-motion: reduce) {
	.sw-project-popup__track { transition: none; }
}