/* ============================================================
 * BIOTA · PRIMITIVE · Feature row
 * A bordered card: icon tile + heading + short copy. Stacks into a list.
 * The tile holds an icon (soft tint + brand colour), tinted per card.
 * ============================================================ */

.biota-feature-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Desktop (home): the three reason cards sit in one row. */
@media (min-width: 783px) {
	.home .biota-feature-list { flex-direction: row; }
	.home .biota-feature-list > .biota-feature { flex: 1 1 0; }
}

.biota-feature {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: 22px;
}

/* Icon tile: 46x46 rounded square, soft tint + brand-coloured icon. */
.biota-feature__icon {
	flex: 0 0 auto;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background-color: #eaf0f9; /* Link Water */
	color: var(--wp--preset--color--primary);
}
.biota-feature__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}
/* Second card (CS) reads green. */
.biota-feature-list > :nth-child(2) .biota-feature__icon {
	background-color: #e7f8ee; /* Tara */
	color: var(--wp--preset--color--whatsapp);
}

.biota-feature__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.biota-feature__title {
	margin: 0;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--title-sm);
	line-height: 1.3;
	letter-spacing: -0.34px;
}

.biota-feature__desc {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}