/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Feature Split — blocks/feature-split/style.css
 *
 * Auto-enqueued by WordPress via "style": "file:./style.css" in block.json.
 * Never enqueue this manually in functions.php.
 *
 * Depends on tokens from css/global.css.
 *
 * The "Legacy composition" section near the bottom keeps already-published
 * blocks rendering. Its class names and values are unchanged from the
 * original inline styles — don't tidy them without checking the live pages
 * that use media_type = none.
 * =====================================================================================================================
 */

.feature-split {
	/* 120px, not the 80px section default. The Figma row gives this block
	   noticeably more air than a plain content row — it is the only one
	   carrying a watermark, and at 80px the mark has nowhere to sit. */
	--fs-pad-block  : 7.5rem;      /* 120px ÷ 16 */
	--fs-col-gap    : 5rem;        /* 80px ÷ 16 */
	--fs-body-width : 34.4375rem;  /* 551px ÷ 16 */
	--fs-radius     : 2rem;        /* 32px ÷ 16 — matches the mockup's image corners */
	--fs-btn-width  : 19.1875rem;  /* 307px ÷ 16 — same pill as the home hero */
	--fs-btn-height : 3.5rem;      /* 56px ÷ 16 */
	--fs-bg-inset   : 2.5rem;      /* 40px ÷ 16 — clearance between the
	                                  watermark and the row's top/bottom */
	--fs-bg-fade    : 14%;         /* how far the watermark fades in from its
	                                  own top and bottom edges — see below */

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	padding: var(--fs-pad-block) var(--container-gutter);
	overflow: hidden;   /* clips the decorative watermark */
}


/*
 * Background colours
 * ---------------------------------------------------------------------------------------------------------------------
 */

.feature-split--bg-rich-gold  { background: var(--clr-rich-gold);  color: var(--clr-white); }
.feature-split--bg-brown      { background: var(--clr-brown);      color: var(--clr-white); }
.feature-split--bg-warm-beige { background: var(--clr-warm-beige); color: var(--clr-charcoal-black); }
.feature-split--bg-white      { background: var(--clr-white);      color: var(--clr-charcoal-black); }
.feature-split--bg-black      { background: var(--clr-black);      color: var(--clr-white); }

/* Unchanged from the original — live pages use this exact ramp. */
.feature-split--bg-gradient-beige {
	background: linear-gradient(174deg, #EAE1D7 10.39%, #FAF5EF 23.59%);
	color: var(--clr-charcoal-black);
}

/* Beige at the top fading out — for a block sitting below a white section. */
.feature-split--bg-gradient-beige-top {
	background: var(--gradient-beige-top);
	color: var(--clr-charcoal-black);
}


/*
 * Decorative watermark
 * ---------------------------------------------------------------------------------------------------------------------
 * Sits behind everything, flush to the right edge as in the mockup. Hidden
 * below the stacking breakpoint, where there is no room for it and it only
 * muddies the text.
 *
 * Sizing is driven by the available HEIGHT, not the width. Width-driven
 * sizing is what was cropping it: at 55% of a wide viewport the mark
 * computes taller than the row, the row's overflow: hidden takes the
 * difference off the top and bottom, and the circles arrive sliced.
 *
 * --fs-bg-inset keeps a margin between the mark and the row's edges, so
 * even at its largest it reads as sitting inside the row rather than
 * bleeding out of it.
 */

.feature-split__bg {
	position: absolute;

	/*
	 * Inset from the row's top and bottom rather than padded. The image's
	 * height: 100% then resolves against exactly this box — there is no
	 * content-box-versus-padding-box question to get wrong, and the mark
	 * physically cannot reach the row's edges.
	 */
	inset-block: var(--fs-bg-inset);
	inset-inline-end: 0;
	z-index: -1;

	/* Wide enough for the mark at any row height; the image's own ratio
	   decides the width it actually takes. */
	width: 55%;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
}

.feature-split--flipped .feature-split__bg {
	inset-inline-end: auto;
	inset-inline-start: 0;
	justify-content: flex-start;
}

/*
 * height first, width second. Whichever runs out first limits the mark and
 * object-fit: contain keeps the whole of it visible either way — so it is
 * never cropped, at any row height or viewport width.
 */
/*
 * height first, width second. Whichever runs out first limits the mark and
 * object-fit: contain keeps the whole of it visible either way — so it is
 * never cropped, at any row height or viewport width.
 *
 * The mask is covering for the asset, not the layout. The uploaded file is
 * cropped hard to its own artwork — measured: zero transparent pixels on
 * all four edges — so the circles are already sliced flat in the PNG and
 * arrive that way whatever box they are given. Fading the top and bottom to
 * transparent hides the flat edges without touching the file.
 *
 * Masking the image rather than laying a gradient over it means this works
 * on all six background colours without having to match any of them, and it
 * keeps working if the row's background is later changed.
 *
 * Replace the asset with an uncropped export and this can come out — raise
 * --fs-bg-fade to 0 to check, or just delete the two mask lines.
 */
.feature-split__bg-img {
	width: auto;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center right;

	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--fs-bg-fade),
		#000 calc(100% - var(--fs-bg-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--fs-bg-fade),
		#000 calc(100% - var(--fs-bg-fade)),
		transparent 100%
	);
}

