/*
 * Pattern: A figure on the stage (see README.md).
 * On a dark band: a figure, its meter on a 0–100% scale, and how it's measured, beside the explanation.
 */

:is(.biovid-main, .editor-styles-wrapper) .bv-proof {
	gap: var(--bv-gap) !important;
	align-items: end !important;
	margin-top: clamp(40px, 4vw, 64px);
	margin-bottom: 0;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-proof-lead {
	font-size: var(--bv-h3);
	font-weight: var(--bv-bold);
	line-height: 1.25;
	color: var(--bv-spot);
	margin-bottom: 0.35em;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-figure {
	font-size: clamp(72px, 5vw + 34px, 128px);
	font-weight: var(--bv-bold);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--bv-paper);
	margin-bottom: 0.32em;
}

/* The caption sits under a 0–100% scale with the 80–90% range marked. */
:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-meter {
	position: relative;
	max-width: 30em;
	padding-top: 52px;
	margin-bottom: 1.6em;
	font-size: var(--bv-text);
	line-height: 1.5;
	color: var(--bv-paper);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-meter::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
	height: 10px;
	border-radius: 5px;
	background:
		linear-gradient(90deg, transparent 80%, var(--bv-sky) 80%, var(--bv-sky) 90%, transparent 90%),
		rgba(143, 214, 242, 0.2);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-meter::after {
	content: "0% 100%";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	font-size: 12px;
	font-weight: var(--bv-bold);
	letter-spacing: 0.08em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.6);
	text-align: justify;
	text-align-last: justify;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-proof-method {
	font-size: var(--bv-text-sm);
	color: rgba(255, 255, 255, 0.7);
	max-width: 30em;
}

@media (max-width: 980px) {
	:is(.biovid-main, .editor-styles-wrapper) .bv-proof {
		flex-wrap: wrap !important;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-proof > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* On the stage, a hairline between the figure and how the understudies are built. */
	:is(.biovid-main, .editor-styles-wrapper) .bv-proof {
		row-gap: 0 !important;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-proof > .wp-block-column + .wp-block-column {
		margin-top: 40px;
		padding-top: 36px;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}
}