/* ==========================================================================
   Widget — Icon Boxes Section
   Figma node 165:441 ("Why Ovation?"). Six square white cards, three across,
   under a centred eyebrow / heading / intro, on the pale blue field with the
   wave pattern fading in from the lower right.
   40 between columns, 72 between rows and under the heading, 44 / 40 inside.
   Mobile-first: one column, two from 768px, three from 1025px.

   The card itself - .o-icon-box and its tile - lives in components.css,
   shared with the single Box element.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pattern
   The shared .o-pattern (components.css) over the whole section, strongest
   in the lower-right corner, at 30%.
   -------------------------------------------------------------------------- */
.o-icon-boxes__pattern {
	opacity: 0.3;
}

/* Content sits above the pattern. */
.o-section--icon-boxes .o-section__inner {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Heading above the grid
   20 between the three lines, 72 to the cards. The comp keeps the intro on
   one line at 1440, which the shared 46rem measure would not.
   -------------------------------------------------------------------------- */
.o-section--icon-boxes .o-section-heading {
	max-width: 56rem;
	margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); /* 48 -> 72 */
}

.o-section--icon-boxes .o-section-heading .o-eyebrow {
	font-size: var(--o-fs-body-lg); /* 18, at the full label tracking */
	letter-spacing: var(--o-label-tracking);
}

.o-section--icon-boxes .o-section-heading__title {
	margin-top: var(--o-space-md);
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-semibold);
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.375rem); /* 32 -> 54, as the Articles band */
	line-height: 1.074; /* 58 on 54 */
	text-transform: uppercase;
	text-wrap: balance;
}

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

.o-section--icon-boxes .o-section-heading__intro {
	margin-top: var(--o-space-md);
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	line-height: 1.556; /* 28 on 18 */
	text-wrap: balance;
}

/* Navy and mist are the comp's colours on the pale field; a dark band hands back to the scheme. */
.o-section--icon-boxes:is(.o-scheme-dark, .o-scheme-orange) .o-section-heading__title {
	color: var(--o-text);
}

.o-section--icon-boxes:is(.o-scheme-dark, .o-scheme-orange) .o-section-heading__intro {
	color: var(--o-text-soft);
}

/* --------------------------------------------------------------------------
   The grid
   -------------------------------------------------------------------------- */
.o-icon-boxes {
	/* Fallback only - Elementor writes this from the Columns control. */
	--o-ibox-cols: 1;

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

@media (min-width: 768px) {
	.o-icon-boxes {
		--o-ibox-cols: 2;
		column-gap: var(--o-space-lg);
		row-gap: var(--o-space-lg);
	}
}

@media (min-width: 1025px) {
	.o-icon-boxes {
		--o-ibox-cols: 3;
		column-gap: 2.5rem; /* 40, per the comp */
		row-gap: 4.5rem;    /* 72, per the comp */
	}
}

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