/*
 * SE Text beside image. Two columns from 768 up, the photo on either side and
 * optionally running off the screen edge on its side. On a phone the photo
 * comes first and the text follows, both full width.
 */

.sepk-split {
	--sepk-edge-start: calc(var(--padding-inline-start, 0px) + var(--sepk-own-pad, 0px));
	--sepk-edge-end: calc(var(--padding-inline-end, 0px) + var(--sepk-own-pad, 0px));
	--sepk-fit: calc(40vw / (var(--sepk-chars, 8) * 0.52));
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	grid-template-areas: "body media";
	align-items: center;
	column-gap: clamp(2rem, 5.21vw, 6.25rem);
	min-width: 0;
}

.sepk-split--photo-left {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	grid-template-areas: "media body";
}

.sepk-split--no-photo {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "body";
}

.sepk-split__media {
	grid-area: media;
}

/* Height from a spacer, not aspect-ratio, for the same reason as SE Photo. */
.sepk-split__media::before {
	content: "";
	display: block;
	padding-top: 75%;
}

.sepk-split--square .sepk-split__media::before { padding-top: 100%; }
.sepk-split--portrait .sepk-split__media::before { padding-top: 125%; }

.sepk-split--bleed.sepk-split--photo-right .sepk-split__media {
	margin-inline-end: calc(-1 * var(--sepk-edge-end));
}

.sepk-split--bleed.sepk-split--photo-left .sepk-split__media {
	margin-inline-start: calc(-1 * var(--sepk-edge-start));
}

.sepk-split__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(1rem, 1.46vw, 1.75rem);
	min-width: 0;
}

.sepk-split .sepk-split__heading {
	max-width: 100%;
	font-size: min(clamp(2rem, 6.77vw, 8.125rem), var(--sepk-fit));
	overflow-wrap: break-word;
	color: var(--se-bone);
}

.sepk-split__text {
	max-width: 40rem;
	font-family: var(--se-font-body);
	font-size: clamp(1rem, 1.25vw, 1.375rem);
	line-height: 1.55;
	color: var(--se-text-soft);
	overflow-wrap: break-word;
}

.sepk-split__text p,
.sepk-split__text ul,
.sepk-split__text ol {
	margin: 0 0 1em;
}

.sepk-split__text > :last-child {
	margin-bottom: 0;
}

.sepk-split__text strong,
.sepk-split__text b {
	font-weight: 600;
	color: var(--se-bone);
}

.sepk-split__text a {
	color: var(--se-red-text, var(--se-red-hot));
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--se-dur) var(--se-ease);
}

.sepk-split__text a:hover {
	color: var(--se-bone);
}

.sepk-split__cta {
	margin-block-start: 0.5rem;
}

@media (max-width: 767px) {
	.sepk-split,
	.sepk-split--photo-left {
		--sepk-fit: calc((100vw - 2 * var(--se-pad)) / (var(--sepk-chars, 8) * 0.52));
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "body";
		row-gap: 2rem;
	}

	.sepk-split--no-photo {
		grid-template-areas: "body";
	}

	.sepk-split--bleed.sepk-split--photo-right .sepk-split__media,
	.sepk-split--bleed.sepk-split--photo-left .sepk-split__media {
		margin-inline: calc(-1 * var(--sepk-edge-start)) calc(-1 * var(--sepk-edge-end));
	}

	.sepk-split .sepk-split__heading {
		font-size: min(clamp(2rem, 15vw, 5.5rem), var(--sepk-fit));
	}

	.sepk-split__cta {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.sepk-split__cta .se-link {
		justify-content: center;
	}
}