/* Page hero (inner pages): shorter photo hero; the facts plate overlaps its bottom edge. Mobile-first. */

.iw-phero {
	background: var(--iw-color-bg);
	--iw-phero-overlap: 56px;
}

/* Photo stage: not full screen like the home hero */
.iw-phero__stage {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(520px, 64svh, 700px);
	overflow: hidden;
	background: var(--iw-color-espresso);
	color: var(--iw-color-on-ink);
}

.iw-phero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.iw-phero__media picture,
.iw-phero__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.iw-phero__media img {
	object-fit: cover;
	object-position: center;
}

/* Wide screens: the top of the photo starts under the header, not behind it. The box reaches up
   by the header height and the stage clips it, so cover still fills the stage. Below 1600 px the
   photo has too little spare top, and the shift would put the head behind the menu or cut it. */
@media (min-width: 1600px) {
	.iw-phero__media--top {
		top: calc(-1 * var(--iw-header-height));
	}
}

.iw-phero__media--top img {
	object-position: center top;
}

.iw-phero__media--bottom img {
	object-position: center bottom;
}

.iw-phero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--iw-color-espresso) 66%, transparent) 0%,
			color-mix(in srgb, var(--iw-color-espresso) 70%, transparent) 40%,
			color-mix(in srgb, var(--iw-color-espresso) 88%, transparent) 100%);
}

/* Text sits at the bottom left, clear of the overlapping plate */
.iw-phero__inner {
	width: 100%;
	max-width: var(--iw-container);
	margin: 0 auto;
	padding: calc(var(--iw-header-height) + var(--iw-space-10)) var(--iw-gutter) calc(var(--iw-phero-overlap) + var(--iw-space-10));
}

.iw-phero__inner > * {
	animation: iw-phero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.iw-phero__inner > :nth-child(2) { animation-delay: 0.08s; }
.iw-phero__inner > :nth-child(3) { animation-delay: 0.16s; }
.iw-phero__inner > :nth-child(4) { animation-delay: 0.24s; }

.iw-phero__kicker {
	display: flex;
	align-items: center;
	gap: var(--iw-space-4);
	margin: 0 0 var(--iw-space-4);
	color: var(--iw-color-taupe-light);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.iw-phero__kicker::before {
	content: "";
	flex: none;
	width: 40px;
	height: 2px;
	background: var(--iw-color-primary);
}

.iw-phero__title {
	margin: 0 0 var(--iw-space-6);
	color: var(--iw-color-on-ink);
	font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	line-height: var(--iw-leading-tight);
	letter-spacing: -0.025em;
}

.iw-phero__title-accent {
	display: block;
	color: var(--iw-color-taupe);
}

.iw-phero__lead {
	max-width: 34rem;
	margin: 0 0 var(--iw-space-6);
	color: rgb(255 255 255 / 80%);
	font-size: var(--iw-text-lg);
	line-height: 1.65;
}

/* Text links, same style as the home hero: primary underlined, secondary dimmed.
   Scoped so Elementor's ".elementor a { text-decoration: none }" does not win. */
.iw-phero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--iw-space-2) var(--iw-space-10);
}

.iw-phero__link {
	display: inline-block;
	padding: var(--iw-space-2) 0;
	font-size: 1.0625rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.iw-phero__actions .iw-phero__link--primary {
	color: var(--iw-color-on-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 55%);
	text-decoration-thickness: 1px;
	text-underline-offset: 8px;
}

.iw-phero__actions .iw-phero__link--primary:hover {
	color: var(--iw-color-on-ink);
	text-decoration-color: var(--iw-color-on-ink);
}

.iw-phero__link--secondary {
	color: rgb(255 255 255 / 72%);
	font-weight: 500;
}

.iw-phero__link--secondary:hover {
	color: var(--iw-color-on-ink);
}

/* Facts plate: light, overlaps the photo and reaches into the content below */
.iw-phero__facts {
	position: relative;
	z-index: 1;
	max-width: var(--iw-container);
	margin: calc(var(--iw-phero-overlap) * -1) auto 0;
	padding: 0 var(--iw-gutter);
}

.iw-phero__facts ul {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--iw-color-surface);
	box-shadow: var(--iw-shadow-md);
}

.iw-phero__facts li {
	display: flex;
	flex-direction: column;
	gap: var(--iw-space-1);
	padding: var(--iw-space-6);
	border-bottom: 1px solid var(--iw-color-line);
}

.iw-phero__facts li:last-child {
	border-bottom: 0;
}

.iw-phero__fact-value {
	color: var(--iw-color-brown);
	font-family: var(--iw-font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
	line-height: var(--iw-leading-tight);
	letter-spacing: -0.01em;
	font-variant-numeric: lining-nums;
}

.iw-phero__fact-label {
	color: var(--iw-color-ink-soft);
	font-size: var(--iw-text-sm);
	line-height: 1.4;
}

@keyframes iw-phero-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 768px) {
	.iw-phero__facts ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.iw-phero__facts li {
		padding: var(--iw-space-8);
		border-bottom: 0;
	}

	.iw-phero__facts li + li {
		border-left: 1px solid var(--iw-color-line);
	}
}

@media (min-width: 1024px) {
	.iw-phero {
		--iw-phero-overlap: 72px;
	}

	.iw-phero__media::after {
		background:
			linear-gradient(90deg,
				color-mix(in srgb, var(--iw-color-espresso) 88%, transparent) 0%,
				color-mix(in srgb, var(--iw-color-espresso) 74%, transparent) 45%,
				color-mix(in srgb, var(--iw-color-espresso) 20%, transparent) 78%,
				transparent 100%),
			linear-gradient(180deg,
				color-mix(in srgb, var(--iw-color-espresso) 50%, transparent) 0%,
				transparent 25%);
	}

	.iw-phero__inner {
		padding-bottom: calc(var(--iw-phero-overlap) + var(--iw-space-12));
	}
}

@media (prefers-reduced-motion: reduce) {
	.iw-phero__inner > * {
		animation: none;
	}
}