/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Page Hero — blocks/page-hero/style.css
 *
 * Auto-enqueued by WordPress via "style": "file:./style.css" in block.json.
 * Never enqueue this manually in functions.php.
 *
 * Moved out of a <style> block inside render.php. Inline styles there were
 * printed once per instance and could not be cached by the browser at all;
 * as a file this is fetched once and cache-busted by filemtime (see
 * heidelberg_version_block_styles() in functions.php).
 *
 * Layout values are unchanged from the inline version so existing pages
 * render identically. The button and the watermark are the new parts.
 *
 * Depends on tokens from css/global.css.
 * =====================================================================================================================
 */

.page-hero {
	--ph-pad-block   : 5rem;      /* 80px ÷ 16 — as before */
	--ph-pad-inline  : 2.5rem;    /* 40px ÷ 16 — as before */
	--ph-col-gap     : 5rem;      /* 80px ÷ 16 */
	--ph-btn-height  : 3.5rem;    /* 56px ÷ 16 — matches the hero and Feature Split */

	--ph-wm-scale    : 40%;
	--ph-wm-opacity  : 1;
	--ph-wm-inset    : 2rem;      /* 32px ÷ 16 — clearance in "inset" mode */

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	padding: var(--ph-pad-block) var(--ph-pad-inline);
	overflow: hidden;             /* clips the watermark when it bleeds */
}


/*
 * Backgrounds
 * ---------------------------------------------------------------------------------------------------------------------
 */

.page-hero--bg-rich-gold  { background: var(--clr-rich-gold);  color: var(--clr-white); }
.page-hero--bg-brown      { background: var(--clr-brown);      color: var(--clr-white); }
.page-hero--bg-warm-beige { background: var(--clr-warm-beige); color: var(--clr-charcoal-black); }
.page-hero--bg-white      { background: var(--clr-white);      color: var(--clr-black); }
.page-hero--bg-black      { background: var(--clr-black);      color: var(--clr-white); }

/* Unchanged ramp — live pages use these exact stops. */
.page-hero--bg-gradient-beige {
	background: linear-gradient(174deg, #EAE1D7 10.39%, #FAF5EF 23.59%);
	color: var(--clr-charcoal-black);
}


/*
 * Decorative watermark
 * ---------------------------------------------------------------------------------------------------------------------
 * Same control set as Featured Boxes: position, scale, opacity and bleed.
 * Scale and opacity arrive as inline custom properties from render.php;
 * position and bleed as modifier classes.
 *
 * Hidden once the columns stack — there is no free space for it there and
 * it only muddies the text.
 */

.page-hero__bg {
	position: absolute;
	z-index: -1;

	width: var(--ph-wm-scale);
	opacity: var(--ph-wm-opacity);

	display: flex;
	pointer-events: none;
}

.page-hero__bg-img {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

/* Vertical anchor */
.page-hero--wm-top-right .page-hero__bg,
.page-hero--wm-top-left .page-hero__bg {
	top: 0;
	align-items: flex-start;
}

.page-hero--wm-bottom-right .page-hero__bg,
.page-hero--wm-bottom-left .page-hero__bg {
	bottom: 0;
	align-items: flex-end;
}

.page-hero--wm-center-right .page-hero__bg,
.page-hero--wm-center-left .page-hero__bg {
	top: 50%;
	transform: translateY(-50%);
	align-items: center;
}

/* Horizontal anchor — logical properties, so a right-anchored mark stays
   on the correct side if the site is ever run in an RTL language. */
.page-hero--wm-top-right .page-hero__bg,
.page-hero--wm-center-right .page-hero__bg,
.page-hero--wm-bottom-right .page-hero__bg {
	inset-inline-end: 0;
	justify-content: flex-end;
}

.page-hero--wm-top-left .page-hero__bg,
.page-hero--wm-center-left .page-hero__bg,
.page-hero--wm-bottom-left .page-hero__bg {
	inset-inline-start: 0;
	justify-content: flex-start;
}

/*
 * Inset mode pulls the mark in on every edge it touches, keeping all of it
 * visible. Worth using for a mark cropped tight to its own artwork —
 * otherwise the flat cut edge lands mid-row and reads as a mistake.
 */
.page-hero--wm-inset.page-hero--wm-top-right .page-hero__bg,
.page-hero--wm-inset.page-hero--wm-top-left .page-hero__bg {
	top: var(--ph-wm-inset);
}

.page-hero--wm-inset.page-hero--wm-bottom-right .page-hero__bg,
.page-hero--wm-inset.page-hero--wm-bottom-left .page-hero__bg {
	bottom: var(--ph-wm-inset);
}

.page-hero--wm-inset.page-hero--wm-top-right .page-hero__bg,
.page-hero--wm-inset.page-hero--wm-center-right .page-hero__bg,
.page-hero--wm-inset.page-hero--wm-bottom-right .page-hero__bg {
	inset-inline-end: var(--ph-wm-inset);
}

.page-hero--wm-inset.page-hero--wm-top-left .page-hero__bg,
.page-hero--wm-inset.page-hero--wm-center-left .page-hero__bg,
.page-hero--wm-inset.page-hero--wm-bottom-left .page-hero__bg {
	inset-inline-start: var(--ph-wm-inset);
}


/*
 * Layout
 * ---------------------------------------------------------------------------------------------------------------------
 */

.page-hero__inner {
	position: relative;
	box-sizing: border-box;
	max-width: 75rem;   /* 1200px ÷ 16 — as before */
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ph-col-gap);
	align-items: center;
}

.page-hero--flipped .page-hero__inner {
	direction: rtl;
}

.page-hero--flipped .page-hero__inner > * {
	direction: ltr;
}


/*
 * Type
 * ---------------------------------------------------------------------------------------------------------------------
 */

.page-hero__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--clr-charcoal-black);
	font-family: var(--ff-body);
	font-size: var(--fs-eyebrow-xl);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: normal;
}

