/**
 * ============================================================
 * PROJECT PAGE — CSS
 * ============================================================ */

/* ── Fixed hero ───────────────────────────────────────────── */
.project-hero {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 100vh;
	z-index: 1;
	overflow: hidden;
	background: #111;
}

/* Creates scroll distance so content starts below hero */
.project-hero__spacer { height: 100vh; }

.project-hero__img,
.project-hero__video {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}

/* Top + bottom gradient — top anchors the nav, bottom anchors the title */
.project-hero__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 42%),
		linear-gradient(to top,    rgba(0,0,0,0.55) 0%, transparent 55%);
	pointer-events: none;
}

/* Bottom-left: category + title + back link */
.project-hero__content {
	position: absolute;
	bottom: 3.5rem;
	left: var(--container-pad);
	color: #fff;
	z-index: 2;
}

.project-hero__category {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.65);
	margin-bottom: 0.6rem;
}

.project-hero__title {
	display: block;
	font-family: var(--font-sans);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 100; /* Thinnest possible architectural weight */
	letter-spacing: 0.4em;
	line-height: 1.1;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 2.5rem;
}

.project-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	transition: opacity 0.3s ease;
}
.project-hero__back:hover { opacity: 0.5; }
.project-hero__back-rule {
	display: block;
	width: 2.5rem; height: 1px;
	background: rgba(255,255,255,0.45);
}

/* "SCROLL TO DISCOVER" — bottom-center */
.project-hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%; transform: translateX(-50%);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
	pointer-events: none;
	transition: opacity 0.5s ease;
	z-index: 2;
	white-space: nowrap;
}
.project-hero__scroll.is-hidden { opacity: 0; }

/* ── Content section (slides over fixed hero) ─────────────── */
.project-content {
	position: relative;
	z-index: 2;
	background: var(--color-bg);
	width: 100%;
	overflow: hidden; /* Seal the edges to stop hero bleed */
}

/* ── Split intro ──────────────────────────────────────────── */
.project-intro {
	display: flex;
	align-items: flex-start;
	gap: 2rem; /* Pulled text closer to the left */
	padding: 2rem var(--container-pad); /* Tightened vertical spacing */
}

.project-intro__image {
	flex: 0 0 55%;
	max-width: 55%;
}

.project-intro__image img {
	width: 100%; height: auto; display: block;
	min-height: 60vh;
	object-fit: cover;
}

.project-intro__aside {
	flex: 1;
	align-self: stretch; /* Match image height */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
}

/* Metadata grid */
.project-meta { border-top: none; }

.project-meta__row {
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	padding: 0.5rem 0; /* Match reference spacing */
	border-bottom: 1px solid var(--color-border);
}

.project-meta__label {
	font-family: var(--font-sans) !important;
	font-size: 0.7rem;
	font-weight: 700; /* Bold as per reference */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #1a1a1a !important;
	flex: 0 0 7rem;
}

.project-meta__value {
	font-family: var(--font-sans) !important;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #1a1a1a !important;
}

/* Body copy — anchored to bottom by flex spacing */
.project-intro__body { margin-top: 0; }

.project-intro__description {
	font-family: var(--font-sans) !important;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4;
	color: #1a1a1a !important;
	opacity: 0.8;
}

/* ── Gallery module wrapper ───────────────────────────────── */
.ic-module {
	padding: 1.5rem var(--container-pad);
}

/* All module images */
.ic-module img {
	width: 100%; height: auto; display: block;
}

/* ── Module: Full width ───────────────────────────────────── */
.ic-module--full-width {
	padding-left: 0;
	padding-right: 0;
}

.ic-module--full-width figcaption {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--color-muted);
	margin-top: 0.75rem;
}

.ic-module__video {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Module: Two equal ────────────────────────────────────── */
.ic-module--two-equal .ic-module__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	align-items: end;
}

