/*
 * Single Portfolio CSS: project hero, metadata, gallery, navigation, and related work.
 */

.sl-project-hero {
	display: grid;
	align-items: end;
	min-height: 78vh;
	padding: calc(var(--sl-header) + 110px) 0 88px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.12)), var(--project-hero) center/cover;
	color: #fff;
}

.sl-project-hero h1 {
	max-width: 960px;
	color: #fff;
}

.sl-project-hero .sl-kicker {
	color: rgba(255, 255, 255, 0.78);
}

.sl-project-info__grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: clamp(42px, 8vw, 120px);
}

.sl-project-info aside {
	border-top: 1px solid var(--sl-line);
}

.sl-project-info__item {
	display: grid;
	gap: 4px;
	padding: 20px 0;
	border-bottom: 1px solid var(--sl-line);
}

.sl-project-info__item span {
	color: var(--sl-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sl-project-info__item strong {
	font-weight: 500;
}

.sl-project-info__content {
	max-width: 780px;
}

.sl-project-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.sl-project-gallery img,
.sl-lightbox-trigger img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
}

.sl-lightbox-trigger {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.sl-project-nav {
	border-top: 1px solid var(--sl-line);
	border-bottom: 1px solid var(--sl-line);
}

.sl-project-nav__inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	padding: 34px 0;
}

.sl-project-nav__inner div:last-child {
	text-align: right;
}

.sl-project-nav span {
	display: block;
	color: var(--sl-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sl-related-projects {
	background: var(--sl-soft);
}

.sl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1400;
	display: grid;
	place-items: center;
	padding: 28px;
	background: rgba(0, 0, 0, 0.86);
}

.sl-lightbox img {
	max-height: 88vh;
	width: auto;
}