/* =====================================================================
   single-project.css
   Layout for a project's own page. The actual media (gallery, video,
   before/after…) is styled separately, in viewers.css, since that
   content will be reused on the case-study page too.
   ===================================================================== */

.pv {
	padding-block: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-8), 8vw, var(--space-9));
}

.pv-crumbs {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--muted);
	margin-bottom: var(--space-5);
}
.pv-crumbs a {
	color: var(--ink);
}
.pv-crumbs span {
	margin: 0 4px;
}

.pv-head {
	max-width: 800px;
	margin-bottom: var(--space-6);
}
.pv-kind {
	display: inline-block;
	background: var(--accent, var(--ink));
	color: #fff;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 0.78rem;
	padding: 0.3rem 0.8rem;
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-3);
}
.pv-head h1 {
	font-size: clamp(1.9rem, 4vw, var(--text-3xl));
	margin: 0 0 var(--space-3);
}
.pv-lead {
	color: var(--muted);
	font-size: 1.05rem;
	max-width: 34em;
}

.pv-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 3px solid var(--accent, var(--brand));
}
.pv-meta dt {
	font-family: var(--font-ui);
	font-size: 0.78rem;
	color: var(--muted);
}
.pv-meta dd {
	margin: 2px 0 0;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: var(--text-sm);
}

.pv-showcase {
	border: 1.5px solid var(--accent, var(--line));
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	background: color-mix(in srgb, var(--accent, var(--brand)) 8%, var(--surface));
	margin: var(--space-6) 0;
}

.pv-body {
	display: grid;
	gap: var(--space-5);
	margin-top: var(--space-7);
}
@media (min-width: 800px) {
	.pv-body {
		grid-template-columns: repeat(2, 1fr);
	}
}
.pv-body h3 {
	font-size: var(--text-lg);
	border-bottom: 2px solid var(--accent, var(--brand));
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-2);
}
.pv-body p {
	color: var(--muted);
}

.pv-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	border-top: 1px solid var(--line);
}
.pv-nav a {
	display: grid;
	gap: 4px;
	text-decoration: none;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: var(--text-lg);
}
.pv-nav-next {
	text-align: right;
	margin-left: auto;
}
.pv-nav small {
	font-weight: 500;
	font-size: var(--text-xs);
	color: var(--muted);
}

.pv-back {
	margin-top: var(--space-7);
}
.pv-back a {
	color: var(--ink);
	text-decoration: none;
}