/*
 * Pattern: Statement with a sketch (see README.md).
 * A statement in large type (its Bold words are what differs) beside a pencil sketch on a white circle.
 */

/* "Same evidence, different responsibility", beside BioVid's pencil sketch of the physician. */
:is(.biovid-main, .editor-styles-wrapper) .bv-section .bv-decision {
	align-items: center !important;
	margin-top: clamp(56px, 6vw, 96px);
}

/* As a section of its own, no space above it. */
:is(.biovid-main, .editor-styles-wrapper) .bv-section .bv-decision:first-child {
	margin-top: 0;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-decision-sketch {
	position: relative;
	max-width: 370px;
	margin: 0 0 0 auto;
}

/* A white circle behind the physician. (No isolation here: the drawing blends with the section.) */
:is(.biovid-main, .editor-styles-wrapper) .bv-decision-sketch::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 5% 2% 7% 6%;
	border-radius: 50%;
	background: var(--bv-paper);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-decision-sketch img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply; /* the drawing's white paper takes the colour behind it */
}

/* What stays the same in Regular, what changes in Bold. */
:is(.biovid-main, .editor-styles-wrapper) .bv-section h3.bv-statement {
	font-size: clamp(31px, 2.4vw + 15px, 54px);
	font-weight: var(--bv-regular);
	line-height: 1.06;
	letter-spacing: -0.018em;
	color: var(--bv-stage);
	margin-bottom: 0.5em;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-statement strong {
	font-weight: var(--bv-bold);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-statement-text {
	font-size: var(--bv-text-lg);
	line-height: 1.6;
	max-width: 27em;
	text-wrap: pretty;
}

@media (max-width: 980px) {
	:is(.biovid-main, .editor-styles-wrapper) .bv-section .bv-decision {
		gap: 24px !important;
	}
}

@media (max-width: 767px) {
	/* The sketch leads the example, centred in its circle. */
	:is(.biovid-main, .editor-styles-wrapper) .bv-section .bv-decision {
		flex-wrap: wrap !important;
		row-gap: 22px !important;
	}

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

	:is(.biovid-main, .editor-styles-wrapper) .bv-section .bv-decision > .wp-block-column:has(.bv-decision-sketch) {
		order: -1;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-decision-sketch {
		max-width: 250px;
		margin: 0 auto;
	}
}