/**
 * Love Pharm · Product Mechanism ("the reason it sells") — two-column layout.
 * Structure only: text and image side by side on desktop, image stacked on top
 * of the text on mobile. Typography (color / size / weight) is deliberately left
 * to the theme — this file declares layout only. See product-mechanism.php.
 *
 * Every selector is scoped under .lp-product-mechanism so nothing can leak into
 * the surrounding product description or the Elementor tabs.
 */

.lp-product-mechanism {
	/* Component-local radius so the image matches the theme's soft corners.
	   Not a global token — kept scoped to this block. */
	--lpm-radius: 12px;

	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center; /* text is vertically centred against the image */
	gap: 40px;
	margin: 0 0 44px;
}

.lp-product-mechanism *,
.lp-product-mechanism *::before,
.lp-product-mechanism *::after {
	box-sizing: border-box;
}

/* ---------- Media ----------
 * order:-1 puts the image FIRST in the flow, so under the page's RTL direction
 * it lands in the right-hand column on desktop, and on top on mobile. */
.lp-product-mechanism__media {
	order: -1;
}

.lp-product-mechanism__media img {
	display: block;
	width: 100%;
	max-height: 300px;              /* never taller than 300px */
	object-fit: contain;            /* keep the whole image, no cropping */
	border-radius: var(--lpm-radius);
}

/* ---------- Responsive ----------
 * Collapse to a single column on tablet/phone. The image already leads (order:-1),
 * so it sits ABOVE the text once stacked. */
@media (max-width: 768px) {
	.lp-product-mechanism {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}