/**
 * Image and text (lts/image-text, lts/image-text-reverse).
 *
 * Regular media + text split: rounded photo (--wp--custom--radius--media, 15px),
 * heading, paragraph, optional button. Own markup, no `.kd-split` classes (the
 * parent's split skin is a fixed circle). The reverse variant flips the visual order
 * with `flex-direction: row-reverse` on desktop only; DOM order is image then text,
 * so the stacked mobile layout is always image first.
 *
 * Responsive (derived, no frames; designer review): >= 782 two equal columns with a
 * 4rem gap (3rem at <= 1024), <= 781 stacked with a 2rem gap.
 *
 * Vertical spacing: like the parent's plain sections the pattern has no padding; the
 * parent's owl (`.entry-content > * + *`) puts one --kd-section-gap above it. The owl
 * only adds TOP margins, so as the LAST block on a page the photo would sit on the
 * footer: the :last-child rule below gives it the same one-gap bottom margin
 * (the parent's `.kd-section--end` mechanism), and only when last, so stacked
 * sections never get a double gap.
 */

.entry-content > .lts-image-text.kd-section:last-child {
	margin-block-end: var(--kd-section-gap);
}

.lts-image-text .lts-image-text__inner {
	gap: 2rem;
	margin-block: 0;
}

.lts-image-text .lts-image-text__image {
	margin: 0;
}

.lts-image-text .lts-image-text__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--media);
}

.lts-image-text .lts-image-text__heading {
	margin-block: 0 1rem;
	text-wrap: balance;
}

.lts-image-text .lts-image-text__body {
	margin-block: 0;
}

.lts-image-text .lts-image-text__buttons {
	margin-block-start: 1.5rem;
}

@media (min-width: 782px) {
	.lts-image-text .wp-block-columns.lts-image-text__inner {
		gap: 4rem;
	}

	.lts-image-text--reverse .wp-block-columns.lts-image-text__inner {
		flex-direction: row-reverse;
	}
}

@media (min-width: 782px) and (max-width: 1024px) {
	.lts-image-text .wp-block-columns.lts-image-text__inner {
		gap: 3rem;
	}
}