/*
 * Page scale and the sections shared by several pages.
 *
 * --s is one Figma pixel: 1px at 1728 (capped there), smaller down to 1200 (desktop frames); under 1200 it follows
 * the 440 mobile frame, capped at 768px wide (no tablet design: portrait tablets get the phone layout edge to edge,
 * landscape ones a centred 768 column). Art-directed layouts use it; text uses the fluid tokens from theme.json
 * (under 1200 they follow the column — base.css), so text never shrinks below its mobile size. Spacing *between* sections is in each
 * page's CSS (pages/*.css): Figma spaces them differently per page.
 */

.zain-main {
	--s: calc(min(100cqw, 1728px) / 1728);
	container-type: inline-size;
	overflow-x: clip;
}

:where(.zain-main > *, .zain-main .wp-block-post-content > *) {
	box-sizing: border-box;
	position: relative;
	margin-inline: auto;
}

:where(.zain-main) p,
:where(.zain-main) h1,
:where(.zain-main) h2,
:where(.zain-main) h3,
:where(.zain-main) figure {
	margin: 0;
}

/* Content image with Figma's crop: --zw/--zh/--zx/--zy from the fill's image transform (default = cover) */
.zain-crop {
	position: relative;
	overflow: hidden;
}

.zain-crop img {
	position: absolute;
	top: var(--zy, 0);
	left: var(--zx, 0);
	width: var(--zw, 100%);
	max-width: none;
	height: var(--zh, 100%);
	object-fit: cover;
}

.zain-show-mobile {
	display: none;
}

/* ------------------------------------------------------------------ Page intro (title + photo) — About 281:2160, Qualifications 335:494
 * The title sits on the bottom of a fixed band (134→382 desktop, 127→251 mobile), so the photo starts at the same
 * place whether the title has one line or two.
 */

.zain-page-intro {
	display: grid;
	grid-template-rows: minmax(calc(248 * var(--s)), auto) auto;
	width: calc(1628 * var(--s));
}

.zain-page-intro__title {
	align-self: end;
	padding-left: calc(180 * var(--s));
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--hero);
	line-height: var(--wp--custom--line-height--hero);
}

.zain-page-intro__photo {
	height: calc(641 * var(--s));
	margin-top: calc(41 * var(--s));
	border-radius: calc(40 * var(--s));
}

/* ------------------------------------------------------------------ Experience (zain/experience) — Home band 199:1276; Qualifications card 335:594 */

.zain-experience {
	width: calc(1728 * var(--s));
	min-height: calc(922 * var(--s));
	padding: calc(165 * var(--s)) calc(150 * var(--s)) calc(100 * var(--s)) calc(744 * var(--s));
	background: image-set(url(../img/home/experience-art-1x.webp) 1x, url(../img/home/experience-art.webp) 2x) center bottom / 100% auto no-repeat, var(--wp--custom--color--sand);
}

/* The band continues past 1728 on wider screens */
.zain-experience::before {
	content: "";
	position: absolute;
	inset: 0 calc(50% - 50cqw);
	z-index: -1;
	background: var(--wp--custom--color--sand);
}

.zain-experience__title {
	max-width: calc(762 * var(--s));
	color: var(--wp--preset--color--forest);
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--wp--custom--line-height--display);
}

.zain-experience__stats {
	display: grid;
	/* Figma columns are 278 wide; a value wider than that (e.g. "BABCP" near 1200px) widens its column */
	grid-template-columns: repeat(3, minmax(calc(278 * var(--s)), max-content));
	margin-top: calc(99 * var(--s));
	margin-right: calc(-150 * var(--s)); /* room to grow into the empty right margin */
}

.zain-stat__value {
	padding-bottom: 8px;
	overflow-wrap: normal; /* never split a short value like "BABCP" mid-word */
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--stat);
}

.zain-stat--word .zain-stat__value {
	padding-bottom: 0;
	font-size: var(--wp--preset--font-size--stat-word);
	line-height: var(--wp--custom--line-height--stat-word);
}

.zain-stat__text {
	contain: inline-size; /* the column is sized by the value, the text wraps inside it */
	margin-top: 33px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--regular);
	line-height: var(--wp--custom--line-height--regular);
}

.zain-stat--word .zain-stat__text {
	margin-top: 41px; /* Figma: 43 below a 78px text box; the 80px line box is 2px taller */
}

