/*
 * NGL v2 — the Labs page's laboratories (Figma "Lab" 149:10777, design/labs).
 *
 * Featured rows hold two cards: "tall" (626, photo column at the inline-start edge) and "wide" (542,
 * photo on top), alternating row by row; the rest are "normal" cards (378) three per row. At 1200px
 * and wider the cards keep the design's heights (784 / 727) as a minimum; below that they are as tall
 * as their content, and under 1024px every card has its photo on top.
 *
 * Text never has a fixed width or height: titles, services and links wrap, so longer translations
 * make a card taller instead of overflowing it. Only the photo boxes have fixed proportions.
 */

.nglv2-labs {
	margin-top: var(--nglv2-igap);
}

.nglv2-labs__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nglv2-labs__pair {
	display: grid;
	grid-template-columns: minmax(0, 626fr) minmax(0, 542fr);
	gap: 32px;
}

.nglv2-labs__pair--wide-first {
	grid-template-columns: minmax(0, 542fr) minmax(0, 626fr);
}

.nglv2-labs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 33px; /* 3 × 378 + 2 × 33 = 1200 */
}

/* No lab in this language yet (as on the other inner pages, pages.css). */
.nglv2 .nglv2-labs .nglv2-empty {
	padding: 40px 24px;
	border: 1px dashed #cbd5e1;
	border-radius: 20px;
	text-align: center;
	font-size: 17px;
	line-height: 1.8;
	color: var(--nglv2-grey);
}

/* ----------------------------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------------------------- */

.nglv2-lab {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(24, 45, 37, 0.04);
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow 0.45s var(--nglv2-ease);
}

.nglv2-lab--tall {
	flex-direction: row;
}

@media (min-width: 1200px) {
	.nglv2-lab--wide,
	.nglv2-lab--tall {
		min-height: 784px;
	}

	.nglv2-lab--normal {
		min-height: 727px;
	}
}

/* Photo. The featured cards show a hairline of white around it (a 1px inset in the design). */
.nglv2-lab__media {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--nglv2-navy);
}

.nglv2-lab__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(9, 23, 18, 0.02) 0%, rgba(9, 23, 18, 0.48) 100%),
		linear-gradient(90deg, rgba(13, 28, 23, 0.12) 0%, rgba(13, 28, 23, 0) 100%);
	pointer-events: none;
}

/* The side shade sits at the inline-end edge: left in RTL (as drawn), right in LTR. */
html:not([dir="rtl"]) .nglv2-lab__media::after {
	background:
		linear-gradient(180deg, rgba(9, 23, 18, 0.02) 0%, rgba(9, 23, 18, 0.48) 100%),
		linear-gradient(270deg, rgba(13, 28, 23, 0.12) 0%, rgba(13, 28, 23, 0) 100%);
}

.nglv2 .nglv2-lab__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.01);
	transition: transform 0.9s var(--nglv2-ease);
}

/* The text starts where the photo box ends in the design (344), the photo itself 1px lower. */
.nglv2-lab--wide .nglv2-lab__media {
	aspect-ratio: 540 / 344;
	margin: 1px 1px -1px;
}

.nglv2-lab--tall .nglv2-lab__media {
	flex-basis: 39.936%; /* 250 of 626 */
	margin-block: 1px;
	margin-inline-start: 1px;
}

.nglv2-lab--normal .nglv2-lab__media {
	aspect-ratio: 378 / 232;
}

/* Text column: the link sits at the bottom whatever the card's height. */
.nglv2-lab__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-width: 0;
	padding: 24px 28px;
}

/* The design's text column sits 1px down (32 + 1 above, 27 + 1 below). */
.nglv2-lab--tall .nglv2-lab__body {
	padding: 33px 34px 28px;
}

.nglv2-lab__main {
	display: flex;
	flex-direction: column;
}

/* Icon at the start, service count at the end, over a faint green rule. */
.nglv2-lab__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-bottom: 1px solid rgba(109, 190, 69, 0.16); /* the design's 0.8px at 20% */
}

.nglv2-lab__icon {
	display: grid;
	flex: 0 0 46px;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	color: var(--nglv2-ink);
	transition: color 0.3s;
}

.nglv2 .nglv2-lab__icon .nglv2-icon,
.nglv2 .nglv2-lab__icon img {
	width: 31px;
	height: 31px;
	object-fit: contain;
}

.nglv2 .nglv2-lab__badge {
	padding: 6px 10px;
	border-radius: 99px;
	background: rgba(109, 190, 69, 0.25);
	color: var(--nglv2-ink);
	font-weight: 600;
	font-size: 10px;
	line-height: 13.5px;
	white-space: nowrap;
}

.nglv2 .nglv2-lab__title {
	padding-top: 23px;
	font-weight: 700;
	font-size: 20px;
	line-height: 31.606px;
	letter-spacing: -0.7137px;
	color: var(--nglv2-ink);
	transition: color 0.3s;
}

.nglv2 .nglv2-lab__text {
	padding-top: 11px;
	font-size: 14px;
	line-height: 22.8px;
	color: var(--nglv2-grey);
}

