/* ── IMAGE LOADER (matches Framer Grid lightbox spinner) ── */
@keyframes spinner-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.img-loader {
	position: absolute;
	top: calc(50% - 14px);
	left: calc(50% - 14px);
	width: 28px;
	height: 28px;
	border: 2px solid rgba(127, 127, 127, 0.25);
	border-top-color: var(--spinner-color, var(--color-dark));
	border-radius: 50%;
	pointer-events: none;
	animation: spinner-spin 800ms linear infinite;
	transition: opacity 0.3s ease;
}

.modal-image-wrap .img-loader {
	--spinner-color: var(--color-white);
}

.card-image-wrap.loaded .img-loader,
.modal-image-wrap.loaded .img-loader {
	opacity: 0;
	pointer-events: none;
}

/* ── PROJECTS GRID ── */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: 4px;
	row-gap: 240px;
	align-items: end;
	padding: 0 16px;
	transition: opacity 0.2s ease;
}

@media (max-width: 1440px) {
	.projects-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 1080px) {
	.projects-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── PROJECT CARD ── */
.project-card {
	position: relative;
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.project-card.visible {
	opacity: 1;
}

.card-image-wrap {
	position: relative;
	overflow: hidden;
	background: var(--color-light-gray);
	width: 100%;
	cursor: pointer;
}

.card-image-wrap.no-lightbox {
	cursor: default;
}

.card-image-wrap img,
.card-image-wrap video {
	width: 100%;
	height: auto;
	display: block;
	transition:
		transform 0.8s ease-out,
		opacity 0.01s ease-out,
		filter 180ms ease;
	pointer-events: none;
}

.card-image-wrap:not(.swipe-fading) img,
.card-image-wrap:not(.swipe-fading) video {
	transition:
		transform 0.8s ease-out,
		opacity 0.01s ease-in,
		filter 180ms ease;
}

.card-image-wrap.swipe-fading img,
.card-image-wrap.swipe-fading video {
	opacity: 0;
}

/* Grayscale on hover (desktop only — matches Framer Grid-Index) */
@media (hover: hover) {
	.card-image-wrap:not(.no-lightbox):hover img,
	.card-image-wrap:not(.no-lightbox):hover video {
		filter: grayscale(1) contrast(var(--hover-contrast, 1));
	}
}

.card-media-count {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	background: var(--color-dark);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-media-count img {
	width: 16px;
	height: 16px;
	display: block;
}

.card-meta {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding-top: 6px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.card-year,
.card-category,
.card-title {
	font-size: var(--text-caption-size);
	font-weight: 400;
	text-transform: none;
	letter-spacing: var(--text-caption-tracking);
	line-height: var(--text-caption-leading);
	color: rgb(10, 10, 10);
}

.card-title {
	padding-right: 1em;
	word-break: break-word;
}

/* ── MOBILE (max-width: 767px) ── */
@media (max-width: 767px) {
	.projects-grid {
		grid-template-columns: 1fr;
		row-gap: 48px;
		align-items: stretch;
	}

	.card-meta {
		position: static;
		padding-top: 6px;
	}
}