/*
 * NGL v2 — news and articles (design/news; Figma "News & Article"): the news hub and a category's page
 * (257:7646), the news cards (the hub's featured posts, an article's related posts) and the news rows
 * the hub shares with the homepage's news section (moved here from home.css on 2026-10-03, unchanged).
 * The article itself is in article.css.
 *
 * Desktop values are the 1440px frame's; logical properties throughout, so RTL (fa, ar) and LTR (en)
 * share every rule.
 */

/* ==============================================================================================
 * News rows (homepage 149:8560, revised 2026-10-02; the hub's list 286:11605)
 * ============================================================================================ */

.nglv2-news-item {
	display: flex;
	flex-direction: column;
	gap: 24px; /* row → rule; 10 until the revision of 2026-10-02 */
}

.nglv2-news-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.nglv2-news-item__text {
	display: flex;
	flex: 0 1 806px;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* Meta row (Figma 286:10677): reading time · date at the start, the topic pill at the end; 742 of the
 * column's 806. It wraps on narrow screens. */
.nglv2-news-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	max-width: 742px;
}

.nglv2-news-item__info {
	display: flex;
	align-items: center;
	gap: 13px;
	font-weight: 500;
	font-size: 16px;
	line-height: 15px;
	color: #168b52;
}

.nglv2-news-item__dot {
	flex-shrink: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #dbe0df;
}

.nglv2 .nglv2-news-item__topic {
	padding: 4px 12px;
	border: 1px solid #727985; /* tertiary-shade300 */
	border-radius: 32px;
	background: #f3f3f3;       /* quaternary-shade100 */
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: var(--nglv2-navy-2);
	white-space: nowrap;
}

.nglv2 .nglv2-news-item__title {
	font-weight: 800;
	font-size: clamp(22px, 2.22vw, 32px);
	line-height: 2;
}

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

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

/* Betheme's `a:focus { outline: 0 }` would leave the keyboard without a mark. */
.nglv2 .nglv2-news-item__title a:focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 3px;
}

.nglv2 .nglv2-news-item__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	max-width: 736px;
	margin-bottom: 30px;
	font-weight: 500;
	font-size: clamp(16px, 1.39vw, 20px);
	line-height: 1.48;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-news-item__quote {
	top: auto; /* Betheme moves every blockquote 15px down (position: relative) */
	display: flex;
	align-items: flex-start;
	border: 0;
	background: none;
}

.nglv2-news-item__mark {
	flex-shrink: 0;
	height: 64px;
	font-family: "NGL Quote", Georgia, serif;
	font-weight: 700;
	font-size: 128px;
	line-height: 64px;
	color: var(--nglv2-accent);
}