/*
 * The design's line lengths, which give its line breaks.
 *
 * Titles: Figma tightens them with letter-spacing (-0.7137px) and applies it inside Persian words too,
 * which makes them about 8% narrower than a browser draws them: browsers do not space joined
 * Arabic-script letters (Latin text still gets it). The titles get that room back so they break
 * where the design breaks them: 276px lines in the normal cards instead of the design's 254
 * (254 × 1.0855), and on RTL pages at the designed widths, 24px of the featured cards' padding.
 */
.nglv2 .nglv2-lab--tall .nglv2-lab__text {
	max-width: 272px;
}

.nglv2 .nglv2-lab--normal .nglv2-lab__title {
	max-width: 276px;
}

.nglv2 .nglv2-lab--normal .nglv2-lab__text {
	max-width: 279px;
}

@media (min-width: 1024px) {
	html[dir="rtl"] .nglv2 .nglv2-lab__title {
		margin-inline-end: -24px;
	}
}

.nglv2-lab__services {
	padding-top: 21px;
}

.nglv2 .nglv2-lab__label {
	padding-top: 6.85px;
	padding-bottom: 3.9px;
	font-weight: 700;
	font-size: 10px;
	line-height: 13.5px;
	color: #909c96;
}

.nglv2 .nglv2-lab__list {
	padding-top: 9px;
}

.nglv2 .nglv2-lab__list > li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	padding-block: 4px;
	border-bottom: 1px solid #e7eae7; /* the design's 0.8px #e1e5e1 */
	font-weight: 500;
	font-size: 12px;
	line-height: 18.15px;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-lab__list > li::before {
	content: "";
	flex: 0 0 5px;
	height: 5px;
	border-radius: 2.5px;
	background: var(--nglv2-green);
}

.nglv2 .nglv2-lab__more {
	padding-top: 9px;
	padding-inline-start: 15px; /* under the service names: dot 5 + gap 10 */
	font-weight: 500;
	font-size: 10px;
	line-height: 13.5px;
	color: #84918b;
}

/* The link: text at the start, the round arrow at the end; its ::after makes the whole card clickable. */
.nglv2 .nglv2-lab__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 52px;
	color: var(--nglv2-ink);
	font-weight: 700;
	font-size: 12px;
	line-height: 16.5px;
}

.nglv2 .nglv2-lab--tall .nglv2-lab__link {
	min-height: 56px;
}

.nglv2 .nglv2-lab__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.nglv2 .nglv2-lab__link:focus-visible {
	outline: none;
}

.nglv2-lab:has(.nglv2-lab__link:focus-visible) {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 3px;
}

.nglv2-lab__go {
	display: grid;
	flex: 0 0 36px;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 18px;
	background: var(--nglv2-navy);
	color: #f2f7f9;
	transition: background-color 0.3s, color 0.3s;
}

.nglv2 .nglv2-lab__go .nglv2-icon {
	width: 24px;
	height: 24px;
	transition: transform 0.35s var(--nglv2-ease);
}

/* Hover (not drawn): deeper shadow, the photo moves closer, the arrow turns green and steps forward. */
@media (hover: hover) {
	.nglv2-lab:hover {
		box-shadow: 0 24px 60px rgba(24, 45, 37, 0.1);
	}

	.nglv2-lab:hover .nglv2-lab__img {
		transform: scale(1.06);
	}

	.nglv2-lab:hover .nglv2-lab__title {
		color: var(--nglv2-green-dark);
	}

	.nglv2-lab:hover .nglv2-lab__go {
		background: var(--nglv2-green);
		color: var(--nglv2-navy);
	}

	.nglv2-lab:hover .nglv2-lab__go .nglv2-icon {
		transform: translateX(-4px);
	}

	html:not([dir="rtl"]) .nglv2-lab:hover .nglv2-lab__go .nglv2-icon {
		transform: scaleX(-1) translateX(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nglv2 .nglv2-lab__img,
	.nglv2 .nglv2-lab__go .nglv2-icon {
		transition: none;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Narrower screens (not designed): two columns with the photo on top, then one column.
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.nglv2-labs__inner {
		gap: 24px;
	}

	.nglv2-labs__pair,
	.nglv2-labs__pair--wide-first,
	.nglv2-labs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.nglv2-lab--tall {
		flex-direction: column;
	}

	.nglv2-lab--tall .nglv2-lab__media,
	.nglv2-lab--normal .nglv2-lab__media {
		flex-basis: auto;
		aspect-ratio: 540 / 344;
		margin: 1px 1px 0;
	}

	.nglv2-lab--tall .nglv2-lab__body {
		padding: 24px 28px;
	}

	.nglv2 .nglv2-lab--tall .nglv2-lab__text,
	.nglv2 .nglv2-lab--normal .nglv2-lab__title,
	.nglv2 .nglv2-lab--normal .nglv2-lab__text {
		max-width: none;
	}
}

@media (max-width: 639px) {
	.nglv2-labs__pair,
	.nglv2-labs__pair--wide-first,
	.nglv2-labs__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.nglv2-lab__body,
	.nglv2-lab--tall .nglv2-lab__body {
		padding: 20px;
	}
}