/**
 * LFBC Features pattern
 *
 * Layout shifts emerge naturally from flex-wrap, not media/container queries:
 *   • wide   — title link sits beside the 5 icon-cards in one line
 *   • medium — title wraps to its own line, icons stay in one row below
 *   • narrow — icons themselves wrap (3+2 or however many fit)
 *
 * No container queries: the inserter's pattern-preview iframe renders the
 * pattern at an unpredictable container width, so anchoring breakpoints to
 * the block's own inline-size was making previews stack into a giant column.
 *
 * Auto-enqueued (frontend + editor) by lfbc_pattern_css_files() in functions.php.
 */

.lfbc-features__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 40px;
	row-gap: 24px;
	padding: 40px clamp(20px, 5vw, 80px);
	max-width: none;
}

/* All three of these are core/group blocks with the default flow layout, which
 * means WP injects `.is-layout-flow > * + * { margin-block-start: block-gap; }`.
 * In our flex contexts that adds an unwanted top margin to every child after
 * the first — so item 2..5 sit lower than item 1, and the label sits ~24px
 * below the icon instead of the 12px gap. Reset it on our direct children. */
.lfbc-features .lfbc-features__inner > *,
.lfbc-features .lfbc-features__items > *,
.lfbc-features .lfbc-features__item  > *,
.lfbc-features .lfbc-features__icon  > * {
	margin-block-start: 0;
	margin-top: 0;
}

/* Section title. Arrow glyph comes from the `is-style-arrow` heading style
   applied in the pattern markup (see assets/css/typography.css). */
.lfbc-features__title {
	margin: 0;
	flex: 0 0 auto;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--soft-black-500);
}

/* Icon row — prefers staying on one line beside the title (flex-basis ~480px),
 * wraps below the title when the parent can't fit both. */
.lfbc-features__items {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	column-gap: 40px;
	row-gap: 24px;
}

/* Individual icon card — fixed width so wraps stack predictably (3+2 etc.). */
.lfbc-features__item {
	flex: 0 0 auto;
	width: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	position: relative; /* anchor for the stretched-link ::before */
}

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

/* The inner core/image figure: kill its default block margins and the
 * is-resized auto-width treatment so the SVG sits centered in the circle. */
.lfbc-features__icon .wp-block-image,
.lfbc-features__icon-img {
	margin: 0;
	width: 46px;
	height: 46px;
}

.lfbc-features__icon img {
	display: block;
	width: 46px;
	height: 46px;
	margin: 0;
}

.lfbc-features__item--nootka-rose .lfbc-features__icon { background-color: var(--wp--preset--color--nootka-rose-500); }
.lfbc-features__item--dusty-rose  .lfbc-features__icon { background-color: var(--wp--preset--color--dusty-rose-500); }
.lfbc-features__item--poppy       .lfbc-features__icon { background-color: var(--wp--preset--color--poppy-500); }
.lfbc-features__item--pollen      .lfbc-features__icon { background-color: var(--wp--preset--color--pollen-500); }
.lfbc-features__item--moss        .lfbc-features__icon { background-color: var(--wp--preset--color--moss-500); }

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

.lfbc-features__label a {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: whichever element the editor links (label text or icon
 * image), its anchor covers the whole card so the entire item is clickable —
 * without nesting <a> in <a> or duplicating markup. */
.lfbc-features__item a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Hover/focus accent — only on cards the editor has actually linked, so
 * unlinked items don't look interactive. Matches a link anywhere in the item,
 * whether the editor linked the label text, the icon image, or both. */
.lfbc-features__item:has(a):hover .lfbc-features__label,
.lfbc-features__item:has(a):focus-within .lfbc-features__label {
	color: var(--wp--preset--color--poppy-900);
}