/*
 * OD: Split columns (od/split). Front end + editor canvas.
 *
 * Separator model: the closed column (the one not chosen as open side) is
 * shaped at its seam edge with clip-path / mask on its .od-split__bg. The
 * open column's .od-split__bg extends --od-split-sep under it, so the open
 * background shows through the cut-out. Closed sits above open (z-index).
 */

.od-split {
	--od-split-sep: var(--od-split-sep-row, 28px);
	--od-split-pad: clamp(20px, 3vw, 40px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 0;
	margin-bottom: 40px;
}

.od-split__col {
	position: relative;
	z-index: 1;
	min-height: 100px;
	display: flex;
	flex-direction: column;
}

.od-split__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
}

.od-split__inner {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	padding: var(--od-split-pad);
}

.od-split__inner > :first-child {
	margin-top: 0;
}

.od-split__inner > :last-child {
	margin-bottom: 0;
}

/* ---------- Backgrounds and overlays ---------- */

.od-split__col--bg-purple > .od-split__bg { background-color: var(--od-color-purple); }
.od-split__col--bg-cyan > .od-split__bg { background-color: var(--od-color-cyan); }
.od-split__col--bg-darkgray > .od-split__bg { background-color: var(--od-color-dark-gray); }
.od-split__col--bg-lightgray > .od-split__bg { background-color: var(--od-color-light-gray); }
.od-split__col--bg-white > .od-split__bg { background-color: #fff; }

.od-split__col--overlay-dark > .od-split__bg::after,
.od-split__col--overlay-light > .od-split__bg::after {
	content: "";
	position: absolute;
	inset: 0;
}

.od-split__col--overlay-dark > .od-split__bg::after { background-color: rgba(0, 0, 0, 0.5); }
.od-split__col--overlay-light > .od-split__bg::after { background-color: rgba(255, 255, 255, 0.7); }

.od-split__col--on-dark { color: #fff; }

.od-split__col--overlay-light,
.od-split__col--on-light { color: var(--od-color-dark-gray); }

body .od-split__col--on-dark :is(.button, .od-button, .wp-block-button__link) {
	background-color: #fff;
	color: var(--od-color-purple);
}

body .od-split__col--on-dark :is(.button, .od-button, .wp-block-button__link):is(:hover, :focus) {
	background-color: var(--od-color-light-gray, #F5F5F5);
	color: var(--od-color-purple);
}

/* ---------- Stacked (mobile): flip order ---------- */

.od-split--flip > .od-split__col:first-child { order: 2; }

/* ---------- Separator: stacking order ---------- */

.od-split--sep.od-split--open-first > .od-split__col:last-child,
.od-split--sep.od-split--open-second > .od-split__col:first-child {
	z-index: 2;
}

/* ---------- Separator: stacked, below 640px (seam is horizontal) ---------- */

@media (max-width: 639px) {
	/* Open column on top: extends down. */
	.od-split--sep.od-split--open-first:not(.od-split--flip) > .od-split__col:first-child > .od-split__bg,
	.od-split--sep.od-split--open-second.od-split--flip > .od-split__col:last-child > .od-split__bg {
		bottom: calc(-1 * var(--od-split-sep));
	}

	/* Open column below: extends up. */
	.od-split--sep.od-split--open-second:not(.od-split--flip) > .od-split__col:last-child > .od-split__bg,
	.od-split--sep.od-split--open-first.od-split--flip > .od-split__col:first-child > .od-split__bg {
		top: calc(-1 * var(--od-split-sep));
	}

	/* Closed column below the seam: shape its top edge. */
	.od-split--sep-diagonal.od-split--open-first:not(.od-split--flip) > .od-split__col:last-child > .od-split__bg,
	.od-split--sep-diagonal.od-split--open-second.od-split--flip > .od-split__col:first-child > .od-split__bg {
		clip-path: polygon(0 0, 100% var(--od-split-sep), 100% 100%, 0 100%);
	}

	.od-split--sep-triangle.od-split--open-first:not(.od-split--flip) > .od-split__col:last-child > .od-split__bg,
	.od-split--sep-triangle.od-split--open-second.od-split--flip > .od-split__col:first-child > .od-split__bg {
		clip-path: polygon(0 0, calc(50% - var(--od-split-sep)) 0, 50% var(--od-split-sep), calc(50% + var(--od-split-sep)) 0, 100% 0, 100% 100%, 0 100%);
	}

	.od-split--sep-wave.od-split--open-first:not(.od-split--flip) > .od-split__col:last-child > .od-split__bg,
	.od-split--sep-wave.od-split--open-second.od-split--flip > .od-split__col:first-child > .od-split__bg {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V50C25 0 25 0 50 50S75 100 100 50V100Z'/%3E%3C/svg%3E") top / 100% var(--od-split-sep) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--od-split-sep)) no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V50C25 0 25 0 50 50S75 100 100 50V100Z'/%3E%3C/svg%3E") top / 100% var(--od-split-sep) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--od-split-sep)) no-repeat;
	}

	/* Closed column above the seam: shape its bottom edge. */
	.od-split--sep-diagonal.od-split--open-second:not(.od-split--flip) > .od-split__col:first-child > .od-split__bg,
	.od-split--sep-diagonal.od-split--open-first.od-split--flip > .od-split__col:last-child > .od-split__bg {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--od-split-sep)), 0 100%);
	}

	.od-split--sep-triangle.od-split--open-second:not(.od-split--flip) > .od-split__col:first-child > .od-split__bg,
	.od-split--sep-triangle.od-split--open-first.od-split--flip > .od-split__col:last-child > .od-split__bg {
		clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + var(--od-split-sep)) 100%, 50% calc(100% - var(--od-split-sep)), calc(50% - var(--od-split-sep)) 100%, 0 100%);
	}

	.od-split--sep-wave.od-split--open-second:not(.od-split--flip) > .od-split__col:first-child > .od-split__bg,
	.od-split--sep-wave.od-split--open-first.od-split--flip > .od-split__col:last-child > .od-split__bg {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0V50C25 100 25 100 50 50S75 0 100 50V0Z'/%3E%3C/svg%3E") bottom / 100% var(--od-split-sep) no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - var(--od-split-sep)) no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0V50C25 100 25 100 50 50S75 0 100 50V0Z'/%3E%3C/svg%3E") bottom / 100% var(--od-split-sep) no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - var(--od-split-sep)) no-repeat;
	}

	/* Keep content clear of the shaped edge. */
	.od-split--sep.od-split--open-first:not(.od-split--flip) > .od-split__col:last-child > .od-split__inner,
	.od-split--sep.od-split--open-second.od-split--flip > .od-split__col:first-child > .od-split__inner {
		padding-top: calc(var(--od-split-pad) + var(--od-split-sep));
	}

	.od-split--sep.od-split--open-second:not(.od-split--flip) > .od-split__col:first-child > .od-split__inner,
	.od-split--sep.od-split--open-first.od-split--flip > .od-split__col:last-child > .od-split__inner {
		padding-bottom: calc(var(--od-split-pad) + var(--od-split-sep));
	}
}

