/* ==========================================================================
 * Griffin House — Cinematic project page
 * Scoped under body.project-griffin-cinematic
 *
 * Design notes:
 *  - Hero is 1 large + 2 small portrait videos (variant C)
 *  - GSAP enhances flagship, pair comparisons, and tour reel motion
 * ========================================================================== */

/* Token alias map — every value resolves to a theme token in theme.css
 * (--c-*, --f-*, --space-*) so this page stays fully inside the brand
 * design system. Cream body, navy text, gold accent — same as the rest
 * of the site. The cinematic register comes from the imagery and the
 * larger media sequencing, not from inverting the palette. */
body.project-griffin-cinematic {
	--gh-bg:        var(--c-bg);                        /* cream #f5f4f1 */
	--gh-bg-2:      var(--c-bg-elevated);               /* #f8f7f4 */
	--gh-fg:        var(--c-text);                      /* navy #062a40 */
	--gh-fg-strong: var(--c-text-strong);
	--gh-fg-muted:  var(--c-text-muted);
	--gh-fg-faint:  rgba(6, 42, 64, 0.38);
	--gh-rule:      var(--c-border);
	--gh-rule-soft: var(--c-border-subtle);
	--gh-accent:    var(--c-gold);                      /* #a68b5b */
	--gh-accent-line: var(--c-gold-line);
	--gh-pad:       var(--space-section-x, clamp(1.5rem, 3vw, 3rem));
	--gh-display:   var(--f-serif);
	--gh-body:      var(--f-sans);

	color: var(--gh-fg);
}

body.project-griffin-cinematic main.page-main-shell--griffin-cinematic {
	background: var(--gh-bg);
	padding-bottom: clamp(60px, 12vh, 120px);
}

body.project-griffin-cinematic .griffin-hero { position: relative; }

body.project-griffin-cinematic main.page-main-shell--griffin-cinematic * {
	box-sizing: border-box;
}

body.project-griffin-cinematic .griffin-hero,
body.project-griffin-cinematic .griffin-flagship,
body.project-griffin-cinematic .griffin-scroller,
body.project-griffin-cinematic .griffin-tour {
	width: 100%;
	max-width: none;
}

body.project-griffin-cinematic .griffin-hero__large,
body.project-griffin-cinematic .griffin-hero__tile,
body.project-griffin-cinematic .griffin-flagship__figure,
body.project-griffin-cinematic .griffin-scroller__figure,
body.project-griffin-cinematic .griffin-tour__chapter,
body.project-griffin-cinematic .project-detail-more__card-media {
	transform-origin: center center;
}

body.project-griffin-cinematic .griffin-hero__video,
body.project-griffin-cinematic .griffin-flagship__figure img,
body.project-griffin-cinematic .griffin-scroller__figure img,
body.project-griffin-cinematic .project-detail-more__card-media img {
	transform-origin: center center;
	backface-visibility: hidden;
}

body.griffin-gsap-ready .griffin-hero__video,
body.griffin-gsap-ready .griffin-hero__meta,
body.griffin-gsap-ready .griffin-overview-video,
body.griffin-gsap-ready .griffin-flagship__figure,
body.griffin-gsap-ready .griffin-scroller__figure,
body.griffin-gsap-ready .griffin-tour__chapter {
	will-change: transform, opacity;
}

body.griffin-gsap-ready .griffin-flagship__figure:nth-child(2),
body.griffin-gsap-ready .griffin-scroller__figure:nth-child(2) {
	will-change: clip-path, transform;
}

body.project-griffin-cinematic .project-detail-body {
	border-top: 1px solid var(--gh-rule);
	margin-top: clamp(4.5rem, 9vw, 7rem);
	padding-top: clamp(2.25rem, 4vw, 3.75rem);
}

body.project-griffin-cinematic .project-detail-more {
	padding-top: clamp(4.5rem, 9vw, 7.5rem);
}

body.project-griffin-cinematic .project-detail-more__card {
	transition:
		border-color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}

body.project-griffin-cinematic .project-detail-more__card:hover,
body.project-griffin-cinematic .project-detail-more__card:focus-within {
	transform: translateY(-4px);
}


/* === Project body overrides (legacy .griffin-project-* selectors — TODO: prune; default project body now uses .project-detail-*) === */
/* === Section 3 — Project overview ======================================= */
.griffin-overview {
	display: grid;
	grid-template-columns: minmax(280px, 32%) minmax(0, 1fr);
	gap: clamp(48px, 8vw, 112px);
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(56px, 10vh, 110px) var(--gh-pad);
	border-top: 1px solid var(--gh-rule);
	border-bottom: 1px solid var(--gh-rule);
	align-items: start;
}

.griffin-project-meta {
	align-self: start;
}

.griffin-project-meta__inner {
	display: grid;
	gap: clamp(32px, 4vw, 44px);
}

.griffin-project-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(24px, 3.5vw, 40px);
}

.griffin-project-stat {
	display: grid;
	gap: 10px;
}

.griffin-project-stat__line {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	min-width: 0;
}

.griffin-project-stat__value {
	font-family: var(--gh-body);
	font-size: clamp(46px, 6.4vw, 88px);
	line-height: 0.95;
	font-weight: 600;
	color: var(--gh-fg);
	overflow-wrap: anywhere;
}

.griffin-project-stat--location .griffin-project-stat__value {
	font-size: clamp(38px, 4.8vw, 72px);
	line-height: 1;
}

