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

/* No featured posts (nothing published yet in this language): the list follows the head. Until
 * 2026-10-12 a category's page and the hub's later pages had none either. */
.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;
	}
}

/* ==============================================================================================
 * The list loading in place (js/news-filter.js, 2026-10-12; not drawn). While a chip's or a page
 * link's page is on its way, the rows and page links fade back and a pill with a spinner sits over
 * the top of the list (sticky, so it stays in view over a long list); it shows only after 120ms, so a
 * page already fetched on hover swaps without a flash. Then the new rows rise in one after another and
 * a changed title fades in.
 * ============================================================================================ */

.nglv2-nhub__browse :is(.nglv2-nhub__list, .nglv2-pager, .nglv2-nhub__empty) {
	transition: opacity 0.3s var(--nglv2-ease), filter 0.3s var(--nglv2-ease);
}

.nglv2-nhub__browse.is-loading :is(.nglv2-nhub__list, .nglv2-pager, .nglv2-nhub__empty) {
	opacity: 0.3;
	filter: grayscale(0.7);
	pointer-events: none;
}

.nglv2-nloader {
	position: sticky;
	top: calc(var(--nglv2-header-h) + 30vh);
	z-index: 3;
	display: flex;
	justify-content: center;
	height: 0;
	pointer-events: none;
}

.nglv2 .nglv2-nloader__pill {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 12px;
	height: 52px;
	margin-top: 36px;
	padding-inline: 18px 24px;
	border: 1px solid rgba(109, 190, 69, 0.22);
	border-radius: 60px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 20px 44px -20px rgba(25, 36, 49, 0.4), 0 2px 8px rgba(25, 36, 49, 0.06);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	color: var(--nglv2-ink);
	white-space: nowrap;
	animation: nglv2-nloader-in 0.35s var(--nglv2-ease-out) 0.12s both;
}

/* A ring whose arc fades out along its tail, turning. */
.nglv2-nloader__ring {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: conic-gradient(from 90deg, rgba(109, 190, 69, 0) 0deg, rgba(109, 190, 69, 0.15) 90deg, var(--nglv2-accent) 330deg, var(--nglv2-green-dark) 360deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
	animation: nglv2-nloader-spin 0.8s linear infinite;
}

@keyframes nglv2-nloader-in {
	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0) scale(0.96);
	}
}

@keyframes nglv2-nloader-spin {
	to {
		transform: rotate(1turn);
	}
}

/* The new rows: the reveal's rise, shorter and quicker (base.css draws 48px in 0.9s). */
.nglv2-js .nglv2-nhub__list--swap > [data-nglv2-reveal] {
	transform: translate3d(0, 20px, 0);
	transition-duration: 0.55s;
}

.nglv2-js .nglv2-nhub__list--swap > [data-nglv2-reveal].is-in {
	transform: none;
}

.nglv2 .nglv2-nhub__title.is-swapped {
	animation: nglv2-nhub-title-in 0.5s var(--nglv2-ease-out) both;
}

@keyframes nglv2-nhub-title-in {
	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0);
	}
}

/* Keyboard focus moves to the list after a page link; the list itself needs no ring. */
.nglv2-nhub__list:focus,
.nglv2-nhub__empty:focus {
	outline: 0;
}

/* Read out after each swap (the new page's title), not shown. */
.nglv2-nhub__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.nglv2 .nglv2-nloader__pill,
	.nglv2 .nglv2-nhub__title.is-swapped {
		animation: none;
	}

	.nglv2-nloader__ring {
		animation-duration: 1.6s;
	}

	.nglv2-nhub__browse :is(.nglv2-nhub__list, .nglv2-pager, .nglv2-nhub__empty) {
		transition: none;
	}
}

/* Mobile: the title's desktop -8px pull collapses its gap to the eyebrow once the title
 * wraps to two lines (reported on phones). A small positive margin restores the breathing room. */
@media (max-width: 767px) {
	.nglv2 .nglv2-nhub__title {
		margin-top: 8px;
	}
}