/* ---------- Columns, 640px and up (seam is vertical) ---------- */

@media (min-width: 640px) {
	.od-split {
		--od-split-sep: var(--od-split-sep-col, 40px);
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.od-split--25-75 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
	.od-split--75-25 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }

	.od-split--flip > .od-split__col:first-child { order: 0; }

	/* Open first column: extends right. Open second: extends left. */
	.od-split--sep.od-split--open-first > .od-split__col:first-child > .od-split__bg {
		right: calc(-1 * var(--od-split-sep));
	}

	.od-split--sep.od-split--open-second > .od-split__col:last-child > .od-split__bg {
		left: calc(-1 * var(--od-split-sep));
	}

	/* Closed second column: shape its left edge. */
	.od-split--sep-diagonal.od-split--open-first > .od-split__col:last-child > .od-split__bg {
		clip-path: polygon(0 0, 100% 0, 100% 100%, var(--od-split-sep) 100%);
	}

	.od-split--sep-triangle.od-split--open-first > .od-split__col:last-child > .od-split__bg {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(50% + var(--od-split-sep)), var(--od-split-sep) 50%, 0 calc(50% - var(--od-split-sep)));
	}

	.od-split--sep-wave.od-split--open-first > .od-split__col:last-child > .od-split__bg {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0H50C0 25 0 25 50 50S100 75 50 100H100Z'/%3E%3C/svg%3E") left / var(--od-split-sep) 100% no-repeat, linear-gradient(#000, #000) right / calc(100% - var(--od-split-sep)) 100% no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0H50C0 25 0 25 50 50S100 75 50 100H100Z'/%3E%3C/svg%3E") left / var(--od-split-sep) 100% no-repeat, linear-gradient(#000, #000) right / calc(100% - var(--od-split-sep)) 100% no-repeat;
	}

	.od-split--sep.od-split--open-first > .od-split__col:last-child > .od-split__inner {
		padding-left: calc(var(--od-split-pad) + var(--od-split-sep));
	}

	/* Closed first column: shape its right edge. */
	.od-split--sep-diagonal.od-split--open-second > .od-split__col:first-child > .od-split__bg {
		clip-path: polygon(0 0, 100% 0, calc(100% - var(--od-split-sep)) 100%, 0 100%);
	}

	.od-split--sep-triangle.od-split--open-second > .od-split__col:first-child > .od-split__bg {
		clip-path: polygon(0 0, 100% 0, 100% calc(50% - var(--od-split-sep)), calc(100% - var(--od-split-sep)) 50%, 100% calc(50% + var(--od-split-sep)), 100% 100%, 0 100%);
	}

	.od-split--sep-wave.od-split--open-second > .od-split__col:first-child > .od-split__bg {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H50C100 25 100 25 50 50S0 75 50 100H0Z'/%3E%3C/svg%3E") right / var(--od-split-sep) 100% no-repeat, linear-gradient(#000, #000) left / calc(100% - var(--od-split-sep)) 100% no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H50C100 25 100 25 50 50S0 75 50 100H0Z'/%3E%3C/svg%3E") right / var(--od-split-sep) 100% no-repeat, linear-gradient(#000, #000) left / calc(100% - var(--od-split-sep)) 100% no-repeat;
	}

	.od-split--sep.od-split--open-second > .od-split__col:first-child > .od-split__inner {
		padding-right: calc(var(--od-split-pad) + var(--od-split-sep));
	}
}