.griffin-project-stat__unit {
	font-family: var(--gh-body);
	font-size: clamp(14px, 1.8vw, 20px);
	line-height: 1.1;
	font-weight: 700;
	color: var(--gh-fg);
	margin-bottom: 7px;
}

.griffin-project-stat__label,
.griffin-project-fact dt,
.griffin-project-fact-label {
	font-family: var(--gh-body);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--gh-fg-muted);
	margin: 0;
}

.griffin-project-facts {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.griffin-project-fact,
.griffin-project-industry {
	display: grid;
	gap: 10px;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--gh-rule);
}

.griffin-project-fact + .griffin-project-fact {
	padding-top: 22px;
}

.griffin-project-fact dd,
.griffin-project-industry__value {
	font-family: var(--gh-body);
	font-size: clamp(18px, 1.8vw, 25px);
	line-height: 1.25;
	font-weight: 500;
	color: var(--gh-fg);
	margin: 0;
}

.griffin-project-meta__extras {
	display: grid;
	gap: 22px;
}

.griffin-project-sector-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.griffin-project-sector-tag {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 22px;
	font-family: var(--gh-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--gh-fg);
	border: 1px solid var(--gh-rule);
	background: var(--gh-bg-2);
}

.griffin-intro {
	display: grid;
	align-content: start;
	gap: clamp(20px, 3vw, 34px);
	padding-top: 6px;
}

.griffin-intro__lead {
	max-width: 740px;
	margin: 0;
	font-family: var(--gh-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(28px, 3.5vw, 50px);
	line-height: 1.4;
	color: var(--gh-fg);
}

.griffin-intro__context {
	max-width: 760px;
	margin: 0;
	font-family: var(--gh-body);
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.65;
	color: var(--gh-fg-muted);
}

.project-detail-overview-media {
	display: grid;
	gap: clamp(18px, 2.5vw, 24px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.project-griffin-cinematic .project-detail-narrative__blocks p {
	margin: 0;
	font-family: var(--gh-body);
	font-size: clamp(1rem, 1.25vw, 1.15rem);
	line-height: 1.65;
	color: var(--gh-fg-muted);
}

/* (caecus-floor-stats CSS removed — replaced by the caecus/project-chapter
   block, which has its own self-contained styling.) */

.griffin-overview-video {
	position: relative;
	width: 100%;
	height: clamp(260px, 26vw, 430px);
	margin: 0;
	overflow: hidden;
	background: var(--gh-bg-2);
}

.griffin-overview-video__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	display: block;
}

.griffin-overview-video figcaption {
	position: absolute;
	left: clamp(14px, 2vw, 24px);
	bottom: clamp(14px, 2vw, 24px);
	z-index: 2;
	font-family: var(--gh-body);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gh-fg);
	background: rgba(245, 244, 241, 0.86);
	padding: 7px 10px;
}


/* === Responsive — mixed-section breakpoints kept here so they apply when any cinematic block is on the page === */
/* === Tablet ≤1023px ====================================================== */
@media (max-width: 1023px) {
	.griffin-hero:not(.griffin-hero--triptych) {
		grid-template-columns: 1fr;
		grid-template-rows: 70vh 30vh;
	}
	.griffin-hero__tiles {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
	}

	.griffin-hero__meta {
		width: min(760px, calc(100% - 2rem));
	}

	.griffin-hero__meta .griffin-title__tag {
		flex-wrap: wrap;
	}

	.griffin-overview {
		grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
		gap: clamp(36px, 5vw, 64px);
	}

	.griffin-flagship__before,
	.griffin-flagship__after,
	.griffin-flagship__figure,
	.griffin-scroller__figure {
		min-height: clamp(360px, 62vh, 680px);
	}
}

@media (max-width: 860px) {
	body.project-griffin-cinematic .project-detail-body {
		margin-top: clamp(3.5rem, 12vw, 5rem);
		padding-top: clamp(1.75rem, 8vw, 2.75rem);
	}

	.griffin-overview {
		grid-template-columns: 1fr;
	}

	.project-detail-overview-media {
		grid-template-columns: 1fr;
	}

	.griffin-project-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.griffin-project-stat--location {
		grid-column: 1 / -1;
	}
}

/* === Phone ≤640px ======================================================== */
@media (max-width: 640px) {
	.griffin-hero {
		grid-template-rows: 60vh 25vh;
	}

	.griffin-overview {
		padding-top: 42px;
		padding-bottom: 48px;
	}

	.griffin-project-stats {
		grid-template-columns: 1fr;
	}

	.griffin-project-sector-tag {
		min-height: 40px;
		padding: 0 16px;
		font-size: 12px;
	}

	.griffin-flagship__stage {
		grid-template-columns: 1fr;
	}
	.griffin-flagship__figure,
	.griffin-flagship__before,
	.griffin-flagship__after {
		height: 60vh;
	}

	.griffin-tour__chapter {
		height: 70vh;
	}

	.griffin-tour__caption {
		max-width: min(86vw, 620px);
	}

	.griffin-tour__chapter-label,
	.griffin-tour__chapter:nth-of-type(7) .griffin-tour__chapter-label {
		font-size: clamp(38px, 13vw, 68px);
	}

	.griffin-scroller__stage {
		grid-template-columns: 1fr;
	}
	.griffin-scroller__figure {
		min-height: 58vh;
	}
}