/* Qualifications: the band is a rounded card (335:594) with its own art */
.zain-page-qualifications .zain-experience {
	width: calc(1628 * var(--s));
	padding-right: calc(100 * var(--s));
	padding-left: calc(694 * var(--s));
	overflow: hidden;
	border-radius: calc(30 * var(--s));
	background: image-set(url(../img/quals/experience-art-1x.webp) 1x, url(../img/quals/experience-art.webp) 2x) center bottom / 100% auto no-repeat, var(--wp--custom--color--ivory);
}

.zain-page-qualifications .zain-experience::before {
	display: none;
}

/* ------------------------------------------------------------------ Book a consultation (zain/book-consultation) */

.zain-book {
	display: grid;
	grid-template-columns: calc(628 * var(--s)) calc(628 * var(--s));
	justify-content: space-between;
	align-items: start;
	width: calc(1728 * var(--s));
	height: calc(779 * var(--s));
	padding: 0 calc(230 * var(--s)) 0 calc(236 * var(--s));
}

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

.zain-book__text {
	padding-top: calc(175 * var(--s));
}

.zain-book__title {
	max-width: calc(465 * var(--s));
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--wp--custom--line-height--display);
}

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

.zain-book__label {
	margin-top: 81px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--large);
}

.zain-book__email {
	margin-top: 20px;
}

.zain-book__email .wp-block-button__link {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--heading-3);
	text-decoration: none;
}

.zain-book__email .wp-block-button__link:hover {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
}

.zain-book__calendar {
	margin-top: calc(141 * var(--s));
	/* Home "Book Now" jumps here (#book-consultation): side by side, the whole band shows from its top */
	--zain-scroll-gap: calc(141 * var(--s) + 24px);
	scroll-margin-top: var(--zain-scroll-gap);
}

/* ------------------------------------------------------------------ Why CBT (zain/why-cbt) — Home 199:1275…; Services inside the card 296:417… */

.zain-why {
	width: calc(1268 * var(--s));
}

.zain-why__title {
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--heading-1);
	line-height: var(--wp--custom--line-height--heading-1);
}

.zain-why__lead {
	width: calc(748 * var(--s));
	margin: calc(54 * var(--s)) 0 0 calc(520 * var(--s));
	color: var(--wp--custom--color--muted);
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--lead);
}

.zain-why__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, calc(333 * var(--s)));
	justify-content: space-between;
	align-items: start;
	margin-top: calc(180 * var(--s));
	padding-left: calc(1 * var(--s));
}

/* Hand-drawn arrows (199:1348 + head 199:1350, 386:2216) */
.zain-why__list::before,
.zain-why__list::after {
	content: "";
	position: absolute;
	background: center / contain no-repeat;
	pointer-events: none;
}

.zain-why__list::before {
	top: calc(30 * var(--s));
	left: calc(479 * var(--s));
	width: calc(307 * var(--s));
	aspect-ratio: 307 / 105;
	background-image: url(../svg/why-arrow-1.svg), url(../svg/why-arrow-1-head.svg);
	background-size: contain, calc(16 * var(--s));
	background-position: left top, calc(291 * var(--s)) calc(2 * var(--s));
}

.zain-why__list::after {
	top: calc(439 * var(--s));
	left: calc(-1 * var(--s));
	width: calc(315 * var(--s));
	aspect-ratio: 315 / 61;
	background-image: url(../svg/why-arrow-2.svg);
}

.zain-why__item::before {
	content: "";
	display: block;
	width: 94px;
	height: 94px;
	margin-bottom: 48px;
	background: center / contain no-repeat;
}

.zain-why__item--patterns::before { background-image: url(../svg/why-patterns.svg); }
.zain-why__item--skills::before { background-image: url(../svg/why-skills.svg); }
.zain-why__item--beyond::before { background-image: url(../svg/why-beyond.svg); }

.zain-why__item--skills {
	margin-top: calc(172 * var(--s));
}

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

.zain-why__item-text {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--copy);
	line-height: var(--wp--custom--line-height--copy);
}

/* ------------------------------------------------------------------ Fees (zain/fees) — Home 199:1374; Services in the yellow band 335:398 */

