/*
 * Layout "split": two columns, a copy + signup column beside a full-height image (image on either side).
 * Used by syncte.com, saylessfitness.ca, wear.predecy.com.
 *
 * Markup: group.bcs-split > group.bcs-split-column (eyebrow, headline, sub, [teasers], card) + core/image.bcs-split-media.
 * Column widths come from --bcs-split-cols (default 46% 54%, copy first). Mobile arrangements differ per brand and live in
 * the child's brand.css; the art-directed crop is generated there too.
 */

.bcs-split {
	display: grid;
	grid-template-columns: var(--bcs-split-cols, 46% 54%);
	min-height: var(--bcs-split-min, 780px);
}

.bcs-split-column {
	box-sizing: border-box;
	min-width: 0;
	padding: 44px var(--gutter) 40px;
	background: var(--bcs-split-column-bg, transparent);
}

.bcs-split-media {
	position: relative;
	align-self: stretch; /* an aspect-ratio would otherwise stop the grid from stretching the image to the row */
	justify-self: stretch;
	width: 100%; /* ...and would otherwise size the figure's width from its stretched height */
	min-width: 0;
	min-height: 100%;
	margin: 0;
	overflow: hidden;
}

.bcs-split-media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.bcs-split .bcs-card {
	margin-top: 36px;
}

/* Image-last brands keep the image first in the DOM (no layout shift on phones) and place it on the right here. */
@media (min-width: 701px) {
	.bcs-split.bcs-image-last .bcs-split-media {
		order: 2;
	}
}

@media (max-width: 1100px) {
	.bcs-split-column {
		padding: 36px 28px;
	}
}

@media (max-width: 700px) {
	.bcs-split {
		display: block;
		min-height: 0;
	}

	.bcs-split-column {
		padding: 20px;
	}

	.bcs-split-media {
		height: 120px;
		min-height: 0;
	}

	.bcs-split .bcs-card {
		margin-top: 20px;
	}
}