/**
 * Split Image / Text widget: the two-column grid, its image frame and the clip that holds the image while it expands on scroll.
 * @package Atheria_Core
 * @since   1.0.0
 */

.ath-split {
	display: grid;
	grid-template-columns: var(--ath-split-img-col, 50%) minmax(0, 1fr);
	gap: 5rem;
	align-items: center;
}

.ath-split--image-right {
	grid-template-columns: minmax(0, 1fr) var(--ath-split-img-col, 50%);
}

.ath-split--image-right .ath-split__image-wrap {
	order: 2;
}

.ath-split--image-right .ath-split__content {
	order: 1;
}

.ath-split__image-wrap {
	overflow: hidden;
}

.ath-split__image {
	width: 100%;
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: 1rem;
}

.ath-split .ath-split__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.ath-split__eyebrow {
	display: block;
}

.ath-split__heading {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.ath-split__body {
	margin-bottom: 2rem;
}

.ath-split__body > :first-child {
	margin-top: 0;
}

.ath-split__body > :last-child {
	margin-bottom: 0;
}

.ath-split[data-ath-split-expand] {
	overflow: hidden;
}

/* The text slides out sideways while it fades, so only the height is held. */
@supports (overflow: clip) {
	.ath-split[data-ath-split-expand] {
		overflow-x: visible;
		overflow-y: clip;
	}
}

.ath-split[data-ath-split-expand] .ath-split__image-wrap {
	overflow: hidden;
}

@media (min-width: 1025px) {
	/* One row as tall as the section, so the content reflowing as its column narrows never stretches the image. */
	.ath-split.is-pinned {
		height:             calc(100vh - var(--ath-header-clearance, 0px));
		grid-template-rows: 100%;
	}

	.ath-split.is-pinned .ath-split__image-wrap {
		align-self: stretch;
		height:     100%;
	}

	/* Square while pinned, so the photo meets the window's edges once it fills the width. */
	.ath-split.is-pinned .ath-split__image {
		height:        100%;
		border-radius: 0 !important;
	}

	/* Hidden until the fit check has chosen the section's layout, so it is never painted in one it does not keep. */
	.ath-js-ready body:not(.elementor-editor-active) .ath-split.is-pending {
		visibility: hidden;
		animation:  ath-split-expand-placed 0s linear 2.5s forwards;
	}
}

@keyframes ath-split-expand-placed {
	to { visibility: visible; }
}

@media (max-width: 1024px) {
	.ath-split,
	.ath-split--image-right {
		grid-template-columns: 1fr !important;
		gap: 0.75rem;
		align-items: start;
	}

	.ath-split--image-right .ath-split__image-wrap,
	.ath-split--image-right .ath-split__content {
		order: 0;
	}

	.ath-split--reverse-mobile .ath-split__image-wrap {
		order: 2;
	}

	.ath-split--reverse-mobile .ath-split__content {
		order: 1;
	}

	.ath-split__image {
		aspect-ratio: 16/9;
	}
}

@media (max-width: 767px) {
	.ath-split {
		gap: 1.25rem;
	}

	.ath-split__image {
		aspect-ratio: 4/3;
	}
}