/**
 * Project Show (006) — candidate styles.
 *
 * Base (no breakpoint): natural document-flow stories, no pin, readable
 * with no JS / reduced motion / missing fonts / failed image load. This is
 * the PERMANENT no-JS/reduced-motion/failed-script fallback for every
 * width — phone (390 anchor), tablet (768, disclosed interpolation — no
 * independent tablet Figma design supplied), and desktop (1024+, exact
 * 1440x900 Figma static reference).
 *
 * project-show-init.js adds [data-ss006-motion="on"] on the root once
 * GSAP/ScrollTrigger are present and motion is not reduced, at EVERY
 * width (phone/tablet/desktop alike). That attribute enables a second,
 * width-scoped layer below that ONLY changes root height, scene
 * layering/pin positioning, and the whole-article clip boundary — it
 * never changes the static tiers above, which remain the exact fallback
 * shown with no JS/reduced motion/failed script at any width. At exactly
 * 1440px the desktop numbers match the Figma static reference 1:1; at
 * other >=1024px widths the info row's two text columns stay bounded by
 * clamp()s anchored to the same 66.25/630.09375/29.375/301.094 figures
 * instead of a different layout.
 *
 * Uses host fonts only: 'Inter Variable' / 'Montserrat Variable' via
 * --ss6-inter / --ss6-mont (actual host token names). No @import, no
 * bundled font files, no font-loading changes.
 */

.ss006-projects {
	position: relative;
	width: 100%;
	color: #171615;
	font-family: var(--ss6-inter, 'Inter Variable', Arial, sans-serif);
}

.ss006-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Base / natural flow (phone + tablet; also desktop before enhancement
 * or whenever motion is not active): each project is a normal in-flow
 * story, nothing pinned, nothing absolutely layered.
 * ------------------------------------------------------------------- */

.ss006-project {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #d9d9d9;
}

.ss006-project__reveal {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.ss006-project__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ss006-project__info {
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
}

.ss006-project__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.ss006-project__title {
	margin: 0;
	font-family: var(--ss6-mont, 'Montserrat Variable', Arial, sans-serif);
	font-weight: 600;
	color: #171615;
}

.ss006-project__description {
	margin: 0;
	font-family: var(--ss6-inter, 'Inter Variable', Arial, sans-serif);
	font-weight: 400;
	color: #5e5a55;
}

.ss006-project__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #171615;
	color: #fff;
	text-decoration: none;
	box-sizing: border-box;
	font-family: var(--ss6-inter, 'Inter Variable', Arial, sans-serif);
	font-weight: 600;
	cursor: default;
	user-select: none;
}

.ss006-project__cta:focus-visible {
	outline: 3px solid #a84a0a;
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------
 * Phone anchor — 390px Figma mobile (1959:11806). Natural flow, no pin.
 * Stage h500 starts after a 46.1484375px reserve; info band is a
 * min-height (297.8515625) that is allowed to grow, never clip. This is
 * the STATIC fallback for phone widths (no JS/reduced motion/no script).
 * ------------------------------------------------------------------- */

.ss006-project__reveal {
	margin-top: 46.1484375px;
	height: 500px;
}

.ss006-project__info {
	min-height: 297.8515625px;
	padding: 32px 20px;
}

.ss006-project__title {
	font-size: 23.077px;
	line-height: 25.385px;
	letter-spacing: -0.1154px;
}

.ss006-project__description {
	font-size: 15.385px;
	line-height: 16.923px;
}

.ss006-project__cta {
	padding: 8px 16px;
	font-size: 12px;
	line-height: normal;
}

/* ---------------------------------------------------------------------
 * Tablet, 768+ — STATIC fallback, disclosed interpolation between the
 * phone anchor and the desktop reference; natural flow, no pin.
 * ------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023.98px) {
	.ss006-project__reveal {
		margin-top: 0;
		height: min(70vw, 640px);
	}

	.ss006-project__info {
		min-height: auto;
		padding: 40px clamp(24px, 6vw, 66.25px);
	}

	.ss006-project__title {
		font-size: 19px;
		line-height: 21px;
		letter-spacing: 0;
	}

	.ss006-project__description {
		font-size: 13px;
		line-height: 17px;
	}

	.ss006-project__cta {
		padding: 10px clamp(16px, 2vw, 17.625px);
		align-self: flex-start;
	}
}

/* ---------------------------------------------------------------------
 * Desktop, 1024+ — STATIC fallback / BASE geometry (independent of JS):
 * three normal-flow <article> stories, each 900px tall (matching the
 * 1440x900 Figma static reference height at every >=1024px width, not
 * just at 1440), with the desktop white bottom info band always
 * visible. This is exactly what renders with no JS, reduced motion, or
 * a failed script load at 1024+.
 * ------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.ss006-project__reveal {
		margin-top: 0;
		height: 826.5625px; /* 900 - 73.4375: stage portion above the info band */
	}

	.ss006-project__info {
		min-height: 0;
		height: 73.4375px;
		flex-direction: row;
		align-items: center;
		gap: 0;
		padding: 0 clamp(24px, 4.6vw, 66.25px);
	}

	.ss006-project__copy {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 630.09375px;
		gap: 5.875px;
	}

	.ss006-project__title {
		font-size: 17.625px;
		line-height: 19.388px;
		letter-spacing: 0;
		white-space: normal;
	}

	.ss006-project__description {
		font-size: 12px;
		line-height: 13.2px;
	}

	.ss006-project__cta {
		flex: 0 0 auto;
		margin-left: 29.375px;
		width: min(301.094px, 23vw);
		height: 28px;
		padding: 0 17.625px;
		font-size: 12px;
		line-height: 12px;
		text-align: center;
		align-self: center;
	}
}

