/*=========================
	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 .35s cubic-bezier(.4,0,0,1), background-color .15s ease, box-shadow .15s ease;
}
.page-hero__breadcrumb a:hover,
.page-hero__breadcrumb a:focus {
	background-color: rgba(255, 110, 51, .25);
	background-size: 0% 2px;
	box-shadow: 0 0 0 3px rgba(255, 110, 51, .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 — nothing overhangs, so no space needs reserving; the hero just needs a gap
   before the next block (James, 2026-07-14: "when there is no graphic selected, the bottom margin
   should be 60px"). */
section.block-page-hero.page-hero--no-graphic {
	--ph-mark-h: 0px;
	margin-bottom: 60px;
	padding-bottom: 0;
	overflow: hidden;
}
/* Mobile: no bottom margin on the no-graphic hero. */
@media (max-width: 767.98px) {
	section.block-page-hero.page-hero--no-graphic {
		margin-bottom: 0;
	}
}
/* Graphic sits in the media/image slot (no overhanging mark), so nothing needs
   reserving below. Without anchors, drop the overhang margin so the block's own
   bottom spacing (pb-X) controls the gap — set pb-0 for no space at all
   (James, 2026-07-15). */
section.block-page-hero.page-hero--graphic-media:not(.has-anchors) {
	--ph-mark-h: 0px;
	margin-bottom: 0;
	overflow: hidden;
}
/* Text-only hero (no image) that still has a brand mark: top-align the content
   and give the band the mark's height so the mark sits below the text instead
   of overlapping it (matches the live article banner). */
section.block-page-hero:not(.has-image):not(.page-hero--no-graphic) .page-hero__inner {
	align-items: start;
	min-height: var(--ph-mark-h);
}

.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 {
	align-self: center;
}
/* Title-only hero: when the content column has NOTHING but the title (no top-title,
   no copy, no CTAs — and no graphic), vertically centre the title against the image
   instead of top-aligning it (advocacy-info-and-resources). Overrides content-align-top.
   The image is the taller element, so it defines the row height and the title centres
   within it — no image override needed. */
.block-page-hero .page-hero__inner:not(:has(.top-title)):not(:has(.page-hero__copy)):not(:has(.page-hero__ctas)) {
	align-items: center;
}

.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: unset;
	}
	.block-page-hero .top-title {
		font-size: 18px !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);
}
/* Mobile: space the CTAs from the copy above and drop the bottom margin. */
@media (max-width: 767.98px) {
	.block-page-hero .page-hero__ctas {
		margin-top: var(--space-6);
		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;
}
/* Photo crop: CENTRE, not bottom. Live crops hero photos from the centre (WP's hard-cropped
   -WxH variant), so `object-position: bottom` cut portrait originals off at the bottom —
   about-our-services' hero (a 1255x2000 portrait) showed only the lower third.
   The focal-point system still wins: skelly_focal_style() emits an inline object-position,
   and an inline style overrides this rule. */
.block-page-hero .page-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	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;
	display: block;
}

/* 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: 0;
	padding-bottom: 0;
	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 */
.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;
}
.block-page-hero .page-hero__decoration-mark.graphic--triangle-right {
	height: 400px;
	max-height: 370px;
}

/* Anchors present: the separate anchor section below provides the space, so
   drop the reserved overhang margin. When NO graphic is selected, the
   .page-hero--no-graphic rule above already zeroes it. Otherwise the base
   margin-bottom stays, reserving room for the graphic's overhang so the next
   block never overlaps it. */
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 var(--space-5);
	margin-top: 0;
}
.page-hero__anchor-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	padding-bottom: var(--space-6);
	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 .35s cubic-bezier(.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 only screen and (max-width: 991.98px) {
	.page-hero__anchor-inner {
		grid-template-columns: 1fr;
	}
	.page-hero__anchor-col:first-child {
		display: none;
	}
}
/* Mobile anchors (James, 2026-07-16): keep the list inside the container gutter (the bare
   .container lost its side padding here), no divider line, no big gap below. */
@media only screen and (max-width: 767.98px) {
	.page-hero__anchor-section .container {
		padding-left: var(--container-px);
		padding-right: var(--container-px);
	}
	.page-hero__anchor-inner {
		padding-bottom: 0;
	}
	.page-hero__anchor-inner::after {
		display: none;
	}
	.page-hero__anchor-section {
		padding: var(--space-4) 0;
	}
}

@media (max-width: 767.98px) {
	/* (mobile breadcrumb rules live in the ≤767 block further down — the old
	   `> *:not(:first-child){display:none}` rule here fought them and left
	   "< Home" instead of live's "< immediate parent") */
	.block-page-hero .page-hero__copy p {
		margin-bottom: 0;
		font-size: 24px !important;
		line-height: 1.3 !important;
	}
}

@media only screen and (max-width: 991.98px) {
	.page-hero__breadcrumb-wrap {
		padding-top: var(--space-4);
		padding-bottom: var(--space-4);
	}
	/* LIVE 1:1 (2026-07-16 sweep): live's hero columns are col-sm-* = side-by-side FROM 768,
	   and live only hides its decoration icon BELOW 768 (banner.css:
	   `@media (max-width:47.99em){ .c-banner-standard-page__icon{display:none} }`).
	   We used to stack + hide the mark below 992, which emptied image+graphic heroes
	   (IDD-2023) on tablet. Both moved to the ≤767 block. */
	/* Live scales the mark with its column (icon-container ±38.5% margins ≈ 150-180px on a
	   tablet column); our fixed desktop heights (380px fat-zig-zag) swallowed the headline. */
	.block-page-hero .page-hero__decoration-mark,
	.block-page-hero .page-hero__decoration-mark[class*="graphic--"] {
		height: 180px;
	}
	/* (removed) the old no-graphic hide took PHOTOS with it (EY Sweeny) — James, 2026-07-16:
	   "we only remove it if its an svg graphic"; the SVG-only hide lives in the ≤767 block */
	.block-page-hero .page-hero__copy {
		font-size: 1.375rem;
		max-width: 100%;
	}
	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;
	}
}

