/**
 * Split card.
 *
 * Both looks stack on small screens with the image on top. The service look turns
 * into a two-column grid at 768px; the call-to-action look into a row at 1024px.
 * "Image position" is expressed with `order`, so it follows the reading direction:
 * `start` is the right-hand side in Hebrew and the left-hand side in English.
 * The service text sizes are fluid between measured stops (padding 32 -> 52px,
 * title 19 -> 22px over 768 -> ~1440px).
 */

.acini-split {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--acini-text);
}

.acini-split__media {
	overflow: hidden;
}

.acini-split__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.acini-split__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.acini-split__heading {
	margin: 0;
	text-wrap: auto; /* Not the global heading balance: fill each line before wrapping. */
}

.acini-split__text {
	white-space: pre-line;
}

.acini-split__list ul {
	display: flex;
	flex-direction: column;
	gap: var(--acini-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- Service look ------------------------------------------------------- */

.acini-split--service {
	background: var(--acini-bg);
	border-radius: var(--acini-radius-2xl);
}

.acini-split--service .acini-split__media {
	block-size: 32rem;
}

.acini-split--service .acini-split__body {
	display: flex;
	flex: none; /* stacked: the button follows the text; the spare height stays below, as in the design */
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.4rem;
	padding: 2rem;
}

.acini-split--service .acini-split__content {
	gap: var(--acini-space-sm);
}

.acini-split--service .acini-btn {
	--acini-btn-py: 1.2rem;
	align-self: flex-end; /* the end side: left in Hebrew, as in the design */
}

.acini-split__eyebrow {
	display: flex;
	align-items: center;
	font-family: var(--acini-font-heading);
	font-size: var(--acini-text-lg);
	font-weight: var(--acini-weight-semibold);
	line-height: 1;
	color: var(--acini-accent);
}

.acini-split--service .acini-split__heading {
	font-size: 1.8rem;
	font-weight: var(--acini-weight-medium);
	line-height: 1.3;
}

.acini-split--service .acini-split__text {
	font-size: var(--acini-text-13);
	line-height: 1.46;
	color: var(--acini-text-muted);
}

.acini-split__list {
	display: flex;
	flex-direction: column;
	gap: var(--acini-space-2xs);
	font-size: var(--acini-text-sm);
	line-height: 1.43;
}

.acini-split__list-title {
	font-weight: var(--acini-weight-medium);
}

.acini-split__list li {
	color: var(--acini-text-muted);
}

/* ---- Call-to-action look ------------------------------------------------- */

.acini-split--cta {
	background: var(--acini-bg-subtle);
	border-radius: var(--acini-radius-3xl);
}

.acini-split--cta .acini-split__media {
	block-size: 28rem;
}

.acini-split--cta .acini-split__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--acini-space-lg);
	padding: calc(var(--acini-space-xl) + var(--acini-space-xs)) var(--acini-space-lg); /* 48 / 24 */
}

.acini-split--cta .acini-split__content {
	gap: var(--acini-space-lg);
}

.acini-split--cta .acini-split__heading {
	font-size: var(--acini-text-2xl);
	font-weight: var(--acini-weight-bold);
	line-height: 1.29;
}

.acini-split__accent {
	color: var(--acini-accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.8rem;
}

.acini-split--cta .acini-split__text {
	font-size: var(--acini-text-18);
	line-height: 1.67;
}

/* ---- Stack on scroll ------------------------------------------------------ */

.acini-split--sticky {
	position: sticky;
	inset-block-start: 0.8rem;
	margin-block-start: var(--acini-space-2xl);
}

.acini-split--sticky + .acini-split--sticky {
	margin-block-start: 9.6rem;
}

/* Stacked on a phone, each sticky card is the screen (less 16px) tall, so the next one slides over it. */
.acini-split--service.acini-split--sticky {
	min-block-size: calc(100vh - 1.6rem);
	min-block-size: calc(100svh - 1.6rem);
}

/* ---- Wider screens ------------------------------------------------------------ */

@media (min-width: 40em) {
	.acini-split--cta .acini-split__media {
		block-size: 36rem;
	}
}

@media (min-width: 48em) {
	.acini-split--service {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-block-size: 56rem; /* both Home cards are 560 tall once their text is shorter than that */
	}

	/* The picture fills its cell; it must not decide how tall the card is. */
	.acini-split--service .acini-split__media {
		position: relative;
		block-size: auto;
	}

	.acini-split--service .acini-split__img {
		position: absolute;
		inset: 0;
	}

	.acini-split--service.acini-split--media-end .acini-split__media {
		order: 2;
	}

	.acini-split--service .acini-split__body {
		gap: var(--acini-space-2lg);
		padding: clamp(3.2rem, 4vw, 5.2rem);
	}

	.acini-split--service .acini-split__content {
		gap: 2rem;
	}

	.acini-split--service .acini-btn {
		--acini-btn-py: 1.4rem;
	}

	.acini-split--service .acini-split__heading {
		font-size: clamp(1.9rem, 1.5vw, 2.2rem);
		line-height: 1.35;
	}

	.acini-split--service .acini-split__text {
		font-size: var(--acini-text-sm);
		line-height: 1.43;
	}

	.acini-split--sticky {
		inset-block-start: 9rem;
	}

	.acini-split--sticky + .acini-split--sticky {
		inset-block-start: 11.8rem; /* sticks 28px lower, so the first card peeks out above it */
		margin-block-start: 18rem;
	}

	.acini-split--service.acini-split--sticky {
		min-block-size: 56rem;
	}
}

@media (min-width: 64em) {
	.acini-split--cta {
		flex-direction: row;
		align-items: stretch;
	}

	.acini-split--cta .acini-split__media {
		flex: none;
		inline-size: 50%;
		block-size: auto;
		aspect-ratio: 1 / 1;
	}

	.acini-split--cta.acini-split--media-end .acini-split__media {
		order: 2;
	}

	.acini-split--cta .acini-split__body {
		inline-size: 50%;
		justify-content: center;
		padding: 12rem var(--acini-space-3xl); /* 120 / 96 */
	}
}