/* ═══════════════════════════════════════════════════════════════════════════
   PAGE SPLITS — FULL-BLEED 50:50 SECTIONS
   Dark navy text panel flush to one viewport edge, image to the other.
   ═══════════════════════════════════════════════════════════════════════════ */

.page-split {
	margin-top: 0;
	margin-bottom: 0;
}

.page-split:last-of-type {
	margin-bottom: 0;
}

/* Full-viewport 50:50 grid — no site-container */
.page-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	width: 100%;
	gap: 0.3rem;
}

/* Dark text panel */
.page-split__text {
	background: var(--ci-color-navy);
	padding: 3.5rem 5rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	justify-content: center;
	align-items: flex-start;
}

.page-split--reversed .page-split__text {
	padding: 3.5rem 5rem;
}

.page-split__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	margin: 0;
	line-height: 1.25;
}

.page-split__text p {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}

/* Was an inline style on the anchor, in both ce_page_split_section() and its
   twin in acf-maestro.php. Identical values, moved here so the cascade can
   reach them at all — an inline style cannot be overridden without
   !important, and variables.css opens by ruling inline styles out. */
.page-split__text > .ci-btn {
	align-self: flex-start;
	margin-top: 0.5rem;
}

.page-split__text strong {
	color: #ffffff;
}

.page-split__text ul {
	margin: 0;
	padding-left: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.page-split__text ul li {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.88);
}

/* Text link inside page-split body */
.page-split__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.page-split__link:hover {
	color: #ffffff;
}

.page-split--light .page-split__link {
	color: var(--ci-color-navy);
}

.page-split--light .page-split__link:hover {
	color: #253d47;
}

/* Image panel — square based on its column width (50vw), when the text beside
   it is short enough to allow it.

   width: 100% is load-bearing, not tidiness. The grid is align-items: stretch,
   so a panel with no stated width gets its HEIGHT from the row — and the row is
   as tall as the text beside it. aspect-ratio then resolves the only way left
   to it, deriving the width FROM that height: a 592px column with 814px of copy
   beside it produced an 814px-wide image, 222px of which hung off the right of
   the screen and gave the whole page a horizontal scrollbar.

   It is the same trap the placeholder variant below already documents, and the
   same fix — the placeholder just hit it sooner, having no <img> to size it.
   Stating the width makes the column authoritative: the box is 592 wide,
   stretch gives it the row's height, and aspect-ratio applies only when the
   text is short enough for the row to be square.

   min-width: 0 because a grid item's automatic minimum size is its content's
   min-content width, which for a wide image is the image — enough on its own
   to push a 1fr column past its share. */
.page-split__image {
	overflow: hidden;
	aspect-ratio: 1 / 1;
	width: 100%;
	min-width: 0;
}

.page-split__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Placeholder when no image is set.
   width is explicit for the same reason as in the mobile block below: with no
   <img> to give the box a size, aspect-ratio resolves the OTHER way and derives
   the width from the row height set by the text panel. On a tall text panel
   that computes wider than the grid column and pushes the page sideways. */
.page-split__image--placeholder {
	background-color: #b0b0b0;
	width: 100%;
}

/* ── Light variant — off-white panel, dark text ── */
.page-split--light .page-split__text {
	background: #f9f9f9;
}

.page-split--light .page-split__heading {
	color: #646464;
}

.page-split--light .page-split__text p {
	color: var(--ci-color-navy);
}

.page-split--light .page-split__text ul li {
	color: var(--ci-color-navy);
}

.page-split--light .page-split__text strong {
	color: var(--ci-color-navy);
}

/* ── Innovate (teal) heading variant ── */
.page-split--innovate .page-split__heading {
	color: #646464;
}

/* ── Natural — off-white panel, navy heading ── */
.page-split--natural .page-split__text {
	background: #f9f9f9;
}

.page-split--natural .page-split__heading {
	color: #646464;
}

.page-split--natural .page-split__text p {
	color: var(--ci-color-navy);
}

