/*
 * NGL v2 — projects (Figma "Projects" 306:12569 and "Projects Detail" 309:14215; design/projects): the
 * project card and its grid (one component in Figma: the homepage's projects section prints this sheet
 * too), the list page and a project's page. The breadcrumbs, photo banner, eyebrows, chips, page links
 * and quote bar are the shared ones (inner.css, base.css).
 *
 * Desktop values are the 1440px frame's and scale down with clamp(). Logical properties throughout, so
 * RTL (fa, ar) and LTR (en) share every rule.
 */

/* ----------------------------------------------------------------------------------------------
 * Project cards (homepage 149:8501, list 309:14027, related 313:8422): 32 apart, three a row; 495 tall
 * at 1440 with a one-line title (578 in a row with a three-line one, 2026-10-12): the photo (231), then
 * 28 inside: the title (Bold 32 on 40px lines, 37 for one line), 24, the text (Regular 20 on 23px lines,
 * Figma's rounding of 22.88), 50.5 at least, «مشاهده جزییات» (Bold 18, 27 tall) at the foot, 28.5.
 * ------------------------------------------------------------------------------------------- */

.nglv2-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.nglv2-pcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.nglv2 .nglv2-pcard__media {
	display: block;
	height: 231px;
	overflow: hidden;
	background: #eef1f6;
}

.nglv2 .nglv2-pcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--nglv2-ease);
}

.nglv2 .nglv2-pcard:hover .nglv2-pcard__img {
	transform: scale(1.06);
}

/* The design's empty-image fill (Figma "Rectangle 158" without a photo): its 256px checkerboard (16px
   squares), covering the frame as Figma draws it. */
.nglv2-pcard__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: #fafafa url("../img/placeholder-project.png") 50% 50% / cover;
}

.nglv2-pcard__body {
	display: flex;
	flex: 1 1 auto; /* as tall as the row's tallest card */
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 28px 28px 28.5px;
}

/* Bold 32 since the designer's revision of 2026-10-12 (owner: "the project title is very large"; it was
   Bold 40): 40px lines when it wraps (309:14056, three lines in 120), a 37px box on one line (36.3 in the
   design), so the margins trim 1.5px off each end. The row's other cards stretch to the tallest one, and
   their links stay at the foot. */
.nglv2 .nglv2-pcard__title {
	margin-block: -0.046875em;
	font-weight: 700;
	font-size: clamp(22px, 2.2222vw, 32px);
	line-height: 1.25;
}

.nglv2 .nglv2-pcard__title a {
	color: var(--nglv2-ink);
	transition: color 0.25s;
}

.nglv2 .nglv2-pcard__title a:hover {
	color: var(--nglv2-green-dark);
}

/* Betheme's `a:focus { outline: 0 }` leaves links without a rule of their own unmarked for the keyboard. */
.nglv2 .nglv2-pcard__title a:focus-visible,
.nglv2 .nglv2-pcaps__value a:focus-visible,
.nglv2 .nglv2-plist__all:focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 3px;
}

/* «مشاهده جزییات» keeps its place whatever the text above it: the text keeps the design's three lines
   of room even when a project has no short text (or a one-line one), and the link sits at the card's
   foot, so the links of a row line up when the titles or texts differ in length. The text's 26.5 and
   the body's gap of 24 are the drawn 50.5 above the link. */
.nglv2 .nglv2-pcard__text {
	min-height: 3.45em; /* three lines */
	margin-bottom: 26.5px;
	font-size: clamp(16px, 1.39vw, 20px);
	line-height: 1.15;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-pcard .nglv2-link-arrow {
	margin-top: auto;
	line-height: 1.5;
}

@media (max-width: 1023px) {
	.nglv2-projects__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.nglv2-projects__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.nglv2-pcard__body {
		padding: 20px 4px 0;
		gap: 14px;
	}

	/* One card a row, so nothing to line up with: no room is kept for a missing text. */
	.nglv2 .nglv2-pcard__text {
		min-height: 0;
		margin-bottom: 6px;
		line-height: 1.3;
	}

	.nglv2 .nglv2-pcard__text:empty {
		display: none;
	}

	/* The title's line box is trimmed, so the link needs this to sit as far from it as from a text. */
	.nglv2 .nglv2-pcard__text:empty + .nglv2-link-arrow {
		margin-top: 10px;
	}
}

/* ----------------------------------------------------------------------------------------------
 * The list page (306:12569): breadcrumbs, the photo banner (inner.css; this page's modifier below),
 * then 32 under it the list: its head, the chips, the cards (rows 64 apart) and the page links, 64
 * apart.
 * ------------------------------------------------------------------------------------------- */

/* Banner (306:13376): the title's lines are 108.1 apart (the about banner's 120) in the same 243px box,
   and the one button is 16 round with 16px text; its row keeps 36 under it, so the text sits 18px
   higher than on the about page. */
.nglv2 .nglv2-ibanner--projects .nglv2-ibanner__title {
	margin-bottom: 0.285em;
	line-height: 1.15;
}

/* The button stands at the end of a 476px row (the about banner's outline button's place). */
.nglv2-ibanner--projects .nglv2-ibanner__actions {
	justify-content: flex-end;
	width: min(476px, 100%);
	padding-bottom: 36px;
}

.nglv2 .nglv2-ibanner--projects .nglv2-ibanner__btn {
	border-radius: 16px;
	font-size: 16px;
	line-height: normal;
}

/* The banner's button, the chips and the page links land here, clear of the fixed header. */
.nglv2-plist {
	margin-top: 32px;
	scroll-margin-top: calc(var(--nglv2-header-h) + 24px);
}

.nglv2-plist__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 4.4445vw, 64px);
}