.feature-split--flipped .feature-split__bg-img {
	object-position: center left;
}


/*
 * Edge fades
 * ---------------------------------------------------------------------------------------------------------------------
 * Softens the join between this row and its neighbours: a band at the top
 * or bottom that starts in the NEIGHBOUR's colour and fades into this row's
 * background. Each edge is an independent toggle with its own colour, since
 * the row above and the row below are rarely the same.
 *
 * Painted with ::before and ::after rather than extra markup, at z-index 0 —
 * above the watermark at -1, below the content at 1. Fading the watermark
 * out at the edges too is deliberate: a mark that stays crisp through the
 * blend gives the join away.
 *
 * --fs-fade-depth arrives inline from render.php.
 *
 * NOTE ON COLOUR: set each fade to the colour of the row it meets, not to
 * this row's own background. Top fade = the row above; bottom = below.
 */

.feature-split {
	--fs-fade-depth  : 120px;
	--fs-fade-top    : transparent;
	--fs-fade-bottom : transparent;
}

.feature-split--fade-top::before,
.feature-split--fade-bottom::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	z-index: 0;
	height: var(--fs-fade-depth);
	pointer-events: none;
}

.feature-split--fade-top::before {
	top: 0;
	background: linear-gradient(
		to bottom,
		var(--fs-fade-top) 0%,
		transparent 100%
	);
}

.feature-split--fade-bottom::after {
	bottom: 0;
	background: linear-gradient(
		to top,
		var(--fs-fade-bottom) 0%,
		transparent 100%
	);
}

/*
 * Colour per edge. Listed separately rather than sharing one property so
 * the two edges genuinely are independent.
 */

.feature-split--fade-top-warm-beige { --fs-fade-top: var(--clr-warm-beige); }
.feature-split--fade-top-cream      { --fs-fade-top: var(--clr-cream); }
.feature-split--fade-top-white      { --fs-fade-top: var(--clr-white); }
.feature-split--fade-top-rich-gold  { --fs-fade-top: var(--clr-rich-gold); }
.feature-split--fade-top-brown      { --fs-fade-top: var(--clr-brown); }
.feature-split--fade-top-black      { --fs-fade-top: var(--clr-black); }

.feature-split--fade-bottom-warm-beige { --fs-fade-bottom: var(--clr-warm-beige); }
.feature-split--fade-bottom-cream      { --fs-fade-bottom: var(--clr-cream); }
.feature-split--fade-bottom-white      { --fs-fade-bottom: var(--clr-white); }
.feature-split--fade-bottom-rich-gold  { --fs-fade-bottom: var(--clr-rich-gold); }
.feature-split--fade-bottom-brown      { --fs-fade-bottom: var(--clr-brown); }
.feature-split--fade-bottom-black      { --fs-fade-bottom: var(--clr-black); }

/*
 * A fade eats into the row's padding, so the content needs a little more
 * clearance when one is on — otherwise a heading can end up sitting in the
 * middle of the blend.
 */
.feature-split--fade-top {
	padding-top: max( var(--fs-pad-block), calc( var(--fs-fade-depth) + 2rem ) );
}

.feature-split--fade-bottom {
	padding-bottom: max( var(--fs-pad-block), calc( var(--fs-fade-depth) + 2rem ) );
}


/*
 * Grid
 * ---------------------------------------------------------------------------------------------------------------------
 */

.feature-split__inner {
	position: relative;
	z-index: 1;   /* above the edge fades, which sit at 0 */
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fs-col-gap);
	align-items: center;
}

/* Flip by reordering the grid items. The original used `direction: rtl` on
   the container with `ltr` back on the children, which also inverts
   scrollbars, list markers and any inline-start/end logical properties. */
.feature-split--flipped .feature-split__text {
	order: 2;
}

.feature-split__text,
.feature-split__col-media {
	min-width: 0;
}


/*
 * Text column
 * ---------------------------------------------------------------------------------------------------------------------
 */

.feature-split__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--clr-charcoal-black);
	font-family: var(--ff-body);
	font-size: var(--fs-eyebrow-lg);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: normal;
}

