/* ============================================================
 * BIOTA · PRIMITIVE · Metric
 * A rounded icon tile + label/sub-label cell. Used by the trust strip
 * and any "icon + fact" row. Each tile carries a soft tint and a
 * brand-coloured icon (Figma), chosen by a modifier.
 * ============================================================ */

.biota-metric {
	display: flex;
	align-items: center;
	gap: 11px;
}

/* Icon tile: soft-tinted rounded square holding a brand-coloured icon. */
.biota-metric__glyph {
	flex: none;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface-subtle);
	color: var(--wp--preset--color--primary);
	line-height: 1;
}
/* Icon is a CSS mask on ::before so it inherits the tile's `color` (currentColor),
   keeping the glyph fully native-block-friendly (the <p> carries no inline SVG). */
.biota-metric__glyph::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--biota-glyph) center / contain no-repeat;
	mask: var(--biota-glyph) center / contain no-repeat;
}

/* Per-metric tints (Figma soft backgrounds + icon colours) + mask shape. */
.biota-metric__glyph--star {
	background-color: #fff6e6;
	color: #1a1a1a;
	--biota-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.7 5.9 6.4.6-4.8 4.3 1.4 6.3L12 16.9 6.3 19.7l1.4-6.3L2.9 9.1l6.4-.6z'/%3E%3C/svg%3E");
}
.biota-metric__glyph--shield {
	background-color: #eaf0f9;
	color: var(--wp--preset--color--primary);
	--biota-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.6v5.2c0 4.3-2.9 7.3-7 8.6-4.1-1.3-7-4.3-7-8.6V5.6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.2 10' stroke-linecap='round'/%3E%3C/svg%3E");
}
.biota-metric__glyph--truck {
	background-color: #e7f8ee;
	color: var(--wp--preset--color--success);
	--biota-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h10.5v8H3z'/%3E%3Cpath d='M13.5 9h3.8l2.7 2.7v2.8h-6.5z'/%3E%3Ccircle cx='7' cy='16.6' r='1.5'/%3E%3Ccircle cx='17' cy='16.6' r='1.5'/%3E%3C/svg%3E");
}
.biota-metric__glyph--chat {
	background-color: #e7f8ee;
	color: var(--wp--preset--color--whatsapp);
	--biota-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10H10l-4 3v-3H4z'/%3E%3C/svg%3E");
}

/* As native blocks these cells get WP flow margins between children; the
   component spaces itself with `gap`, so zero the injected margins. */
.biota-metric > *,
.biota-metric__text > * { margin-block: 0; }

.biota-metric__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.biota-metric__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.25;
	color: var(--wp--preset--color--text);
}

.biota-metric__sub {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.3;
	color: var(--wp--preset--color--text-subtle);
}