/* Project single — Figma Project_Template (3986:14946 / mobile 4164:17408)
   Desktop frame = 1440. Intro content = 1280 (80 + 1280 + 80) with gap 80.
   Tablet (768–1199) keeps the desktop layout/padding; mobile layout is phones only (≤767). */
.project-single {
	background: var(--warm-grey-100, #eeece6);
	overflow-x: clip;
}

/* Keep only the intro on the Figma 1440 content frame.
   Hero, gallery, CTA, and next stay full width. */
.project-intro {
	max-width: 1440px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 56px 0 0;
}

.project-single .container-fluid {
	max-width: none;
	width: 100%;
	padding-left: 80px;
	padding-right: 80px;
}

.has-navy-header .header-section,
.has-navy-header .header-section.sticky {
	background: var(--navy-950);
}

/* —— Hero —— */
.project-hero-media {
	width: 100%;
	height: 596px;
	overflow: hidden;
}

.project-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* —— Intro —— */

.project-intro-top {
	display: flex;
	align-items: flex-start;
	align-self: stretch;
	gap: 80px; /* Figma Content gap */
	margin-bottom: 80px;
	width: 100%; /* fills the 1280 content area inside 80px pads */
}

.project-intro-title-wrap {
	flex: 1;
	min-width: 0;
}

.project-intro-copy {
	flex: 0 0 628px;
	width: 628px;
	max-width: 100%;
	font-weight: 300;
	line-height: 1.2;
	font-size: 18px;
}

.project-intro-copy p {
	margin: 0 0 1em;
}

.project-intro-copy p:last-child {
	margin-bottom: 0;
}

.project-label {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--navy-950, #161a1e);
}

.project-title {
	margin: 0;
	font-family: "Erode", serif;
	font-weight: 300;
	font-size: 66px;
	line-height: 1.05;
	color: var(--navy-950, #161a1e);
}

/* —— Details —— */
.project-details {
	display: flex;
	gap: 0;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 32px;
}

.project-details-heading {
	flex: 1;
	min-width: 0;
	/* Figma: left column 652, rule only on 628 content → 24px gap before details grid */
	padding-right: 24px;
	border-top: 0;
	padding-top: 0;
	padding-bottom: 0;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.2;
}

.project-details-heading > span {
	display: block;
	width: 100%;
	border-top: 1px solid #000;
	padding-top: 24px;
	padding-bottom: 24px;
}

.project-details-grid {
	width: 628px;
	max-width: 100%;
	flex: 0 0 628px;
}

.project-details-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid #000;
}

.project-details-label,
.project-details-value {
	padding: 24px 0;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.2;
}

.project-details-label {
	padding-right: 8px;
}

.project-details-value {
	padding-left: 13px;
}

/* —— Gallery builder —— */
.project-builder {
	padding: 0;
}

.project-builder-inner {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.project-builder-inner > .project-block:last-child {
	padding-bottom: 64px;
}

.project-block img,
.project-block video {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Contained full media — Figma Gallery padded 80 / 720h */
.project-block-full-media.is-contained {
	padding: 32px 80px;
}

.project-block-full-media.is-contained img,
.project-block-full-media.is-contained video {
	width: 100%;
	height: 720px;
	max-height: 720px;
	object-fit: cover;
}

/* Full-bleed — Figma 1440×810 */
.project-block-full-media.is-full-bleed,
.project-block-full-media.is-full_bleed {
	padding: 32px 0;
}

.project-block-full-media.is-full-bleed img,
.project-block-full-media.is-full_bleed img,
.project-block-full-media.is-full-bleed video,
.project-block-full-media.is-full_bleed video {
	width: 100%;
	height: 810px;
	max-height: 810px;
	object-fit: cover;
}

/* Legacy / unspecified full media */
.project-block-full-media.is-image:not(.is-contained):not(.is-full-bleed):not(.is-full_bleed) {
	padding: 32px 80px;
}

.project-block-full-media.is-image:not(.is-contained):not(.is-full-bleed):not(.is-full_bleed) img {
	width: 100%;
	height: 720px;
	max-height: 720px;
	object-fit: cover;
}

/* Two images — Figma Gallery / 2 /
   At 1440: wide-left  80 | 628 | 134 | 464 | 134
            wide-right 134 | 464 | 134 | 628 | 80
   Columns use fr so the gap stays the same ratio when resized. */
.project-block-two-images {
	display: grid;
	align-items: center;
	gap: 0;
	padding: 32px 0;
}

.project-block-two-images.is-equal {
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
	padding-left: 80px;
	padding-right: 80px;
}

.project-block-two-images.is-wide-left,
.project-block-two-images.is-wide_left {
	grid-template-columns: minmax(0, 628fr) minmax(0, 134fr) minmax(0, 464fr);
	padding-left: 5.5556%; /* 80 / 1440 */
	padding-right: 9.3056%; /* 134 / 1440 */
}

.project-block-two-images.is-wide-left .project-block-image:first-child,
.project-block-two-images.is-wide_left .project-block-image:first-child {
	grid-column: 1;
	width: 100%;
	aspect-ratio: 628 / 762;
	height: auto;
}

.project-block-two-images.is-wide-left .project-block-image:last-child,
.project-block-two-images.is-wide_left .project-block-image:last-child {
	grid-column: 3;
	width: 100%;
	aspect-ratio: 464 / 580;
	height: auto;
	align-self: center;
}

.project-block-two-images.is-wide-left .project-block-image:only-child,
.project-block-two-images.is-wide_left .project-block-image:only-child {
	grid-column: 1;
	aspect-ratio: 628 / 762;
}

.project-block-two-images.is-wide-right,
.project-block-two-images.is-wide_right {
	grid-template-columns: minmax(0, 464fr) minmax(0, 134fr) minmax(0, 628fr);
	padding-left: 9.3056%;
	padding-right: 5.5556%;
}

.project-block-two-images.is-wide-right .project-block-image:first-child,
.project-block-two-images.is-wide_right .project-block-image:first-child {
	grid-column: 1;
	width: 100%;
	aspect-ratio: 464 / 580;
	height: auto;
	align-self: center;
}

.project-block-two-images.is-wide-right .project-block-image:last-child,
.project-block-two-images.is-wide_right .project-block-image:last-child {
	grid-column: 3;
	width: 100%;
	aspect-ratio: 628 / 762;
	height: auto;
}

.project-block-two-images .project-block-image {
	overflow: hidden;
	min-width: 0;
}

.project-block-two-images img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Content + media opposite variant */
.project-block-content-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 32px 80px;
}

.project-block-content-media.is-image-left .project-cm-media,
.project-block-content-media.is-image_left .project-cm-media {
	order: -1;
}

.project-cm-title {
	font-family: "Erode", serif;
	font-size: 40px;
	font-weight: 400;
	margin: 0 0 16px;
}

.project-cm-text {
	font-weight: 300;
	line-height: 1.3;
}

/* —— Next Project marquee (brief 4323:9747) —— */
.project-next {
	background: #fff;
	overflow: hidden;
}

.project-next-link {
	display: block;
	color: var(--navy-950, #161a1e);
	text-decoration: none;
}

.project-next-viewport {
	overflow: hidden;
	padding: 112px 0;
}

.project-next-track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.project-next.is-playing .project-next-track {
	animation: projectNextMarquee 28s linear 1 forwards;
}

.project-next-group {
	display: flex;
	align-items: center;
	gap: 48px;
	flex-shrink: 0;
	padding-right: 48px;
}

.project-next-label,
.project-next-name {
	font-family: "Erode", serif;
	font-size: 120px;
	font-weight: 300;
	line-height: 1.2;
	white-space: nowrap;
}

.project-next-line {
	flex: 0 0 161px;
	width: 161px;
	height: 1px;
	background: var(--navy-950, #161a1e);
}

@keyframes projectNextMarquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.project-next.is-playing .project-next-track {
		animation: none;
	}
}

/* —— Tablet: desktop layout + 80px padding, scaled from the 1440 frame (Pastel #20 / #122) —— */
@media (min-width: 768px) and (max-width: 1199px) {
	.project-hero-media {
		height: auto;
		aspect-ratio: 1440 / 596;
	}

	/* 628 / 1280 copy column, 80 / 1280 gap */
	.project-intro-top {
		gap: 6.25%;
	}

	.project-intro-copy {
		flex: 0 0 49.0625%;
		width: auto;
	}

	.project-title {
		font-size: clamp(52px, 5.5vw, 66px);
	}

	.project-details-grid {
		flex: 0 0 49.0625%;
		width: auto;
	}

	.project-block-full-media.is-contained img,
	.project-block-full-media.is-contained video,
	.project-block-full-media.is-image:not(.is-contained):not(.is-full-bleed):not(.is-full_bleed) img {
		height: auto;
		max-height: none;
		aspect-ratio: 1280 / 720;
	}

	.project-block-full-media.is-full-bleed img,
	.project-block-full-media.is-full_bleed img,
	.project-block-full-media.is-full-bleed video,
	.project-block-full-media.is-full_bleed video {
		height: auto;
		max-height: none;
		aspect-ratio: 1440 / 810;
	}

	.project-next-label,
	.project-next-name {
		font-size: 88px;
	}
}

/* —— Mobile (Figma 4164:17408) — phones only; tablet keeps desktop layout —— */
@media (max-width: 767px) {
	.project-single .container-fluid {
		padding-left: 24px;
		padding-right: 24px;
	}

	.project-hero-media {
		height: 206px;
	}

	.project-intro {
		padding: 64px 0 0;
	}

	.project-intro-top {
		flex-direction: column;
		gap: 20px;
		margin-bottom: 24px;
	}

	.project-intro-copy {
		flex: none;
		width: 100%;
	}

	.project-title {
		font-size: 41px;
		line-height: 1.2;
	}

	.project-label {
		margin-bottom: 20px;
	}

	.project-details {
		flex-direction: column;
		gap: 0;
		padding-bottom: 24px;
	}

	/* Figma mobile 4164:17424 — heading py 24, no rule on the title itself */
	.project-details-heading {
		width: 100%;
		padding-right: 0;
		border-top: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	.project-details-heading > span {
		border-top: 0;
		padding: 24px 0;
	}

	.project-details-grid {
		width: 100%;
		flex: none;
	}

	/* Figma mobile rows: border-t, pt 24, gap 24, ~152 | 151 columns */
	.project-details-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 24px;
		align-items: start;
		border-top: 1px solid var(--navy-950, #161a1e);
		padding: 24px 0 20px;
	}

	.project-details-label,
	.project-details-value {
		padding: 0;
		text-align: left;
		color: var(--navy-950, #161a1e);
	}

	.project-block-full-media.is-contained,
	.project-block-full-media.is-image:not(.is-full-bleed):not(.is-full_bleed) {
		padding: 12px 24px;
	}

	.project-block-full-media.is-contained img,
	.project-block-full-media.is-contained video,
	.project-block-full-media.is-image:not(.is-full-bleed):not(.is-full_bleed) img {
		height: 335px;
		max-height: 335px;
	}

	.project-block-full-media.is-full-bleed,
	.project-block-full-media.is-full_bleed {
		padding: 12px 0;
	}

	.project-block-full-media.is-full-bleed img,
	.project-block-full-media.is-full_bleed img,
	.project-block-full-media.is-full-bleed video,
	.project-block-full-media.is-full_bleed video {
		height: 335px;
		max-height: 335px;
	}

	.project-block-two-images,
	.project-block-two-images.is-wide-left,
	.project-block-two-images.is-wide_left,
	.project-block-two-images.is-wide-right,
	.project-block-two-images.is-wide_right,
	.project-block-two-images.is-equal {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 12px 24px;
	}

	.project-block-two-images .project-block-image,
	.project-block-two-images.is-wide-left .project-block-image:first-child,
	.project-block-two-images.is-wide_left .project-block-image:first-child,
	.project-block-two-images.is-wide-left .project-block-image:last-child,
	.project-block-two-images.is-wide_left .project-block-image:last-child,
	.project-block-two-images.is-wide-right .project-block-image:first-child,
	.project-block-two-images.is-wide_right .project-block-image:first-child,
	.project-block-two-images.is-wide-right .project-block-image:last-child,
	.project-block-two-images.is-wide_right .project-block-image:last-child {
		flex: none;
		grid-column: auto;
		width: 100%;
		max-width: none;
		height: 335px;
		aspect-ratio: auto;
		align-self: auto;
	}

	.project-block-two-images img,
	.project-block-two-images.is-wide-left .project-block-image:last-child img,
	.project-block-two-images.is-wide_left .project-block-image:last-child img,
	.project-block-two-images.is-wide-right .project-block-image:first-child img,
	.project-block-two-images.is-wide_right .project-block-image:first-child img,
	.project-block-two-images.is-wide-left .project-block-image:first-child img,
	.project-block-two-images.is-wide_left .project-block-image:first-child img,
	.project-block-two-images.is-wide-right .project-block-image:last-child img,
	.project-block-two-images.is-wide_right .project-block-image:last-child img {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		aspect-ratio: auto;
	}

	.project-block-content-media {
		grid-template-columns: 1fr;
		padding: 24px;
		gap: 24px;
	}

	.project-builder-inner > .project-block:last-child {
		padding-bottom: 40px;
	}

	.project-next {
		background: var(--brown-50, #f7f5ef);
	}

	.project-next-viewport {
		padding: 64px 0;
	}

	.project-next-group {
		gap: 24px;
		padding-right: 24px;
	}

	.project-next-label,
	.project-next-name {
		font-size: 41px;
	}

	.project-next-line {
		flex-basis: 40px;
		width: 40px;
	}

	.project-next.is-playing .project-next-track {
		animation-duration: 18s;
	}
}