/* ============================================================
 * BIOTA · SECTION · Battery reassurance  (pattern: biota/pdp-battery)
 * Answers the two questions buyers ask about a wireless camera: how long does
 * it last, and is charging a hassle. Photo + endurance table side by side,
 * then three reassurance cards.
 *
 * 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 + table --------------------------------------------------- */
.biota-batt__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;
}

/* Cover block: photo with a scrim and the caption sitting bottom-left. */
.biota-batt__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-batt__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-batt__media .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 4px;
}
.biota-batt__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-batt__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-batt__captext {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* --- Endurance table ------------------------------------------------- */
.biota-batt__table {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: 18px 22px 16px;
}
.biota-batt__thead,
.biota-batt__trow {
	display: grid;
	grid-template-columns: 1.05fr 1.55fr 0.8fr;
	gap: 10px;
}
.biota-batt__thead {
	padding: 4px 0 9px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* #767676 — the AA floor on white. Do not lighten to #888/#999. */
	color: #767676;
}
.biota-batt__thead p { margin: 0; }
.biota-batt__thead p:last-child { text-align: right; }

/* No row rule by design — the bar underneath each row is the divider. */
.biota-batt__trow {
	align-items: center;
	padding: 15px 0 9px;
}
.biota-batt__trow > * { margin: 0; }
.biota-batt__ev {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--wp--preset--color--text);
}
.biota-batt__where {
	font-size: 12.5px;
	color: var(--wp--preset--color--text-strong);
	line-height: 1.45;
}
.biota-batt__life {
	text-align: right;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}

/* Bar width is the real proportion of the 6-month standby figure
   (100 / 50 / 25 / 8%). Changing a width without changing the matching
   endurance figure makes the chart lie — change both together. */
.biota-batt__bar {
	height: 5px;
	border-radius: 3px;
	background-color: var(--wp--preset--color--surface-subtle);
	overflow: hidden;
	margin-bottom: 3px;
}
.biota-batt__bar span {
	display: block;
	height: 100%;
	border-radius: 3px;
	background-color: #2563eb;
}
/* The last row's bar sits directly above this, and 14px read as part of the
   table rather than a footnote to it. The disclaimer qualifies every figure in
   the table, so it needs to sit clear of the last one.

   Scoped to the table and written as margin-block-start on purpose. WordPress
   emits `:root :where(.is-layout-flow) > * { margin-block-start: ... }`, which
   ties on specificity with a bare class and loads later — and a logical
   property set later beats the physical one it maps to, so `margin-top` here
   was silently resolving to 0. */
.biota-batt__table .biota-batt__note {
	margin: 0;
	margin-block-start: 24px;
	font-size: 11.5px;
	color: #767676;
	line-height: 1.55;
}

/* --- Reassurance cards ------------------------------------------------ */
.biota-batt__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.biota-batt__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-batt__card > * { margin: 0; }

/* Icons are CSS masks so the block markup stays free of inline SVG
   (same approach as .biota-metric). */
.biota-batt__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-batt__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-batt__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-batt__icon--charge {
	--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='3' y='8' width='15' height='9' rx='2.5'/%3E%3Cpath d='M20.5 11.5v2' stroke-linecap='round'/%3E%3Cpath d='m11 9.5-1.5 3h3L11 15.5' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.biota-batt__icon--clock {
	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'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.biota-batt__cardtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.biota-batt__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-batt__cardtext p {
	margin: 0;
	font-size: 12.5px;
	color: var(--wp--preset--color--text-strong);
	line-height: 1.55;
}

/* --- Mobile ---------------------------------------------------------- */
/* The location column folds under the activity label rather than shrinking,
   so the endurance figure on the right is never truncated. The design drove
   this with JS; media queries do it without shipping any script. */
.biota-batt__where--inline { display: none; }

@media (max-width: 860px) {
	.biota-batt__row { grid-template-columns: 1fr; gap: 14px; }
	.biota-batt__cards { grid-template-columns: 1fr; }
	.biota-batt__table { padding: 14px 16px 13px; }

	.biota-batt__thead,
	.biota-batt__trow { grid-template-columns: 1fr 0.72fr; }
	/* Hide the standalone location column, show the folded one. */
	.biota-batt__thead p:nth-child(2),
	.biota-batt__where--col { display: none; }
	.biota-batt__where--inline {
		display: block;
		font-size: 11px;
		margin-top: 2px;
	}
	.biota-batt__ev { font-size: 12.5px; }
	.biota-batt__life { font-size: 12.5px; }
}