/*=========================
	PAGE HERO BLOCK
	Mirrors the live qld.guidedogs.com.au interior page header:
	- breadcrumb ABOVE / outside the coloured hero
	- large display title + lead intro copy (left), optional square image (right)
	- dark "pac-man-half" brand mark straddling the hero's bottom-left edge
=========================*/

/* --- Breadcrumb: sits outside + above the coloured hero --- */
.page-hero__breadcrumb-wrap {
	padding-top: var(--space-2);
	padding-bottom: var(--space-4);
}
/* Match the block container's horizontal padding so the breadcrumb lines up
   with the hero content (the `section > .container` rule doesn't reach here). */
.page-hero__breadcrumb-wrap > .container {
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}
.page-hero__breadcrumb {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
}
.page-hero__breadcrumb.mobile {
	display: none;
}
.page-hero__breadcrumb a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: 100% 2px;
	background-color: transparent;
	font-size: 18px;
	font-weight: 600;
	padding-bottom: 3px;
	transition:
		background-size 0.35s cubic-bezier(0.4, 0, 0, 1),
		background-color 0.15s ease,
		box-shadow 0.15s ease;
}
.page-hero__breadcrumb a:hover,
.page-hero__breadcrumb a:focus {
	background-color: rgba(255, 110, 51, 0.25);
	background-size: 0% 2px;
	box-shadow: 0 0 0 3px rgba(255, 110, 51, 0.25);
	color: #282829;
	text-decoration: none;
}
/* Current page (last crumb) */
.page-hero__breadcrumb .breadcrumb_last,
.page-hero__breadcrumb [aria-current="page"] {
	color: #69696a;
}
/* chevron-right separator glyph (viewBox 10×16) */
.page-hero__breadcrumb .breadcrumb__sep {
	display: inline-block;
	width: auto;
	height: 16px;
	margin: 0 15px;
	vertical-align: -2px;
}

/* --- Hero body --- */
/* `section[class*="block-"]` globally sets overflow:hidden (0,1,1); match that
   specificity with `section.block-page-hero` so the brand mark can overhang. */
section.block-page-hero {
	position: relative;
	overflow: visible;
	/* Height of the brand mark (width follows the 578×393 aspect ratio).
	   Responsive like live: fixed at full size at/above 1440px, then shrinks
	   proportionally with viewport width (base ÷ 1440 × 100vw). */
	--ph-mark-h: min(360px, 25vw);
	/* The mark is anchored to the hero's bottom edge and pulled down by 50% of
	   its height, so it overhangs by 0.5 × height. Reserve that overhang plus a
	   gap so the mark never touches the block underneath. */
	margin-bottom: calc(var(--ph-mark-h) * 0.5 + var(--space-6));
}
/* No graphic selected — no overhang, so no reserved space. */
section.block-page-hero.page-hero--no-graphic {
	--ph-mark-h: 0px;
	margin-bottom: 0;
	padding-bottom: 0;
	overflow: hidden;
}
/* A decoration graphic overhangs the hero's bottom edge, so the hero always
   needs room below it — that reserve is the BASE `margin-bottom` above (present
   whenever a graphic exists; zeroed by `page-hero--no-graphic`). When anchors
   exist the room instead comes FROM the anchor section below (`has-anchors`
   zeroes the margin; `.page-hero__anchor-section` supplies the top padding).
   pb-0 only zeroes the container's OWN bottom padding — it must NOT collapse the
   below-hero reserve, so we don't touch margin-bottom here. It does mean the
   copy can reach the section bottom, so re-add clearance on the content column
   (top side) so the copy clears the mark's overhanging upper half. */
/* Keep the copy/button clear of the overhanging graphic at every width where the
   graphic shows (>=768px). Below 768 the graphic is hidden, so no reserve.
   - No-image hero: the graphic sits directly below the copy, so the content must
     reserve the mark's full in-hero half (+ gap) — this defines the hero height.
   - Image hero: the tall image already sets the row height, so a fixed modest
     reserve keeps the button off the graphic WITHOUT inflating wide widths (a
     full mark/2 reserve would push the graphic far below a short copy). */
