/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Split Content — blocks/split-content/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.
 * =====================================================================================================================
 */

.split-content {
	--sc-pad-block  : var(--section-padding);
	--sc-col-gap    : 5rem;        /* 80px ÷ 16 */
	--sc-item-gap   : 1.5rem;      /* 24px ÷ 16 */
	--sc-border     : 3px;         /* hairline rules stay in px — they should
	                                  not scale with the root font size */
	--sc-btn-width  : 19.1875rem;  /* 307px ÷ 16 */
	--sc-btn-height : 3.5rem;      /* 56px ÷ 16 */

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


/*
 * Background colours
 * ---------------------------------------------------------------------------------------------------------------------
 * The dropdown is unchanged — the designer's #EAE1D7 is the existing
 * "Warm Beige" option, so editors keep the choice.
 */

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

.split-content--bg-gradient-beige {
	background: var(--gradient-beige);
	color: var(--clr-charcoal-black);
}

.split-content--bg-gradient-beige-top {
	background: var(--gradient-beige-top);
	color: var(--clr-charcoal-black);
}


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

.split-content__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(--sc-col-gap);
	align-items: start;
}

/* 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 logical properties — including the left
   border on the items, which is exactly what this block relies on. */
.split-content--flipped .split-content__left {
	order: 2;
}

.split-content__left,
.split-content__right {
	min-width: 0;
}


/*
 * Left column
 * ---------------------------------------------------------------------------------------------------------------------
 */

.split-content__eyebrow {
	margin: 0;
	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;
}
p.split-content__eyebrow {
	margin-bottom: 0 !important;
}

.split-content__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;
}

.split-content__body {
	margin-bottom: 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);
}

/* The field allows markup, so style the wrapper and let the paragraphs
   inherit rather than restating the type on a descendant selector. */
.split-content__body > :first-child { margin-top: 0; }
.split-content__body > :last-child  { margin-bottom: 0; }

.split-content__body p {
	margin: 0 0 1rem;
	color: inherit;
	font: inherit;
}

/* Keep the left column legible on the dark background options. */
.split-content--bg-brown .split-content__eyebrow,
.split-content--bg-black .split-content__eyebrow,
.split-content--bg-rich-gold .split-content__eyebrow,
.split-content--bg-brown .split-content__heading,
.split-content--bg-black .split-content__heading,
.split-content--bg-rich-gold .split-content__heading,
.split-content--bg-brown .split-content__body,
.split-content--bg-black .split-content__body,
.split-content--bg-rich-gold .split-content__body,
.split-content--bg-brown .split-content__item-heading,
.split-content--bg-black .split-content__item-heading,
.split-content--bg-rich-gold .split-content__item-heading,
.split-content--bg-brown .split-content__item-body,
.split-content--bg-black .split-content__item-body,
.split-content--bg-rich-gold .split-content__item-body {
	color: inherit;
}


/*
 * Button — same pill as Feature Split
 * ---------------------------------------------------------------------------------------------------------------------
 * NOTE: this is now the THIRD copy of this button (home-hero, feature-split,
 * split-content). Colours, radius and timings all come from tokens, so a
 * brand change is still a one-place edit, but the layout rules are copied
 * three times over. Worth lifting into a shared component in global.css —
 * left duplicated for now so this block can ship without touching two
 * others that are already working.
 */

.split-content a.split-content__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(--sc-btn-width));
	min-height: var(--sc-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);
}

.split-content a.split-content__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);
}

.split-content a.split-content__btn:hover::before,
.split-content a.split-content__btn:focus-visible::before {
	opacity: 1;
}

/* The label MUST go dark on hover — --gradient-cta-hover starts at white. */
.split-content a.split-content__btn:hover,
.split-content a.split-content__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);
}

.split-content a.split-content__btn:active {
	transform: translateY(0);
}

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

.split-content__btn-label {
	position: relative;
	color: inherit;
}

.split-content__btn-icon {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 1rem;
	height: 1rem;
	overflow: hidden;
}

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

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

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

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

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

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

}


/*
 * Right column — items
 * ---------------------------------------------------------------------------------------------------------------------
 * The left border is the defining feature of this column. It's set with
 * border-left rather than border-inline-start deliberately: it must stay on
 * the left whether or not the layout is flipped.
 */

.split-content__items {
	display: flex;
	flex-direction: column;
	gap: var(--sc-item-gap);
}

.split-content__item {
	padding: 0 0 0 1.5rem;
	border-left: var(--sc-border) solid transparent;
}

.split-content__item--border-rich-gold  { border-left-color: var(--clr-rich-gold); }
.split-content__item--border-brown      { border-left-color: var(--clr-brown); }
.split-content__item--border-warm-beige { border-left-color: var(--clr-warm-beige); }
.split-content__item--border-white      { border-left-color: var(--clr-white); }
.split-content__item--border-black      { border-left-color: var(--clr-black); }
.split-content__item--border-copper     { border-left-color: var(--clr-copper-deep); }

.split-content__item-heading {
	/*margin: 0 0 0.5rem;*/
	margin: 0;
	color: var(--clr-light-grey);
	font-family: var(--ff-body);
	font-size: var(--fs-heading-sm);
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.split-content__item-body {
	margin: 0;
	color: var(--clr-light-grey);
	font-family: var(--ff-body);
	font-size: var(--fs-body-md);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: var(--lh-loose);
}

.split-content__item-body > :first-child { margin-top: 0; }
.split-content__item-body > :last-child  { margin-bottom: 0; }

.split-content__item-body p {
	margin: 0 0 0.75rem;
	color: inherit;
	font: inherit;
}

/* Inline links inside an item. The original forced --clr-rich-gold with
   !important; specificity handles it now, and the colour moved to the
   redesign's copper. Swap the token back to --clr-rich-gold if the
   designer wants the old gold. */
.split-content .split-content__item a {
	color: var(--clr-copper-deep);
	text-decoration-line: underline;
	text-underline-position: from-font;
	transition: color var(--motion-med) var(--ease-in-out-soft);
}

.split-content .split-content__item a:hover,
.split-content .split-content__item a:focus-visible {
	color: var(--clr-copper);
}

.split-content--bg-brown .split-content__item a,
.split-content--bg-black .split-content__item a,
.split-content--bg-rich-gold .split-content__item a {
	color: var(--clr-warm-beige);
}


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

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

	.split-content {
		--sc-col-gap: 3rem;
	}

}

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

	.split-content {
		--sc-pad-block: 3rem;
		--sc-col-gap: 2.5rem;
	}

	.split-content__inner {
		grid-template-columns: 1fr;
	}

	/* Items always follow the text once stacked, whichever side they were on. */
	.split-content--flipped .split-content__left {
		order: 0;
	}

	.split-content__heading br {
		display: none;
	}

	.split-content a.split-content__btn {
		inline-size: min(100%, var(--sc-btn-width));
	}

}


/*
 * Edge fades
 * ---------------------------------------------------------------------------------------------------------------------
 * Softens the join with the rows above and below: a band 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,
 * with the block's inner wrapper lifted to 1 so content stays clear of them.
 *
 * --sc-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.
 */

.split-content {
	--sc-fade-depth  : 120px;
	--sc-fade-top    : transparent;
	--sc-fade-bottom : transparent;
}

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

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

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

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

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

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

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