/**
 * SSRP LP — Two Column (Content + Image).
 *
 * Equal-width grid by default with a 4:3 media slot. image-left flips the
 * grid order so the image renders before the copy in the DOM — important
 * for reading order at mobile collapse.
 */

.ssrp-lp-two-column__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.ssrp-lp-two-column--image-left .ssrp-lp-two-column__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ssrp-lp-two-column--image-left .ssrp-lp-two-column__content { order: 2; }
.ssrp-lp-two-column--image-left .ssrp-lp-two-column__media   { order: 1; }

.ssrp-lp-two-column__content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ssrp-lp-two-column__heading {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin: 0;
}

.ssrp-lp-two-column__text {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ssrp-lp-ink-muted);
}
.ssrp-lp-two-column__text > *:first-child { margin-top: 0; }
.ssrp-lp-two-column__text > *:last-child  { margin-bottom: 0; }

.ssrp-lp-two-column__cta { margin-top: 0.5rem; }

.ssrp-lp-two-column__media {
	position: relative;
	overflow: hidden;
	background: var(--ssrp-lp-surface-muted);
	aspect-ratio: 4 / 3;
}
.ssrp-lp-two-column__media--rounded { border-radius: var(--ssrp-lp-radius); }
.ssrp-lp-two-column__media--square  { border-radius: 0; }
.ssrp-lp-two-column__media--circle  { border-radius: 999px; aspect-ratio: 1 / 1; max-width: 24rem; margin-inline: auto; }

.ssrp-lp-two-column__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 768px) {
	.ssrp-lp-two-column__grid,
	.ssrp-lp-two-column--image-left .ssrp-lp-two-column__grid {
		grid-template-columns: 1fr;
	}
	.ssrp-lp-two-column--image-left .ssrp-lp-two-column__content,
	.ssrp-lp-two-column--image-left .ssrp-lp-two-column__media { order: unset; }
}