@media (min-width: 768px) {
	section.block-page-hero:not(.has-image):has(.page-hero__decoration-mark) .page-hero__content {
		padding-bottom: calc(var(--ph-mark-h) * 0.5 + var(--space-5));
	}
	section.block-page-hero.has-image:has(.page-hero__decoration-mark) .page-hero__content {
		padding-bottom: var(--space-6);
	}
}

.block-page-hero .page-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-7);
	align-items: center;
}
.block-page-hero.has-image .page-hero__inner {
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: center;
}
.block-page-hero .page-hero__inner.content-align-top {
	align-items: start;
}
.block-page-hero .page-hero__inner.content-align-top .page-hero__image {
	/* Hero image always anchors to the bottom, regardless of content alignment. */
	align-self: end;
}

.block-page-hero .page-hero__inner.content-align-top .page-hero__image.image-top {
	align-self: start;
}

.block-page-hero .top-title {
	display: block;
	font-size: 20px !important;
	font-weight: 700 !important;
	margin-bottom: var(--space-3);
}
.block-page-hero .page-hero__title {
	margin: 0 0 var(--space-5);
}
/* Fluid hero title matching live: flat 82px at >=1280px, then tapering smoothly
   down to 38px by ~480px. Overrides the global font-heading1 sizing AND its
   abrupt <=1199px cliff (3.8rem) so the title scales like live instead of
   halving in size below 1200px. Scoped to heading1 hero titles. */
.block-page-hero .page-hero__title.font-heading1 {
	font-size: clamp(38px, calc(13.5px + 5.5vw), 82px) !important;
}

/* Lead intro — live: 28px / 35px / 600 weight */
.block-page-hero .page-hero__copy {
	max-width: 90%;
	font-size: 1.75rem;
	line-height: 1.25;
	font-weight: 600;
}
.block-page-hero .page-hero__copy p {
	margin: 0 0 var(--space-3);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 30px;
}
.block-page-hero .page-hero__copy p:last-child {
	margin-bottom: 0;
}
.block-page-hero .page-hero__content li + li {
	margin-top: var(--space-4);
}

/* CTA button(s) */
.block-page-hero .page-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: var(--space-5);
}

/* No graphic + no image: nothing renders below the CTAs, so drop their
   bottom margin (per James). */
section.block-page-hero.page-hero--no-graphic:not(.has-image) .page-hero__ctas {
	margin-bottom: 0;
}
.block-page-hero .page-hero__cta {
	align-self: flex-start;
}

/* --- Image (right) — always a square, anchored to the bottom of the hero --- */
.block-page-hero .page-hero__image {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	align-self: end;
	max-height: 525px;
}
.block-page-hero .page-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Default to centre so portrait photos (e.g. the EOI vet) show their subject
	   rather than cropping from the very top (sky). Per-image _skelly_focal still
	   overrides this via an inline object-position. */
	object-position: center;
}
/* SVG decorations aren't photos: don't force the square frame (it letterboxes
   the SVG and leaves empty space above it). Let the container follow the SVG's
   own aspect ratio and anchor it to the bottom of the hero. */
.block-page-hero .page-hero__image.is-svg {
	aspect-ratio: auto;
	height: auto;
	overflow: visible;
}
.block-page-hero .page-hero__image.is-svg img {
	height: auto;
	object-fit: contain;
	object-position: bottom center;
	display: block;
}
/* Chevron SVGs — constrain to a fixed height */
.block-page-hero .page-hero__image[class*="is-svg--chevron"] {
	height: 240px;
}
.block-page-hero .page-hero__image[class*="is-svg--chevron"] img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
}
/* Zig zag double SVGs — constrain to a fixed height */
.block-page-hero .page-hero__image[class*="is-svg--zig-zag-double"] {
	max-height: 535px !important;
}

/* Side graphic (chevron) rendered INLINE in the right column from the `graphic`
   field — fills the column width like live, vertically centred, dark colour. */
.block-page-hero .page-hero__inner .page-hero__image.page-hero__image--graphic {
	height: auto;
	max-height: none;
	overflow: visible;
	align-self: center;
}
.block-page-hero .page-hero__image.page-hero__image--graphic svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--color-n-black);
}
.block-page-hero.has-image:has(.page-hero__image--graphic) .page-hero__inner,
.block-page-hero.has-image:has(.page-hero__image--graphic) .page-hero__inner.content-align-top {
	align-items: center;
}