/* Head (309:13963): the eyebrow, 32, the title (ExtraBold 40 on an 85px line), 24, the lead in the
   quote bar (Regular 24/29.6, #7f7f7f). */
.nglv2-plist__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.nglv2 .nglv2-plist__title {
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-plist__lead {
	align-self: stretch;
	margin-top: -8px;
	font-size: clamp(17px, calc(8px + 1.111vw), 24px);
	line-height: 1.2333;
	color: var(--nglv2-grey);
}

@media (min-width: 1024px) {
	.nglv2 .nglv2-plist__title {
		line-height: 2.125; /* 85px at 40px, as drawn */
	}
}

.nglv2-projects__grid--list {
	row-gap: clamp(40px, 4.4445vw, 64px);
}

.nglv2-plist .nglv2-pager {
	margin-top: 0; /* the column's gap */
}

/* Not drawn: no project (in the picked category). The careers list's empty card. */
.nglv2-plist__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px 24px;
	border-radius: 24px;
	background: #fff;
	text-align: center;
}

.nglv2 .nglv2-plist__empty p {
	font-weight: 500;
	font-size: 18px;
	line-height: 1.8;
	color: #52636c;
}

.nglv2 .nglv2-plist__all {
	font-weight: 700;
	font-size: 16px;
	color: #1ca24e;
}

.nglv2 .nglv2-plist__all:hover {
	text-decoration: underline;
}

/* ----------------------------------------------------------------------------------------------
 * A project's page (309:14600): breadcrumbs, 32, the hero; then 80 between the sections.
 * ------------------------------------------------------------------------------------------- */

.nglv2-ipage--project {
	--nglv2-pgap: clamp(48px, 5.5556vw, 80px);
	--nglv2-pline: rgba(0, 0, 0, 0.15);
}

.nglv2-project {
	display: flex;
	flex-direction: column;
	gap: var(--nglv2-pgap);
}

.nglv2-project > .nglv2-trail {
	margin-bottom: calc(32px - var(--nglv2-pgap));
}

/* Hero (309:14621): the text (706) at the start, the photo (494 × 268) at the end, as tall as the text. */
.nglv2-phero {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}

.nglv2-phero__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	min-width: 0;
}

