/************/
/* Projects */
/************/

.projects {
	--projects-gutter-x: clamp(3rem, 5.5vw, 7rem);
	--projects-gutter-y: clamp(4rem, 7vw, 9rem);
}

/************/
/* Controls */
/************/

.projects-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
	margin-bottom: clamp(3rem, 6vw, 6rem);
}

/***********/
/* Filters */
/***********/

.projects-filter {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: .75em 2.5em;
	min-width: 0;
	max-width: 100%;
	padding-block: .25em;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.projects-filter-button {
	display: block;
	flex: 0 0 auto;
	white-space: nowrap;
	color: inherit;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	text-align: left;
	/* text-transform: uppercase; */
	cursor: pointer;
	transition: color .35s var(--easing);
}
.projects-filter-button span{
	padding-block: 0.125em;
}

.projects-filter-button.fancy-hover::after {
	display: flex;
	align-items: center;
}


/***************/
/* View switch */
/***************/

.projects-view-switch {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: .75em;
	width: min(20rem, 35vw);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	user-select: none;
}

.projects-view-button {
	flex: 0 0 auto;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	transition: color .35s var(--easing);
}

.projects-filter-button.is-active,
.projects-view-button:is(:hover, .is-active, :focus-visible) {
	color: var(--red);
}

.projects-view-track {
	position: relative;
	display: block;
	flex: 1 1 auto;
	height: 1px;
	background-color: currentColor;
}

.projects-view-knob {
	position: absolute;
	top: 50%;
	left: 0;
	width: .6em;
	height: .6em;
	border-radius: 50%;
	background-color: currentColor;
	cursor: grab;
	touch-action: none;
	transform: translate(0, -50%);
	transition:
		left .5s var(--easing),
		transform .5s var(--easing);
	will-change: left, transform;
}

/* Larger invisible grab area */
.projects-view-knob::before {
	content: "";
	position: absolute;
	inset: -1em;
	border-radius: 50%;
}

.projects[data-layout="list"] .projects-view-knob {
	left: 100%;
	transform: translate(-100%, -50%);
}

.projects-view-switch.is-dragging .projects-view-knob {
	cursor: grabbing;
	transition: none;
}

/****************/
/* Shared items */
/****************/

.projects-item {
	/* Keep return anchors clear of the fixed header at every breakpoint. */
	scroll-margin-top: calc(var(--hh) + 1rem);
	position: relative;
	min-width: 0;
}

.projects-item-link {
	position: relative;
	width: 100%;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	overflow: visible;
}

.projects-item-media {
	position: relative;
	margin: 0;
}

/********/
/* Grid */
/********/

.projects[data-layout="grid"] .projects-items {
	--bs-gutter-x: var(--projects-gutter-x);
	--bs-gutter-y: var(--projects-gutter-y);
	align-items: stretch;
}

.projects[data-layout="grid"] .projects-item {
	display: flex;
	align-items: stretch;
	overflow: visible;
}

.projects[data-layout="grid"] .projects-item.is-hovered {
	z-index: 20;
}

.projects[data-layout="grid"] .projects-item-link {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
}

/***************/
/* Image stage */
/***************/

/* Clip only the photograph, not the floating label. */
.projects[data-layout="grid"] .projects-item-media {
	width: 100%;
	overflow: hidden;
	clip-path: inset(0);
}

.projects[data-layout="grid"] .projects-item-media picture {
	display: block;
	max-width: 100%;
}

.projects[data-layout="grid"] .projects-item-media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin-inline: auto;
}

/**********************/
/* Grid project label */
/**********************/

.projects[data-layout="grid"] .projects-item-data {
	--projects-label-x: 0px;
	--projects-label-y: 0px;
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	width: max-content;
	max-width: min(18rem, 90vw);
	color: var(--red);
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transform:
		translate3d(var(--projects-label-x), var(--projects-label-y), 0)
		translate(-50%, calc(-100% - 1rem));
	transition: opacity .35s var(--easing), visibility 0s .35s;
}

.projects[data-layout="grid"] .projects-item.is-hovered .projects-item-data {
	will-change: transform, opacity;
}

.projects[data-layout="grid"] .projects-item-name {
	font-size: .7em;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}

.projects[data-layout="grid"] .projects-item-location,
.projects[data-layout="grid"] .projects-item-year,
.projects[data-layout="grid"] .projects-item-status {
	display: none;
}

/********/
/* List */
/********/

.projects[data-layout="list"] .projects-items {
	display: block;
	margin-top: 0;
	margin-inline: 0;
	border-top: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}

.projects[data-layout="list"] .projects-item {
	display: block;
	width: 100%;
	margin-top: 0;
	padding-inline: 0;
}

.projects[data-layout="list"] .projects-item-link {
	display: block;
	border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}

.projects[data-layout="list"] .projects-item-data {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns:
		minmax(0, 7fr)
		minmax(7rem, 2fr)
		minmax(4rem, 1fr)
		minmax(8rem, 1.5fr);
	align-items: center;
	column-gap: 1.5em;
	min-height: 3em;
	padding-block: .65em;
	font-size: .8em;
	font-weight: 700;
	line-height: 1.15;
	transition: color .35s var(--easing);
}

.projects[data-layout="list"] .projects-item-name {
	min-width: 0;
}

/**********************/
/* List hover preview */
/**********************/

.projects[data-layout="list"] .projects-item-media {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 48%;
	width: min(18vw, 18rem);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.98);
	transition: opacity .35s var(--easing), transform .5s var(--easing);
}

.projects[data-layout="list"] .projects-item-media picture,
.projects[data-layout="list"] .projects-item-media img {
	display: block;
	width: 100%;
	height: auto;
}

/********************/
/* Filter animation */
/********************/

.projects.is-filtering .projects-items {
	align-content: flex-start;
	overflow-anchor: none;
}

/* Apply view changes immediately; projects.js controls the animation. */
.projects.is-filtering .projects-item-data,
.projects.is-filtering .projects-item-media {
	transition: none !important;
}

/* Grid labels and list previews stay hidden during rearrangement. */
.projects.is-filtering[data-layout="grid"] .projects-item-data,
.projects.is-filtering[data-layout="list"] .projects-item-media {
	visibility: hidden;
	opacity: 0;
}

/* Filtering blurs the picture; suppress the separate image-hover effect. */
.projects.is-filtering[data-layout="grid"] .projects-item-media img {
	filter: none;
	transform: none;
	transition: none !important;
}

/****************/
/* Hidden items */
/****************/

.projects-item[hidden] {
	display: none !important;
}