.feature-split__heading {
	margin: 0 0 1.25rem;
	color: var(--clr-charcoal-black);
	font-family: var(--ff-heading);
	font-size: clamp(2rem, 3.6vw, var(--fs-heading-md));
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	text-wrap: balance;
}

.feature-split__body {
	max-width: var(--fs-body-width);
	margin: 0 0 2rem;
	color: var(--clr-light-grey);
	font-family: var(--ff-body);
	font-size: var(--fs-body-lg);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: var(--lh-loose);
}

/*
 * WYSIWYG content — body, media column body and the legacy card text.
 * Each is a wrapper div around the editor's own <p>, <ul>, <ol> etc., so
 * spacing lives on the children and the last one gives its margin back to
 * the wrapper.
 */
.feature-split__body > *,
.feature-split__media-body > * {
	margin: 0 0 1.25rem;
}

.feature-split__card-text > * {
	margin: 0 0 0.5rem;
}

.feature-split__body > :last-child,
.feature-split__media-body > :last-child,
.feature-split__card-text > :last-child {
	margin-bottom: 0;
}

.feature-split__body :is(ul, ol),
.feature-split__media-body :is(ul, ol),
.feature-split__card-text :is(ul, ol) {
	padding-left: 1.25em;
}

.feature-split__body a,
.feature-split__media-body a,
.feature-split__card-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Inherit the section's colour on the dark background options, where
   charcoal on brown or black would be unreadable. */
.feature-split--bg-brown .feature-split__eyebrow,
.feature-split--bg-black .feature-split__eyebrow,
.feature-split--bg-rich-gold .feature-split__eyebrow,
.feature-split--bg-brown .feature-split__heading,
.feature-split--bg-black .feature-split__heading,
.feature-split--bg-rich-gold .feature-split__heading,
.feature-split--bg-brown .feature-split__body,
.feature-split--bg-black .feature-split__body,
.feature-split--bg-rich-gold .feature-split__body,
.feature-split--bg-brown .feature-split__media-heading,
.feature-split--bg-black .feature-split__media-heading,
.feature-split--bg-rich-gold .feature-split__media-heading,
.feature-split--bg-brown .feature-split__media-body,
.feature-split--bg-black .feature-split__media-body,
.feature-split--bg-rich-gold .feature-split__media-body {
	color: inherit;
}


/*
 * Button — the home hero pill
 * ---------------------------------------------------------------------------------------------------------------------
 * NOTE: this duplicates the button in blocks/home-hero/style.css. Colours,
 * radius and timings all come from tokens, so a brand change is still a
 * one-place edit — but the layout rules are copied. Worth lifting into a
 * shared component in global.css once a third block needs it.
 */

.feature-split a.feature-split__btn {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;   /* 10px ÷ 16 */

	inline-size: min(100%, var(--fs-btn-width));
	min-height: var(--fs-btn-height);
	padding: 0.5rem 1.75rem;

	border: 0 solid var(--clr-copper-deep);
	border-radius: var(--radius-pill);
	overflow: hidden;

	background: var(--gradient-cta);
	color: var(--clr-white);

	font-family: var(--ff-body);
	font-size: var(--fs-btn);
	font-style: normal;
	font-weight: var(--fw-medium);
	line-height: 1.1875rem;   /* 19px ÷ 16 */
	letter-spacing: var(--ls-btn);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;

	transition:
		transform var(--motion-med) var(--ease-out-soft),
		box-shadow var(--motion-med) var(--ease-out-soft),
		color var(--motion-med) var(--ease-in-out-soft);
}

/* Gradients can't be transitioned, so the hover fill cross-fades on a
   pseudo-element underneath the label. */
.feature-split a.feature-split__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: var(--gradient-cta-hover);
	transition: opacity var(--motion-med) var(--ease-in-out-soft);
}

.feature-split a.feature-split__btn:hover::before,
.feature-split a.feature-split__btn:focus-visible::before {
	opacity: 1;
}

/* The label MUST go dark on hover — --gradient-cta-hover starts at white. */
.feature-split a.feature-split__btn:hover,
.feature-split a.feature-split__btn:focus-visible {
	color: var(--clr-charcoal-black);
	transform: translateY(-1px);
	box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(161 103 69 / 0.45);
}

.feature-split a.feature-split__btn:active {
	transform: translateY(0);
}

.feature-split a.feature-split__btn:focus-visible {
	outline: 2px solid var(--clr-copper-deep);
	outline-offset: 3px;
}

.feature-split__btn-label {
	position: relative;
	color: inherit;
}

/* Arrow relay — first arrow exits right, second arrives from the left. */
.feature-split__btn-icon {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 1rem;
	height: 1rem;
	overflow: hidden;
}

.feature-split__btn-icon svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 1rem;
	height: 1rem;
}

.feature-split__btn-icon svg:last-child {
	transform: translateX(-170%);
}