/* ── Module: Two asymmetric ───────────────────────────────── */
.ic-module--two-asym .ic-module__grid {
	display: grid;
	gap: 4rem;
	align-items: flex-start;
}
.ic-module--two-asym .ic-module__grid--60-40 { grid-template-columns: 60fr 40fr; }
.ic-module--two-asym .ic-module__grid--70-30 { grid-template-columns: 70fr 30fr; }

.ic-module--two-asym img {
	max-height: 85vh;
	width: auto;
	margin: 0 auto;
	object-fit: cover;
}

/* Stagger the second image for an editorial feel */
.ic-module--two-asym .ic-module__col:nth-child(2) {
	margin-top: 8rem;
}

/* ── Module: Three row ────────────────────────────────────── */
.ic-module--three-row .ic-module__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.5rem; align-items: end;
}
.ic-module--three-row img {
	width: 100%; height: auto;
}

/* ── Module: Image + text ─────────────────────────────────── */
.ic-module--image-text .ic-module__grid {
	display: grid;
	gap: 4rem;
	align-items: end;
}
.ic-module--image-text .ic-module__grid--image-left  { grid-template-columns: 52fr 48fr; }
.ic-module--image-text .ic-module__grid--image-right { grid-template-columns: 48fr 52fr; }
.ic-module--image-text .ic-module__grid--image-right .ic-module__img-wrap { order: 2; }
.ic-module--image-text .ic-module__grid--image-right .ic-module__text-wrap { order: 1; }

.ic-module__text {
	font-family: var(--font-sans) !important;
	font-size: 0.85rem;
	line-height: 1.45;
	color: #777270 !important;
	max-width: 55ch;
}
.ic-module__text p { margin-bottom: 1.2em; }
.ic-module__text p:last-child { margin-bottom: 0; }

/* ── Module: Stacked offset ───────────────────────────────── */
.ic-module--stacked .ic-module__inner {
	display: flex;
	align-items: flex-start;
	gap: 4rem;
}
.ic-module--stacked .ic-module__large { flex: 0 0 60%; }
.ic-module--stacked .ic-module__small {
	flex: 0 0 35%;
	margin-top: 8rem; /* vertical offset */
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.project-intro { flex-direction: column; gap: 2.5rem; }
	.project-intro__image { flex: none; max-width: 100%; }
	.ic-module--two-equal .ic-module__grid,
	.ic-module--two-asym .ic-module__grid--60-40,
	.ic-module--two-asym .ic-module__grid--70-30,
	.ic-module--three-row .ic-module__grid,
	.ic-module--image-text .ic-module__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.ic-module--two-asym .ic-module__col:nth-child(2) { margin-top: 0; }
	.ic-module--image-text .ic-module__grid--image-right .ic-module__img-wrap,
	.ic-module--image-text .ic-module__grid--image-right .ic-module__text-wrap { order: unset; }
	.ic-module--stacked .ic-module__inner { flex-direction: column; gap: 1.5rem; }
	.ic-module--stacked .ic-module__large,
	.ic-module--stacked .ic-module__small { flex: none; width: 100%; margin-top: 0; }
}

@media (max-width: 768px) {
	/* Cap hero height to reduce object-fit:cover zoom on portrait phones */
	.project-hero,
	.project-hero__spacer {
		height: min(100dvh, calc(100vw * 1.25));
	}

	/* Hero title — tighten letter-spacing so it fits on narrow screens */
	.project-hero__title {
		font-size: clamp(1.5rem, 7vw, 2.5rem);
		letter-spacing: 0.2em;
		margin-bottom: 1.5rem;
	}

	.project-hero__content {
		bottom: 5rem; /* Clear the scroll hint */
		max-width: calc(100% - var(--container-pad) * 2); /* Prevent title overflow */
	}

	/* Intro section — tighter on phone */
	.project-intro {
		padding: 2rem var(--container-pad);
		gap: 2rem;
	}

	.project-intro__image img {
		min-height: 45vw; /* Less tall on phone */
	}

	/* Further description — reset alignment set by desktop rule */
	.project-further-description {
		padding: 2.5rem 0 2rem;
	}

	/* Module padding — collaps