/*
 * Projects (inc/projects.php): the Projects page (page-projects.php, template-parts/projects/*),
 * a project (single-sl_project.php) and the product page's "Used in projects" block.
 * Behaviour: assets/js/projects.js (.is-loading on the grid, .is-in on new cards, lightbox).
 */

/* ---------- Hero ---------- */
.sl-projects-hero {
	border-bottom: 1px solid var(--sl-gray-200);
	background:
		radial-gradient(60rem 20rem at 85% -10%, color-mix(in srgb, var(--sl-accent) 8%, transparent), transparent 70%),
		var(--sl-gray-50);
}
.sl-projects-hero__inner { padding-block: 3.5rem 3rem; }
@media (min-width: 640px) {
	.sl-projects-hero__inner { padding-block: 5rem 4rem; }
}
.sl-projects-hero__title {
	max-width: 48rem;
	margin: .75rem 0 1.25rem;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1.875rem;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.025em;
}
@media (min-width: 640px) {
	.sl-projects-hero__title { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
	.sl-projects-hero__title { font-size: 3rem; line-height: 1; }
}
.sl-projects-hero__text {
	max-width: 40rem;
	color: var(--sl-gray-600);
	font-size: .875rem;
	line-height: 1.625;
}
@media (min-width: 640px) {
	.sl-projects-hero__text { font-size: 1.125rem; line-height: 1.75rem; }
}
.sl-projects-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	margin: 2rem 0 0;
}
.sl-projects-hero__stat { display: flex; align-items: baseline; gap: .5rem; }
.sl-projects-hero__num {
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 2rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -.02em;
}
.sl-projects-hero__label {
	margin: 0;
	color: var(--sl-gray-500);
	font-family: var(--sl-font-mono);
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ---------- Type chips ---------- */
.sl-projects { padding-block: 2rem 4rem; }
.sl-projects__chips {
	display: flex;
	gap: .5rem;
	margin-bottom: 2rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
}
.sl-projects__chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: .5rem;
	padding: .5rem .875rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-pill);
	background: var(--sl-white);
	color: var(--sl-gray-700);
	font-size: .8125rem;
	line-height: 1.25rem;
	font-weight: 500;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: color var(--sl-duration) var(--sl-ease-std), background-color var(--sl-duration) var(--sl-ease-std), border-color var(--sl-duration) var(--sl-ease-std);
}
.sl-projects__chip:hover { border-color: var(--sl-black); color: var(--sl-black); }
.sl-projects__chip.is-active { border-color: var(--sl-black); background: var(--sl-black); color: var(--sl-white); }
.sl-projects__chip-count {
	min-width: 1.25rem;
	padding: 0 .375rem;
	border-radius: var(--sl-r-pill);
	background: var(--sl-gray-100);
	color: var(--sl-gray-600);
	font-family: var(--sl-font-mono);
	font-size: 10px;
	line-height: 1.125rem;
	text-align: center;
}
.sl-projects__chip.is-active .sl-projects__chip-count { background: rgb(255 255 255 / .18); color: var(--sl-white); }

/* ---------- Grid ---------- */
.sl-projects__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem 1.5rem;
	transition: opacity var(--sl-duration) var(--sl-ease-std);
}
.sl-projects__grid.is-loading:not([data-sl-loader]) { opacity: .45; pointer-events: none; }
@media (min-width: 640px) {
	.sl-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.sl-projects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sl-project-card--feature { grid-column: span 2; }
}
.sl-projects__empty { padding-block: 3rem; text-align: center; color: var(--sl-gray-600); }
.sl-projects__empty p { margin-bottom: 1rem; }
.sl-projects__more { display: flex; justify-content: center; margin-top: 3rem; }
.sl-projects__more .is-loading { opacity: .6; pointer-events: none; }

/* ---------- Card ---------- */
.sl-project-card { min-width: 0; }
.sl-project-card.is-in { animation: sl-project-in .5s var(--sl-ease-apple) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes sl-project-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}
/* The framed card (like .sl-product-card): white panel, the cover inset by .5rem, a footer row
   under a hairline. Hover lifts it slightly and fills the round arrow button. */