.page-hero__heading {
	margin-bottom: 1.5rem;
	color: var(--clr-charcoal-black);
	font-family: var(--ff-heading);
	font-size: 3.9375rem;      /* 63px ÷ 16 */
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: 4.375rem;     /* 111.111% */
	letter-spacing: 0.07875rem;
}

.page-hero__sub-heading {
	margin-bottom: 1.25rem;
	color: var(--clr-charcoal-black);
	font-family: var(--ff-body);
	font-size: var(--fs-eyebrow-xl);
	font-weight: var(--fw-regular);
	line-height: 2.5rem;
}

.page-hero__body {
	margin-bottom: 2rem;
	color: var(--clr-light-grey);
	font-family: var(--ff-body);
	font-size: var(--fs-body-lg);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: 1.875rem;   /* 150% */
}

.page-hero__body p { margin: 0 0 1em; }
.page-hero__body p:last-child { margin-bottom: 0; }

/* Dark backgrounds: let the section's own colour through rather than
   forcing charcoal on a brown or black hero. */
.page-hero--bg-brown .page-hero__eyebrow,
.page-hero--bg-black .page-hero__eyebrow,
.page-hero--bg-rich-gold .page-hero__eyebrow,
.page-hero--bg-brown .page-hero__heading,
.page-hero--bg-black .page-hero__heading,
.page-hero--bg-rich-gold .page-hero__heading,
.page-hero--bg-brown .page-hero__sub-heading,
.page-hero--bg-black .page-hero__sub-heading,
.page-hero--bg-rich-gold .page-hero__sub-heading,
.page-hero--bg-brown .page-hero__body,
.page-hero--bg-black .page-hero__body,
.page-hero--bg-rich-gold .page-hero__body {
	color: inherit;
}


