/*
 * Pattern: Two offerings compared (see README.md).
 * Two offerings side by side, their rows lined up across both; on a phone, two cards.
 */

:is(.biovid-main, .editor-styles-wrapper) .bv-cast {
	background: var(--bv-paper);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-compare {
	gap: 0 !important;
	margin-bottom: 0;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-compare > .wp-block-column {
	box-sizing: border-box;
	padding-right: clamp(20px, 3vw, 52px);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-compare > .wp-block-column + .wp-block-column {
	padding-right: 0;
	padding-left: clamp(20px, 3vw, 52px);
	box-shadow: -1px 0 0 var(--bv-rule);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-offer-kicker {
	font-size: var(--bv-label);
	font-weight: var(--bv-bold);
	letter-spacing: var(--bv-tracking-label);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--bv-blue);
	margin-bottom: 0.9em;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-offer h2 {
	font-size: var(--bv-name);
	font-weight: var(--bv-bold);
	line-height: 1.05;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--bv-stage);
	margin-bottom: 0.65em;
}

/* The timing, in a pill so it's easy to spot. */
:is(.biovid-main, .editor-styles-wrapper) .bv-offer .bv-pill {
	justify-self: start;
	align-self: start;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	width: fit-content;
	box-sizing: border-box;
	font-size: 14.5px;
	font-weight: var(--bv-bold);
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--bv-paper);
	background: var(--bv-stage);
	border-radius: 50px;
	padding: 0.55em 1.05em 0.5em 0.85em;
	margin-bottom: 1.4em;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-offer .bv-pill::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%238fd6f2' stroke-width='1.6'/%3E%3Cpath d='M8 4.4V8l2.6 1.6' fill='none' stroke='%238fd6f2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-offer .bv-offer-desc {
	font-size: var(--bv-text-lg);
	line-height: 1.5;
	margin-bottom: 1.3em;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-offer .bv-offer-row {
	font-size: 17px;
	line-height: 1.55;
	border-top: 1px solid var(--bv-rule);
	padding: 0.95em 0 1em;
	margin: 0;
}

/* Run-in labels, as in the one-pager: BEST FOR …, DELIVERY … */
:is(.biovid-main, .editor-styles-wrapper) .bv-offer-row strong:first-child {
	font-size: 13px;
	font-weight: var(--bv-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bv-blue);
	margin-right: 0.45em;
}

/* Line the rows up across both offerings, so they compare at a glance. */
@supports (grid-template-rows: subgrid) {
	:is(.biovid-main, .editor-styles-wrapper) .bv-compare {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(6, auto);
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-compare > .wp-block-column,
	:is(.biovid-main, .editor-styles-wrapper) .bv-compare > .wp-block-column > .bv-offer {
		display: grid;
		grid-row: 1 / span 6;
		grid-template-rows: subgrid;
		align-content: start;
	}
}

@media (max-width: 767px) {
	/* The offerings become two cards, one after the other, each label above its text. */
	:is(.biovid-main, .editor-styles-wrapper) .bv-compare {
		display: flex !important;
		flex-direction: column;
		gap: 16px !important;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-compare > .wp-block-column,
	:is(.biovid-main, .editor-styles-wrapper) .bv-compare > .wp-block-column + .wp-block-column {
		display: block;
		grid-row: auto;
		padding: 0;
		box-shadow: none;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-compare > .wp-block-column > .bv-offer {
		display: block;
		background: var(--bv-mist);
		border-radius: 22px;
		padding: 28px 22px 8px;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-offer .bv-offer-desc {
		font-size: var(--bv-text);
		margin-bottom: 1.1em;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-offer .bv-offer-row {
		font-size: 16px;
		padding: 14px 0 16px;
	}

	:is(.biovid-main, .editor-styles-wrapper) .bv-offer-row strong:first-child {
		display: block;
		margin: 0 0 4px;
	}
}