.sl-project-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: .5rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-card);
	background: var(--sl-white);
	color: inherit;
	transition: transform var(--sl-duration) var(--sl-ease-std), box-shadow var(--sl-duration) var(--sl-ease-std), border-color var(--sl-duration) var(--sl-ease-std);
}
.sl-project-card__link:hover {
	border-color: var(--sl-gray-300);
	box-shadow: var(--sl-shadow-md);
	transform: translateY(-3px);
}
.sl-project-card__link:focus-visible { outline: 2px solid var(--sl-black); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.sl-project-card__link:hover { transform: none; }
}
.sl-project-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: calc(var(--sl-r-card) - .25rem);
	background: var(--sl-gray-100);
}
@media (min-width: 1024px) {
	/* Two columns plus the gap wide, at the height of its neighbours' 4:3 images: with the
	   .5rem inset, (2w + gap − 1rem) / .75(w − 1rem) ≈ 2.8 at the desktop container widths. */
	.sl-project-card--feature .sl-project-card__media { aspect-ratio: 14 / 5; }
}
.sl-project-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--sl-ease-apple);
}
.sl-project-card__link:hover .sl-project-card__img { transform: scale(1.04); }
.sl-project-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--sl-gray-300);
}
.sl-project-card__placeholder svg { width: 3rem; height: 3rem; }
.sl-project-card__badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	padding: .25rem .625rem;
	border-radius: var(--sl-r-badge);
	background: rgb(255 255 255 / .9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--sl-black);
	font-family: var(--sl-font-mono);
	font-size: 10px;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.sl-project-card__body { display: flex; flex-direction: column; flex: 1; gap: .375rem; padding: 1rem .5rem 1.25rem; }
.sl-project-card__meta {
	color: var(--sl-gray-500);
	font-family: var(--sl-font-mono);
	font-size: .6875rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.sl-project-card__title {
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1.125rem;
	line-height: 1.35;
	font-weight: 600;
	transition: color var(--sl-duration) var(--sl-ease-std);
}
.sl-project-card--feature .sl-project-card__title { font-size: 1.375rem; }
.sl-project-card__link:hover .sl-project-card__title { color: var(--sl-accent); }
.sl-project-card__text {
	display: -webkit-box;
	overflow: hidden;
	color: var(--sl-gray-600);
	font-size: .875rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.sl-project-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-inline: -.5rem;
	padding: .75rem 1rem .25rem;
	border-top: 1px solid var(--sl-gray-100);
}
.sl-project-card__products { color: var(--sl-gray-600); font-size: .8125rem; font-weight: 500; }
.sl-project-card__products strong { color: var(--sl-black); font-family: var(--sl-font-mono); }
.sl-project-card__go {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-pill);
	color: var(--sl-black);
	transition: background-color var(--sl-duration) var(--sl-ease-std), border-color var(--sl-duration) var(--sl-ease-std), color var(--sl-duration) var(--sl-ease-std);
}
.sl-project-card__go svg { transition: transform var(--sl-duration) var(--sl-ease-std); }
.sl-project-card__link:hover .sl-project-card__go { border-color: var(--sl-black); background: var(--sl-black); color: var(--sl-white); }
.sl-project-card__link:hover .sl-project-card__go svg { transform: translateX(2px); }
.sl-project-card--compact .sl-project-card__title { font-size: 1rem; }

/* ---------- Call to action ----------
   The dark box itself is the shared .sl-cta-box (assets/css/footer.css). */
.sl-projects-cta { padding-block: 1rem 5rem; }

