/* TS Split Feature */
.ts-split {
	--ts-split-gap: 52px;
	--ts-split-row-gap: 52px;
	--ts-split-radius: 28px;
	--ts-split-pad: 24px;
	--ts-split-line: var(--ts-line);
	display: flex;
	flex-direction: column;
	gap: var(--ts-split-row-gap);
}

/* ---------- Rows ---------- */
.ts-split__row {
	/* Arrangement (control) switches this between side by side and stacked. */
	--ts-split-cols: minmax(0, var(--ts-split-pic, 1fr)) minmax(0, var(--ts-split-txt, 1fr));
	display: grid;
	grid-template-columns: var(--ts-split-cols);
	gap: var(--ts-split-gap);
	align-items: var(--ts-split-align, center);
}

.ts-split__row--pic-right {
	--ts-split-cols: minmax(0, var(--ts-split-txt, 1fr)) minmax(0, var(--ts-split-pic, 1fr));
	--ts-split-side-order: 2;
}

.ts-split__media {
	order: var(--ts-split-media-order, var(--ts-split-side-order, 0));
	min-width: 0;
}

.ts-split__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* Thin rule between rows */
.ts-split--dividers {
	gap: 0;
}

.ts-split--dividers .ts-split__row:not(:last-child) {
	padding-bottom: var(--ts-split-row-gap);
}

.ts-split--dividers .ts-split__row + .ts-split__row {
	padding-top: var(--ts-split-row-gap);
	border-top: 1px solid var(--ts-split-line);
}

/* ---------- Picture ---------- */
.ts-split__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--ts-split-radius);
	background: linear-gradient(160deg, var(--ts-a, #4A3128), var(--ts-b, #2C1D17));
}

.ts-split__img {
	display: block;
	width: 100%;
	height: auto;
}

/* 1.9.4: art drawn in the page (Use the site fonts for text in the art). */
.ts-split__svg svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Plain: the picture fills a frame of the chosen shape. */
.ts-split--pic-plain.ts-split--ratio-4-3 .ts-split__frame { aspect-ratio: 4 / 3; }
.ts-split--pic-plain.ts-split--ratio-3-2 .ts-split__frame { aspect-ratio: 3 / 2; }
.ts-split--pic-plain.ts-split--ratio-1-1 .ts-split__frame { aspect-ratio: 1 / 1; }
.ts-split--pic-plain.ts-split--ratio-16-9 .ts-split__frame { aspect-ratio: 16 / 9; }

.ts-split--pic-plain:not(.ts-split--ratio-natural) .ts-split__img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
}

.ts-split--pic-plain.ts-split--ratio-natural .ts-split__frame:empty {
	aspect-ratio: 4 / 3;
}

/* Panel: the picture sits on the colour blend with some padding. */
.ts-split--pic-panel .ts-split__frame {
	padding: var(--ts-split-pad);
}

.ts-split--pic-panel:not(.ts-split--ratio-natural) .ts-split__img {
	object-fit: contain;
}

.ts-split--pic-panel.ts-split--ratio-4-3 .ts-split__img { aspect-ratio: 4 / 3; }
.ts-split--pic-panel.ts-split--ratio-3-2 .ts-split__img { aspect-ratio: 3 / 2; }
.ts-split--pic-panel.ts-split--ratio-1-1 .ts-split__img { aspect-ratio: 1 / 1; }
.ts-split--pic-panel.ts-split--ratio-16-9 .ts-split__img { aspect-ratio: 16 / 9; }

.ts-split--pic-panel .ts-split__frame:empty {
	aspect-ratio: 4 / 3;
}

/* ---------- Text ---------- */
.ts-split__chip {
	margin-bottom: 18px;
}

.ts-split__kicker {
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.62; /* 1.9.4: drafts' line height (was 1.4). */
	text-transform: uppercase;
	color: var(--ts-tone-fg);
}

.ts-split__title {
	--ts-fs: clamp(1.4rem, 2.4vw, 1.7rem);
	--ts-lh: 1.2;
	font-size: var(--ts-fs);
	line-height: var(--ts-lh);
}

.ts-split__text {
	--ts-fs: 15.5px;
	--ts-lh: 1.62; /* 1.9.4: drafts' line height (was 1.6). */
	max-width: 460px;
	margin-top: 14px;
	font-size: var(--ts-fs);
	line-height: var(--ts-lh);
	color: var(--ts-muted);
}

.ts-split__block {
	width: 100%;
	margin-top: 22px;
}

.ts-split__stats {
	margin-top: 30px;
}

.ts-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

/* ---------- Light text for dark backgrounds ---------- */
.ts-split--light {
	--ts-split-line: rgba(255, 255, 255, .14);
}

.ts-split--light .ts-split__title {
	color: #fff;
}

.ts-split--light .ts-split__text {
	color: rgba(255, 255, 255, .72);
}

/* Checklist (ticks) under the text (1.6.0). */
.ts-split__checklist + .ts-split__block {
	margin-top: 18px;
}