/**
 * LFBC Icon Grid pattern
 *
 * Oatmeal-backed full-bleed band wrapping a white rounded panel. Inside the
 * panel: an intro cell (heading + body) and five icon cards arranged in a
 * 3-column grid on desktop (intro fills the first cell), stacked into a
 * single column on mobile.
 *
 * Container query lives on the outer `.lfbc-icon-grid` (align:full → its
 * inline-size equals the viewport / editor-canvas width), and the responsive
 * rules target descendants — same approach as hero / lp-hero / grant-callout.
 *
 * Icon visuals (74px colored circle, 50px SVG) match the features pattern
 * intentionally — both surface the same five mandate areas with the same
 * color-to-icon mapping. The styles are duplicated here rather than
 * abstracted into a shared file; once a third icon-using pattern lands,
 * worth extracting.
 */

.lfbc-icon-grid {
	container-type: inline-size;
	/* Outer band padding (oatmeal showing through around the white card). */
	padding: 20px 12px;
}

.lfbc-icon-grid__card {
	max-width: 1360px;
	margin-inline: auto;
	border-radius: 40px;
	padding: 48px 40px;
}

.lfbc-icon-grid__items {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* WP layout-flow injects `> * + * { margin-block-start: block-gap }` into
 * every default-layout group. In our flex/grid contexts that adds an
 * unwanted top margin to every child after the first — reset on our own
 * direct children. Same pattern as features.css. */
.lfbc-icon-grid .lfbc-icon-grid__items > *,
.lfbc-icon-grid .lfbc-icon-grid__item > *,
.lfbc-icon-grid .lfbc-icon-grid__head > *,
.lfbc-icon-grid .lfbc-icon-grid__intro > *,
.lfbc-icon-grid .lfbc-icon-grid__icon > * {
	margin-block-start: 0;
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Intro cell
 * ------------------------------------------------------------------------- */

.lfbc-icon-grid__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 0;
	align-items: center;
	text-align: center;
}

.lfbc-icon-grid__heading {
	margin: 0;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--soft-black-500);
}

.lfbc-icon-grid__intro-text {
	margin: 0;
	font-size: 20px; /* mobile: 20px; bumped to 24px on desktop below */
	line-height: 1.3;
	color: var(--wp--preset--color--soft-black-500);
}

/* -------------------------------------------------------------------------
 * Icon card
 * ------------------------------------------------------------------------- */

.lfbc-icon-grid__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lfbc-icon-grid__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
}

.lfbc-icon-grid__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	flex: 0 0 auto;
	box-sizing: border-box;
}

.lfbc-icon-grid__icon .wp-block-image,
.lfbc-icon-grid__icon-img {
	margin: 0;
	width: 40px;
	height: 40px;
}

.lfbc-icon-grid__icon img {
	display: block;
	width: 40px;
	height: 40px;
	margin: 0;
}

.lfbc-icon-grid__title {
	margin: 0;
	color: var(--wp--preset--color--soft-black-500);
	text-align: center;
}

.lfbc-icon-grid__body {
	margin: 0;
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--soft-black-400);
}

/* Color modifiers — same five icon/color pairings as the features pattern. */
.lfbc-icon-grid__item--nootka-rose .lfbc-icon-grid__icon { background-color: var(--wp--preset--color--nootka-rose-500); }
.lfbc-icon-grid__item--dusty-rose  .lfbc-icon-grid__icon { background-color: var(--wp--preset--color--dusty-rose-500); }
.lfbc-icon-grid__item--poppy       .lfbc-icon-grid__icon { background-color: var(--wp--preset--color--poppy-500); }
.lfbc-icon-grid__item--pollen      .lfbc-icon-grid__icon { background-color: var(--wp--preset--color--pollen-500); }
.lfbc-icon-grid__item--moss        .lfbc-icon-grid__icon { background-color: var(--wp--preset--color--moss-500); }

/* -------------------------------------------------------------------------
 * Desktop (≥ 1024px container = viewport, since the wrapper is align:full)
 * ------------------------------------------------------------------------- */

@container (min-width: 1024px) {

	.lfbc-icon-grid {
		padding: 20px 40px;
	}

	.lfbc-icon-grid__card {
		border-radius: 80px;
		padding: 80px;
	}

	/* 3-column grid; intro cell occupies the first slot, icon cards fill the
	   rest in DOM order (5 cards → 2 rows of 3). */
	.lfbc-icon-grid__items {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}

	.lfbc-icon-grid__intro {
		align-items: flex-start;
		text-align: left;
	}

	.lfbc-icon-grid__intro-text {
		font-size: 24px;
	}

	/* Icon card switches to icon-left + title-right; body indents to align
	   with the title (icon 74 + gap 25 ≈ 95 to title baseline). */
	.lfbc-icon-grid__head {
		flex-direction: row;
		align-items: center;
		gap: 25px;
	}

	.lfbc-icon-grid__icon {
		width: 74px;
		height: 74px;
	}

	.lfbc-icon-grid__icon .wp-block-image,
	.lfbc-icon-grid__icon-img,
	.lfbc-icon-grid__icon img {
		width: 50px;
		height: 50px;
	}

	.lfbc-icon-grid__title {
		text-align: left;
	}

	.lfbc-icon-grid__body {
		padding-left: 95px;
		text-align: left;
	}
}