/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Featured Boxes — blocks/featured-boxes/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.
 * =====================================================================================================================
 */

.featured-boxes {
	--fb-pad-block     : var(--section-padding);
	--fb-gap           : 1.5rem;      /* 24px ÷ 16 — between boxes */
	--fb-box-width     : 25rem;       /* 400px ÷ 16 */
	--fb-box-height    : 17.875rem;   /* 286px ÷ 16 — a floor, not a cap */
	--fb-box-radius    : 1.625rem;    /* 26px ÷ 16 — measured off the Figma path */
	--fb-box-pad       : 2.5rem 2rem; /* 40px 32px */

	/* Figma spacing */
	--fb-gap-eyebrow   : 0.125rem;    /* 2px ÷ 16 — Figma's 0.13 */
	--fb-gap-heading   : 1.25rem;     /* 20px ÷ 16 */
	--fb-gap-box-title : 1.375rem;    /* 22px ÷ 16 — Figma's 1.37 */

	--fb-media-gap     : 3.75rem;     /* 60px ÷ 16 — space around the feature image */
	--fb-media-radius  : 1.625rem;    /* 26px ÷ 16 — matches the boxes */
	--fb-btn-width     : 19.1875rem;  /* 307px ÷ 16 */
	--fb-btn-height    : 3.5rem;      /* 56px ÷ 16 */

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


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

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

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

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


/*
 * Decorative watermark
 * ---------------------------------------------------------------------------------------------------------------------
 * Position, scale, opacity and bleed are all editor controls now. Scale and
 * opacity arrive as inline custom properties from render.php; position and
 * bleed as modifier classes on the section.
 *
 * Defaults reproduce exactly what this block did when the treatment was
 * hard-coded — top right, 40% wide, fully opaque, bleeding off the edge —
 * so an existing block renders identically until someone changes something.
 *
 * Hidden once the boxes stack, where there is no free space for it to
 * occupy and it only muddies the text.
 */

.featured-boxes {
	--fb-wm-scale   : 40%;
	--fb-wm-opacity : 1;
	--fb-wm-inset   : 2rem;   /* 32px ÷ 16 — clearance in "inset" mode */
}

.featured-boxes__bg {
	position: absolute;
	z-index: -1;

	/* Width drives it; the image's own ratio decides the height. */
	width: var(--fb-wm-scale);
	opacity: var(--fb-wm-opacity);

	display: flex;
	pointer-events: none;
}

.featured-boxes__bg-img {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}


/*
 * Position
 * ---------------------------------------------------------------------------------------------------------------------
 * Logical properties throughout, so a right-anchored mark stays on the
 * correct side if the site is ever run in an RTL language.
 */

.featured-boxes--wm-top-right .featured-boxes__bg,
.featured-boxes--wm-top-left .featured-boxes__bg {
	top: 0;
	align-items: flex-start;
}

.featured-boxes--wm-bottom-right .featured-boxes__bg,
.featured-boxes--wm-bottom-left .featured-boxes__bg {
	bottom: 0;
	align-items: flex-end;
}

.featured-boxes--wm-center-right .featured-boxes__bg,
.featured-boxes--wm-center-left .featured-boxes__bg {
	top: 50%;
	transform: translateY(-50%);
	align-items: center;
}

.featured-boxes--wm-top-right .featured-boxes__bg,
.featured-boxes--wm-center-right .featured-boxes__bg,
.featured-boxes--wm-bottom-right .featured-boxes__bg {
	inset-inline-end: 0;
	justify-content: flex-end;
}

.featured-boxes--wm-top-left .featured-boxes__bg,
.featured-boxes--wm-center-left .featured-boxes__bg,
.featured-boxes--wm-bottom-left .featured-boxes__bg {
	inset-inline-start: 0;
	justify-content: flex-start;
}


/*
 * Bleed vs inset
 * ---------------------------------------------------------------------------------------------------------------------
 * Bleed is the default and matches the homepage: the mark sits hard against
 * the row's edges and is clipped by the section's overflow.
 *
 * Inset pulls it in by --fb-wm-inset on every side it touches, which keeps
 * the whole mark visible. Worth using for a mark that is cropped tight to
 * its own artwork — otherwise the flat cut edge lands mid-row and reads as
 * a mistake, which is exactly what happened on Feature Split.
 */

.featured-boxes--wm-inset .featured-boxes__bg {
	inset-inline: auto;
}

.featured-boxes--wm-inset.featured-boxes--wm-top-right .featured-boxes__bg,
.featured-boxes--wm-inset.featured-boxes--wm-top-left .featured-boxes__bg {
	top: var(--fb-wm-inset);
}

.featured-boxes--wm-inset.featured-boxes--wm-bottom-right .featured-boxes__bg,
.featured-boxes--wm-inset.featured-boxes--wm-bottom-left .featured-boxes__bg {
	bottom: var(--fb-wm-inset);
}

.featured-boxes--wm-inset.featured-boxes--wm-top-right .featured-boxes__bg,
.featured-boxes--wm-inset.featured-boxes--wm-center-right .featured-boxes__bg,
.featured-boxes--wm-inset.featured-boxes--wm-bottom-right .featured-boxes__bg {
	inset-inline-end: var(--fb-wm-inset);
}

.featured-boxes--wm-inset.featured-boxes--wm-top-left .featured-boxes__bg,
.featured-boxes--wm-inset.featured-boxes--wm-center-left .featured-boxes__bg,
.featured-boxes--wm-inset.featured-boxes--wm-bottom-left .featured-boxes__bg {
	inset-inline-start: var(--fb-wm-inset);
}


/*
 * Header
 * ---------------------------------------------------------------------------------------------------------------------
 */

.featured-boxes__inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
}

