/* Inner-page hero — rounded photo card sitting below the header. */

.page-hero { padding: 20px var(--gutter-mobile) 0; }

.page-hero__panel {
	position: relative;
	display: flex;
	max-width: var(--container);
	margin: 0 auto;
	padding: 30px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.page-hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Figma 195:440 — the services photo is not simply covered: it is blown up to
 * 141.54% x 181.95% and pushed up and left so the treatment chair lands under
 * the headline. The tint overlay on top still covers normally. Scoped to the
 * variant so other page heroes keep a plain cover crop.
 */
.page-hero--services .page-hero__photo {
	inset: auto;
	left: -4.13%;
	top: -55.15%;
	width: 141.54%;
	height: 181.95%;
	max-width: none;
}

.page-hero__container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 60px;
	width: 100%;
}

/* Breadcrumbs */

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: var(--btn-ls);
}

.breadcrumbs a,
.breadcrumbs span { color: rgba(246, 246, 246, 0.5); }

.breadcrumbs a:hover { color: var(--color-neutral-7); }

.breadcrumbs .is-current {
	color: var(--color-neutral-7);
	font-weight: 600;
}

.page-hero__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

.page-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-8);
	max-width: 514px;
}

.page-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-neutral-7);
	font-family: var(--font-heading);
	font-size: var(--h5-size);
	line-height: var(--h5-lh);
}

.page-hero__eyebrow img { width: 14px; height: 21px; flex: 0 0 14px; }

.page-hero__headline {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.page-hero__title {
	margin: 0;
	color: var(--color-neutral-7);
	font-family: var(--font-heading);
	font-size: 40px;
	font-weight: var(--h1-weight);
	line-height: var(--h1-lh);
}

.page-hero__text {
	color: var(--color-hero-muted);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

.page-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.page-hero__title { font-size: 52px; }
}

@media (min-width: 1024px) {
	.page-hero { padding-inline: var(--gutter); }
	.page-hero__panel { padding: 50px; min-height: 695px; }
	.page-hero__container { gap: 226px; }
	.page-hero__bottom {
		flex-direction: row;
		align-items: flex-end;
	}
	.page-hero__title { font-size: var(--h1-size); }
}

/*
 * Figma 199:1233 — the header + hero band is not white: it sits on a vertical
 * #EAEDF3 -> #F6F6F6 gradient running the full 899px of the band and ending on
 * the page background, which is why the seam is invisible in the design.
 *
 * The band is painted once, on the page background, rather than split between
 * the header and the hero. The header is sticky now, so any fill of its own
 * would travel down the page as a grey strip; and header and hero are siblings
 * (header.php closes before <main>), so there is no shared wrapper to paint.
 *
 * Sections below the band all carry their own opaque #F6F6F6, so they cover
 * the gradient's tail wherever the band outruns the hero on short viewports.
 */
body:not(.home) {
	/*
	 * The base colour matters as much as the gradient. The hero panel has a
	 * 695px min-height but grows with its content — at some widths it reaches
	 * 899px, putting the foot of the band past the gradient. Ending the ramp on
	 * the same #F6F6F6 the page sits on makes that overrun invisible, instead
	 * of exposing a white strip under the hero.
	 */
	background-color: var(--color-neutral-7);
	background-image: linear-gradient(to bottom, #eaedf3, var(--color-neutral-7));
	background-repeat: no-repeat;
	background-size: 100% 899px;
}

/* The 100px bottom padding is the band's own trailing space (Figma pb-[100px]). */
.page-hero { padding-bottom: 100px; }

/*
 * Price page (Figma 211:1544) — the band is 849px, not 899: this hero carries
 * 50px of trailing space rather than 100 because a price table follows rather
 * than a full section.
 */
.page-hero--tight { padding-bottom: 50px; }

/* On the light article band the crumbs invert: navy at 50%, navy for current. */
.breadcrumbs--dark a,
.breadcrumbs--dark span { color: rgba(26, 41, 74, 0.5); }
.breadcrumbs--dark a:hover { color: var(--color-accent); }
.breadcrumbs--dark .is-current { color: var(--color-primary); }

/*
 * About page (Figma 200:1471). Its H1 is long enough to break into three rows
 * inside the standard 514px content column; the client wants two.
 *
 * Two things constrain it. The column itself, which this widens to 900px, and
 * the rating chip sitting beside it in .page-hero__bottom — from 1024 to 1279
 * that chip leaves the heading only ~587px, so the variant keeps the stacked
 * (chip-below) layout up to 1280. The step down in font-size is what buys the
 * second row at each breakpoint; measured against the live text, with slack for
 * Nohemi landing wider than the Inter fallback.
 */
@media (min-width: 1024px) {
	.page-hero--about .page-hero__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.page-hero--about .page-hero__content { max-width: 900px; }
	.page-hero--about .page-hero__text { max-width: 620px; }
	.page-hero--about .page-hero__title { font-size: 50px; }
}

@media (min-width: 1280px) {
	.page-hero--about .page-hero__bottom {
		flex-direction: row;
		align-items: flex-end;
	}
	.page-hero--about .page-hero__title { font-size: 54px; }
}

@media (min-width: 1440px) {
	.page-hero--about .page-hero__title { font-size: var(--h1-size); }
}

/* New-patient landing page: the booking and phone buttons stack at one shared width. */
.page-hero--landing .page-hero__buttons {
	display: grid;
	grid-template-columns: minmax(0, max-content);
	justify-items: stretch;
}

/* reset.css pins buttons to fit-content, which beats justify-items: stretch. */
.page-hero--landing .page-hero__buttons .btn { width: 100%; justify-content: center; }

@media (max-width: 767px) {
	.page-hero--landing .page-hero__buttons { grid-template-columns: 1fr; }
}

/*
 * Full-bleed photo hero (client, 2026-10-01): the photo runs edge to edge and
 * up under the header, the same as the homepage video hero. The panel loses
 * its card radius and max-width; the copy stays aligned to --container through
 * the inline padding, and the top padding clears the floating header bar.
 */
.page-hero {
	padding-top: 0;
	padding-inline: 0;
}

.page-hero__panel {
	max-width: none;
	border-radius: 0;
	padding: calc(var(--header-h) + 30px) var(--gutter-mobile) 30px;
}

/* The header overlays the photo here, as it does on the homepage. */
body:has(.page-hero) .site-header--static { margin-bottom: calc(var(--header-h) * -1); }

@media (min-width: 1024px) {
	.page-hero { padding-inline: 0; }
	.page-hero__panel {
		min-height: calc(695px + var(--header-h));
		padding: calc(var(--header-h) + 50px) max(var(--gutter), (100% - var(--container)) / 2) 50px;
	}
}