/*
 * Qualifications and Experience (Figma: desktop 335:419 · mobile 386:4509).
 * Intro + experience card: sections.css. Photo crops (--z*) from the image fills' Figma transforms.
 */

/* Mobile photo box (Frame 186 386:4527): the desk photo, as on desktop — Figma's mobile frame shows the Services
   photo by mistake (Habib 2026-10-22). Cover height, framed on the face, hands and notebook */
@media (max-width: 1199px) {
	.zain-page-intro--quals .zain-page-intro__photo {
		--zw: 396.8%;
		--zx: -201.9%;
	}
}

/* ------------------------------------------------------------------ Qualifications list (335:544) */

.zain-quals {
	width: calc(1628 * var(--s));
	margin-top: calc(100 * var(--s));
	padding: calc(159 * var(--s)) calc(178 * var(--s));
	border-radius: calc(30 * var(--s));
	background: var(--wp--custom--color--ivory);
}

.zain-quals__title {
	margin-bottom: calc(100 * var(--s));
	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-qual {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 40px;
	margin-bottom: 39px; /* + the 1px rule = Figma's 40 */
	border-bottom: 1px solid rgb(0 0 0 / 0.2);
}

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

.zain-qual__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zain-qual__school {
	color: rgb(0 0 0 / 0.65);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--large);
}

.zain-qual__degree {
	color: var(--wp--preset--color--black);
	font-size: max(26px, calc(36 * var(--s))); /* scales with the row (Figma 36/42 at 1728), so each degree keeps
	                                              Figma's two lines down to 1200 instead of wrapping to four */
	line-height: 1.16667;
}

/*
 * Logos: Figma's own files in their real colours (vectors → SVG → PNG; King's is Figma's raster). Each sits in its
 * Figma box (--logo-w, --logo-ratio), scaled to fit without distortion. New rows get a 275-wide box. Figma greys them
 * with a "luminosity" blend; a blend needs a backdrop, and once a row has animated in (motion.css) it is its own
 * transparent layer, so the blend did nothing on desktop — grayscale() gives the same grey without one.
 */
.zain-qual__logo {
	flex: none;
	width: calc(var(--logo-w, 275) * var(--s));
}

.zain-qual__logo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--logo-ratio, auto);
	object-fit: contain;
	filter: grayscale(1);
}

.zain-qual--birkbeck { --logo-w: 294; --logo-ratio: 294 / 92; }
.zain-qual--ucl { --logo-ratio: 275 / 146; }
.zain-qual--ucl .zain-qual__logo img { opacity: 0.77; } /* Figma 335:575 */
.zain-qual--kcl { --logo-ratio: 275 / 232; }

/* ------------------------------------------------------------------ A culturally sensitive approach (335:526) */

.zain-approach {
	display: grid;
	grid-template-columns: calc(895 * var(--s)) calc(335 * var(--s));
	grid-template-areas:
		"title title"
		"lead  lead"
		"photo facts";
	column-gap: calc(39 * var(--s));
	align-items: start;
	width: calc(1269 * var(--s));
	margin: calc(160 * var(--s)) auto 0 calc(231 * var(--s)); /* Figma places it at x 231, not centred */
}

.zain-approach__title {
	grid-area: title;
	max-width: calc(518 * var(--s));
	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-approach__lead {
	grid-area: lead;
	width: calc(748 * var(--s));
	margin: calc(19 * var(--s)) 0 0 calc(520 * var(--s));
	color: var(--wp--custom--color--charcoal);
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--lead);
}

.zain-approach__photo {
	grid-area: photo;
	height: calc(484 * var(--s));
	margin-top: calc(100 * var(--s));
	border-radius: calc(25 * var(--s));
}

.zain-approach__facts {
	grid-area: facts;
	display: flex;
	flex-direction: column;
	gap: 10.5px; /* Figma: 12 then 9 */
	min-height: calc(482 * var(--s));
	margin-top: calc(106 * var(--s));
	padding: 12px;
	border-radius: calc(25 * var(--s));
	background: var(--wp--preset--color--pine);
}

.zain-fact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border-radius: 18px;
	background: rgb(255 255 255 / 0.1);
}