.zain-fees {
	display: grid;
	grid-template-columns: calc(560 * var(--s)) calc(612 * var(--s));
	grid-template-areas:
		"title  title"
		"price  policy"
		"photo  photo";
	column-gap: calc(96 * var(--s));
	width: calc(1268 * var(--s));
}

.zain-fees__title {
	grid-area: title;
	margin-bottom: 56px;
	color: var(--wp--preset--color--forest);
	font-size: var(--wp--preset--font-size--heading-1);
	line-height: var(--wp--custom--line-height--heading-1);
}

.zain-fees__price {
	grid-area: price;
}

.zain-fees__amount {
	margin-bottom: 24px;
	color: var(--wp--preset--color--forest);
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--price);
}

.zain-fees__per,
.zain-fees__concessions {
	margin-bottom: 12px;
	font-size: var(--wp--preset--font-size--detail);
	line-height: var(--wp--custom--line-height--detail);
}

.zain-fees__per {
	color: var(--wp--custom--color--near-black);
}

.zain-fees__concessions {
	color: var(--wp--preset--color--ink);
}

.zain-fees__payment {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--note);
	line-height: var(--wp--custom--line-height--note);
}

.zain-fees__policy {
	grid-area: policy;
	padding-top: 64px;
}

.zain-fees__policy h3 {
	margin-bottom: 12px;
	color: var(--wp--custom--color--heading);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--heading-3);
}

.zain-fees__policy p {
	color: var(--wp--custom--color--body-alt);
	font-size: var(--wp--preset--font-size--detail);
	line-height: var(--wp--custom--line-height--detail);
}

.zain-fees__policy p + h3 {
	margin-top: 56px;
}

.zain-fees__photo {
	grid-area: photo;
	height: calc(675 * var(--s));
	margin-top: 80px;
	border-radius: calc(20 * var(--s));
	/* Media-library photo; Figma fills the box (371:1211) */
}


/* ------------------------------------------------------------------ Question card (.zain-ask) — FAQs 344:651, legal pages 368:1166 */

.zain-ask {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 32px;
	width: calc(1628 * var(--s));
	min-height: calc(648 * var(--s));
	margin-top: calc(50 * var(--s));
	padding: calc(266 * var(--s)) calc(181 * var(--s)) calc(140 * var(--s));
	border-radius: calc(30 * var(--s));
	background: image-set(url(../img/faq/cta-bg-1x.webp) 1x, url(../img/faq/cta-bg.webp) 2x) center / cover no-repeat;
}

.zain-ask__title {
	max-width: calc(730 * var(--s));
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--wp--custom--line-height--display);
}

.zain-ask__cta {
	margin: 0;
}

.zain-button--light .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	padding: 10px 34px;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--forest);
	font-size: var(--wp--preset--font-size--regular);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--regular);
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

/* Hover and focus (FAQs and legal "Get in touch"): honey, white text — the hero Book Now's hover (Habib 2026-10-22) */
.zain-button--light .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--honey);
	color: var(--wp--preset--color--white);
}

/* The light button sits on the green question card: a forest ring would vanish there */
.zain-button--light .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.zain-ask--legal {
	margin-top: calc(50 * var(--s));
	background-image: image-set(url(../img/legal/cta-bg-1x.webp) 1x, url(../img/legal/cta-bg.webp) 2x);
}

/* ------------------------------------------------------------------ Mobile */

