/* ============================================================
 * BIOTA · SECTION · Reliability reassurance  (pattern: biota/pdp-reliability)
 * For products where a failure has a real consequence — a feeder that misses a
 * meal, not a light that misses a schedule. Photo + a table of the four
 * scenarios buyers actually fear, then three reassurance cards.
 *
 * The design decision that drives everything here: a scenario's status is a
 * CATEGORY (checked / not yet checked), not a magnitude. So it is drawn as an
 * explicit state — a glyph and a worded pill — and never as a bar or a score.
 * A bar would imply we had measured something we have not. Its sibling section
 * biota/pdp-battery does use bars, because endurance genuinely is a magnitude.
 *
 * The light surface is load-bearing, not decorative: the section above it on
 * the product page (biota-onereason) is dark, so a second dark band would read
 * as one continuous block. Keep this on surface-light.
 *
 * Builds on: .biota-section / __inner / __header, .biota-eyebrow, .biota-lead.
 * ============================================================ */

/* --- Photo + panel ---------------------------------------------------- */
.biota-rel__row {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 24px;
	/* `start`, not `stretch`: the photo now holds a fixed ratio, so letting the
	   grid stretch it to the panel's height would put it back to having no
	   ratio at all. The panel is simply the taller of the two. */
	align-items: start;
	margin-bottom: 14px;
}

/* Cover block: photo with a scrim and the caption sitting bottom-left. */
.biota-rel__media {
	border-radius: 18px;
	overflow: hidden;
	/* The cover block ships min-height:430px; the ratio has to win, so this is
	   zeroed rather than lowered. */
	min-height: 0;
	aspect-ratio: var(--biota-pdp-media, 4 / 3);
}
/* The scrim is the design's, not the block's. WordPress's `scrim-bottom`
   preset at dimRatio 40 was readable only because the old free-height crop
   happened to put dark floor behind the caption; at a fixed 4:3 the crop moves
   with the photo, so the caption needs a scrim that does not depend on what is
   underneath it. Values are the ones in the source design. */
.biota-rel__media .wp-block-cover__background {
	/* Forced: WordPress emits both the preset-gradient class and the dim class
	   with !important, so an unforced rule here is silently ignored — it looks
	   applied in the stylesheet and does nothing on the page. */
	opacity: 1 !important;
	background-image: linear-gradient(
		180deg,
		rgba(14, 22, 38, 0.1) 40%,
		rgba(14, 22, 38, 0.92) 100%
	) !important;
}
.biota-rel__media .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 4px;
}
.biota-rel__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 5px;
	padding: 5px 11px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(4px);
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--base);
}
.biota-rel__captitle {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.18;
	color: var(--wp--preset--color--base);
}
.biota-rel__captext {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* --- Scenario panel --------------------------------------------------- */
.biota-rel__panel {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: 20px 22px 18px;
}
.biota-rel__phead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.biota-rel__phead > * { margin: 0; }
.biota-rel__ptitle {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--text);
}
/* The counter is COUNTED from the rows in PHP, never typed — see the pattern.
   #767676 is the AA floor on white; do not lighten to #888/#999. */
.biota-rel__pcount {
	font-size: 11.5px;
	color: #767676;
	white-space: nowrap;
}
.biota-rel__plead {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: #767676;
	line-height: 1.55;
}

/* One hairline per scenario, drawn on top, so the lead paragraph above is
   separated by the first row's own rule rather than by a margin. */
.biota-rel__scen {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 15px 0;
	border-top: 1px solid var(--wp--preset--color--surface-subtle, #f2f4f7);
}
.biota-rel__scen:first-of-type { margin-top: 4px; }
.biota-rel__scen > * { margin: 0; }

/* State glyph. Mask, not inline SVG, so the block markup stays SVG-free —
   same approach as .biota-metric and .biota-batt__icon. */
.biota-rel__mark {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 999px;
}
.biota-rel__mark::before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: var(--biota-glyph) center / contain no-repeat;
	mask: var(--biota-glyph) center / contain no-repeat;
}
.biota-rel__scen--ok .biota-rel__mark {
	background-color: #e7f8ee;
	color: #128c4b;
	--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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.biota-rel__scen--wait .biota-rel__mark {
	background-color: #fdf4e3;
	color: #8a6410;
	--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.9'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.8V12l2.8 1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.biota-rel__scentext {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.biota-rel__scenhead {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}
.biota-rel__scenhead > * { margin: 0; }
.biota-rel__scenname {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--wp--preset--color--text);
}
/* The pill carries the whole status in words — it is not a colour code that a
   reader has to decipher, and it survives being read aloud. */
.biota-rel__pill {
	padding: 3px 8px;
	border-radius: 20px;
	white-space: nowrap;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.biota-rel__scen--ok .biota-rel__pill {
	background-color: #e7f8ee;
	border: 1px solid #c7ecd6;
	color: #0f7a42;
}
.biota-rel__scen--wait .biota-rel__pill {
	background-color: #fdf4e3;
	border: 1px solid #f0dcb4;
	color: #8a6410;
}
.biota-rel__result {
	margin: 0;
	font-size: 12.5px;
	color: var(--wp--preset--color--text-strong);
	line-height: 1.5;
}
.biota-rel__pfoot {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--surface-subtle, #f2f4f7);
	font-size: 11.5px;
	color: #767676;
	line-height: 1.55;
}
.biota-rel__pfoot b { color: #8a6410; }

/* --- Reassurance cards ------------------------------------------------ */
.biota-rel__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.biota-rel__card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 17px;
	display: flex;
	gap: 13px;
	align-items: flex-start;
}
.biota-rel__card > * { margin: 0; }
.biota-rel__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background-color: #eaf0f9;
	color: var(--wp--preset--color--primary);
}
.biota-rel__icon::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--biota-glyph) center / contain no-repeat;
	mask: var(--biota-glyph) center / contain no-repeat;
}
.biota-rel__icon--bell {
	--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 3a6 6 0 0 1 6 6v4l1.6 3H4.4L6 13V9a6 6 0 0 1 6-6Z'/%3E%3Cpath d='M10 19.5a2 2 0 0 0 4 0' stroke-linecap='round'/%3E%3C/svg%3E");
}
.biota-rel__icon--phone {
	--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'%3E%3Crect x='7' y='3' width='10' height='18' rx='2.5'/%3E%3Cpath d='M11 18h2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.biota-rel__icon--check {
	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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}
.biota-rel__cardtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.biota-rel__cardtitle {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--wp--preset--color--text);
}
.biota-rel__cardtext p {
	margin: 0;
	font-size: 12.5px;
	color: var(--wp--preset--color--text-strong);
	line-height: 1.55;
}

/* --- Mobile ----------------------------------------------------------- */
@media (max-width: 860px) {
	.biota-rel__row { grid-template-columns: 1fr; gap: 14px; }
	.biota-rel__cards { grid-template-columns: 1fr; }
	.biota-rel__panel { padding: 16px 16px 14px; }
	.biota-rel__phead { flex-wrap: wrap; }
	.biota-rel__scenname { font-size: 13px; }
}