/* Project Hero — case study top of fold */

.ced-project-hero {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding-top: calc(var(--header-height) + clamp(2rem, 5vw, 4rem));
	padding-bottom: var(--pad-section);
	padding-inline: var(--gutter-x);
	position: relative;
	overflow: hidden;
	max-width: none;
	width: 100%;
	margin-inline: 0;
	/* --platform-accent is stored as a bare RGB triplet ("127, 84, 179")
	   so rgba() helpers across the block can use it directly. The aurora
	   utility wants a full color value though, so we synthesise
	   --aurora-accent here from the triplet. WP's safecss strips a second
	   custom property from the inline style, so this CSS-side derivation
	   is the reliable place to wire it up. */
	--aurora-accent: rgb(var(--platform-accent, 203, 108, 230));
}
.ced-project-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	/* The top-right glow uses the platform's brand color so every case
	   study has a unique chromatic signature. Falls back to lime when
	   --platform-accent isn't set. The bottom-left coral stays constant
	   as a brand-anchor through every project. */
	background:
		radial-gradient(60% 50% at 80% 0%,  rgba(var(--platform-accent, 203, 108, 230), 0.10) 0%, transparent 60%),
		radial-gradient(50% 50% at 0% 100%, rgba(203, 108, 230, 0.06) 0%, transparent 60%);
	pointer-events: none;
}

.ced-project-hero__inner {
	position: relative;
	max-width: var(--page-max);
	margin-inline: auto;
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}

/* ─── Head ─── */
.ced-project-hero__head {
	display: grid;
	gap: 1.5rem;
}
.ced-project-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
}
.ced-project-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--mist);
	text-decoration: none;
	transition: color 240ms var(--ease-smooth);
}
.ced-project-hero__back:hover { color: var(--wp--preset--color--lime); }
.ced-project-hero__pipe::before {
	content: "·";
	margin-right: 1rem;
	color: var(--wp--preset--color--ash);
}

/* Year + industry as separate pills in the crumbs row. Year is bare;
   industry gets a discrete pill so the industry is always visually
   findable — it's the field a curious visitor scans for first. */
.ced-project-hero__year {
	color: var(--wp--preset--color--mist);
}
.ced-project-hero__year::before {
	content: "·";
	margin-right: 1rem;
	color: var(--wp--preset--color--ash);
}
.ced-project-hero__industry {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.25rem 0.75rem 0.25rem 0.55rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--ced-line-06);
	border: 1px solid var(--ced-line-14);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.12em;
}
.ced-project-hero__industry svg {
	color: rgb(var(--platform-accent, 203, 108, 230));
}

.ced-project-hero__title {
	font-size: clamp(2.5rem, 8vw, 7rem);
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 0.96;
	margin: 0;
	color: var(--wp--preset--color--paper);
	max-width: 18ch;
}

.ced-project-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
	padding-top: var(--wp--preset--spacing--xs);
	border-top: var(--wp--custom--grid--hairline);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ced-project-hero__platform {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--paper);
}
.ced-project-hero__platform-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	/* Platform-specific accent — HubSpot orange, Webflow indigo,
	   Framer blue, etc. Falls back to lime when --platform-accent
	   isn't set (legacy / unknown platforms). */
	background: rgb(var(--platform-accent, 203, 108, 230));
	box-shadow: 0 0 0 4px rgba(var(--platform-accent, 203, 108, 230), 0.18);
}
.ced-project-hero__role { color: var(--wp--preset--color--mist); }
.ced-project-hero__url {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--lime);
	text-decoration: none;
	margin-left: auto;
	transition: gap 240ms var(--ease-smooth);
}
.ced-project-hero__url:hover { gap: 0.85rem; }

/* ─── Media ─── */
.ced-project-hero__media {
	position: relative;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background: var(--wp--preset--color--graphite);
	aspect-ratio: 16 / 10;
}
.ced-project-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ced-project-hero__media--placeholder {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #1c1c22, #0c0c10);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(5rem, 14vw, 12rem);
	font-weight: 300;
	letter-spacing: -0.06em;
	margin: 0;
}

