/* ============================================================
 * BIOTA · SECTION · Product Spotlight  (markup: templates/front-page.html)
 * Product image with a sale badge, benefit checklist, price and CTAs.
 * Builds on: .biota-section / __inner / __header, .biota-badge--sale,
 * .biota-checklist, .biota-actions--stacked, .biota-btn--*.
 * ============================================================ */

/* Product image card: 4:3, the same ratio every other briefed slot uses, so a
   photo can move between here and a PDP section without being re-cropped. It
   was 3:4 while the spotlight photo was a portrait product shot. */
.biota-spotlight__media {
	aspect-ratio: var(--biota-pdp-media, 4 / 3);
	min-height: 0;
	border-radius: 18px;
	overflow: hidden;
	padding: 14px;
	background-color: #e7ebf0; /* Figma placeholder tint (Mystic) */
}
.biota-spotlight__media .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
}

/* Text column: eyebrow + heading, checklist, price, CTAs stacked. */
.biota-spotlight__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--bt-40);
}

/* Desktop: two columns — product card on the left, copy on the right. */
@media (min-width: 900px) {
	.biota-spotlight .biota-section__inner {
		display: grid;
		/* Wider than the 400px the portrait card used: a landscape photo at
		   that width reads as a thumbnail beside a full column of copy. */
		grid-template-columns: minmax(0, 480px) 1fr;
		gap: 56px;
		align-items: center;
		max-width: 1040px;
	}
	.biota-spotlight__media {
		align-self: center;
	}
}

/* Price row: current price + struck-through original. */
.biota-spotlight__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--bt-20);
}
.biota-spotlight__price-now {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 28px; /* Figma */
	color: var(--wp--preset--color--primary);
}
.biota-spotlight__price-was {
	margin: 0;
	font-size: var(--wp--preset--font-size--body); /* 15 */
	color: var(--wp--preset--color--text-faint);   /* #AAAAAA */
	text-decoration: line-through;
}

/* CTAs here use the site's standard action button (theme.json's base: 32px
 * radius, 20/32 padding, 16px) so they match the hero pair. They used to be
 * smaller rounded rectangles, which made every band on the homepage a
 * different button size. */

/* The highlight image carries .biota-card for its rounded surface, but it is a
 * picture, not a control: nothing happens when you click it. Drop the card's
 * pointer and hover motion so it stops inviting a click it cannot answer. */
.biota-spotlight__media {
	cursor: default;
}
.biota-spotlight__media:hover,
.biota-spotlight__media:focus-within {
	transform: none;
	box-shadow: none;
}