/**
 * LFBC Icon Grid (Connect) pattern
 *
 * Sibling of `icon-grid`: same oatmeal-band + white-rounded-card chrome and
 * same icon-card visual, but the section title sits in its own narrow column
 * on desktop with the icon cards in a 2-column grid to the right. On mobile,
 * collapses to a single stacked column identical to `icon-grid`.
 *
 * Container query lives on the outer `.lfbc-icon-grid-connect` (align:full →
 * inline-size equals viewport / editor-canvas width); responsive rules target
 * descendants. Same approach as hero / lp-hero / grant-callout / icon-grid.
 *
 * Icon visuals (74px colored circle, 50px SVG) match the features and
 * icon-grid patterns intentionally. Duplicated here rather than abstracted
 * into a shared file — three patterns now use this icon treatment, so it's
 * the right point to extract a shared `_icons.css` partial, but that's a
 * follow-up refactor, not part of this pattern.
 */

.lfbc-icon-grid-connect {
	container-type: inline-size;
	padding: 20px 12px;
}

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

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

/* WP layout-flow margin reset (same reason as features.css / icon-grid.css). */
.lfbc-icon-grid-connect .lfbc-icon-grid-connect__inner > *,
.lfbc-icon-grid-connect .lfbc-icon-grid-connect__items > *,
.lfbc-icon-grid-connect .lfbc-icon-grid-connect__item > *,
.lfbc-icon-grid-connect .lfbc-icon-grid-connect__head > *,
.lfbc-icon-grid-connect .lfbc-icon-grid-connect__intro > *,
.lfbc-icon-grid-connect .lfbc-icon-grid-connect__icon > * {
	margin-block-start: 0;
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Title cell — mobile: centered, single heading (no subtitle, no arrow).
 * ------------------------------------------------------------------------- */

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

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

/* -------------------------------------------------------------------------
 * Icon cards — mobile: single column, icon stacked above title, body centered.
 * ------------------------------------------------------------------------- */

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

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

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

.lfbc-icon-grid-connect__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-connect__icon .wp-block-image,
.lfbc-icon-grid-connect__icon-img {
	margin: 0;
	width: 40px;
	height: 40px;
}

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

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

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

/* Color modifiers — same five named tones as features / icon-grid. */
.lfbc-icon-grid-connect__item--nootka-rose .lfbc-icon-grid-connect__icon { background-color: var(--wp--preset--color--nootka-rose-500); }
.lfbc-icon-grid-connect__item--dusty-rose  .lfbc-icon-grid-connect__icon { background-color: var(--wp--preset--color--dusty-rose-500); }
.lfbc-icon-grid-connect__item--poppy       .lfbc-icon-grid-connect__icon { background-color: var(--wp--preset--color--poppy-500); }
.lfbc-icon-grid-connect__item--pollen      .lfbc-icon-grid-connect__icon { background-color: var(--wp--preset--color--pollen-500); }
.lfbc-icon-grid-connect__item--moss        .lfbc-icon-grid-connect__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-connect {
		padding: 20px 40px;
	}

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

	/* Inner switches to row: narrow title column on the left, card grid right. */
	.lfbc-icon-grid-connect__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
	}

	/* Title column hugs its content with a small fixed cap so "Ways to Connect"
	   wraps to two lines as designed. Right padding + vertical padding match
	   the Figma `pr-40 py-20` on this cell. */
	.lfbc-icon-grid-connect__intro {
		flex: 0 0 auto;
		width: 200px;
		align-items: flex-start;
		text-align: left;
		padding: 20px 40px 20px 0;
	}

	/* Cards column grows to fill, with a 2-col grid. */
	.lfbc-icon-grid-connect__items {
		flex: 1 1 0;
		min-width: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

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

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

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

	.lfbc-icon-grid-connect__title {
		text-align: left;
	}

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