.nglv2 .nglv2-news-item__quote p {
	max-width: 667px;
	font-weight: 300;
	font-size: clamp(16px, 1.39vw, 20px);
	line-height: 1.48;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-news-item__more {
	align-self: flex-end;
	padding-inline: 64px;
	font-size: 16px; /* 20 until the revision of 2026-10-02; the arrow stays 32 */
}

.nglv2 .nglv2-news-item__media {
	position: relative;
	display: block;
	flex: 0 0 394px;
	height: 403px;
}

.nglv2-news-item__block {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 266px;
	background: var(--nglv2-navy);
	transition: transform 0.9s var(--nglv2-ease);
}

.nglv2 .nglv2-news-item__img {
	position: absolute;
	top: 37.5px;
	inset-inline-end: 66px;
	width: 328px;
	height: 328px;
	object-fit: cover;
	transition: transform 0.9s var(--nglv2-ease);
}

.nglv2 .nglv2-news-item:hover .nglv2-news-item__img {
	transform: translate3d(calc(var(--nglv2-dir) * 8px), -8px, 0);
}

.nglv2 .nglv2-news-item:hover .nglv2-news-item__block {
	transform: translate3d(calc(var(--nglv2-dir) * -6px), 6px, 0);
}

.nglv2-news-item__rule {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nglv2-news-item__rule span:first-child {
	flex: 1;
	height: 1px;
	background: rgba(0, 0, 0, 0.25);
}

.nglv2-news-item__rule span:last-child {
	flex: 0 0 226px;
	height: 1px;
	background: var(--nglv2-accent);
}

@media (max-width: 1199px) {
	.nglv2-news-item__media {
		flex-basis: 330px;
	}
}

@media (max-width: 1023px) {
	.nglv2-news-item__row {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	/* Stacked, the text's 806px flex-basis would become its height (it left ~470px of space under each
	 * item until 2026-10-03). */
	.nglv2-news-item__text {
		flex-basis: auto;
	}

	/* Its children are absolutely positioned, so the box needs an explicit width once the row stacks. */
	.nglv2 .nglv2-news-item__media {
		align-self: flex-end;
		flex: 0 0 auto;
		width: min(394px, 100%);
	}
}

@media (max-width: 767px) {
	.nglv2 .nglv2-news-item__media {
		flex-basis: auto;
		width: min(394px, 100%);
		height: auto;
		aspect-ratio: 394 / 403;
	}

	.nglv2-news-item__block {
		width: 67.5%;
	}

	.nglv2 .nglv2-news-item__img {
		top: 9.3%;
		inset-inline-end: 16.75%;
		width: 83.25%;
		height: auto;
		aspect-ratio: 1;
	}

	.nglv2 .nglv2-news-item__title {
		line-height: 1.6;
	}

	.nglv2 .nglv2-news-item__excerpt {
		margin-bottom: 16px;
	}

	.nglv2-news-item__mark {
		font-size: 88px;
		line-height: 48px;
		height: 48px;
	}

	.nglv2 .nglv2-news-item__more {
		padding-inline: 0;
	}
}

/* ==============================================================================================
 * The hub and a category's page (257:7646)
 * ============================================================================================ */

/* Head (286:10582): the eyebrow at the start, the title centred, the swoosh under it. The eyebrow is
 * 26 under the breadcrumbs (the head's box starts 32 under them and the eyebrow overflows it by 6), the
 * title and the swoosh overlap the line above by 8 and 12 (the swoosh is drawn 487 × 34 around its
 * 479 × 26 box). */
.nglv2-nhub__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 26px;
	text-align: center;
}

.nglv2-nhub__head .nglv2-eyebrow {
	align-self: stretch;
}

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

.nglv2-nhub__head .nglv2-swoosh {
	width: min(487px, 82%);
	margin-top: -12px;
}

/* Two featured posts (286:11086), 53 under the swoosh. */
.nglv2-nhub__featured {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 53px;
}

/* «مرور محتوا» (286:11087): 80 under the featured posts; its head is the shared section head
 * (inner.css .nglv2-shead), which ends with the 24 the design leaves under the lead. A flex column, so
 * that 24 and the chips' 64 add up instead of collapsing. */
.nglv2-nhub__browse {
	display: flex;
	flex-direction: column;
	margin-top: 80px;
}

/* A category's page and the hub's later pages have no featured posts: the list follows the head. */
.nglv2-nhub__head + .nglv2-nhub__browse {
	margin-top: 80px;
}

.nglv2-nhub__browse--bare,
.nglv2-nhub__head + .nglv2-nhub__browse--bare {
	margin-top: 0;
}

/* Topic chips (286:11350, drawn in inner.css): 64 under the head. */
.nglv2-chips {
	margin-top: 64px;
}

/* The list: the homepage's rows, 64 apart, 64 under the chips. */
.nglv2-nhub__list {
	display: flex;
	flex-direction: column;
	gap: 64px;
	margin-top: 64px;
}

/* The hub draws the topic pill white with a light border (286:11613); the homepage's is grey. */
.nglv2 .nglv2-nhub .nglv2-news-item__topic {
	border-color: #efefef;
	background: #fff;
	color: #52636c;
}

/* Page links (286:11285): drawn in inner.css, 32 under the list. */

/* Not drawn: a category with no posts yet. */
.nglv2-nhub__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 64px;
	padding: 48px 24px;
	background: #fff;
	text-align: center;
}

.nglv2 .nglv2-nhub__empty p {
	font-size: 18px;
	line-height: 1.8;
	color: var(--nglv2-grey);
}

/* ==============================================================================================
 * News cards: the hub's featured posts (286:10637, 588 × 500) and an article's related posts
 * (299:10230, 384 × 334, --sm). The photo strip (173) is at the start under a navy shade that fades
 * upwards; the text column beside it: meta row at the top, title and excerpt, «خواندن ادامه» at the
 * bottom, at the column's end.
 * ============================================================================================ */

.nglv2-ncard {
	display: flex;
	gap: 24px;
	min-width: 0;
	min-height: 500px;
	background: #fff;
}

.nglv2 .nglv2-ncard__media {
	position: relative;
	display: block;
	flex: 0 0 173px;
	overflow: hidden;
}

.nglv2-ncard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(7, 28, 43, 0.35), rgba(7, 28, 43, 0) 45%);
	pointer-events: none;
}

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