@media (max-width: 1199px) {
	.zain-main {
		--s: calc(min(100cqw, 768px) / 440);
	}

	.zain-show-desktop {
		display: none;
	}

	.zain-show-mobile {
		display: block;
	}

	.zain-page-intro {
		grid-template-rows: minmax(calc(124 * var(--s)), auto) auto;
		width: calc(416 * var(--s));
	}

	.zain-page-intro__title {
		max-width: calc(366 * var(--s));
		padding-left: calc(12 * var(--s));
	}

	/* 48px (the frame's size) is wider than "Qualifications" on a 320 phone: below 384 the title follows the screen
	   (40px at 320) so a word is never split */
	@media (max-width: 383px) {
		.zain-page-intro__title {
			font-size: 12.5vw;
			line-height: 14.0625vw;
		}
	}

	.zain-page-intro__photo {
		margin-top: 40px;
		border-radius: calc(20 * var(--s));
	}

	.zain-page-qualifications .zain-experience {
		width: calc(440 * var(--s));
		padding: calc(50 * var(--s)) calc(24 * var(--s)) calc(575 * var(--s));
		border-radius: 0;
		background-color: var(--wp--custom--color--shell);
		background-image: image-set(url(../img/home/experience-art-m-1x.webp) 1x, url(../img/home/experience-art-m.webp) 2x);
	}

	.zain-experience {
		width: calc(440 * var(--s));
		min-height: calc(1412 * var(--s));
		padding: calc(50 * var(--s)) calc(24 * var(--s)) calc(575 * var(--s)); /* stats end 837px into the 1412px frame */
		background-color: var(--wp--custom--color--shell);
		background-image: image-set(url(../img/home/experience-art-m-1x.webp) 1x, url(../img/home/experience-art-m.webp) 2x);
		text-align: center;
	}

	.zain-experience::before {
		background: var(--wp--custom--color--shell);
	}

	.zain-experience__title {
		max-width: none;
	}

	.zain-experience__stats {
		grid-template-columns: 1fr;
		margin-right: 0;
		gap: 48px;
		margin-top: 68px;
		padding: 0 calc(32 * var(--s));
	}

	.zain-stat__value {
		padding-bottom: 10px;
	}

	.zain-stat--word .zain-stat__value {
		padding-bottom: 1px;
	}

	.zain-stat__text,
	.zain-stat--word .zain-stat__text {
		margin-top: 32px;
	}

	.zain-book {
		display: block;
		width: calc(440 * var(--s));
		height: auto;
		margin-bottom: 40px;
		padding: 0 calc(24 * var(--s));
	}

	/* The band ends 235px above the calendar's bottom (frame: 704 of 939). The calendar keeps its px size, so the
	   band is measured from the bottom in px: it always reaches the same calendar row, on any phone width */
	.zain-book::before {
		inset: 0 0 235px;
		border-radius: calc(20 * var(--s));
	}

	.zain-book__text {
		padding-top: calc(71 * var(--s));
	}

	.zain-book__title {
		max-width: calc(360 * var(--s));
	}

	.zain-book__lead {
		max-width: none;
		margin-top: 16px;
	}

	.zain-book__label {
		margin-top: 48px;
	}

	.zain-book__email .wp-block-button__link {
		font-weight: 300;
	}

	.zain-book__calendar {
		margin-top: 40px;
		--zain-scroll-gap: 24px; /* stacked: the calendar itself, under the text */
	}

	.zain-why {
		width: calc(392 * var(--s));
	}

	.zain-why__lead {
		width: calc(389 * var(--s));
		margin: 24px 0 0;
	}

	.zain-why__list {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-top: 50px;
		padding: 0 calc(32 * var(--s));
	}

	.zain-why__list::before,
	.zain-why__list::after {
		display: none;
	}

	.zain-why__item--skills {
		margin-top: 0;
	}

	.zain-why__item-title {
		margin-bottom: 16px;
	}

	.zain-why__item-title br {
		display: none;
	}

	.zain-fees {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"photo"
			"price"
			"policy";
		width: calc(392 * var(--s));
	}

	.zain-fees__title {
		margin-bottom: 50px;
	}

	.zain-fees__photo {
		height: calc(440 * var(--s));
		margin: 0 0 24px;
		border-radius: calc(12 * var(--s));
		/* crop from the fill's Figma transform (386:2602) */
		--zw: 201.13%;
		--zx: -61.87%;
	}

	.zain-fees__per,
	.zain-fees__concessions {
		margin-bottom: 16px;
	}

	.zain-fees__policy {
		padding-top: 50px;
	}

	.zain-fees__policy h3 {
		font-weight: 300;
	}

	.zain-fees__policy p + h3 {
		margin-top: 32px;
	}


	.zain-ask {
		width: calc(392 * var(--s));
		min-height: calc(290 * var(--s));
		margin-top: calc(24 * var(--s));
		padding: calc(62 * var(--s)) calc(24 * var(--s));
		border-radius: calc(15 * var(--s));
		background-image: image-set(url(../img/faq/cta-bg-m-1x.webp) 1x, url(../img/faq/cta-bg-m.webp) 2x);
	}

	.zain-ask__title {
		max-width: calc(335 * var(--s));
	}

	.zain-ask--legal {
		background-image: image-set(url(../img/legal/cta-bg-m-1x.webp) 1x, url(../img/legal/cta-bg-m.webp) 2x);
	}
}