.featured-boxes__header {
	margin-bottom: 3rem;   /* 48px ÷ 16 */
	text-align: center;
}

.featured-boxes__eyebrow {
	margin: 0 0 var(--fb-gap-eyebrow);
	color: var(--clr-charcoal-black);
	text-align: center;
	font-family: var(--ff-body);
	font-size: var(--fs-eyebrow-xl);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: normal;
}

/* Figma gives this a 76.5rem × 8.75rem box. 8.75rem is exactly two lines at
   the specified 4.375rem line height, so it is describing a two-line heading
   rather than imposing a fixed height — no min-height is set here, which
   keeps a one-line heading from leaving a gap beneath it. */
.featured-boxes__heading {
	max-width: var(--container-width);
	margin: 0 auto var(--fb-gap-heading);
	color: var(--clr-charcoal-black);
	text-align: center;
	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-loose);
	letter-spacing: var(--ls-heading);
	text-wrap: balance;
}

.featured-boxes__body {
	max-width: 48rem;
	margin: 0 auto;
	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);
}

.featured-boxes__body > :first-child { margin-top: 0; }
.featured-boxes__body > :last-child  { margin-bottom: 0; }

.featured-boxes__body p {
	margin: 0 0 1rem;
	color: inherit;
	font: inherit;
}

/* Keep the header legible on the dark background options. */
.featured-boxes--bg-brown .featured-boxes__eyebrow,
.featured-boxes--bg-black .featured-boxes__eyebrow,
.featured-boxes--bg-rich-gold .featured-boxes__eyebrow,
.featured-boxes--bg-brown .featured-boxes__heading,
.featured-boxes--bg-black .featured-boxes__heading,
.featured-boxes--bg-rich-gold .featured-boxes__heading,
.featured-boxes--bg-brown .featured-boxes__body,
.featured-boxes--bg-black .featured-boxes__body,
.featured-boxes--bg-rich-gold .featured-boxes__body {
	color: inherit;
}


/*
 * Grid
 * ---------------------------------------------------------------------------------------------------------------------
 * Three across by default; one or two boxes centre themselves. Four or more
 * wrap onto further rows of three.
 */

.featured-boxes__grid {
	display: grid;
	gap: var(--fb-gap);
	align-items: stretch;
	margin-bottom: 2rem;
}