.nglv2 .nglv2-ncard:hover .nglv2-ncard__img {
	transform: scale(1.04);
}

.nglv2-ncard__body {
	display: flex;
	flex: 0 1 325px;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-width: 0;
	padding-block: 32px;
}

.nglv2-ncard__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 13px;
	font-weight: 500;
	font-size: 16px;
	line-height: 15px;
	color: #168b52;
}

.nglv2-ncard__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 288px;
}

/* Bold 24 / 49.6 as drawn, without the drawn -1.09px tracking (spacing breaks Persian letters apart). A
 * long title stops after four lines, the excerpt too. */
.nglv2 .nglv2-ncard__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	font-weight: 700;
	font-size: 24px;
	line-height: 49.637px;
	color: #0b2538;
}

.nglv2 .nglv2-ncard__title a {
	color: inherit;
	transition: color 0.25s;
}

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

/* Betheme's `a:focus { outline: 0 }` would leave the keyboard without a mark. */
.nglv2 .nglv2-ncard__title a:focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 3px;
}

.nglv2 .nglv2-ncard__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	font-size: 14px;
	line-height: 29.4px;
	color: #52636c;
}

.nglv2 .nglv2-ncard__more {
	align-self: flex-end;
	font-size: 16px;
}

.nglv2 .nglv2-ncard__more .nglv2-icon {
	width: 32px;
	height: 32px;
}

.nglv2-ncard--sm {
	gap: 16px;
	min-height: 334px;
}

.nglv2-ncard--sm .nglv2-ncard__body {
	flex-basis: 179px;
}

.nglv2-ncard--sm .nglv2-ncard__info {
	font-size: 12px;
}

.nglv2-ncard--sm .nglv2-ncard__copy {
	gap: 8px;
	max-width: none;
}

.nglv2 .nglv2-ncard--sm .nglv2-ncard__title {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	font-weight: 600;
	font-size: 16px;
	line-height: 32px;
}

.nglv2 .nglv2-ncard--sm .nglv2-ncard__text {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	font-size: 12px;
	line-height: 24px;
}

.nglv2 .nglv2-ncard--sm .nglv2-ncard__more {
	font-weight: 500;
	font-size: 14px;
}

.nglv2 .nglv2-ncard--sm .nglv2-ncard__more .nglv2-icon {
	width: 24px;
	height: 24px;
}

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

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

@media (max-width: 1023px) {
	.nglv2-nhub__featured {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Full width, the text column takes the room beside the photo. */
	.nglv2-ncard {
		min-height: 420px;
	}

	.nglv2-ncard__body {
		flex: 1 1 auto;
		padding-inline-end: 24px;
	}

	.nglv2-ncard__copy {
		max-width: 560px;
	}
}

@media (max-width: 767px) {
	.nglv2-nhub__featured {
		margin-top: 40px;
	}

	.nglv2-nhub__browse,
	.nglv2-nhub__head + .nglv2-nhub__browse {
		margin-top: 56px;
	}

	.nglv2-chips,
	.nglv2-nhub__list {
		margin-top: 40px;
	}

	.nglv2-nhub__list {
		gap: 40px;
	}

	.nglv2-ncard,
	.nglv2-ncard--sm {
		gap: 16px;
		min-height: 0;
	}

	.nglv2 .nglv2-ncard__media {
		flex-basis: clamp(96px, 30%, 173px);
	}

	.nglv2-ncard__body {
		gap: 16px;
		padding-block: 24px;
		padding-inline-end: 16px;
	}

	.nglv2-ncard__copy {
		gap: 12px;
	}

	.nglv2 .nglv2-ncard__title {
		font-size: 19px;
		line-height: 1.7;
	}

	.nglv2 .nglv2-ncard__info {
		font-size: 13px;
	}
}