/*
 * Hero.
 *
 * Desktop (≥1000px) follows the reference composition, with the text aligned to the
 * container edge (under the logo) and the artwork pushed towards the right edge, as
 * placed by the owner's guide markup. Every measurement is a fraction of --W, the
 * content width (1280px at a 1440px viewport), so the proportions hold between
 * 1000px and 1440px and stop growing above.
 *
 * The visual is the finished 1536×1024 hero artwork (portrait, yellow shapes, glow
 * and side text are part of the image). The theme only positions it and fades
 * its edges into the black background; it draws no decoration of its own.
 */
.pm-hero {
	/* Matches the artwork's own edge colour (#060708) so the fades are invisible. */
	--pm-hero-bg: #060707;
	position: relative;
	container-type: inline-size;
	isolation: isolate;
	overflow: clip;
	background: var(--pm-hero-bg);
}

.pm-hero__inner {
	--W: min(var(--pm-container-max), 100cqw - 2 * var(--pm-gutter));
	position: relative;
	width: var(--W);
	/* Tall enough for the artwork's faded bottom edge (top 4.7% + height 44.8%). */
	min-height: calc(var(--W) * 0.495);
	margin-inline: auto;
}

/* ---------- Text column ---------- */
.pm-hero__content {
	position: relative;
	z-index: 2;
	width: calc(var(--W) * 0.5);
	padding-block: calc(var(--W) * 0.136) calc(var(--W) * 0.02);
}

.pm-hero__eyebrow {
	margin-block-end: calc(var(--W) * 0.011);
	color: #a3a3a3;
	font-size: clamp(11px, calc(var(--W) * 0.0094), 12px);
	font-weight: 600;
	letter-spacing: var(--pm-tracking-eyebrow);
	line-height: 1.4;
	text-transform: uppercase;
}

.pm-hero__title {
	font-size: calc(var(--W) * 0.0405);
	letter-spacing: -0.01em;
	line-height: 0.93;
}

.pm-hero__line {
	display: block;
	white-space: nowrap;
}

.pm-hero__line--accent {
	color: var(--pm-accent);
}

.pm-hero__swoosh {
	display: inline-block;
	width: 2.25em;
	height: auto;
	margin-inline-start: 0.22em;
	color: var(--pm-accent);
	vertical-align: -0.02em;
}

.pm-hero__intro {
	max-width: calc(var(--W) * 0.4);
	margin-block-start: calc(var(--W) * 0.0145);
	color: #cfcfcf;
	font-size: clamp(13.5px, calc(var(--W) * 0.0125), 16px);
	line-height: 1.45;
}

.pm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--W) * 0.0186);
	margin-block-start: calc(var(--W) * 0.0135);
}

/* Buttons scale with the layout so both stay on one row down to 1000px, as in the reference. */
.pm-hero__actions .pm-btn {
	--pm-btn-h: clamp(40px, calc(var(--W) * 0.0344), 44px);
	gap: clamp(10px, calc(var(--W) * 0.011), 14px);
	padding-inline: clamp(16px, calc(var(--W) * 0.019), 24px);
	font-size: clamp(11px, calc(var(--W) * 0.0098), 12.5px);
}

/* ---------- Statistics ---------- */
.pm-stats {
	display: flex;
	margin: calc(var(--W) * 0.0266) 0 0;
	padding: 0;
	list-style: none;
}

.pm-stats__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 42px;
	padding-inline: calc(var(--W) * 0.025);
	border-inline-start: 1px solid rgb(255 255 255 / 22%);
}

.pm-stats__item:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.pm-stats__value {
	color: var(--pm-accent);
	font-family: var(--pm-font-display);
	font-size: clamp(19px, calc(var(--W) * 0.0172), 22px);
	font-weight: 800;
	line-height: 1.1;
}

.pm-stats__label {
	margin-block-start: 3px;
	color: #d4d4d4;
	font-size: clamp(12.5px, calc(var(--W) * 0.0105), 14px);
	line-height: 1.3;
}

/* ---------- Visual ---------- */
.pm-hero__visual {
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
}

/*
 * The 3:2 box the artwork sits in (860×573 at a 1440px viewport). It reaches
 * 9.6% of --W past the container's right edge, but never past the screen edge,
 * so the artwork's side text is never cut off.
 */
.pm-hero__canvas {
	position: absolute;
	top: calc(var(--W) * 0.047);
	right: calc(-1 * min(var(--W) * 0.096, (100cqw - var(--W)) / 2));
	width: calc(var(--W) * 0.672);
	aspect-ratio: 3 / 2;
}

.pm-hero__portrait {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Fade the left, top, right and bottom edges into the background. */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 15%, #000 96%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, #000 4%, #000 84%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent 0%, #000 15%, #000 96%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, #000 4%, #000 84%, transparent 100%);
	mask-composite: intersect;
}

/* ---------- Tablet and mobile: text first, then the artwork ---------- */
@media (max-width: 999.98px) {
	.pm-hero__inner {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.pm-hero__content {
		width: auto;
		margin-inline-start: 0;
		padding-block: calc(var(--pm-header-h) + clamp(28px, 6cqw, 56px)) 0;
	}

	.pm-hero__eyebrow {
		margin-block-end: 14px;
		font-size: 11px;
	}

	/* Sized so the longest reference line ("DESIGN FOR BRANDS") fits the column. */
	.pm-hero__title {
		font-size: min(calc(var(--W) * 0.088), 60px);
	}

	.pm-hero__intro {
		max-width: 34em;
		margin-block-start: 18px;
		font-size: 15.5px;
	}

	.pm-hero__actions {
		gap: 14px;
		margin-block-start: 24px;
	}

	.pm-hero__actions .pm-btn {
		--pm-btn-h: 46px;
		gap: 14px;
		padding-inline: 22px;
		font-size: 12.5px;
	}

	.pm-stats {
		margin-block-start: 30px;
	}

	.pm-stats__item {
		padding-inline: clamp(14px, 5cqw, 32px);
	}

	.pm-stats__value {
		font-size: 21px;
	}

	.pm-stats__label {
		font-size: 13px;
	}

	/*
	 * Show only the part of the artwork between x 14.5% and 78.5%: the person and
	 * the yellow mark, without the side text (which would be cut off and unreadable).
	 */
	.pm-hero__visual {
		position: relative;
		inset: auto;
		width: min(100cqw, 640px);
		aspect-ratio: 1 / 1.0417;
		margin: 12px auto 0;
		overflow: hidden;
		/* Bleed to the screen edges on phones, with soft sides. */
		align-self: center;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
	}

	.pm-hero__canvas {
		top: 0;
		right: auto;
		left: -22.66%;
		width: 156.25%;
	}

	.pm-hero__portrait {
		-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
	}
}

@media (max-width: 479.98px) {
	.pm-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.pm-hero__actions .pm-btn {
		--pm-btn-h: 50px;
	}

	.pm-stats {
		justify-content: space-between;
	}

	.pm-stats__item {
		flex: 1 1 0;
		padding-inline: 12px;
	}

	.pm-stats__item:last-child {
		padding-inline-end: 0;
	}
}