/* ==========================================================================
   Widget — Alternating Boxes
   Figma node 59:49. Four flat colour boxes, edge to edge with no gap, under a
   centred heading on white.

   The column count, gap, box height, title size and both fills are driven by
   custom properties so the Elementor controls can set them per breakpoint
   without this file knowing about them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Heading above the row
   The section runs full bleed so the boxes can reach the viewport edges, which
   means the heading has to put the gutter back.
   -------------------------------------------------------------------------- */
.o-section--alternating-boxes .o-section-heading {
	margin-bottom: 72px;
	padding-inline: var(--o-gutter);
}

.o-section--alternating-boxes .o-section-heading__title {
	/* No eyebrow above it in the comp, so the title starts at the padding edge. */
	margin-top: 0;
	font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem); /* 28 -> 48, per the comp */
	font-weight: var(--o-fw-semibold);
	line-height: 1.083; /* 52 on 48 */
	text-transform: uppercase;
	text-wrap: balance;
}

/* The comp sets the supporting line in the same navy as the title, not softer. */
.o-section--alternating-boxes .o-section-heading__intro {
	margin-top: 1rem; /* 16, per the comp */
	color: var(--o-text);
	line-height: 1.45; /* 26 on 18 */
}

/* --------------------------------------------------------------------------
   The row
   -------------------------------------------------------------------------- */
.o-boxes {
	/*
	 * Fallbacks only. Elementor writes --o-boxes-cols per breakpoint from the
	 * "Columns" control and the three colours from Box Colours.
	 */
	--o-boxes-cols: 1;
	--o-box-height: 280px;
	--o-box-a: var(--o-orange);
	--o-box-b: var(--o-orange-alt);
	--o-box-text: var(--o-white);

	display: grid;
	grid-template-columns: repeat(var(--o-boxes-cols), minmax(0, 1fr));
	gap: 0;
}

@media (min-width: 768px) {
	.o-boxes {
		--o-boxes-cols: 2;
		--o-box-height: 340px;
	}
}

@media (min-width: 1025px) {
	.o-boxes {
		--o-boxes-cols: 4;
		--o-box-height: 400px; /* The comp's box height. */
	}
}

/* --------------------------------------------------------------------------
   The box
   Rendered as <a> when it has a link and <div> when it does not, so both need
   the same box. Height is a minimum rather than a fixed value: the boxes are
   grid siblings and stretch to the tallest, so a long line of copy grows the
   whole row instead of spilling out of one.
   -------------------------------------------------------------------------- */
.o-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: var(--o-box-height, 280px);
	padding: var(--o-space-xl) 3rem;
	color: var(--o-box-text);
	text-align: center;
	text-decoration: none;
}

.o-box--a {
	background-color: var(--o-box-a);
}

.o-box--b {
	background-color: var(--o-box-b);
}

.o-box__title {
	margin: 0;
	font-family: var(--o-font-ui);
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); /* 24 -> 34, per the comp */
	font-weight: var(--o-fw-medium);
	line-height: 1.118; /* 38 on 34 */
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.o-box__text {
	margin: var(--o-space-md) 0 0;
	max-width: 24rem;
	font-size: var(--o-fs-body);
	line-height: 1.5; /* 24 on 16 */
}

/* --------------------------------------------------------------------------
   Linked boxes
   A flat tint rather than a second colour, so it works whatever pair of fills
   the client picks.
   -------------------------------------------------------------------------- */
a.o-box::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--o-navy-ink);
	opacity: 0;
	transition: opacity var(--o-transition);
	pointer-events: none;
}

a.o-box:hover,
a.o-box:focus-visible {
	color: var(--o-box-text);
}

a.o-box:hover::after,
a.o-box:focus-visible::after {
	opacity: 0.12;
}

/*
 * The boxes butt together, so an outline drawn outside the box would be
 * clipped by the neighbour. Pull it inside instead.
 */
a.o-box:focus-visible {
	outline: 3px solid var(--o-focus);
	outline-offset: -3px;
	border-radius: 0;
}

/* The title and copy have to sit above the hover tint. */
.o-box__title,
.o-box__text {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Narrow
   The comp's 48px side padding is most of a phone's width, so it comes back to
   the site gutter and the copy is allowed the full measure.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	.o-box {
		padding-inline: var(--o-gutter);
	}

	.o-box__text {
		max-width: none;
	}
}