/* Zero spacing top+bottom: image fills section edge-to-edge; content vertically centred.
   pt-0/pb-0 classes live on .container (child of section), so we use :has() to detect them. */
section.block-page-hero.has-image:has(> .container.pt-0.pb-0) {
	overflow: hidden;
}
section.block-page-hero.has-image:has(> .container.pt-0.pb-0) .page-hero__inner,
section.block-page-hero.has-image:has(> .container.pt-0.pb-0) .page-hero__inner.content-align-top {
	align-items: stretch;
}
section.block-page-hero.has-image:has(> .container.pt-0.pb-0):has(.page-hero__image.is-svg) .page-hero__inner,
section.block-page-hero.has-image:has(> .container.pt-0.pb-0):has(.page-hero__image.is-svg) .page-hero__inner.content-align-top {
	align-items: center;
	min-height: unset;
}
section.block-page-hero.has-image:has(> .container.pt-0.pb-0):has(.page-hero__image.is-svg) .page-hero__image img {
	height: 100%;
	width: 100%;
	object-fit: contain;
	object-position: center;
}
section.block-page-hero.has-image:has(> .container.pt-0.pb-0):has(.page-hero__image.is-svg) .page-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
	position: relative;
	z-index: 2;
}
section.block-page-hero.has-image:has(> .container.pt-0.pb-0) .page-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
	position: relative;
	z-index: 2;
}
section.block-page-hero.has-image:has(> .container.pt-0.pb-0) .page-hero__image {
	max-height: none;
	aspect-ratio: unset;
	align-self: stretch;
	overflow: hidden;
	display: flex;
}
section.block-page-hero.has-image:has(> .container.pt-0.pb-0) .page-hero__image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- Brand mark: own .container (a direct child of the section, so it inherits
   the same max-width + --container-px padding and lines up with the content).
   Absolutely anchored to the section's bottom edge — i.e. the bottom of the
   coloured area — so it straddles the peach/white boundary on any bottom spacing. */
.block-page-hero .page-hero__decoration {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1;
}
.block-page-hero .page-hero__decoration-mark {
	display: block;
	height: var(--ph-mark-h);
	width: auto;
	color: var(--color-n-black);
	transform: translateY(50%);
}
.block-page-hero .page-hero__decoration-mark svg {
	display: block;
	height: 100%;
	width: auto;
}
/* Per-graphic height overrides — all drive --ph-mark-h (the single source of
   truth) so the mark height AND the pb-0 content clearance below stay in sync. */
section.block-page-hero:has(.graphic--zig-zag-single-wave),
section.block-page-hero:has(.graphic--2-and-a-half-circles) {
	--ph-mark-h: min(220px, 15.28vw);
}
section.block-page-hero:has(.graphic--fat-zig-zag),
section.block-page-hero:has(.graphic--fat-zig-zag-vertical) {
	--ph-mark-h: min(380px, 26.39vw);
}
section.block-page-hero:has(.graphic--zig-zag) {
	--ph-mark-h: min(265px, 18.4vw);
}
/* triangle-right-double-horizontal: cap at 280px (default 360 was oversized) */
section.block-page-hero:has(.graphic--triangle-right-double-horizontal) {
	--ph-mark-h: min(280px, 19.44vw);
}

section.block-page-hero.has-anchors {
	margin-bottom: 0;
}

/* ---- Anchor section (separate block below the hero) ---- */
.page-hero__anchor-section {
	padding: var(--space-5) 24px 0;
	margin-top: 0;
}
.page-hero__anchor-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	padding-bottom: var(--space-5);
	position: relative;
}
.page-hero__anchor-inner::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 88%;
	height: 1px;
	background: rgba(0, 0, 0, 0.06);
}
.page-hero__anchor-heading {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 20px;
}
.page-hero__anchors {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.page-hero__anchor-link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 15px;
	font-size: 18px !important;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s ease;
}
.page-hero__anchor-link:hover {
	opacity: 1;
}
.page-hero__anchor-link span {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0% 2px;
	transition: background-size 0.35s cubic-bezier(0.4, 0, 0, 1);
	padding-bottom: 2px;
}
.page-hero__anchor-link:hover span,
.page-hero__anchor-link:focus-visible span {
	background-position: 0% 100%;
	background-size: 100% 2px;
}
.page-hero__anchor-link svg {
	flex-shrink: 0;
	height: 20px;
	width: auto;
}
/* Anchor nav stays in the right column (empty left col holds the graphic) while
   the graphic is visible; it only goes full-width once the graphic hides at 768. */
