/* ==========================================================================
   Widget — Feature Boxes
   Figma node 67:233. Eight outlined boxes on a 4 x 2 grid under a centred
   eyebrow / heading / intro, 32 between columns and 64 between rows.
   Mobile-first: one column, two from 768px, four from 1025px.

   The column count, both gaps and both accent colours are driven by custom
   properties and plain declarations the Elementor controls override per
   breakpoint, so this file does not need to know about them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Heading above the grid
   The comp keeps the supporting line on one line at 1440, which the shared
   46rem measure would not.
   -------------------------------------------------------------------------- */
.o-section--feature-boxes .o-section-heading {
	max-width: 56rem;
	margin-bottom: clamp(3rem, 2rem + 2.5vw, 4rem); /* 48 -> 64, per the comp */
}

/* The comp sets this eyebrow at the full label size, not the smaller eyebrow. */
.o-section--feature-boxes .o-section-heading .o-eyebrow {
	font-size: var(--o-fs-body-lg);
	letter-spacing: var(--o-label-tracking);
}

.o-section--feature-boxes .o-section-heading__title {
	font-size: var(--o-fs-h1); /* 32 -> 48 */
	font-weight: var(--o-fw-semibold);
	line-height: 1.083; /* 52 on 48 */
	text-transform: uppercase;
	text-wrap: balance;
}

.o-section--feature-boxes .o-section-heading__title:first-child {
	margin-top: 0;
}

/* Same colour as the title in the comp, not the softer secondary tone. */
.o-section--feature-boxes .o-section-heading__intro {
	margin-top: var(--o-space-sm);
	color: var(--o-text);
	line-height: var(--o-lh-body);
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The grid
   -------------------------------------------------------------------------- */
.o-feature-boxes {
	/*
	 * Fallbacks only. Elementor writes --o-fbox-cols per breakpoint from the
	 * "Columns" control, and the two tones from Accent Colours.
	 */
	--o-fbox-cols: 1;
	--o-fbox-tone-a: var(--o-orange);
	--o-fbox-tone-b: var(--o-teal);
	--o-fbox-bg: var(--o-white);
	--o-fbox-rule: var(--o-rule-cool);

	display: grid;
	grid-template-columns: repeat(var(--o-fbox-cols), minmax(0, 1fr));
	column-gap: var(--o-space-lg);
	row-gap: var(--o-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.o-feature-boxes {
		--o-fbox-cols: 2;
	}
}

@media (min-width: 1025px) {
	.o-feature-boxes {
		--o-fbox-cols: 4;
		row-gap: 4rem; /* 64, per the comp */
	}
}

/*
 * White boxes on white or pale blue, as drawn. On the darker schemes a white
 * box would carry white text, so the box steps down a shade instead.
 */
.o-scheme-dark .o-feature-boxes {
	--o-fbox-bg: var(--o-navy-ink);
	--o-fbox-rule: var(--o-rule-on-dark);
}

.o-scheme-orange .o-feature-boxes {
	--o-fbox-bg: var(--o-orange-alt);
	--o-fbox-rule: var(--o-rule);
}

.o-feature-boxes__item {
	display: flex; /* Lets the box fill the row height, so every box in a row matches. */
	min-width: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   The box
   Rendered as <a> when it has a link and <div> when it does not, so both need
   the same box.
   -------------------------------------------------------------------------- */
.o-feature-box {
	--o-fbox-tone: var(--o-fbox-tone-a);

	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem; /* 16, per the comp */
	padding: 1.75rem; /* 28, per the comp */
	border: 1px solid var(--o-fbox-rule);
	background-color: var(--o-fbox-bg);
	color: var(--o-text);
	text-decoration: none;
}

.o-feature-box--b {
	--o-fbox-tone: var(--o-fbox-tone-b);
}

.o-feature-box__title {
	margin: 0;
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-body-lg); /* 18 */
	font-weight: var(--o-fw-medium);
	line-height: 1.333; /* 24 on 18 */
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.o-feature-box__text {
	margin: 0;
	color: var(--o-text-soft);
	font-size: var(--o-fs-small); /* 14 */
	line-height: 1.5; /* 21 on 14 */
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   The icon tile
   A 48px pale blue square. The tile stays pale blue on every scheme, so the
   accent always has the same ground to sit on.
   -------------------------------------------------------------------------- */
.o-feature-box__icon {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	background-color: var(--o-ice);
	color: var(--o-fbox-tone);
}

/*
 * The comp's marker: a 16px square turned 45 degrees, its centre at (35.3, 13)
 * inside the tile - up and to the right, not centred. The offsets below are
 * the comp's own geometry, so it lands exactly where Figma draws it.
 */
.o-feature-box__icon--diamond::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 27.3px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	transform: rotate(45deg);
}

.o-feature-box__glyph {
	width: 24px;
	height: 24px;
}

.o-feature-box__img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Linked boxes
   The comp draws no hover. The border picks up the box's accent and the box
   lifts, which reads as "this is a link" without changing the layout.
   -------------------------------------------------------------------------- */
a.o-feature-box {
	transition: border-color var(--o-transition), box-shadow var(--o-transition);
}

a.o-feature-box:hover,
a.o-feature-box:focus-visible {
	border-color: var(--o-fbox-tone);
	box-shadow: var(--o-shadow-card);
	color: var(--o-text);
}

/* --------------------------------------------------------------------------
   Narrow
   The comp's 28px inset is a lot of a phone's width once the boxes stack.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	.o-feature-box {
		padding: var(--o-space-md);
	}
}