.featured-boxes__grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.featured-boxes__grid--2 {
	grid-template-columns: repeat(2, minmax(0, var(--fb-box-width)));
	justify-content: center;
}

.featured-boxes__grid--1 {
	grid-template-columns: minmax(0, var(--fb-box-width));
	justify-content: center;
}


/*
 * Box
 * ---------------------------------------------------------------------------------------------------------------------
 * The Figma border is a gradient, which a plain `border` can't do. Two
 * backgrounds solve it: the fill is clipped to the padding box, the border
 * gradient to the border box, and a transparent 1px border lets the second
 * show through in the gap.
 */

.featured-boxes__box {
	position: relative;
	isolation: isolate;   /* contains the hover layer's negative z-index */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: var(--fb-box-height);
	padding: var(--fb-box-pad);
	text-align: center;

	border: 1px solid transparent;
	border-radius: var(--fb-box-radius);
	background:
		var(--gradient-box) padding-box,
		var(--gradient-box-border) border-box;
	box-shadow: var(--shadow-box);
}

/* A linked box is an <a>, so it needs the anchor styling neutralised. */
.featured-boxes a.featured-boxes__box--linked {
	color: inherit;
	text-decoration: none !important;
	cursor: pointer;
}

.featured-boxes a.featured-boxes__box--linked:focus-visible {
	outline: 2px solid var(--clr-copper-deep);
	outline-offset: 3px;
}


/*
 * Box hover
 * ---------------------------------------------------------------------------------------------------------------------
 * Only linked boxes respond — a box that does nothing shouldn't behave like
 * it does. Gradients can't be transitioned, so the lighter surface
 * cross-fades on a pseudo-element beneath the text while the box lifts and
 * its shadow deepens. The heading picks up the accent copper, which is the
 * part that actually reads as "this is clickable".
 */

.featured-boxes__box--linked::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	border-radius: inherit;
	background: var(--gradient-box-hover);
}

@media (hover: hover) {

	.featured-boxes__box--linked,
	.featured-boxes__box--linked::before,
	.featured-boxes__box--linked .featured-boxes__box-heading {
		transition:
			transform var(--motion-med) var(--ease-out-soft),
			box-shadow var(--motion-med) var(--ease-out-soft),
			opacity var(--motion-med) var(--ease-in-out-soft),
			color var(--motion-med) var(--ease-in-out-soft);
	}

	.featured-boxes__box--linked:hover,
	.featured-boxes__box--linked:focus-visible {
		transform: translateY(-0.25rem);
		box-shadow: var(--shadow-box-hover);
	}

	.featured-boxes__box--linked:hover::before,
	.featured-boxes__box--linked:focus-visible::before {
		opacity: 1;
	}

	.featured-boxes__box--linked:hover .featured-boxes__box-heading,
	.featured-boxes__box--linked:focus-visible .featured-boxes__box-heading {
		color: var(--clr-copper-deep);
	}

}

/* Keep the colour change, drop the movement. */
@media (prefers-reduced-motion: reduce) {

	.featured-boxes__box--linked:hover,
	.featured-boxes__box--linked:focus-visible {
		transform: none;
	}

}

.featured-boxes__box-heading {
	margin: 0 0 var(--fb-gap-box-title);
	color: var(--clr-light-grey);
	text-align: center;
	font-family: var(--ff-body);
	font-size: var(--fs-eyebrow-lg);
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-wrap: balance;
}

.featured-boxes__box-body {
	flex: 1;
	margin: 0;
	color: var(--clr-light-grey);
	text-align: center;
	font-family: var(--ff-body);
	font-size: var(--fs-body-lg);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
}

.featured-boxes__box-body > :first-child { margin-top: 0; }
.featured-boxes__box-body > :last-child  { margin-bottom: 0; }

.featured-boxes__box-body p {
	margin: 0 0 0.5rem;
	color: inherit;
	font: inherit;
}

.featured-boxes .featured-boxes__box-body 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);
}

.featured-boxes .featured-boxes__box-body a:hover,
.featured-boxes .featured-boxes__box-body a:focus-visible {
	color: var(--clr-copper);
}


