/* Component: Projects — Figma "Projects" / "Case" */

.spc-projects__inner {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.spc-projects__heads {
	max-width: 480px;
}

.spc-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	padding: 0;
	list-style: none;
}

.spc-projects__card {
	display: flex;
	flex-direction: column;
}

.spc-projects__photo {
	position: relative;
	aspect-ratio: 6 / 5;
	border-radius: 24px;
	overflow: hidden;
	background: var(--sp-border);
}

.spc-projects__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spc-projects__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 8px;
	border-radius: 9999px;
	background: var(--sp-white);
	font: 600 12px/1 var(--sp-font-body);
	color: var(--sp-dark);
}

.spc-projects__badge > span {
	padding: 0 4px;
}

.spc-projects__badge-icon {
	width: 12px;
	height: 12px;
}

.spc-projects__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
}

.spc-projects__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--sp-muted);
}

.spc-projects__title a {
	color: inherit;
	text-decoration: none;
}

.spc-projects__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.spc-projects__card {
	position: relative;
}

/* 1240 – 768: two cards in view, the rest reachable by swiping (Figma shows two). */
@media (max-width: 1439px) {
	/* Doubled class beats the `.spc-main ul { margin: 0 }` reset. */
	.spc-projects__grid.spc-projects__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 16px) / 2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.spc-projects__grid::-webkit-scrollbar {
		display: none;
	}

	.spc-projects__card {
		scroll-snap-align: start;
	}

	.spc-projects__photo {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 1239px) {
	.spc-projects__inner {
		gap: 32px;
	}

	.spc-projects--no-text .spc-projects__inner {
		gap: 64px;
	}

	.spc-projects__heads .spc-h2 {
		font-size: 48px;
	}
}

@media (max-width: 1023px) {
	.spc-projects__text {
		padding: 32px 16px;
	}

	.spc-projects__heads .spc-h2 {
		font-size: var(--spc-h2);
	}
}

/* 360: 320px cards, the next one peeking in from the screen edge. */
@media (max-width: 767px) {
	.spc-projects__heads {
		max-width: none;
	}

	.spc-projects__grid.spc-projects__grid {
		grid-auto-columns: min(320px, calc(100% - 8px));
		margin-inline: calc(var(--spc-gutter) * -1);
		padding-inline: var(--spc-gutter);
		scroll-padding-inline: var(--spc-gutter);
	}
}