.nglv2 .nglv2-phero__title {
	max-width: 642px;
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

/* The post's content: Regular 16/40, #7f7f7f, lines 599 wide as drawn. */
.nglv2 .nglv2-phero__lead {
	align-self: stretch;
	font-size: 16px;
	line-height: 2.5;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-phero__lead > * {
	max-width: 601px; /* 599 drawn; Chrome sets a line up to 2px wider than Figma */
}

.nglv2 .nglv2-phero__lead > * + * {
	margin-top: 0;
}

.nglv2-phero__media {
	position: relative;
	flex: 0 0 494px;
	min-height: 268px;
	overflow: hidden;
	background: #eef1f6;
}

.nglv2 .nglv2-phero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The design's overlay: 363 tall over the 268px photo (clipped), darker towards the bottom, a green tint
   from the outer edge. */
.nglv2-phero__media::after {
	content: "";
	position: absolute;
	inset: -0.4px 0 auto;
	height: 135.45%;
	background:
		linear-gradient(0deg, rgba(5, 26, 33, 0.82) 0%, rgba(5, 26, 33, 0) 55%),
		linear-gradient(90deg, rgba(20, 128, 93, 0.2) 0%, rgba(20, 128, 93, 0) 100%);
	pointer-events: none;
}

html:not([dir="rtl"]) .nglv2-phero__media::after {
	background:
		linear-gradient(0deg, rgba(5, 26, 33, 0.82) 0%, rgba(5, 26, 33, 0) 55%),
		linear-gradient(270deg, rgba(20, 128, 93, 0.2) 0%, rgba(20, 128, 93, 0) 100%);
}

/* Section heads (309:14906 …): the eyebrow, 32, the title (ExtraBold 40/64 in 642; its typed line break
   from 768px up), 32, the lead in the quote bar, one paragraph a line (Regular 16/40, #7f7f7f). */
.nglv2-psec {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nglv2-psec__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.nglv2 .nglv2-psec__title {
	max-width: 642px;
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

@media (min-width: 768px) {
	.nglv2-psec__line {
		display: block;
	}
}

.nglv2 .nglv2-psec__lead {
	align-self: stretch;
	font-size: 16px;
	line-height: 2.5;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-psec__lead p {
	max-width: 1013px; /* the design's longest line, 1011 */
}

/* Gallery (313:8368): the first photo large at the start (747 × 640), the next two beside it (439 × 313,
   14 apart); 8 round. One photo takes the full width; two stand side by side. More than three: the rest
   three a row under them, as tall as the small ones. */
.nglv2-pgallery__grid {
	display: grid;
	grid-template-columns: 747fr 439fr;
	grid-auto-rows: 313px;
	gap: 14px;
}

.nglv2-pgallery__grid--3 > :first-child {
	grid-row: span 2;
}

.nglv2-pgallery__grid--1 {
	grid-template-columns: 1fr;
	grid-auto-rows: 640px;
}

.nglv2-pgallery__grid--2 {
	grid-auto-rows: 640px;
}

.nglv2-pgallery__grid--more {
	grid-template-columns: repeat(3, 1fr);
	margin-top: -18px; /* 14 under the first three: the section's gap is 32 */
}

.nglv2-pgallery__item {
	position: relative;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	background: #eef1f6;
}

.nglv2 .nglv2-pgallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Caption: rgba(6,26,24,.72), 4 round, Regular 9/13.5 white, 11.5 above the bottom. 12 from the start
   edge: the design places each one partly past the photo's edge, where the clip cuts it. */
.nglv2 .nglv2-pgallery__caption {
	position: absolute;
	inset-block-end: 11.5px;
	inset-inline-start: 12px;
	max-width: calc(100% - 24px);
	padding: 7px 10px;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(6, 26, 24, 0.72);
	font-size: 9px;
	line-height: 13.5px;
	color: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Capabilities (313:8320): 0.8px lines above and below (full width) and between the rows (88 inside);
   from the start of a row: the label (Regular 11/16.5 #6dbe45), 80, the value (Regular 13/19.5). */
.nglv2-pcaps__list {
	margin: 0;
	padding-inline: 88px;
	border-block: 0.8px solid var(--nglv2-pline);
}

.nglv2-pcaps__row {
	display: flex;
	align-items: flex-start;
	gap: 80px;
	padding-block: 20px;
}

.nglv2-pcaps__row + .nglv2-pcaps__row {
	border-top: 0.8px solid var(--nglv2-pline);
}

.nglv2 .nglv2-pcaps__term {
	flex: 0 0 auto;
	margin: 0;
	font-weight: 400;
	font-size: 11px;
	line-height: 16.5px;
	color: var(--nglv2-accent);
}

.nglv2 .nglv2-pcaps__value {
	min-width: 0;
	margin: 0;
	font-size: 13px;
	line-height: 19.5px;
	color: #000;
}

.nglv2 .nglv2-pcaps__value a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--nglv2-accent-30);
	text-underline-offset: 4px;
	transition: color 0.25s, text-decoration-color 0.25s;
}

.nglv2 .nglv2-pcaps__value a:hover {
	color: var(--nglv2-accent-dark);
	text-decoration-color: currentColor;
}

/* Related projects (313:8382): the eyebrow, 32, the title (ExtraBold 40/64) with «مشاهده همه» at the
   end, 64, three cards. */
.nglv2-prelated__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px; /* + the section's 32 */
}

.nglv2 .nglv2-prelated__title {
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

/* ----------------------------------------------------------------------------------------------
 * Narrower screens (not drawn)
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.nglv2-phero__media {
		flex-basis: 40%;
	}

	.nglv2-phero {
		gap: 32px;
	}

	.nglv2-pcaps__list {
		padding-inline: clamp(0px, 6.1vw, 88px);
	}
}

@media (max-width: 1023px) {
	/* Photo above the text. */
	.nglv2-phero {
		flex-direction: column-reverse;
	}

	.nglv2-phero__media {
		flex-basis: auto;
		min-height: 0;
		aspect-ratio: 494 / 268;
	}

	/* The large photo across, the others two a row. */
	.nglv2-pgallery__grid,
	.nglv2-pgallery__grid--more {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: auto;
	}

	.nglv2-pgallery__item {
		aspect-ratio: 439 / 313;
	}

	.nglv2-pgallery__grid--1 > :first-child,
	.nglv2-pgallery__grid--3 > :first-child {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 747 / 640;
	}

	.nglv2-pcaps__row {
		gap: 40px;
	}
}

@media (max-width: 767px) {
	.nglv2-pgallery__grid,
	.nglv2-pgallery__grid--more {
		grid-template-columns: 1fr;
	}

	.nglv2-pgallery__grid--1 > :first-child,
	.nglv2-pgallery__grid--3 > :first-child {
		grid-column: auto;
		aspect-ratio: 439 / 313;
	}

	.nglv2-pcaps__row {
		flex-direction: column;
		gap: 6px;
	}

	.nglv2-prelated__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.nglv2 .nglv2-psec__lead,
	.nglv2 .nglv2-phero__lead {
		line-height: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nglv2 .nglv2-pcard__img {
		transition: none;
	}

	.nglv2 .nglv2-pcard:hover .nglv2-pcard__img {
		transform: none;
	}
}