/*
 * 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: the photo (231), then 28 inside: the title (Bold 40 on a 37px line), 24, the text (Regular
 * 20 on 23px lines, Figma's rounding of 22.88), 50.5, «مشاهده جزییات» (Bold 18, 27 tall), 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-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 28px 28px 28.5px;
}

/* A 37px line box (36.3 in the design) without crowding a title that wraps: 1.2 between lines, the
   first line's extra trimmed by the margins. */
.nglv2 .nglv2-pcard__title {
	margin-block: -0.1375em;
	font-weight: 700;
	font-size: clamp(26px, 2.78vw, 40px);
	line-height: 1.2;
}

.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;
}

.nglv2 .nglv2-pcard__text {
	font-size: clamp(16px, 1.39vw, 20px);
	line-height: 1.15;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-pcard .nglv2-link-arrow {
	margin-top: 26.5px;
	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;
	}

	.nglv2 .nglv2-pcard__text {
		line-height: 1.3;
	}

	.nglv2 .nglv2-pcard .nglv2-link-arrow {
		margin-top: 6px;
	}
}

/* ----------------------------------------------------------------------------------------------
 * 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;
	}
}