.page-split--natural .page-split__text strong {
	color: var(--ci-color-navy);
}

/* ── Develop (purple) heading variant ── */
.page-split--develop .page-split__heading {
	color: #646464;
}

/* ── Slate (#6D9FA3) heading variant — used as the alternating teal colour ── */
.page-split--slate .page-split__heading {
	color: #646464;
}

/* Icon + heading inline row */
.page-split__heading-row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.page-split__heading-row .page-split__heading {
	margin: 0;
}

/* Icon badge — rounded square with light background */
.page-split__icon-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.75rem;
	height: 3.75rem;
	background: rgba(250, 240, 244, 0.9);
	border: 3px solid #af4d76;
	border-radius: 0.6rem;
	color: #af4d76;
	font-size: 2.45rem;
	--fa-primary-color: #af4d76;
	--fa-secondary-color: #af4d76;
	--fa-secondary-opacity: 0.4;
}

/* Inline brand-logo SVG standing in for a Font Awesome icon (see
   ce_page_split_section()'s 'svg' icon option) — recoloured via
   currentColor so it inherits whichever colour the badge itself uses. */
.page-split__icon-badge svg {
	width: 2.45rem;
	height: 2.45rem;
}

.page-split__icon-badge svg path {
	fill: currentColor;
}

/* ── Stack below tablet portrait: iPad portrait is 768-1024px, and a
   full-bleed 50:50 split is too cramped there — raised from 767px. ── */
@media (max-width: 1024px) {
	.page-split__grid {
		grid-template-columns: 1fr;
	}

	.page-split__image {
		/* Fallback height in case aspect-ratio fails to resolve inside an
		   auto-sized grid row on some mobile browsers (seen on iOS Safari) —
		   without this the box can collapse to 0 height and disappear.
		   width is set explicitly so the browser doesn't derive it from the
		   fallback height via the aspect-ratio instead of filling the column. */
		width: 100%;
		min-height: 70vw;
		aspect-ratio: 1 / 1;
		order: -1;
	}

	/* ── Tablets only: never more than half the screen tall ─────────────────
	   A square at 100% width takes its height entirely from its width, which
	   is the right answer on a phone and the wrong one on a portrait tablet,
	   where the screen is wide AND tall. The same square ran 44% of the screen
	   on a 390px phone and 74% on a 768px iPad mini — not because the image
	   grew, but because "full width" means something different at 753px than
	   at 375px. With four or five splits on a page, each whole section came to
	   around a full screen: a screen of photograph, then another, then another.

	   Capping by height puts the text that explains the picture on screen with
	   it. object-fit: cover on the <img> means a shorter box crops rather than
	   squashes.

	     820x1180   square 805   cap 590  ->  590
	     768x1024   square 753   cap 512  ->  512
	     1024x1366  square 1009  cap 683  ->  683

	   768px floor so phones keep exactly what they have. Their squares are
	   already under half a screen on every current handset — 44% at 390px,
	   46% at 414px — but a short phone like the SE at 375x667 runs 56%, and
	   an unscoped cap would have quietly reshaped it. Phones were not the
	   thing that needed fixing.

	   The floor is bounded by the same expression on purpose. min-height beats
	   max-height when the two disagree, so a bare 70vw floor would have
	   overridden this cap on exactly the screens it is for — 706px against a
	   683px cap on a 12.9" iPad. Bounding it keeps the anti-collapse guarantee
	   without letting it win that argument. */
	@media (min-width: 768px) {
		.page-split__image {
			max-height: 50vh;
			min-height: min(70vw, 50vh);
		}
	}

	.page-split--reversed .page-split__image {
		order: -1;
	}

	.page-split__text,
	.page-split--reversed .page-split__text {
		padding: 2rem var(--ci-container-padding);
	}

	.page-split__text p,
	.page-split__text ul li {
		font-size: var(--ci-text-body);
		line-height: 1.7;
	}
}