/*=========================
	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 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;
	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). */
	--ph-mark-h: 360px;
	/* 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;
}

.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 .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);
}
@media (max-width: 767.98px) {
	.block-page-hero .page-hero__title {
		font-size: 3.8rem !important;
		letter-spacing: -0.1rem !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;
	letter-spacing: -0.1rem;
}
.block-page-hero .page-hero__copy p:last-child {
	margin-bottom: 0;
}
.block-page-hero .page-hero__content {
	margin-bottom: var(--space-4);
}
.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);
}
.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;
	object-position: bottom;
}
/* 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;
	display: block;
}

.block-page-hero .page-hero__image.image-size-default img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
.block-page-hero .page-hero__image.image-align-center img {
	margin-left: auto;
	margin-right: auto;
}
.block-page-hero .page-hero__image.image-align-right img {
	margin-left: auto;
	margin-right: 0;
}

/* 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;
	min-height: 600px;
}
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;
}

section.block-page-hero .page-hero__content > *:last-child {
	margin-bottom: 0;
}

/* --- 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 */
.block-page-hero .page-hero__decoration-mark.graphic--zig-zag-single-wave {
	height: 220px;
}
.block-page-hero .page-hero__decoration-mark.graphic--2-and-a-half-circles {
	height: 220px;
}
.block-page-hero .page-hero__decoration-mark.graphic--fat-zig-zag {
	height: 380px;
}
.block-page-hero .page-hero__decoration-mark.graphic--fat-zig-zag-vertical {
	height: 380px;
}

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

/* ---- Anchor section (separate block below the hero) ---- */
.page-hero__anchor-section {
	padding: var(--space-5) 0 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: flex-start;
	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;
}

@media (min-width: 992px) and (max-width: 1117px) {
	.block-page-hero .page-hero__decoration-mark {
		max-height: 250px;
	}
}

@media only screen and (max-width: 991.98px) {
	.page-hero__anchor-inner {
		grid-template-columns: 1fr;
	}
	.page-hero__anchor-col:first-child {
		display: none;
	}
	.page-hero__breadcrumb-wrap {
		padding-top: var(--space-4);
		padding-bottom: var(--space-4);
		margin-top: 0;
	}
	.block-page-hero.has-image .page-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}
	/* News page hero (no-graphic variant) — hide image on tablet and below */
	section.block-page-hero .page-hero__image.is-svg {
		display: none;
	}
	.block-page-hero .page-hero__copy {
		font-size: 1.375rem;
		max-width: 100%;
	}
	/* Columns stack — hide the overhanging mark so it doesn't collide with the stacked image. */
	.block-page-hero .page-hero__decoration {
		display: none;
	}
	section.block-page-hero {
		margin-bottom: 0;
	}
	/* Override pt-N / pb-N utility classes on the inner container */
	.block-page-hero .container {
		padding-top: var(--space-5) !important;
		padding-bottom: var(--space-5) !important;
	}
}

/* Below 768px: hide image column + mobile breadcrumb */
@media only screen and (max-width: 767.98px) {
	.page-hero__breadcrumb > *:not(:first-child) {
		display: none;
	}
	.block-page-hero .page-hero__copy p {
		margin-bottom: 0;
		font-size: 22px !important;
		line-height: 1.3 !important;
	}
	.page-hero__anchor-section {
		padding: var(--space-5) 2.2rem 0;
	}
	section.block-page-hero {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.block-page-hero:not(.page-hero--no-graphic) .container {
		padding-top: 22px !important;
		padding-bottom: 0 !important;
	}
	/* 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;
	}

	section.block-page-hero.has-image .container {
		padding-bottom: 0;
	}

	/* 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: 16px;
		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;
	}

	.page-hero__anchor-heading,
	.page-hero__anchor-heading.font-heading4 {
		font-size: 2.2rem !important;
	}

	.block-page-hero .page-hero__inner.content-align-top .page-hero__image {
		padding-bottom: 0;
	}
}