.zain-fact:last-child {
	flex-grow: 1;
	padding-top: 27px;
}

/* Hover (no Figma design — Habib 2026-10-22): a subtle zoom, honey behind, text in the panel's dark green. The zoom is
   `transform` and the honey a layer behind the text: the scroll-in animation (motion.css) owns scale and the card's
   transition list */
.zain-fact {
	position: relative;
	isolation: isolate;
	transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}

.zain-fact::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--wp--preset--color--honey);
	opacity: 0;
	transition: opacity 0.15s;
}

.zain-fact :is(.zain-fact__label, .zain-fact__value) {
	transition: color 0.15s;
}

@media (hover: hover) {
	.zain-fact:hover {
		transform: scale(1.03);
	}

	.zain-fact:hover::before {
		opacity: 1;
	}

	.zain-fact:hover :is(.zain-fact__label, .zain-fact__value) {
		color: var(--wp--preset--color--pine);
	}
}

/* Touch screens (no hover): a tapped card keeps the hover look until the next tap elsewhere (Habib 2026-10-22) —
   .is-tapped from motion.js. cursor: pointer makes iOS send the tap to the page at all */
@media (hover: none) {
	.zain-fact {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.zain-fact.is-tapped {
		transform: scale(1.03);
	}

	.zain-fact.is-tapped::before {
		opacity: 1;
	}

	.zain-fact.is-tapped :is(.zain-fact__label, .zain-fact__value) {
		color: var(--wp--preset--color--pine);
	}
}

.zain-fact__label {
	color: rgb(255 255 255 / 0.9);
	font-size: var(--wp--preset--font-size--regular);
	line-height: var(--wp--custom--line-height--regular);
}

.zain-fact__value {
	max-width: 255px; /* Figma text frames: 224–255 */
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--large);
}

.zain-experience {
	margin-top: calc(153 * var(--s));
}

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

	.zain-quals__title {
		margin-bottom: 74px;
	}

	.zain-qual,
	.zain-qual:last-child {
		flex-direction: column;
		gap: 41px;
		margin-bottom: 13px;
		padding: 32px;
		border: 0;
		border-radius: 10px;
		background: var(--wp--preset--color--white);
		text-align: center;
	}

	.zain-qual:last-child {
		margin-bottom: 0;
	}

	.zain-qual__logo {
		order: -1;
		width: calc(var(--logo-w, 157) * var(--s));
	}

	.zain-qual--birkbeck { --logo-w: 173; --logo-ratio: 173 / 54; }
	.zain-qual--ucl { --logo-w: 157; --logo-ratio: 157 / 83; }
	.zain-qual--kcl { --logo-w: 157; --logo-ratio: 157 / 125; }

	.zain-qual__text {
		align-items: center;
		gap: 8px;
	}

	.zain-qual__school {
		order: 1;
		font-size: 12px;
		line-height: 20px;
	}

	/* Figma's lines (386:4806: 268 wide, 18/28): the box is sized in em so it breaks where Figma does at any text
	   size, and below 440 the text shrinks with the frame (14px floor) instead of wrapping to more lines */
	.zain-qual__degree {
		max-width: 14.89em;
		font-family: var(--wp--preset--font-family--open-sans);
		font-size: max(14px, min(var(--wp--preset--font-size--large), calc(18 * var(--s))));
		font-weight: 400;
		line-height: 1.5556;
	}

	.zain-approach {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"lead"
			"photo"
			"facts";
		width: calc(392 * var(--s));
		margin: calc(80 * var(--s)) auto 0;
	}

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

	.zain-approach__lead {
		width: calc(389 * var(--s));
		margin: 24px 0 0;
		color: var(--wp--custom--color--muted);
	}

	.zain-approach__photo {
		height: calc(282 * var(--s));
		margin-top: 50px;
		border-radius: calc(15 * var(--s));
	}

	.zain-approach__facts {
		gap: 11px;
		min-height: 0;
		margin-top: 12px;
		border-radius: calc(15 * var(--s));
	}

	.zain-fact {
		border-radius: 12px;
	}

	.zain-fact:last-child {
		padding-top: 24px;
	}

	.zain-experience {
		margin-top: calc(50 * var(--s));
	}
}