/* ─── Headline result ─── */
.ced-project-hero__result {
	background: var(--wp--preset--color--graphite);
	border: 1px solid rgba(203, 108, 230, 0.28);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	display: grid;
	gap: 0.75rem;
	box-shadow: 0 24px 60px -24px rgba(203, 108, 230, 0.18);
}
.ced-project-hero__result-text {
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: var(--wp--preset--color--lime);
	margin: 0;
}

/* ─── Migrated-from badge (HubSpot → Wix etc.) ─── */
.ced-project-hero__migrated {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.25rem 0.7rem 0.25rem 0.55rem;
	border-radius: 999px;
	background: rgba(203, 108, 230, 0.10);
	border: 1px solid rgba(203, 108, 230, 0.28);
	color: var(--wp--preset--color--lime);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ced-project-hero__migrated strong {
	color: var(--wp--preset--color--paper);
	font-weight: 600;
}

/* ─── Device trio (Desktop · Tablet · Mobile auto-scroll) ────────────
   Frames sized by real device aspect ratios — bottoms aligned so the
   three devices read as a coherent "shelf" rather than three columns.
   The screenshot inside each frame scrolls vertically; scroll distance
   is computed via container queries so it always honors the rendered
   frame height regardless of how it was sized at the breakpoint.    */

.ced-device-trio {
	margin: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(1rem, 2vw, 1.75rem);
}

/* Shared device shell — base structure only. Per-device aesthetics
   (Studio Display silver, iPad slim black, iPhone titanium) override
   background/border/etc. below. */
.ced-device {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	overflow: visible; /* let Studio Display stand peek below */
	/* Flex items default to min-width: auto, which sizes them to their
	   intrinsic content. The screenshot inside is 1600px+ wide natively,
	   so without this the device frame stretches past its specified
	   width to fit the raw image. */
	min-width: 0;
	box-sizing: border-box;
}
.ced-device__viewport {
	position: relative;
	overflow: hidden;
	background: #0a0a0c;
	width: 100%;
	min-width: 0;
	min-height: 0;
	container-type: size;
}
.ced-device__shot {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	animation: ced-doom-scroll var(--scroll-dur, 28s) cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
	will-change: transform;
}

/* The animation end-point: scroll the image so its bottom edge aligns
   with the viewport bottom. 100cqh = the viewport's rendered height;
   100% = the image's own height. The image is taller than the viewport
   so (100cqh - 100%) is negative — exactly the translate we want. */
@keyframes ced-doom-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, calc(100cqh - 100%), 0); }
}