/*
 * CTA — right aligned, same pill as the other blocks
 * ---------------------------------------------------------------------------------------------------------------------
 */

/*
 * Feature image
 * ---------------------------------------------------------------------------------------------------------------------
 * Sits between the boxes and the button. Three widths: with the boxes,
 * overhanging them, or meeting the viewport.
 *
 * The two wider options break out of .featured-boxes__inner with negative
 * inline margins rather than being moved outside it in the markup — that
 * keeps the source order (boxes, image, button) matching the reading order.
 * The section's overflow: hidden stops either one causing a sideways
 * scrollbar.
 */

.featured-boxes__media {
	margin: var(--fb-media-gap) 0;
}

.featured-boxes__media-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fb-media-radius);
}

.featured-boxes__media-caption {
	margin: 0.75rem 0 0;
	color: var(--clr-light-grey);
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	text-align: center;
}

/* Wide — 1600px, or the viewport if that is narrower */
.featured-boxes__media--wide {
	width: min( 100rem, 100vw );
	margin-inline: calc( 50% - min( 50rem, 50vw ) );
}

/* Edge to edge — meets the viewport, and the corners square off because a
   26px radius against the screen edge reads as a mistake. */
.featured-boxes__media--full {
	width: 100vw;
	margin-inline: calc( 50% - 50vw );
}

.featured-boxes__media--full .featured-boxes__media-img {
	border-radius: 0;
}

.featured-boxes__media--full .featured-boxes__media-caption {
	padding-inline: var(--container-gutter);
}


/*
 * CTA
 * ---------------------------------------------------------------------------------------------------------------------
 * Centred by default. The block used to push the button hard right with no
 * way to change it.
 */

.featured-boxes__cta {
	display: flex;
	justify-content: center;
}

.featured-boxes__cta--left   { justify-content: flex-start; }
.featured-boxes__cta--center { justify-content: center; }
.featured-boxes__cta--right  { justify-content: flex-end; }

.featured-boxes a.featured-boxes__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(--fb-btn-width));
	min-height: var(--fb-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);
}

.featured-boxes a.featured-boxes__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);
}

.featured-boxes a.featured-boxes__btn:hover::before,
.featured-boxes a.featured-boxes__btn:focus-visible::before {
	opacity: 1;
}

/* The label MUST go dark on hover — --gradient-cta-hover starts at white. */
.featured-boxes a.featured-boxes__btn:hover,
.featured-boxes a.featured-boxes__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);
}

.featured-boxes a.featured-boxes__btn:active {
	transform: translateY(0);
}

.featured-boxes a.featured-boxes__btn:focus-visible {
	outline: 2px solid var(--clr-copper-deep);
	outline-offset: 3px;
}

.featured-boxes__btn-label {
	position: relative;
	color: inherit;
}

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

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

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

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

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

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

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

}


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

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

	/* Two across rather than straight to one — a 400px box still fits
	   comfortably at this width. */
	.featured-boxes__grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

}

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

	.featured-boxes {
		--fb-pad-block: 3rem;
		--fb-box-height: auto;
		--fb-box-pad: 2rem 1.5rem;
	}

	.featured-boxes__grid--1,
	.featured-boxes__grid--2,
	.featured-boxes__grid--3 {
		grid-template-columns: 1fr;
		justify-content: stretch;
	}

	/* No free space beside a full-width box for the watermark to sit in. */
	.featured-boxes__bg {
		display: none;
	}

	.featured-boxes {
		--fb-media-gap: 2.5rem;
		--fb-media-radius: 1rem;
	}

	.featured-boxes__header {
		margin-bottom: 2rem;
	}

	.featured-boxes__heading br {
		display: none;
	}

	/* The button goes full width here, so the alignment choice no longer
	   has anything to act on — removing the old forced centring lets the
	   editor's setting survive at every size. */

	.featured-boxes a.featured-boxes__btn {
		inline-size: min(100%, var(--fb-btn-width));
	}

}