/*
 * Services & Fees (Figma: desktop 292:260 · mobile 386:4062). Intro, Why CBT and Fees: sections.css.
 * Photo crops (--z*) from each image fill's Figma transform.
 */

/* Intro photo — FILL on desktop; mobile 386:4255 crops it */
@media (max-width: 1199px) {
	.zain-page-intro--services .zain-page-intro__photo {
		--zw: 273.79%;
		--zx: -100.68%;
	}
}

/* ------------------------------------------------------------------ Therapy services card (292:290) */

.zain-therapy {
	width: calc(1628 * var(--s));
	margin-top: calc(50 * var(--s));
	padding: calc(120 * var(--s)) calc(177 * var(--s)) calc(160 * var(--s)) calc(181 * var(--s));
	border-radius: calc(30 * var(--s));
	background: var(--wp--custom--color--ivory);
}

.zain-therapy__title {
	color: var(--wp--preset--color--forest);
	font-size: var(--wp--preset--font-size--heading-1);
	line-height: var(--wp--custom--line-height--heading-1);
	text-align: center;
}

.zain-therapy__name {
	max-width: calc(410 * var(--s));
	margin-top: calc(100 * var(--s));
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--heading-2);
	line-height: var(--wp--custom--line-height--heading-2-tight);
}

.zain-therapy__text {
	max-width: calc(1090 * var(--s));
	margin-top: 50px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--lead);
}

.zain-therapy__photo {
	height: calc(519 * var(--s));
	margin-top: calc(100 * var(--s));
	border-radius: calc(25 * var(--s));
}

/* Why CBT inside the card: black title, the card's width */
.zain-therapy .zain-why {
	width: auto;
	margin-top: calc(120 * var(--s));
}

.zain-therapy .zain-why__title {
	color: var(--wp--preset--color--black);
}

/* ------------------------------------------------------------------ Treatment focus (296:449 …) */

.zain-focus {
	display: grid;
	grid-template-columns: calc(619 * var(--s)) calc(619 * var(--s));
	grid-template-areas:
		"title   title"
		"photo1  anxiety"
		"mood    photo2";
	gap: calc(32 * var(--s));
	width: calc(1270 * var(--s));
	margin-top: calc(160 * var(--s));
}

.zain-focus__title {
	grid-area: title;
	margin-bottom: calc(48 * var(--s)); /* + the 32 grid gap = Figma's 80 */
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--heading-1);
	line-height: var(--wp--custom--line-height--heading-1);
	text-align: center;
}

.zain-focus__photo {
	min-height: calc(713 * var(--s));
	border: 1px solid rgb(0 0 0 / 0.1);
	border-radius: calc(25 * var(--s));
}

.zain-focus__photo--anxiety {
	grid-area: photo1;
	--zw: 153.12%; /* Figma mirrors this fill; the seeded file is stored mirrored, crop from the left */
}

.zain-focus__photo--mood {
	grid-area: photo2;
	--zw: 237.25%;
	--zh: 112.35%;
	--zx: -84.58%;
}

.zain-focus__card {
	min-height: calc(713 * var(--s));
	padding: 59px; /* + 1px border = Figma's 60 */
	border: 1px solid rgb(0 0 0 / 0.1);
	border-radius: calc(25 * var(--s));
	background: var(--wp--preset--color--white);
}

.zain-focus__card--anxiety {
	grid-area: anxiety;
}

.zain-focus__card--mood {
	grid-area: mood;
}

.zain-focus__name {
	margin-bottom: 40px;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--heading-2);
	line-height: var(--wp--custom--line-height--heading-2-tight);
}

.zain-focus__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zain-focus__list li {
	margin-bottom: 15px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgb(0 0 0 / 0.1);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--large);
}

.zain-focus__list li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* ------------------------------------------------------------------ Fees in the yellow band (335:397) */

.zain-fees-band {
	width: calc(1728 * var(--s));
	margin-top: calc(180 * var(--s));
	padding-top: calc(160 * var(--s));
}

.zain-fees-band .zain-fees {
	margin-inline: auto;
}

.zain-fees-band::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	height: calc(1148 * var(--s));
	border-radius: calc(30 * var(--s));
	background: var(--wp--custom--color--butter);
}

@media (max-width: 1199px) {
	.zain-therapy {
		width: calc(440 * var(--s));
		padding: calc(50 * var(--s)) calc(24 * var(--s));
		border-radius: 0;
		background: var(--wp--custom--color--shell);
	}

	.zain-therapy__name {
		max-width: calc(345 * var(--s));
		margin-top: 60px;
	}

	.zain-therapy__text {
		margin-top: 24px;
	}

	.zain-therapy__photo {
		height: calc(339 * var(--s));
		margin-top: 50px;
		border-radius: calc(10 * var(--s));
	}

	.zain-therapy .zain-why {
		margin-top: 60px;
	}

	.zain-therapy .zain-why__title {
		color: var(--wp--preset--color--black);
	}

	.zain-focus {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"photo1"
			"anxiety"
			"photo2"
			"mood";
		gap: 12px;
		width: calc(392 * var(--s));
		margin-top: calc(80 * var(--s));
	}

	.zain-focus__title {
		margin-bottom: 28px;
	}

	.zain-focus__photo {
		min-height: calc(421 * var(--s));
		border-radius: calc(10 * var(--s));
	}

	/* Mobile crop of the mood photo — 386:4400 */
	.zain-focus__photo--mood {
		--zw: 242.72%;
		--zh: 123.27%;
		--zx: -98.47%;
		--zy: -13.95%;
		margin-top: 10px;
	}

	.zain-focus__card {
		min-height: 0;
		padding: 39px 31px;
		border-radius: calc(10 * var(--s));
	}

	.zain-focus__name {
		margin-bottom: 24px;
	}

	.zain-focus__list li {
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	.zain-fees-band {
		width: calc(440 * var(--s));
		margin-top: calc(80 * var(--s));
		padding-top: calc(50 * var(--s));
	}

	/* The band ends 174px above the photo's bottom (frame: 1065 of 1239), measured from the bottom so it grows
	   with the text on phones narrower than 440 instead of ending above it */
	.zain-fees-band::before {
		inset: 0 0 calc(174 * var(--s));
		height: auto;
		border-radius: calc(20 * var(--s));
	}

	/* Services order on mobile: title, price, policy, then the photo */
	.zain-fees-band .zain-fees {
		grid-template-areas:
			"title"
			"price"
			"policy"
			"photo";
	}

	.zain-fees-band .zain-fees__title {
		margin-bottom: 24px;
	}

	.zain-fees-band .zain-fees__photo {
		margin: 50px 0 0;
	}
}