/* Pause on hover so the visitor can study a region. */
.ced-device:hover .ced-device__shot,
.ced-device:focus-within .ced-device__shot {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.ced-device__shot { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   APPLE STUDIO DISPLAY — aluminum bezel, light Safari chrome inside,
   thin stand peeking out the bottom. 16:10 viewport.
   ════════════════════════════════════════════════════════════════ */
.ced-device--desktop {
	width: clamp(440px, 56vw, 740px);
	--scroll-dur: 28s;

	/* Outer aluminum frame — subtle silver gradient with bevel highlights */
	background: linear-gradient(180deg, #d6d6da 0%, #b8b8be 100%);
	border: 1px solid #888;
	border-radius: 12px;
	padding: 11px 11px 14px;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12),
		0 30px 60px -28px rgba(0, 0, 0, 0.35),
		0 8px 18px -8px rgba(0, 0, 0, 0.2);
	margin-bottom: 28px; /* room for the stand */
}

/* Studio Display stand — small chin + thin neck below the screen */
.ced-device--desktop::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -28px;
	width: 32%;
	height: 24px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, #c7c7cc 0%, #909096 60%, #b6b6bc 100%);
	border: 1px solid #888;
	border-top: none;
	border-radius: 0 0 10px 10px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 8px 14px -4px rgba(0, 0, 0, 0.25);
}

/* Light Safari-style chrome inside the Studio Display */
.ced-device--desktop .ced-device__chrome {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.8rem;
	background: #ebebed;
	border-bottom: 1px solid #d1d1d3;
	border-radius: 4px 4px 0 0;
	flex: 0 0 auto;
}
.ced-device--desktop .ced-device__viewport {
	aspect-ratio: 16 / 10;
	background: #fff;
	border-radius: 0 0 4px 4px;
}

/* macOS traffic-light dots — kept since they're inside the Safari chrome */
.ced-device__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #3a3a44;
	flex: 0 0 auto;
}
.ced-device__dot:nth-child(1) { background: #ff5f57; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.ced-device__dot:nth-child(2) { background: #ffbd2e; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.ced-device__dot:nth-child(3) { background: #28c840; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }

/* URL pill — light, monospace, centered */
.ced-device__addr {
	margin: 0 auto;
	padding: 0.18rem 0.85rem;
	background: #fff;
	border: 1px solid #d1d1d3;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: #5a5a60;
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   iPad (latest M-series) — uniform thin black bezel, no notch.
   Subtle aluminum side hint via the outer border + small camera dot.
   3:4 portrait viewport.
   ════════════════════════════════════════════════════════════════ */
.ced-device--tablet {
	width: clamp(220px, 22vw, 320px);
	--scroll-dur: 32s;

	background: #0a0a0c;
	border: 1px solid #1d1d22;
	border-radius: 22px;
	padding: 10px;

	box-shadow:
		inset 0 0 0 1.5px #2a2a30,         /* inner aluminum hint */
		0 25px 60px -28px rgba(0, 0, 0, 0.55);
}

/* Hide the old "notch" bar — modern iPads place the camera in the bezel */
.ced-device--tablet .ced-device__notch {
	display: none;
}

/* Tiny front camera dot at top center */
.ced-device--tablet::before {
	content: '';
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	background: #2c2c34;
	border-radius: 50%;
	z-index: 2;
}

.ced-device--tablet .ced-device__viewport {
	aspect-ratio: 3 / 4;
	border-radius: 12px;
	background: #fff;
}

/* ════════════════════════════════════════════════════════════════
   iPhone 17 Pro Max — titanium frame, Dynamic Island at top,
   thin bezels, rounded ~38px corners. 9:19.5 viewport.
   ════════════════════════════════════════════════════════════════ */
.ced-device--mobile {
	width: clamp(150px, 14vw, 215px);
	--scroll-dur: 36s;

	background: linear-gradient(180deg, #45454b 0%, #2c2c32 50%, #45454b 100%);
	border: 1px solid #1a1a1e;
	border-radius: 36px;
	padding: 5px;

	box-shadow:
		inset 0 0 0 2px #1a1a1e,           /* inner black screen bezel */
		inset 0 1px 0 rgba(255, 255, 255, 0.15),
		0 25px 60px -28px rgba(0, 0, 0, 0.6);
}

/* Reuse __notch as the Dynamic Island — pill-shaped, overlaid on the
   screen top. The render.php emits the .ced-device__notch element. */
.ced-device--mobile .ced-device__notch {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 28%;
	height: 18px;
	margin: 0;
	background: #000;
	border-radius: 999px;
	z-index: 3;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
	flex: 0 0 auto;
}

.ced-device--mobile .ced-device__viewport {
	aspect-ratio: 9 / 19.5;
	border-radius: 30px;
	background: #fff;
}

.ced-device-trio__caption {
	flex: 1 0 100%;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
	text-align: center;
}

/* In device-trio mode the headline-result aside sits comfortably under
   the row of devices — no aspect-ratio media wrapper needed. */
.ced-project-hero--devices .ced-project-hero__media { display: none; }

/* Responsive — stack on tablet+below, devices keep their aspect ratios
   but the column gets narrower so they fit. The flex wrap will already
   put them on multiple rows; we just tighten the widths. */
@media (max-width: 1024px) {
	.ced-project-hero__title { font-size: clamp(2.25rem, 7vw, 4.5rem); }
	.ced-device--desktop { width: min(100%, 620px); }
	.ced-device--tablet  { width: clamp(200px, 30vw, 280px); }
	.ced-device--mobile  { width: clamp(140px, 20vw, 180px); }
}
@media (max-width: 640px) {
	.ced-project-hero__title { font-size: clamp(2rem, 10vw, 3rem); }
	.ced-project-hero__meta { gap: 0.75rem 1.25rem; }
	.ced-project-hero__url { margin-left: 0; width: 100%; justify-content: flex-start; }
	.ced-project-hero__result { padding: 1.5rem; }
	.ced-project-hero__media { aspect-ratio: 4 / 3; }
	.ced-device--desktop { width: 100%; }
	.ced-device--tablet  { width: 47%; }
	.ced-device--mobile  { width: 47%; }
}