/* ═══════════════════════════════════════════════════════════════════════════
   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;
	}
}

/* ── Slideshow variant ──────────────────────────────────────────────────────
   Used by the home page's first split. The images stack on top of each other
   and cross-fade. The first one stays in normal flow so it sets the box's
   height exactly as a single image would; the rest are taken out of flow and
   laid over it, so adding slides cannot change the layout.

   Only the current slide is visible, so the panel reads as one image to a
   screen reader — the extra slides are aria-hidden and carry no alt text. */
.page-split__image--slideshow {
	position: relative;
}

.page-split__image--slideshow img {
	transition: opacity 0.7s ease;
}

.page-split__image--slideshow img:not(:first-child) {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.page-split__image--slideshow img.is-current {
	opacity: 1;
}

/* The first image is underneath the others, so it cannot simply fade out —
   whatever is on top would still be covering it. It is hidden outright once
   another slide is showing, and brought back when its own turn comes round. */
.page-split__image--slideshow img:first-child:not(.is-current) {
	opacity: 0;
}

/* A cross-fade is decoration. Someone who has asked for less motion gets the
   first image and nothing else moving. */
@media (prefers-reduced-motion: reduce) {

	.page-split__image--slideshow img {
		transition: none;
	}
}