/* Exact 1440x900 static reference: literal Figma pixel values. */
@media (min-width: 1440px) {
	.ss006-project__cta {
		width: 301.094px;
	}
}

/* ---------------------------------------------------------------------
 * Desktop motion enhancement, 1024+ with [data-ss006-motion="on"] only
 * (set by JS once GSAP/ScrollTrigger are confirmed present and motion is
 * not reduced). This layer ONLY changes root height, scene
 * layering/pin positioning, and the WHOLE-ARTICLE clip boundary — the
 * owned GSAP timeline applies clip-path directly to .ss006-project
 * (image + info band together, not just .reveal), so the 900px stage
 * height, info-band metrics, and typography in the static tier above
 * stay exactly as-is. The info band stays `display:flex` on every
 * layered scene (not active-only) so both the outgoing and incoming
 * article keep their own complete band on either side of the advancing
 * clip edge; aria-hidden/inert (set by JS) still gate interactivity and
 * AT exposure per scene regardless of visual overlap.
 * ------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.ss006-projects[data-ss006-motion="on"] {
		height: 100vh;
		background: #d9d9d9;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project {
		background: transparent;
		position: absolute;
		inset: 0;
		height: 100%;
		pointer-events: none;
		z-index: var(--scene-index, 0);
		will-change: clip-path;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project[data-active="true"] {
		pointer-events: auto;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__reveal {
		position: absolute;
		inset: 0;
		margin-top: 0;
		height: 100%;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__info {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		z-index: 10;
	}
}

/* ---------------------------------------------------------------------
 * Phone/tablet MOTION enhancement, <1024px, [data-ss006-motion="on"]
 * only. Same owned pin/timeline as desktop: whole-article clip-path
 * (image + info band together) plus a different stable stage height and
 * adaptive info-band sizing so long copy (e.g. Four Seasons' 5-8 line
 * description at 320-390px) fits without clipping or overlapping the
 * CTA. The static phone/tablet tiers above are left completely
 * untouched as the no-JS/reduced-motion/missing-runtime fallback; this
 * block only ever applies with motion active.
 *
 * 100svh (with 100vh fallback for browsers without svh support) keeps
 * the pinned stage a stable height across mobile browser chrome
 * show/hide instead of oscillating with the dynamic viewport. The
 * reveal/media fills the whole stage (as on desktop); the white info
 * band is an auto-height block anchored to the bottom so it can grow to
 * fit 1-8 lines of copy without clipping, while always leaving the
 * media at least 64px visible per the 320x568 / 844x390 extremes this
 * is checked against. The band stays `display:flex` on every layered
 * scene (not active-only) so both sides of the advancing clip edge show
 * their own full band, matching the desktop enhancement above.
 * ------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
	.ss006-projects[data-ss006-motion="on"] {
		height: 100vh;
		height: 100svh;
		background: #d9d9d9;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project {
		background: transparent;
		position: absolute;
		inset: 0;
		height: 100%;
		pointer-events: none;
		z-index: var(--scene-index, 0);
		will-change: clip-path;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project[data-active="true"] {
		pointer-events: auto;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__reveal {
		position: absolute;
		inset: 0;
		margin-top: 0;
		height: 100%;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__info {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		min-height: 0;
		/* Guarantees >=64px of media stays visible above the info band even
		 * for Four Seasons' longest (5-8 line) copy; if real content ever
		 * needs more than this cap, it scrolls internally rather than
		 * silently clipping (overflow-y:auto, not hidden). */
		max-height: calc(100% - 64px);
		overflow-y: auto;
		z-index: 10;
		padding: 20px clamp(16px, 5vw, 32px);
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__copy {
		gap: 8px;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__title {
		font-size: clamp(16px, 4.6vw, 20px);
		line-height: 1.15;
		letter-spacing: 0;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__description {
		font-size: clamp(12.5px, 3.3vw, 14px);
		line-height: 1.35;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__cta {
		padding: 8px clamp(14px, 3.5vw, 16px);
		font-size: 12px;
		line-height: normal;
		align-self: flex-start;
		flex: 0 0 auto;
	}
}

/* Landscape phone/small landscape tablet (e.g. 844x390): shorter stage,
 * tighter info padding so the required >=64px of visible media and the
 * full info block both fit without clipping or CTA overlap. */
@media (max-width: 1023.98px) and (orientation: landscape) {
	.ss006-projects[data-ss006-motion="on"] .ss006-project__info {
		max-height: calc(100% - 64px);
		padding: 12px clamp(16px, 4vw, 28px);
		gap: 6px;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__copy {
		gap: 4px;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__title {
		font-size: clamp(14px, 3.6vw, 17px);
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__description {
		font-size: clamp(11px, 2.6vw, 12.5px);
		line-height: 1.25;
	}

	.ss006-projects[data-ss006-motion="on"] .ss006-project__cta {
		padding: 6px clamp(12px, 3vw, 14px);
	}
}