@media only screen and (max-width: 767.98px) {
	.page-hero__anchor-inner {
		grid-template-columns: 1fr;
	}
	.page-hero__anchor-col:first-child {
		display: none;
	}
}

@media (max-width: 767.98px) {
	/* .page-hero__breadcrumb > *:not(:first-child) {
		display: none;
	} */
	.page-hero__breadcrumb.desktop {
		display: none;
	}
	.page-hero__breadcrumb.mobile {
		display: flex;
	}
	.page-hero__breadcrumb .breadcrumb__sep {
		transform: rotate(180deg);
	}
	.block-page-hero .page-hero__copy p {
		margin-bottom: 0;
		font-size: 22px !important;
		line-height: 1.3 !important;
	}
}

/* 768–991px: match live — the hero KEEPS its two columns (content + image) with
   the graphic still showing at the bottom-left. Only the top padding tightens. */
@media only screen and (max-width: 991.98px) {
	.page-hero__breadcrumb-wrap {
		padding-top: var(--space-4);
		padding-bottom: var(--space-4);
	}
	/* News page hero (no-graphic variant) — hide image on tablet and below */
	section.block-page-hero.page-hero--no-graphic .page-hero__image.is-svg {
		display: none !important;
	}
	.block-page-hero .page-hero__copy {
		max-width: 100%;
	}
	/* Override pt-N / pb-N utility classes on the inner container */
	.block-page-hero .container {
		padding-top: 4rem !important;
		padding-bottom: 0 !important;
	}
}

/* Below 768px: match live — NOW the columns stack (image full-width below the
   copy), the overhanging graphic is hidden (so it can't collide with the
   stacked image), its reserve is dropped, and the top padding tightens to 24px. */
@media only screen and (max-width: 767.98px) {
	.block-page-hero.has-image .page-hero__inner {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.block-page-hero .page-hero__decoration {
		display: none;
	}
	section.block-page-hero {
		margin-bottom: 0;
		padding-bottom: 0 !important;
	}
	.block-page-hero .container {
		padding-top: 2.4rem !important;
		padding-bottom: 0 !important;
	}
	.block-page-hero .page-hero__title {
		margin-bottom: var(--space-4);
	}
}

/* Below 768px: hide image column + mobile breadcrumb */
@media only screen and (max-width: 767px) {
	/* Hide the hero image */
	/* .block-page-hero .page-hero__image,
	section.block-page-hero.has-image:has(> .container.pt-0.pb-0) .page-hero__image {
		display: none !important;
	} */
	.block-page-hero.has-image .page-hero__inner,
	section.block-page-hero.has-image:has(> .container.pt-0.pb-0) .page-hero__inner {
		grid-template-columns: 1fr;
		align-items: start;
	}

	/* Mobile breadcrumb: show only immediate parent + flipped chevron as back-link.
	   Flex reorders the sep (order 1) before the link text (order 2). */
	.page-hero__breadcrumb {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.page-hero__breadcrumb > * {
		display: none;
	}
	/* Home link only */
	.page-hero__breadcrumb > a:first-of-type {
		display: block;
		font-size: 17px;
		order: 2;
	}
	/* The sep after Home: flip left, move before text */
	.page-hero__breadcrumb > a:first-of-type + .breadcrumb__sep {
		display: block;
		order: 1;
		transform: scaleX(-1);
		flex-shrink: 0;
		width: 10px;
		height: 16px;
	}
}

/* Imageless hero with a chevron decoration (e.g. counselling): the band is
   short, so the bottom-anchored mark would ride up over the CTA. Reserve the
   mark's in-band half plus a gap so the chevrons sit BELOW the button. */
section.block-page-hero:not(.has-image):has(.page-hero__decoration-mark.graphic--chevron-right-double),
section.block-page-hero:not(.has-image):has(.page-hero__decoration-mark.graphic--chevron-left-double) {
	padding-bottom: calc(var(--ph-mark-h) * 0.5 + var(--space-6));
}