@media (prefers-reduced-motion: no-preference) {

	.feature-split__btn-icon svg {
		transition: transform var(--motion-med) var(--ease-out-soft);
	}

	.feature-split__btn:hover .feature-split__btn-icon svg:first-child,
	.feature-split__btn:focus-visible .feature-split__btn-icon svg:first-child {
		transform: translateX(170%);
	}

	.feature-split__btn:hover .feature-split__btn-icon svg:last-child,
	.feature-split__btn:focus-visible .feature-split__btn-icon svg:last-child {
		transform: translateX(0);
		transition-delay: 60ms;
	}

}


/*
 * Media column — single image
 * ---------------------------------------------------------------------------------------------------------------------
 */

.feature-split__single-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fs-radius);
	object-fit: cover;
}


/*
 * Media column — text
 * ---------------------------------------------------------------------------------------------------------------------
 */

.feature-split__media-heading {
	margin: 0 0 1.25rem;
	color: var(--clr-charcoal-black);
	font-family: var(--ff-heading);
	font-size: clamp(1.75rem, 3vw, var(--fs-heading-md));
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	text-wrap: balance;
}

.feature-split__media-body {
	margin: 0 0 2rem;
	color: var(--clr-light-grey);
	font-family: var(--ff-body);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-regular);
	line-height: var(--lh-loose);
}


/*
 * Media column — video and embeds
 * ---------------------------------------------------------------------------------------------------------------------
 * Providers hand back an iframe with hardcoded width and height attributes,
 * so the wrapper forces a 16:9 box and the iframe fills it. Maps often want
 * to be squarer; override --fs-embed-ratio per instance with a custom class
 * if so.
 */

.feature-split__embed {
	--fs-embed-ratio: 16 / 9;

	position: relative;
	width: 100%;
	aspect-ratio: var(--fs-embed-ratio);
	border-radius: var(--fs-radius);
	overflow: hidden;
	background: rgb(0 0 0 / 0.05);
}

.feature-split__embed iframe,
.feature-split__embed embed,
.feature-split__embed object,
.feature-split__embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ACF's oembed field wraps the iframe in its own div. */
.feature-split__embed > * {
	width: 100%;
	height: 100%;
}


/*
 * Media column — legacy composition
 * ---------------------------------------------------------------------------------------------------------------------
 * Preserved from the original block. Renders when media_type is "none",
 * which is what every already-published instance holds.
 */

.feature-split__images {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.feature-split__image-wrap {
	position: relative;
}

.feature-split__image-wrap--bottom {
	width: 100%;
	align-self: flex-end;
}

.feature-split__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fs-radius);
	/*aspect-ratio: 630 / 278;*/
	object-fit: cover;
}

/* Card anchors to the bottom-left of its image. */
.feature-split__card {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	padding: 1em;
	border-radius: 1em;
	max-width: 17.5rem;   /* 280px ÷ 16 */
}

.feature-split__card--rich-gold  { background: var(--clr-rich-gold);  color: var(--clr-white); }
.feature-split__card--brown      { background: var(--clr-brown);      color: var(--clr-white); }
.feature-split__card--warm-beige { background: var(--clr-warm-beige); color: var(--clr-charcoal-black); }
.feature-split__card--white      { background: var(--clr-white);      color: var(--clr-charcoal-black); }
.feature-split__card--black      { background: var(--clr-black);      color: var(--clr-white); }

.feature-split__card-heading {
	margin: 0 0 0.5rem;
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
}

.feature-split__card-text {
	margin: 0;
	font-family: var(--ff-body);
	font-size: 0.875rem;   /* 14px ÷ 16 */
	line-height: 1.6;
	opacity: 0.9;
}


/*
 * Responsive
 * ---------------------------------------------------------------------------------------------------------------------
 */

@media only screen and (max-width: 64em) {   /* 1024px */

	.feature-split {
		--fs-pad-block: 5.5rem;   /* 88px ÷ 16 */
		--fs-col-gap: 3rem;
		--fs-bg-inset: 2rem;
	}

}

@media only screen and (max-width: 48em) {   /* 768px */

	.feature-split {
		--fs-pad-block: 3rem;
		--fs-col-gap: 2.5rem;
		--fs-radius: 1rem;
	}

	.feature-split__inner {
		grid-template-columns: 1fr;
	}

	/* Media always follows the text once stacked, whichever side it was on. */
	.feature-split--flipped .feature-split__text {
		order: 0;
	}

	/* No room for the watermark beside a full-width column. */
	.feature-split__bg {
		display: none;
	}

	.feature-split__heading br,
	.feature-split__media-heading br {
		display: none;
	}

	.feature-split a.feature-split__btn {
		inline-size: min(100%, var(--fs-btn-width));
	}

}