/* Mobile only: no top/bottom padding on the hero container (tablet keeps --space-5 above). */
@media only screen and (max-width: 767.98px) {
	.block-page-hero .container {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* Triangle decoration graphic — 768px and up: flex wrapper (left-aligned like live). */
@media (min-width: 768px) {
	.block-page-hero .page-hero__decoration-mark.graphic--triangle-right {
		display: flex;
	}
}
/* Tablet (768–991): the generic ≤991.98 rule shrank the mark to 180px — live's
   tablet triangle is ~273px, so size it up. And keep the anchors on the RIGHT
   (2-col) like desktop instead of collapsing to full width. */
@media (min-width: 768px) and (max-width: 991.98px) {
	.block-page-hero .page-hero__decoration-mark.graphic--triangle-right {
		height: 280px;
		max-height: none;
	}
	.page-hero__anchor-inner {
		grid-template-columns: 1fr 1fr;
	}
	.page-hero__anchor-col:first-child {
		display: block;
	}
}

/* Below 768px: stack columns, keep the photo (live shows it full-width under the copy —
   col-xs-16), hide only the decoration mark (live banner.css hides its icon <48em). */
@media only screen and (max-width: 767px) {
	.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;
		gap: 32px;   /* live's copy-to-photo gap on phones (default 75px row gap read as a hole) */
	}
	.block-page-hero .page-hero__image {
		width: 100%;
		max-height: none;
		aspect-ratio: 610 / 525;   /* live's o-ratio (padding-bottom: 86.06%) */
		align-self: auto;
	}
	.block-page-hero .page-hero__decoration {
		display: none;
	}
	/* Mobile: PHOTOS always stay; only an SVG graphic sitting in the image slot is
	   removed (live hides its banner icon <48em — James: "we only remove it if its
	   an svg graphic") */
	.block-page-hero .page-hero__image.is-svg,
	.block-page-hero .page-hero__image--graphic {
		display: none;
	}

	/* Mobile breadcrumb band spacing — live 1:1: the crumb sits FLUSH under the
	   header (0 top padding; live keeps ~32px below it before the hero, which our
	   space-4 bottom already matches). The ≤991 rule pads 30px both sides. */
	.page-hero__breadcrumb-wrap {
		padding-top: 0;
	}

	/* Mobile breadcrumb — live 1:1 (verified guide-dog-mobility 2026-07-16): live hides
	   every crumb INCLUDING Home and the current page, and shows only the IMMEDIATE
	   PARENT as a back-link with a LEFT chevron ("< Dog Services", underlined).
	   The parent = the LAST <a> (the current page is a <span>); the sep right after
	   it gets flipped and flex-ordered in front. (An earlier version targeted
	   a:first-of-type, which showed "< Home" — wrong crumb.) */
	.page-hero__breadcrumb {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.page-hero__breadcrumb > * {
		display: none;
	}
	/* the base `.page-hero__breadcrumb .breadcrumb__sep { display:inline-block }`
	   rule (0,2,0) beats the `> *` hide (0,1,1) — hide seps at equal specificity */
	.page-hero__breadcrumb > .breadcrumb__sep {
		display: none;
	}
	/* Immediate parent link only */
	.page-hero__breadcrumb > a:last-of-type {
		display: block;
		font-size: 16px;
		order: 2;
	}
	/* The sep after the parent link: flip left, move before text */
	.page-hero__breadcrumb > a:last-of-type + .breadcrumb__sep {
		display: block;
		order: 1;
		transform: scaleX(-1);
		flex-shrink: 0;
		width: 10px;
		height: 16px;
	}
}

/* Hub-hero graphic (live's .c-banner-articles__graphic): the SVG occupies the RIGHT column, in
   place of the photo a leaf page would have. Sized to fill its column like live, which lets the
   shape bleed to the hero's right edge. */
.block-page-hero .page-hero__image--graphic {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--color-n-black, #282829);
	/* Hug the SVG's own height like live (c-banner-articles__graphic is height:auto)
	   — the base .page-hero__image aspect-ratio:1/1 made this a square, leaving empty
	   space above/below the short chevron graphic on tablet. */
	aspect-ratio: auto;
	height: auto;
	max-height: none;
}
.block-page-hero .page-hero__image--graphic svg {
	width: 100%;
	height: auto;
	max-height: 450px;
	fill: currentColor;
}
/* Mobile: hide the hub-hero graphic (SVG in the image column). MUST come after the
   `display: flex` rule above — the earlier ≤767 hide (with the same specificity)
   was being re-shown by that later flex rule, so the graphic stayed visible. */
@media (max-width: 767.98px) {
	.block-page-hero .page-hero__image--graphic {
		display: none;
	}
}

/* ── TABLET (≤991) GRAPHIC HEROES — James, 2026-07-16 @977px: the mark rendered
   as a full-width 180px strip overlapping the hero CTA, and nothing reserved
   space for its overhang. When a decoration mark is present:
   - the mark goes back to a proper size (250px, bigger than the 180px cap)
   - the hero container gets 200px bottom padding so content clears the mark
   - the section reserves the overhang below (unless anchors provide it). ── */
@media only screen and (max-width: 991.98px) {
	section.block-page-hero:has(.page-hero__decoration-mark) {
		--ph-mark-h: 250px;
	}
	section.block-page-hero:has(.page-hero__decoration-mark) .page-hero__decoration-mark,
	section.block-page-hero:has(.page-hero__decoration-mark) .page-hero__decoration-mark[class*="graphic--"] {
		height: var(--ph-mark-h);
		/* mark sits LEFT on tablet (overrides the ≥768 triangle centring rule) */
		display: flex;
		justify-content: flex-start;
	}
	/* content container ONLY — the decoration wrapper also carries .container,
	   and padding it lifts the mark off the section's bottom edge */
	section.block-page-hero:has(.page-hero__decoration-mark) .container:not(.page-hero__decoration) {
		padding-bottom: 200px !important;
	}
	section.block-page-hero:has(.page-hero__decoration-mark) .container.page-hero__decoration {
		padding-bottom: 0 !important;
	}
	/* reserve the overhang so the next block never sits under the mark */
	section.block-page-hero:has(.page-hero__decoration-mark):not(.has-anchors) {
		margin-bottom: calc(var(--ph-mark-h) * 0.5 + var(--space-6));
	}
	/* anchors section provides the space instead — keep it clear of the mark
	   by pushing the anchor list right of the overhang */
	section.block-page-hero.has-anchors:has(.page-hero__decoration-mark) {
		margin-bottom: 0;
	}
}

/* Mobile: the decoration mark is hidden (≤767 hides .page-hero__decoration), so the
   200px bottom padding it reserved above is just empty space — remove it. */
@media only screen and (max-width: 767.98px) {
	section.block-page-hero:has(.page-hero__decoration-mark) .container:not(.page-hero__decoration) {
		padding-bottom: 0 !important;
	}
}

/* ── iPAD / TABLET ANCHOR PAGES — Userback #8081379 (2026-07-29): on pages with an
   "On this page" anchor list, the decoration mark's WIDTH follows its height by
   aspect ratio (half-circle = 689×333 ≈ 2.07×h), so the 250px tablet mark rendered
   ~517px wide and ran UNDER the anchor links column (right grid column starts
   ~53vw). Live keeps its mark inside the left column at these sizes. Cap the mark
   height on has-anchors heroes so mark width stays clear of the links column:
   - 768–991  (iPad portrait):  180px  → ~372px wide, column starts ~434px ✓
   - 992–1199 (iPad landscape): 210px  → ~435px wide, column starts ~522px ✓
   Desktop ≥1200 is unchanged (already verified fixed for the reported 1920 case). */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	section.block-page-hero.has-anchors:has(.page-hero__decoration-mark) {
		--ph-mark-h: 180px;
	}
	section.block-page-hero.has-anchors:has(.page-hero__decoration-mark) .page-hero__decoration-mark,
	section.block-page-hero.has-anchors:has(.page-hero__decoration-mark) .page-hero__decoration-mark[class*="graphic--"] {
		height: var(--ph-mark-h);
	}
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
	section.block-page-hero.has-anchors:has(.page-hero__decoration-mark) {
		--ph-mark-h: 210px;
	}
	section.block-page-hero.has-anchors:has(.page-hero__decoration-mark) .page-hero__decoration-mark,
	section.block-page-hero.has-anchors:has(.page-hero__decoration-mark) .page-hero__decoration-mark[class*="graphic--"] {
		height: var(--ph-mark-h);
	}
}