/*
 * CTA
 * ---------------------------------------------------------------------------------------------------------------------
 * Was a flat rich-gold pill that faded on hover — the only button on the
 * site not using the copper gradient. Now identical in shape, tracking and
 * hover behaviour to the home hero and Feature Split buttons.
 *
 * Scoped as `.page-hero a.page-hero__btn` (0,2,1) because Astra colours
 * anchors via `.entry-content a` (0,1,1), which beats a lone class and
 * repaints the label in the theme link colour.
 */

.page-hero__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.page-hero a.page-hero__btn {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;   /* 10px ÷ 16 */

	min-height: var(--ph-btn-height);
	padding: 0.5rem 1.75rem;

	border: 0;
	border-radius: var(--radius-pill);
	overflow: hidden;   /* clips the ::before gradient to the pill */

	background: var(--gradient-cta);
	color: var(--clr-white);

	font-family: var(--ff-body);
	font-size: var(--fs-btn);
	font-style: normal;
	font-weight: var(--fw-medium);
	line-height: 1.1875rem;
	letter-spacing: var(--ls-btn);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;

	transition:
		transform var(--motion-med) var(--ease-out-soft),
		box-shadow var(--motion-med) var(--ease-out-soft),
		color var(--motion-med) var(--ease-in-out-soft);
}

/* Gradients can't be transitioned, so the hover fill is a second gradient
   on a pseudo-element that cross-fades underneath the label. */
.page-hero a.page-hero__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: var(--gradient-cta-hover);
	transition: opacity var(--motion-med) var(--ease-in-out-soft);
}

.page-hero a.page-hero__btn:hover::before,
.page-hero a.page-hero__btn:focus-visible::before {
	opacity: 1;
}

/* The label MUST go dark here — --gradient-cta-hover starts at white, so a
   white label disappears into the left end of the pill. */
.page-hero a.page-hero__btn:hover,
.page-hero a.page-hero__btn:focus-visible {
	color: var(--clr-charcoal-black);
	transform: translateY(-1px);
	box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(161 103 69 / 0.45);
}

.page-hero a.page-hero__btn:active {
	transform: translateY(0);
}

.page-hero a.page-hero__btn:focus-visible {
	outline: 2px solid var(--clr-copper-deep);
	outline-offset: 3px;
}

/*
 * Arrow, drawn with a mask so it takes its colour from the label and
 * follows it to charcoal on hover. A mask rather than an inline SVG keeps
 * render.php's markup unchanged.
 */
.page-hero a.page-hero__btn::after {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;

	background-color: currentColor;

	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

@media (prefers-reduced-motion: no-preference) {

	.page-hero a.page-hero__btn::after {
		transition: transform var(--motion-med) var(--ease-out-soft);
	}

	.page-hero a.page-hero__btn:hover::after,
	.page-hero a.page-hero__btn:focus-visible::after {
		transform: translateX(3px);
	}

}

.page-hero__small-text {
	margin: 0;
	color: var(--clr-light-grey);
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: 1.625rem;   /* 162.5% */
}


/*
 * Image column
 * ---------------------------------------------------------------------------------------------------------------------
 */

.page-hero__image-wrap {
	position: relative;
	width: 100%;
}

.page-hero__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1rem;
	object-fit: cover;
}


/*
 * Responsive
 * ---------------------------------------------------------------------------------------------------------------------
 * The stacking breakpoint stays at 900px, which is where this block was
 * already built to stack — moving it would reflow live pages.
 */

@media only screen and (max-width: 56.25em) {   /* 900px */

	.page-hero__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.page-hero--flipped .page-hero__inner {
		direction: ltr;
	}

	/* No free space beside a full-width column. */
	.page-hero__bg {
		display: none;
	}

	.page-hero__heading {
		font-size: 2.75rem;      /* 44px ÷ 16 */
		line-height: 1.15;
	}

	.page-hero__sub-heading {
		font-size: var(--fs-body-lg);
		line-height: 1.6;
	}

}

@media only screen and (max-width: 48em) {   /* 768px */

	.page-hero {
		--ph-pad-block: 3rem;
		--ph-pad-inline: var(--container-gutter);
	}

	.page-hero a.page-hero__btn {
		width: 100%;
	}

}