/* ---------- A project ---------- */
.sl-project { padding-top: 1.5rem; }
.sl-project__head { max-width: 52rem; margin-top: 1.5rem; }
.sl-project__types { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.sl-project__type {
	padding: .25rem .625rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-badge);
	color: var(--sl-accent);
	font-family: var(--sl-font-mono);
	font-size: 10px;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.sl-project__type:hover { border-color: var(--sl-accent); }
.sl-project__title {
	margin: 0;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 2rem;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.025em;
}
@media (min-width: 1024px) {
	.sl-project__title { font-size: 3rem; }
}
.sl-project__meta {
	margin: 1rem 0 0;
	color: var(--sl-gray-500);
	font-family: var(--sl-font-mono);
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.sl-project__lead { margin: 1.25rem 0 0; color: var(--sl-gray-700); font-size: 1.125rem; line-height: 1.6; }
.sl-project__cover {
	position: relative;
	margin: 2rem 0 0;
	overflow: hidden;
	border-radius: var(--sl-r-img-lg);
	background: var(--sl-gray-100);
	aspect-ratio: 16 / 9;
}
@media (min-width: 1024px) {
	.sl-project__cover { aspect-ratio: 21 / 9; }
}
/* Absolutely placed, so the image's own size never overrides the box's aspect-ratio. */
.sl-project__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-project__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	margin-top: 3rem;
}
@media (min-width: 1024px) {
	.sl-project__layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; align-items: start; }
}
.sl-project__story { max-width: 46rem; }
.sl-project__story > :first-child { margin-top: 0; }
.sl-project__facts {
	padding: 1.5rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-card);
	background: var(--sl-gray-50);
}
@media (min-width: 1024px) {
	.sl-project__facts { position: sticky; top: calc(var(--sl-header-h, 80px) + 1.5rem); }
}
.sl-project__facts-title {
	margin: 0 0 1rem;
	color: var(--sl-gray-500);
	font-family: var(--sl-font-mono);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sl-project__facts-list { margin: 0; }
.sl-project__facts-list div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .625rem;
	border-bottom: 1px solid var(--sl-gray-200);
	font-size: .875rem;
}
.sl-project__facts-list dt { color: var(--sl-gray-500); }
.sl-project__facts-list dd { margin: 0; color: var(--sl-black); font-weight: 500; text-align: right; }
.sl-project__facts-btn { width: 100%; margin-top: 1.25rem; }

.sl-project-section { padding-top: 4rem; }
.sl-project-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.sl-project-section__title {
	margin: 0 0 1.5rem;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
}
.sl-project-section__head .sl-project-section__title { margin-bottom: 0; }
.sl-project-section__head .sl-btn { gap: .375rem; }

/* Gallery */
.sl-project-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}
@media (min-width: 768px) {
	.sl-project-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
.sl-project-gallery__item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--sl-r-img);
	background: var(--sl-gray-100);
	cursor: zoom-in;
}
.sl-project-gallery__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sl-ease-apple); }
.sl-project-gallery__item:hover .sl-project-gallery__img { transform: scale(1.04); }

/* Lightbox */
.sl-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(10 10 12 / .94);
	color: var(--sl-white);
}
.sl-lightbox::backdrop { background: transparent; }
.sl-lightbox[open] { display: grid; place-items: center; }
.sl-lightbox__img { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 6rem); object-fit: contain; user-select: none; }
@media (min-width: 768px) {
	.sl-lightbox__img { max-width: calc(100vw - 10rem); }
}
.sl-lightbox__count {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	font-family: var(--sl-font-mono);
	font-size: .75rem;
	letter-spacing: .06em;
	opacity: .75;
}
.sl-lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--sl-r-pill);
	background: rgb(255 255 255 / .12);
	color: var(--sl-white);
	cursor: pointer;
	transition: background-color var(--sl-duration) var(--sl-ease-std);
}
.sl-lightbox__btn:hover { background: rgb(255 255 255 / .24); }
.sl-lightbox__btn--close { top: .75rem; right: .75rem; }
.sl-lightbox__btn--prev { left: 1rem; top: 50%; transform: translateY(-50%) rotate(180deg); }
.sl-lightbox__btn--next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* Products used */
.sl-project-products__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1rem;
}
@media (min-width: 768px) {
	.sl-project-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.sl-project-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sl-project-more { padding-bottom: 1rem; }
.sl-project .sl-projects-cta { padding-top: 4rem; }

/* ---------- Product page: Used in projects ---------- */
.sl-product-projects { margin-top: 3rem; }
@media (min-width: 1024px) {
	.sl-product-projects { margin-top: 4rem; }
}

/* ---------- Customizer → Projects layout (body classes from inc/projects.php) ---------- */
@media (min-width: 1024px) {
	.sl-projcols-2 .sl-projects__grid:not(.sl-projects__grid--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-projcols-4 .sl-projects__grid:not(.sl-projects__grid--compact) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sl-pgcols-2 .sl-project-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-pgcols-4 .sl-project-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* "Plain" card: no frame, the cover and text sit straight on the page. */
.sl-projcard-plain .sl-project-card__link { padding: 0; border-color: transparent; background: none; }
.sl-projcard-plain .sl-project-card__link:hover { border-color: transparent; box-shadow: none; transform: none; }
.sl-projcard-plain .sl-project-card__media { border-radius: var(--sl-r-img); }
.sl-projcard-plain .sl-project-card__body { padding: 1rem 0 .75rem; }
.sl-projcard-plain .sl-project-card__foot { margin-inline: 0; padding-inline: 0; }