/* ==========================================================================
   WS4 — Branches page (/branches/, #1268)
   Hero banner, intro copy, South Africa watermark and the [spf_branches] card grid.
   Note: Bricks sets html { font-size: 62.5% } on this site, so 1rem = 10px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — light-grey panel, navy BRANCHES, yellow rule, Eastern Cape route map on the right.
   The map is a 2x render (1232x432) of the PDF artwork shown at its native 616x216 CSS px:
   it is never scaled up. Its left edge fades to transparent so it melts into the panel colour.
   -------------------------------------------------------------------------- */
.spf-branches-hero {
	--spf-bh-title: clamp(4.4rem, 1.75rem + 3.37vw, 6.8rem);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	min-height: 21.6rem;
	overflow: hidden;
}

.spf-branches-hero .spf-branches-hero__inner {
	position: relative;
	z-index: 1;
	justify-content: center;
	align-items: flex-start;
	min-height: 21.6rem;
	padding: 2.4rem 0;
}

.spf-branches-hero .spf-branches-hero__text {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
}

.spf-branches-hero h1.spf-branches-hero__title {
	margin: 0;
	font-size: var(--spf-bh-title);
	line-height: 1;
	letter-spacing: -0.005em;
}

.spf-branches-hero .spf-branches-hero__rule {
	width: 100%;
	margin: 1.4rem 0 1.5rem;
}

/* The tagline fills the width of BRANCHES (it never widens the block itself). */
.spf-branches-hero .spf-branches-hero__tagline {
	width: 0;
	min-width: 100%;
	margin: 0;
	color: #003096;
	font-size: calc(var(--spf-bh-title) * .325);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.spf-branches-hero .spf-branches-hero__map {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	display: block;
	width: 61.6rem;
	max-width: none;
	height: 21.6rem;
	margin: 0;
	object-fit: contain;
	object-position: right bottom;
	pointer-events: none;
}

/* Tablet / phone: text first, map underneath, right-aligned, scaled down only. */
@media (max-width: 1024px) {
	.spf-branches-hero {
		justify-content: flex-start;
	}
	.spf-branches-hero .spf-branches-hero__inner {
		min-height: 0;
		padding: 3rem 0 2rem;
	}
	.spf-branches-hero h1.spf-branches-hero__title {
		font-size: var(--spf-bh-title-stacked, clamp(4.4rem, 1rem + 6vw, 6rem));
	}
	.spf-branches-hero .spf-branches-hero__tagline {
		font-size: calc(var(--spf-bh-title-stacked, clamp(4.4rem, 1rem + 6vw, 6rem)) * .325);
	}
	.spf-branches-hero .spf-branches-hero__map {
		position: relative;
		align-self: flex-end;
		width: min(calc(100% + 1.5rem), 61.6rem);
		margin-right: -1.5rem; /* section side padding: keep the map flush with the right edge */
		height: auto;
		aspect-ratio: 1232 / 432;
	}
}

@media (max-width: 520px) {
	.spf-branches-hero .spf-branches-hero__tagline {
		width: auto;
		min-width: 0;
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
   2. Intro copy (with the group logo inline in the first sentence)
   -------------------------------------------------------------------------- */
.spf-branches-intro {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
}

.spf-branches-intro .spf-branches-intro__text {
	width: 100%;
	max-width: 76rem;
	color: #363636;
}

.spf-branches-intro .spf-branches-intro__logo {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: 5.4rem;
	margin: .2rem 0 .2rem .3rem;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   3. WATERMARK — faint South Africa silhouette behind the intro (client row 4: "maybe a South African watermark").
   >>> To remove it: delete the Bricks element carrying the class `spf-branches-watermark` (in the Intro section).
   Decorative only: aria-hidden, no pointer events, clipped by the intro section so it can never cause sideways scroll.
   -------------------------------------------------------------------------- */
.spf-branches-watermark { display: none; } /* superseded by the page-wide map below */
/* Page-wide South Africa map (client round 3: "larger map watermark, fills background page").
   >>> To remove it: delete this rule block. Decorative, behind everything, clipped so it cannot cause sideways scroll. */
#brx-content { position: relative; isolation: isolate; overflow-x: clip; }
#brx-content::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: url("../img/branches-sa-map.svg") center 38% / min(120rem, 112vw) auto no-repeat;
	opacity: .12;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Branch cards ([spf_branches])
   -------------------------------------------------------------------------- */
.spf-branches {
	width: 100%;
}

.spf-branches .spf-branches__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.spf-branches .spf-branches__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spf-branches .spf-branch-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 2.4rem;
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 1.2rem;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .07);
}

@media (prefers-reduced-motion: no-preference) {
	.spf-branches .spf-branch-card {
		transition: transform .2s ease, box-shadow .2s ease;
	}
}

.spf-branches .spf-branch-card:hover,
.spf-branches .spf-branch-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 30px rgba(16, 24, 40, .12);
}

.spf-branches .spf-branch-card__chip {
	display: inline-block;
	padding: .5rem 1.1rem;
	background: #eceef1;
	border-radius: 99px;
	color: #2a2f3a;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
}

.spf-branches .spf-branch-card__name {
	margin: 1.4rem 0 0;
	color: #1f1f1f;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
}

/* Fixed-height logo slot so names, addresses and phones line up across cards. */
.spf-branches .spf-branch-card__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 5.2rem;
	margin: 1.6rem 0;
}

.spf-branches .spf-branch-card__logo-img {
	display: block;
	width: auto;
	max-width: 22rem;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}

.spf-branches .spf-branch-card__address {
	margin: 0 0 2rem;
	color: #4a4a4a;
	font-size: 1.6rem;
	line-height: 1.55;
}

.spf-branches .spf-branch-card__phones {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.spf-branches .spf-branch-card__phones li {
	margin: 0;
	padding: 0;
}

.spf-branches .spf-branch-card__phone {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	padding: .5rem 0;
	color: #003096;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.spf-branches .spf-branch-card__icon {
	flex: none;
}

.spf-branches .spf-branch-card__phone:hover span {
	text-decoration: underline;
}

.spf-branches .spf-branch-card__phone:focus-visible {
	border-radius: .4rem;
	outline: 3px solid #003096;
	outline-offset: 3px;
}

@media (max-width: 1024px) {
	.spf-branches .spf-branches__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.spf-branches .spf-branches__grid {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}
	.spf-branches .spf-branch-card {
		padding: 2rem;
	}
	.spf-branches .spf-branch-card__name {
		font-size: 1.9rem;
	}
}