/*
 * PixCraft Hero — PIXCRAFT STUDIO — MASTER HOMEPAGE DESIGN V1.
 * Spec: docs/pixcraft-master-homepage-design.md (the approved master image is
 * the source of truth). W4 layer architecture is unchanged:
 *
 *   .pcs-hero__inner      grid: content | visual
 *     .pcs-hero__content  accessible HTML message (eyebrow, one H1, copy, actions)
 *     .pcs-hero__visual   decorative, aria-hidden
 *       .pcs-hero__fallback  the approved master artwork (<picture>) / poster
 *   .pcs-hero__audience   "Concept projects for" strip
 *
 * Colours/type come from the W2 globals (Elementor kit variables).
 */

.pcs-hero {
	--pcs-hero-ink: var(--e-global-color-pcsink, #1d2420);
	--pcs-hero-forest: var(--e-global-color-pcsforest, #173326);
	--pcs-hero-terra: var(--e-global-color-pcsterra, #b85f3d);
	--pcs-hero-terra-deep: var(--e-global-color-pcsterradeep, #a25436);
	--pcs-hero-ivory: var(--e-global-color-pcsivory, #f5f0e7);
	--pcs-hero-ivory-lt: var(--e-global-color-pcsivorylt, #fbf8f1);
	--pcs-hero-line: var(--e-global-color-pcsline, #ded6c9);
	--pcs-hero-muted: var(--e-global-color-pcsinkmuted, #625e56);
	--pcs-hero-serif: var(--e-global-typography-pcsserif-font-family, "Instrument Serif"), "Instrument Serif", Georgia, "Times New Roman", serif;
	--pcs-hero-sans: var(--e-global-typography-pcsui-font-family, "Manrope"), "Manrope", system-ui, sans-serif;
	--pcs-hero-pad-inline: max(var(--pcs-gutter, 1.25rem), (100% - 1312px) / 2);
	--pcs-hero-header-h: 70px; /* mirrors the header template (70 / 66 / 64) */
	--pcs-hero-strip-h: 5.5rem;

	position: relative;
	isolation: isolate;
	display: block;
	padding-inline: var(--pcs-hero-pad-inline);
	background:
		radial-gradient(60% 70% at 78% 18%, rgba(255, 250, 240, 0.95) 0%, rgba(255, 250, 240, 0) 70%),
		linear-gradient(180deg, var(--pcs-hero-ivory-lt) 0%, var(--pcs-hero-ivory) 100%);
	color: var(--pcs-hero-ink);
	overflow: clip;
}

.pcs-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	grid-template-areas: "content visual";
	align-items: center;
	min-height: min(calc(100svh - var(--pcs-hero-header-h) - var(--pcs-hero-strip-h)), 46rem);
}

/* Content -------------------------------------------------------------------- */

.pcs-hero__content {
	grid-area: content;
	position: relative;
	z-index: 2;
	min-width: 0;
	padding-block: clamp(1.25rem, 0.5rem + 1.5vw, 2rem);
	padding-inline-start: clamp(0rem, -2.5rem + 4vw, 2.5rem);
}

.pcs-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.9em;
	margin: 0 0 clamp(1.125rem, 0.8rem + 0.9vw, 1.75rem);
	font-family: var(--pcs-hero-sans);
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pcs-hero-ink);
}

.pcs-hero__sep {
	color: var(--pcs-hero-terra);
	letter-spacing: 0;
}

.pcs-hero .pcs-hero__title {
	margin: 0;
	font-family: var(--pcs-hero-serif);
	font-size: clamp(2.875rem, 0.75rem + 5vw, 5.5rem);
	font-weight: 400;
	font-style: normal;
	line-height: 0.98;
	letter-spacing: -0.012em;
	text-transform: none;
	color: var(--pcs-hero-forest);
}

.pcs-hero__line {
	display: block;
}

.pcs-hero__line--2 {
	font-style: italic;
	letter-spacing: -0.005em;
	padding-inline-end: 0.08em; /* italic overhang for background-clip */
	color: var(--pcs-hero-forest);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.pcs-hero__line--2 {
		background-image: linear-gradient(90deg, var(--pcs-hero-forest) 0%, #3c4632 38%, var(--pcs-hero-terra-deep) 78%, var(--pcs-hero-terra) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		width: fit-content;
	}
}

@media (forced-colors: active) {
	.pcs-hero__line--2 {
		background: none;
		color: CanvasText;
	}
}

.pcs-hero__line--3 {
	color: var(--pcs-hero-terra-deep);
}

.pcs-hero__support {
	max-width: 27rem;
	margin: clamp(1.125rem, 0.8rem + 0.9vw, 1.625rem) 0 0;
	font-family: var(--pcs-hero-sans);
	font-size: clamp(1rem, 0.9rem + 0.33vw, 1.1875rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--pcs-hero-ink);
}

.pcs-hero__nowrap {
	white-space: nowrap;
}

.pcs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	margin-top: clamp(1.5rem, 1.1rem + 1vw, 2.125rem);
}

.pcs-hero .pcs-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	font-family: var(--pcs-hero-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pcs-hero__arrow {
	display: inline-grid;
	place-items: center;
	flex: none;
	border-radius: 50%;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.pcs-hero__arrow svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Primary: Forest pill + inset circular arrow. */
.pcs-hero .pcs-hero__cta--primary {
	min-height: 3.25rem;
	padding: 0.4375rem 0.4375rem 0.4375rem 1.625rem;
	border-radius: 999px;
	background-color: var(--pcs-hero-forest);
	color: var(--pcs-hero-ivory-lt);
	box-shadow: 0 10px 24px -14px rgba(23, 51, 38, 0.55);
}

.pcs-hero .pcs-hero__cta--primary .pcs-hero__cta-label {
	padding-inline-end: 0.75rem;
}

.pcs-hero .pcs-hero__cta--primary .pcs-hero__arrow {
	width: 2.375rem;
	height: 2.375rem;
	border: 1px solid rgba(251, 248, 241, 0.55);
}

.pcs-hero .pcs-hero__cta--primary:hover,
.pcs-hero .pcs-hero__cta--primary:focus-visible {
	background-color: #0f251b;
	color: var(--pcs-hero-ivory-lt);
}

.pcs-hero .pcs-hero__cta--primary:hover .pcs-hero__arrow {
	background-color: var(--pcs-hero-terra);
	border-color: var(--pcs-hero-terra);
}

/* Secondary: minimal text action + outlined circular arrow. */
.pcs-hero .pcs-hero__cta--secondary {
	min-height: 3rem;
	color: var(--pcs-hero-ink);
}

.pcs-hero .pcs-hero__cta--secondary .pcs-hero__arrow {
	width: 2.625rem;
	height: 2.625rem;
	border: 1px solid rgba(29, 36, 32, 0.55);
}

.pcs-hero .pcs-hero__cta--secondary:hover,
.pcs-hero .pcs-hero__cta--secondary:focus-visible {
	color: var(--pcs-hero-forest);
}

.pcs-hero .pcs-hero__cta--secondary:hover .pcs-hero__arrow {
	border-color: var(--pcs-hero-forest);
	background-color: rgba(23, 51, 38, 0.06);
}

.pcs-hero .pcs-hero__cta:hover .pcs-hero__arrow {
	transform: translateX(2px);
}

.pcs-hero .pcs-hero__cta:focus-visible {
	outline: 2px solid var(--pcs-hero-terra-deep);
	outline-offset: 4px;
}

/* Visual --------------------------------------------------------------------- */

.pcs-hero__visual {
	grid-area: visual;
	position: relative;
	z-index: 1;
	display: grid;
	align-self: stretch;
	align-items: center;
	justify-items: end;
	min-width: 0;
	/* Overlaps into the centre of the Hero, as in the master. */
	margin-inline-start: -12%;
	margin-inline-end: clamp(0rem, -9rem + 16.5vw, 6rem);
	pointer-events: none;
}

.pcs-hero__fallback {
	position: relative;
	grid-area: 1 / 1;
	width: 100%;
}

/* Approved master artwork (0.6.0). One unit = one master-image pixel at the
   Hero's height: the master Hero runs 475 px from the header line to the
   audience-strip line, so --pcs-art-u = available Hero height / 475. The
   artwork file is the master's right-side visual (364 x 472 master px). */
.pcs-hero--cinematic-studio {
	--pcs-hero-avail: min(calc(100svh - var(--pcs-hero-header-h) - var(--pcs-hero-strip-h)), 46rem);
	--pcs-art-u: calc(var(--pcs-hero-avail) / 475);
}

.pcs-hero__fallback--artwork {
	max-width: min(100%, calc(var(--pcs-art-u) * 364));
	justify-self: end;
}

.pcs-hero__art,
.pcs-hero__art-img {
	display: block;
	width: 100%;
}

.pcs-hero__art-img {
	height: auto;
	aspect-ratio: 1456 / 1888;
}

/* Desktop: the artwork sits exactly where the master puts it, registered on
   the copy: left = content start + 252 u (master x 300 vs. copy x 48), top =
   header line + 3 u, width 364 u. Below 1440 px the copy wraps wider, so the
   artwork steps right (0 at 1440, 60 px at 1280) to keep the leaf clear of it.
   Since 0.9.1 the artwork is right-aligned in the Hero (see `left` below). */
@media (min-width: 1101px) {
	.pcs-hero--cinematic-studio .pcs-hero__inner {
		position: relative;
	}

	.pcs-hero--cinematic-studio .pcs-hero__visual {
		grid-area: auto; /* containing block = the whole inner box, not the grid area */
		position: absolute;
		top: calc(var(--pcs-art-u) * 3);
		/* 0.9.1 balance: the artwork occupies the right of the Hero (right edge 50 px inside
		   the content boundary), but never sits closer to the copy than its master position
		   + 45 px (tapering to + 0 at 1101 px, so the narrowest desktop is unchanged).
		   Whichever is further right wins, so narrower desktops keep the clearance. */
		left: max(
			calc(clamp(0rem, -2.5rem + 4vw, 2.5rem) + var(--pcs-art-u) * 252 + clamp(0px, (1440px - 100vw) * 0.375, 4rem) + clamp(0px, (100vw - 1101px) / 4, 45px)),
			calc(100% - var(--pcs-art-u) * 364 - 50px)
		);
		width: calc(var(--pcs-art-u) * 364);
		margin: 0;
		display: block;
	}

	.pcs-hero--cinematic-studio .pcs-hero__fallback--artwork {
		max-width: none;
	}
}

.pcs-hero__fallback-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pcs-radius-lg, 18px);
}

.pcs-hero__fallback--neutral {
	aspect-ratio: 4 / 5;
	max-width: 36rem;
	border-radius: var(--pcs-radius-lg, 18px);
	background-color: var(--pcs-hero-ivory);
	box-shadow: inset 0 0 0 1px var(--pcs-hero-line);
}

/* Audience strip ------------------------------------------------------------- */

.pcs-hero__audience {
	position: relative;
	z-index: 2;
	padding-block: 0.875rem 1.125rem;
	border-top: 1px solid var(--pcs-hero-line);
}

.pcs-hero__audience-label {
	margin: 0 0 0.625rem;
	font-family: var(--pcs-hero-sans);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pcs-hero-muted);
}

.pcs-hero__audience-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.875rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcs-hero__audience-item {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--pcs-hero-sans);
	font-size: clamp(0.875rem, 0.83rem + 0.12vw, 0.9375rem);
	font-weight: 500;
	line-height: 1.3;
	color: var(--pcs-hero-ink);
}

.pcs-hero__audience-icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--pcs-hero-forest);
}

/* Development note (editors only, rendered server-side) ---------------------- */

.pcs-hero__dev {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	max-width: calc(100% - 24px);
	margin: 0;
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba(29, 36, 32, 0.88);
	color: #fbf8f1;
	font: 600 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.01em;
}

/* Variants whose visual treatment is not built yet. */
.pcs-hero--status-placeholder .pcs-hero__fallback--neutral {
	background-color: var(--pcs-hero-ivory);
}

/* Narrow desktop / tablet landscape: keep the split, tighten the overlap. ---- */

@media (max-width: 1024px) {
	.pcs-hero {
		--pcs-hero-header-h: 66px;
	}
}

@media (max-width: 1100px) {
	.pcs-hero__inner {
		grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
	}

	.pcs-hero__visual {
		margin-inline-start: -4%;
	}
}

/* Tablet portrait & mobile: stacked. Order: eyebrow, headline, support, CTAs,
   visual, strip. ------------------------------------------------------------ */

@media (max-width: 900px) {
	.pcs-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"content"
			"visual";
		min-height: 0;
	}

	.pcs-hero__content {
		padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) 0;
		padding-inline-start: 0;
	}

	.pcs-hero .pcs-hero__title {
		font-size: clamp(3rem, 1.4rem + 6.4vw, 5rem);
	}

	.pcs-hero__visual {
		margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 0;
		justify-items: center;
	}

	.pcs-hero__fallback--artwork {
		max-width: min(100%, 30rem);
		justify-self: center;
	}

	.pcs-hero__audience-list {
		justify-content: flex-start;
		gap: 1rem 2.25rem;
	}
}

@media (max-width: 767px) {
	.pcs-hero .pcs-hero__title {
		font-size: clamp(2.75rem, 0.8rem + 9.6vw, 3.75rem);
		line-height: 1;
	}

	.pcs-hero__actions {
		gap: 1rem 1.5rem;
	}

	.pcs-hero__fallback--artwork {
		max-width: min(100%, 22rem);
	}

	.pcs-hero__audience-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem 1.25rem;
	}
}

@media (max-width: 400px) {
	.pcs-hero .pcs-hero__cta--primary {
		padding-inline-start: 1.375rem;
	}

	.pcs-hero__actions {
		gap: 0.875rem 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcs-hero .pcs-hero__cta,
	.pcs-hero__arrow {
		transition: none;
	}

	.pcs-hero .pcs-hero__cta:hover .pcs-hero__arrow {
		transform: none;
	}
}