/**
 * استایل اجزای وردپرسی که در پروتوتایپ استاتیک وجود نداشتند:
 * ویجت‌ها، فرم‌های واقعی، جدول قیمت‌ها، تحلیل‌ها و بارگذاری تصویر.
 *
 * عمداً جدا از main.css نگه داشته شده تا با بیلد دوباره SCSS پروتوتایپ
 * بازنویسی نشود. همه رنگ‌ها از همان توکن‌های --nx-* می‌آیند، پس با تغییر
 * رنگ سایت در پنل، این بخش‌ها هم خودکار هماهنگ می‌شوند.
 */

/* =========================================================================
   ویجت‌های عمومی
   ====================================================================== */

.nx-widget__body {
	padding: 12px 14px 14px;
}

.nx-widget__title {
	font-size: var(--nx-fs-md);
	margin: 0 0 10px;
}

.nx-widget--flat {
	margin-block-end: var(--nx-gap, 16px);
}

.nx-widget__more {
	display: block;
	text-align: center;
	padding: 9px;
	font-size: var(--nx-fs-sm);
	color: var(--nx-brand);
	text-decoration: none;
	border-block-start: 1px solid var(--nx-border);
}

.nx-widget__more:hover {
	background: var(--nx-surface);
}

.nx-empty {
	padding: 18px 14px;
	color: var(--nx-text-muted);
	font-size: var(--nx-fs-sm);
	text-align: center;
	margin: 0;
}

.nx-area {
	margin-block-end: var(--nx-gap, 16px);
}

.nx-area--top-banner {
	margin-block: 0 12px;
}

/* =========================================================================
   فهرست خبر داخل ویجت
   ====================================================================== */

.nx-wlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nx-wlist__item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 14px;
	border-block-end: 1px solid var(--nx-border);
}

.nx-wlist__item:last-child {
	border-block-end: 0;
}

.nx-wlist__media {
	flex: 0 0 84px;
	display: block;
	border-radius: var(--nx-radius-sm, 8px);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.nx-wlist__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.nx-wlist__body {
	flex: 1;
	min-inline-size: 0;
}

.nx-wlist__title {
	display: block;
	font-size: var(--nx-fs-sm);
	line-height: 1.75;
	color: var(--nx-text);
	text-decoration: none;
	font-weight: 500;
}

.nx-wlist__title:hover {
	color: var(--nx-brand);
}

.nx-wlist__time {
	display: block;
	font-size: var(--nx-fs-2xs, 11px);
	color: var(--nx-text-muted);
	margin-block-start: 3px;
}

.nx-wlist__rank {
	flex: 0 0 24px;
	block-size: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 6px;
	background: var(--nx-surface);
	color: var(--nx-text-muted);
	font-size: var(--nx-fs-2xs, 11px);
	font-weight: 700;
}

.nx-wlist--ranked .nx-wlist__item:nth-child(1) .nx-wlist__rank { background: var(--nx-brand); color: #fff; }
.nx-wlist--ranked .nx-wlist__item:nth-child(2) .nx-wlist__rank { background: var(--nx-brand-100); color: var(--nx-brand); }
.nx-wlist--ranked .nx-wlist__item:nth-child(3) .nx-wlist__rank { background: var(--nx-brand-100); color: var(--nx-brand); }

.nx-wlist--plain .nx-wlist__item {
	padding-block: 8px;
}

/* =========================================================================
   ویجت جستجو
   ====================================================================== */

.nx-wsearch {
	display: flex;
	gap: 6px;
}

.nx-wsearch input {
	flex: 1;
	min-inline-size: 0;
	padding: 9px 12px;
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-sm, 8px);
	background: var(--nx-bg);
	color: var(--nx-text);
	font: inherit;
	font-size: var(--nx-fs-sm);
}

.nx-wsearch input:focus {
	outline: none;
	border-color: var(--nx-brand);
}

.nx-wsearch button {
	flex: 0 0 auto;
	border: 0;
	background: var(--nx-brand);
	color: #fff;
	padding-inline: 14px;
	border-radius: var(--nx-radius-sm, 8px);
	cursor: pointer;
}

/* =========================================================================
   ویجت دسته‌بندی و برچسب
   ====================================================================== */

.nx-wcats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nx-wcats li {
	border-block-end: 1px solid var(--nx-border);
}

.nx-wcats li:last-child {
	border-block-end: 0;
}

.nx-wcats a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--nx-text);
	font-size: var(--nx-fs-sm);
}

.nx-wcats a:hover {
	background: var(--nx-surface);
	color: var(--nx-brand);
}

.nx-wcats em {
	font-style: normal;
	background: var(--nx-surface);
	color: var(--nx-text-muted);
	padding: 1px 9px;
	border-radius: 999px;
	font-size: var(--nx-fs-2xs, 11px);
}

.nx-wtags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 12px 14px;
}

/* =========================================================================
   ویجت شبکه‌های اجتماعی
   ====================================================================== */

.nx-wsocial {
	display: grid;
	gap: 8px;
	padding: 12px 14px;
}

.nx-wsocial--grid {
	grid-template-columns: repeat(2, 1fr);
}

.nx-wsocial--row {
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.nx-wsocial__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	border-radius: var(--nx-radius-sm, 8px);
	background: var(--nx-surface);
	color: var(--nx-text);
	text-decoration: none;
	font-size: var(--nx-fs-xs, 12px);
	transition: background .15s, color .15s;
}

.nx-wsocial__item i {
	font-size: 16px;
}

.nx-wsocial__item:hover { color: #fff; }
.nx-wsocial__item--telegram:hover  { background: #229ED9; }
.nx-wsocial__item--instagram:hover { background: #C13584; }
.nx-wsocial__item--twitter:hover   { background: #000; }
.nx-wsocial__item--youtube:hover   { background: #FF0000; }
.nx-wsocial__item--whatsapp:hover  { background: #25D366; }
.nx-wsocial__item--linkedin:hover  { background: #0A66C2; }
.nx-wsocial__item--aparat:hover    { background: #B01C2E; }
.nx-wsocial__item--rss:hover       { background: #F26522; }

.nx-wsocial--row .nx-wsocial__item span {
	display: none;
}

.nx-wsocial--row .nx-wsocial__item {
	justify-content: center;
}

/* =========================================================================
   ویجت خبرنامه
   ====================================================================== */

.nx-wnewsletter {
	padding: 14px;
}

.nx-wnewsletter__text {
	font-size: var(--nx-fs-xs, 12px);
	color: var(--nx-text-muted);
	line-height: 1.9;
	margin: 0 0 10px;
}

.nx-wnewsletter__form {
	display: flex;
	gap: 6px;
	position: relative;
}

.nx-wnewsletter__form input[type="email"] {
	flex: 1;
	min-inline-size: 0;
	padding: 9px 12px;
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-sm, 8px);
	background: var(--nx-bg);
	color: var(--nx-text);
	font: inherit;
	font-size: var(--nx-fs-sm);
}

.nx-wnewsletter__form button {
	border: 0;
	background: var(--nx-brand);
	color: #fff;
	padding-inline: 16px;
	border-radius: var(--nx-radius-sm, 8px);
	cursor: pointer;
	font: inherit;
	font-size: var(--nx-fs-sm);
	font-weight: 600;
}

.nx-wnewsletter__msg,
.nx-newsletter__msg,
.nx-form__msg,
.nx-cform__msg {
	font-size: var(--nx-fs-xs, 12px);
	margin: 8px 0 0;
	min-block-size: 18px;
	line-height: 1.8;
}

.nx-wnewsletter__msg.is-ok,
.nx-newsletter__msg.is-ok,
.nx-form__msg.is-ok,
.nx-cform__msg.is-ok {
	color: var(--nx-up);
}

.nx-wnewsletter__msg.is-error,
.nx-newsletter__msg.is-error,
.nx-form__msg.is-error,
.nx-cform__msg.is-error {
	color: var(--nx-down);
}

.nx-newsletter__msg {
	grid-column: 1 / -1;
	color: #fff;
	position: relative;
	z-index: 2;
}

/* =========================================================================
   ویجت کسب‌وکار
   ====================================================================== */

.nx-wbiz {
	padding: 6px 0;
}

.nx-biz {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--nx-text);
	border-block-end: 1px solid var(--nx-border);
}

.nx-biz:last-child {
	border-block-end: 0;
}

.nx-biz:hover {
	background: var(--nx-surface);
}

.nx-biz__logo {
	flex: 0 0 44px;
	block-size: 44px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--nx-surface);
	display: grid;
	place-items: center;
}

.nx-biz__logo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.nx-biz__body {
	flex: 1;
	min-inline-size: 0;
}

.nx-biz__name {
	display: block;
	font-size: var(--nx-fs-sm);
	font-weight: 600;
}

.nx-biz__desc {
	display: block;
	font-size: var(--nx-fs-2xs, 11px);
	color: var(--nx-text-muted);
	line-height: 1.8;
}

.nx-biz__phone {
	display: block;
	font-size: var(--nx-fs-2xs, 11px);
	color: var(--nx-brand);
	direction: ltr;
	text-align: start;
}

/* =========================================================================
   تبلیغات
   ====================================================================== */

.nx-ad--text {
	display: block;
	padding: 14px;
	border: 1px dashed var(--nx-border);
	border-radius: var(--nx-radius, 12px);
	background: var(--nx-surface);
	text-decoration: none;
	color: var(--nx-text);
}

.nx-ad--text:hover {
	border-color: var(--nx-brand);
}

.nx-ad__label {
	display: inline-block;
	font-size: 10px;
	color: var(--nx-text-muted);
	border: 1px solid var(--nx-border);
	border-radius: 4px;
	padding: 0 5px;
	margin-block-end: 6px;
}

.nx-ad__title {
	display: block;
	font-size: var(--nx-fs-sm);
	line-height: 1.8;
}

.nx-ad__text {
	display: block;
	font-size: var(--nx-fs-xs, 12px);
	color: var(--nx-text-muted);
	line-height: 1.9;
	margin-block-start: 4px;
}

.nx-ad--image picture,
.nx-ad--image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--nx-radius, 12px);
}

/* =========================================================================
   جدول قیمت‌ها
   ====================================================================== */

.nx-market-scroll {
	max-block-size: 420px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.nx-prices-table {
	overflow-x: auto;
}

.nx-market-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--nx-fs-sm);
}

.nx-market-table th,
.nx-market-table td {
	padding: 10px 12px;
	border-block-end: 1px solid var(--nx-border);
	text-align: start;
}

.nx-market-table thead th {
	font-size: var(--nx-fs-2xs, 11px);
	color: var(--nx-text-muted);
	font-weight: 600;
	background: var(--nx-surface);
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
}

.nx-market-table tbody th {
	font-weight: 600;
}

.nx-market-table td small {
	color: var(--nx-text-muted);
	font-size: 10px;
	margin-inline-start: 3px;
}

.nx-market-table tr[data-price-row].is-changed {
	animation: nx-flash .9s ease;
}

@keyframes nx-flash {
	0%   { background: var(--nx-brand-100); }
	100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.nx-market-table tr[data-price-row].is-changed { animation: none; }
}

.nx-up   { color: var(--nx-up); }
.nx-down { color: var(--nx-down); }
.nx-flat { color: var(--nx-text-muted); }
.nx-muted { color: var(--nx-text-muted); }

.nx-prices-stamp {
	padding: 10px 12px 0;
	font-size: var(--nx-fs-2xs, 11px);
	color: var(--nx-text-muted);
	margin: 0;
}

/* =========================================================================
   تحلیل‌های کاربران
   ====================================================================== */

.nx-analyses {
	display: grid;
	gap: 16px;
}

.nx-analysis {
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius, 12px);
	padding: 16px;
	background: var(--nx-bg);
}

.nx-analysis__title {
	font-size: var(--nx-fs-lg);
	margin: 0 0 6px;
}

.nx-analysis__text {
	font-size: var(--nx-fs-sm);
	line-height: 2.1;
	margin-block-start: 10px;
}

.nx-analysis__text p {
	margin: 0 0 10px;
}

.nx-analysis__gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 10px;
}

.nx-analysis__gallery img {
	border-radius: 8px;
	display: block;
}

.nx-wanalysis {
	padding: 12px 14px;
}

.nx-wanalysis__item {
	padding-block: 8px;
	border-block-end: 1px solid var(--nx-border);
}

.nx-wanalysis__item:last-of-type {
	border-block-end: 0;
}

.nx-wanalysis__title {
	font-size: var(--nx-fs-sm);
	margin: 0 0 4px;
	line-height: 1.8;
}

.nx-wanalysis__meta {
	display: flex;
	gap: 10px;
	font-size: var(--nx-fs-2xs, 11px);
	color: var(--nx-text-muted);
	margin: 0;
}

.nx-wanalysis__cta {
	display: block;
	text-align: center;
	margin-block-start: 10px;
	padding: 9px;
	border-radius: var(--nx-radius-sm, 8px);
	background: var(--nx-brand);
	color: #fff;
	text-decoration: none;
	font-size: var(--nx-fs-sm);
	font-weight: 600;
}

/* =========================================================================
   فرم‌ها
   ====================================================================== */

.nx-cform {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.nx-cform__row--full,
.nx-cform > p,
.nx-cform .form-submit {
	grid-column: 1 / -1;
}

.nx-cform__row label {
	display: block;
	font-size: var(--nx-fs-sm);
	font-weight: 600;
	margin-block-end: 6px;
}

.nx-cform__row label em {
	font-style: normal;
	font-weight: 400;
	color: var(--nx-text-muted);
	font-size: var(--nx-fs-2xs, 11px);
}

.nx-cform input[type="text"],
.nx-cform input[type="email"],
.nx-cform input[type="tel"],
.nx-cform input[type="url"],
.nx-cform textarea {
	inline-size: 100%;
	padding: 11px 13px;
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-sm, 8px);
	background: var(--nx-bg);
	color: var(--nx-text);
	font: inherit;
	font-size: var(--nx-fs-sm);
	line-height: 1.9;
}

.nx-cform input:focus,
.nx-cform textarea:focus {
	outline: none;
	border-color: var(--nx-brand);
	box-shadow: 0 0 0 3px var(--nx-brand-100);
}

.nx-cform textarea {
	resize: vertical;
	min-block-size: 120px;
}

.nx-cform__counter {
	text-align: end;
	font-size: var(--nx-fs-2xs, 11px);
	color: var(--nx-text-muted);
	margin-block-start: 4px;
}

.nx-cform__error {
	display: block;
	color: var(--nx-down);
	font-size: var(--nx-fs-2xs, 11px);
	margin-block-start: 4px;
	min-block-size: 14px;
}

.nx-cform__check {
	display: flex !important;
	gap: 8px;
	align-items: flex-start;
	font-weight: 400 !important;
	font-size: var(--nx-fs-sm);
	line-height: 1.9;
}

.nx-cform__note {
	font-size: var(--nx-fs-xs, 12px);
	color: var(--nx-text-muted);
	margin: 0;
}

@media (max-width: 575px) {
	.nx-cform {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   بارگذاری تصویر
   ====================================================================== */

.nx-dropzone {
	border: 2px dashed var(--nx-border);
	border-radius: var(--nx-radius, 12px);
	padding: 26px 16px;
	text-align: center;
	cursor: pointer;
	color: var(--nx-text-muted);
	font-size: var(--nx-fs-sm);
	transition: border-color .15s, background .15s;
}

.nx-dropzone:hover,
.nx-dropzone.is-over {
	border-color: var(--nx-brand);
	background: var(--nx-brand-100);
	color: var(--nx-brand);
}

.nx-dropzone i {
	display: block;
	font-size: 26px;
	margin-block-end: 6px;
}

.nx-dropzone__preview {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 10px;
}

.nx-dropzone__item {
	position: relative;
	inline-size: 92px;
	block-size: 68px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--nx-border);
}

.nx-dropzone__item img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.nx-dropzone__remove {
	position: absolute;
	inset-block-start: 3px;
	inset-inline-end: 3px;
	inline-size: 22px;
	block-size: 22px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 13px;
	line-height: 1;
}

/* =========================================================================
   دیدگاه‌ها
   ====================================================================== */

.nx-comments__inner {
	padding: 14px 16px 18px;
}

.nx-comments__list {
	display: grid;
	gap: 14px;
}

.nx-comment {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px;
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius, 12px);
	background: var(--nx-bg);
}

.nx-comment__avatar {
	flex: 0 0 42px;
	block-size: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--nx-brand-100);
	color: var(--nx-brand);
	font-weight: 700;
	font-size: 17px;
}

.nx-comment__body {
	flex: 1;
	min-inline-size: 0;
}

.nx-comment__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-block-end: 6px;
}

.nx-comment__head b {
	font-size: var(--nx-fs-sm);
}

.nx-comment__badge {
	font-size: 10px;
	background: var(--nx-brand);
	color: #fff;
	border-radius: 999px;
	padding: 1px 8px;
}

.nx-comment__text {
	font-size: var(--nx-fs-sm);
	line-height: 2.1;
}

.nx-comment__text p {
	margin: 0 0 8px;
}

.nx-comment__text p:last-child {
	margin-block-end: 0;
}

.nx-comment__pending {
	font-size: var(--nx-fs-xs, 12px);
	color: #b45309;
	background: #fffbeb;
	border-radius: 6px;
	padding: 5px 9px;
	margin: 0 0 8px;
	display: inline-block;
}

.nx-comment__actions {
	margin-block-start: 8px;
	display: flex;
	gap: 12px;
}

.nx-comment__actions a {
	font-size: var(--nx-fs-2xs, 11px);
	color: var(--nx-text-muted);
	text-decoration: none;
}

.nx-comment__actions a:hover {
	color: var(--nx-brand);
}

.nx-comments__empty {
	padding: 26px 14px;
	color: var(--nx-text-muted);
	font-size: var(--nx-fs-sm);
	text-align: center;
	margin: 0;
}

.nx-comments__empty i {
	display: block;
	font-size: 26px;
	margin-block-end: 8px;
	opacity: .5;
}

.nx-comments__closed {
	padding: 14px;
	color: var(--nx-text-muted);
	font-size: var(--nx-fs-sm);
	text-align: center;
	background: var(--nx-surface);
	border-radius: var(--nx-radius-sm, 8px);
	margin-block-start: 14px;
}

.nx-comments .children {
	list-style: none;
	margin: 12px 0 0;
	padding-inline-start: 28px;
	border-inline-start: 2px solid var(--nx-border);
	display: grid;
	gap: 12px;
}

/* ---- فرم دیدگاه ---- */

.nx-comments__form {
	margin-block-start: 20px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--nx-border);
}

.nx-cform__title {
	font-size: var(--nx-fs-lg);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.nx-cform__cancel {
	font-size: var(--nx-fs-2xs, 11px);
	font-weight: 400;
}

.nx-cform__cancel a {
	color: var(--nx-down);
	text-decoration: none;
}

.nx-cform__submit {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.nx-cform input[type="submit"] {
	cursor: pointer;
	border: 0;
	padding: 11px 26px;
}

.nx-cform__note i {
	color: var(--nx-brand);
}

/* عناصری که وردپرس خودش می‌سازد و باید تمام‌عرض باشند */
.nx-cform .comment-form-cookies-consent,
.nx-cform .comment-notes,
.nx-cform .logged-in-as,
.nx-cform .must-log-in {
	grid-column: 1 / -1;
	font-size: var(--nx-fs-xs, 12px);
	color: var(--nx-text-muted);
	margin: 0;
}

.comment-respond {
	display: block;
}

/* =========================================================================
   لوگو روشن و شب
   ====================================================================== */

/* =========================================================================
   لوگو: نشان تصویری + نام و شعار به صورت متن

   نام و شعار عمداً متن‌اند نه بخشی از تصویر: از تنظیمات قابل تغییرند، در
   حالت شب رنگ می‌گیرند، برای گوگل خواندنی‌اند و در هر اندازه تیز می‌مانند.

   فونت‌ها: «کهربا» فونت اختصاصی برند است و همراه قالب نمی‌آید (مجوزش مال
   شماست). فایل‌ها را داخل `assets/fonts/kahroba/` بگذارید.

   قاعده @font-face اینجا نوشته نشده، بلکه `nemood_brand_font_css()` در
   `inc/enqueue.php` پوشه را می‌خواند و فقط برای فایل‌هایی که **واقعاً
   هستند** قاعده می‌سازد. اگر اینجا نوشته می‌شد، مرورگر تا وقتی فونت را
   نگذاشته‌اید در هر بار بارگذاری صفحه چند درخواست ۴۰۴ می‌فرستاد.
   تا وقتی فایلی نباشد، نام و شعار با وزیرمتن نوشته می‌شوند.
   ====================================================================== */

/* نشان: کادر رنگی و آیکن بوت‌استرپِ main.css جایش را به خود لوگو می‌دهد. */
.nx-logo__mark {
	inline-size: auto;
	block-size: 46px;
	background: none;
	box-shadow: none;
	border-radius: 0;
	display: block;
	flex: 0 0 auto;
	/*
	 * عمداً بدون transition: انیمیشن روی ارتفاع یعنی چیدمان صفحه ۲۵۰
	 * میلی‌ثانیه در حال تغییر است، درست وقتی کاربر دارد اسکرول می‌کند.
	 * جدا از تکان خوردن محتوا، در محیط‌هایی که انیمیشن throttle می‌شود
	 * ارتفاع روی مقدار شروع گیر می‌کند و لوگو اصلاً جمع نمی‌شود.
	 */
}

.nx-logo__img {
	display: block;
	block-size: 100%;
	inline-size: auto;
	max-block-size: none;
}

.nx-logo__text {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-inline-size: 0;
}

.nx-logo__name {
	font-family: "Kahroba Name", var(--nx-font), sans-serif;
	font-size: 1.45rem;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--nx-text);
	white-space: nowrap;
}

.nx-logo__slogan {
	display: block;
	font-family: "Kahroba Slogan", var(--nx-font), sans-serif;
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--nx-text-muted);
	white-space: nowrap;
}

/* حالت شب: نسخه‌ای از نشان که رنگ‌های سرمه‌ای‌اش سفید شده. */
.nx-logo__img--dark {
	display: none;
}

[data-theme="dark"] .nx-logo__img--light {
	display: none;
}

[data-theme="dark"] .nx-logo__img--dark {
	display: block;
}

[data-theme="dark"] .nx-logo__name {
	color: #fff;
}

/* فوتر: main.css برای نشان مربع ۵۲px می‌گذارد؛ اینجا تصویر است. */
.nx-footer__brand .nx-logo__mark {
	inline-size: auto;
	block-size: 52px;
}

/*
 * فوتر همیشه زمینه تیره دارد، حتی وقتی کل سایت در حالت روشن است — پس
 * نشانِ نسخه شب را نشان می‌دهد و نام را سفید می‌کند.
 */
.nx-footer__brand--dark .nx-logo__img--light {
	display: none;
}

.nx-footer__brand--dark .nx-logo__img--dark {
	display: block;
}

.nx-footer__brand--dark .nx-logo__name {
	color: #fff;
}

.nx-footer__brand--dark .nx-logo__slogan {
	color: rgba(255, 255, 255, .68);
}

/* =========================================================================
   متفرقه
   ====================================================================== */

.nx-post__roof {
	display: block;
	font-size: var(--nx-fs-2xs, 11px);
	color: var(--nx-brand);
	font-weight: 600;
	margin-block-end: 3px;
}

.nx-lead__roof {
	font-size: var(--nx-fs-xs, 12px);
	color: var(--nx-brand);
	font-weight: 600;
	margin: 4px 0 0;
}

.nx-footer__about {
	font-size: var(--nx-fs-xs, 12px);
	line-height: 2;
	color: rgba(255, 255, 255, .7);
	margin-block: 10px 0;
}

.nx-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	padding-block: 26px;
	border-block-end: 1px solid rgba(255, 255, 255, .12);
}

.nx-footer__enamad {
	margin-block-start: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.nx-footer__enamad > * {
	max-inline-size: 100%;
}

.nx-footer__enamad img {
	max-inline-size: 90px;
	block-size: auto;
}

.nx-skip:focus {
	position: fixed;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 100000;
	background: var(--nx-brand);
	color: #fff;
	padding: 10px 18px;
	border-radius: 8px;
	clip: auto !important;
	clip-path: none;
	inline-size: auto;
	block-size: auto;
}

/* پیمایش صفحه‌بندی وردپرس */
.nx-pagination .page-numbers,
.nx-pagination .nx-pagination__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-inline-size: 38px;
	block-size: 38px;
	padding-inline: 10px;
	justify-content: center;
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-sm, 8px);
	text-decoration: none;
	color: var(--nx-text);
	font-size: var(--nx-fs-sm);
}

.nx-pagination .current,
.nx-pagination .page-numbers:hover {
	background: var(--nx-brand);
	border-color: var(--nx-brand);
	color: #fff;
}

/* =========================================================================
   لینک کد خبر
   ====================================================================== */

.nx-code-link {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px dotted currentColor;
}

.nx-code-link:hover {
	color: var(--nx-brand);
}

/* =========================================================================
   جریان خبر در حالت ویجت
   ====================================================================== */

.nx-newsfeed--widget .nx-tabs {
	padding: 10px 12px 0;
}

.nx-newsfeed--widget .nx-list,
.nx-newsfeed--widget .nx-rank {
	margin: 0;
}

/* =========================================================================
   نشان شبکه اجتماعی با تصویر دلخواه
   ====================================================================== */

.nx-social__img {
	inline-size: 20px;
	block-size: 20px;
	object-fit: contain;
	display: block;
}

.nx-wsocial__item .nx-social__img {
	inline-size: 18px;
	block-size: 18px;
}

.nx-topbar__social .nx-social,
.nx-footer .nx-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* رنگ برند شبکه‌ها هنگام هاور (تاپ‌بار و فوتر) */
.nx-social--telegram:hover  { color: #229ED9; }
.nx-social--instagram:hover { color: #C13584; }
.nx-social--twitter:hover   { color: #111; }
.nx-social--youtube:hover   { color: #FF0000; }
.nx-social--whatsapp:hover  { color: #25D366; }
.nx-social--linkedin:hover  { color: #0A66C2; }
.nx-social--aparat:hover    { color: #B01C2E; }
.nx-social--eitaa:hover     { color: #1F8B4C; }
.nx-social--bale:hover      { color: #1EA5A0; }
.nx-social--rubika:hover    { color: #8B5CF6; }
.nx-social--rss:hover       { color: #F26522; }

.nx-wsocial__item--eitaa:hover   { background: #1F8B4C; }
.nx-wsocial__item--bale:hover    { background: #1EA5A0; }
.nx-wsocial__item--rubika:hover  { background: #8B5CF6; }
.nx-wsocial__item--threads:hover { background: #000; }
.nx-wsocial__item--discord:hover { background: #5865F2; }

/* =========================================================================
   خط «آخرین به‌روزرسانی» زیر جدول‌های نرخ
   ====================================================================== */

.nx-market__stamp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 10px 0 0;
	padding: 8px 12px 0;
	border-block-start: 1px solid var(--nx-border);
	font-size: var(--nx-fs-2xs, 11px);
	color: var(--nx-text-muted);
	line-height: 1.9;
}

.nx-market__stamp--compact {
	padding-inline: 0;
}

.nx-market__stamp-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.nx-market__stamp-time time {
	color: var(--nx-text);
	font-weight: 600;
}

.nx-market__stamp-note {
	opacity: .85;
}

@media (max-width: 480px) {
	.nx-market__stamp {
		justify-content: flex-start;
	}
}

/* سرعت نوار بازار از تنظیمات پنل می‌آید (main.css با بیلد SCSS بازنویسی
   می‌شود، پس این override عمداً اینجاست). */
.nx-ticker__track {
	animation-duration: var(--nx-ticker-speed, 46s);
}

/* =========================================================================
   خبر بدون فهرست مطالب

   چیدمان پیش‌فرض متن خبر دو ستونه است: متن + فهرست مطالب. اگر خبر تیتر h2
   نداشته باشد فهرستی ساخته نمی‌شود و آن ستون خالی می‌ماند؛ اینجا متن تمام
   عرض را می‌گیرد.
   ====================================================================== */

.nx-article__layout--no-toc {
	grid-template-columns: minmax(0, 1fr);
}

.nx-article__layout--no-toc .nx-article__body {
	grid-column: 1 / -1;
}

/* =========================================================================
   هدر: ردیف لوگو + ردیف نارنجی منو، و جمع‌شدن به یک ردیف هنگام اسکرول

   لوگو، ابزارها و منو هر سه فرزند یک کانتینر فلکس‌اند:

   - حالت عادی → منو `flex-basis: 100%` می‌گیرد، به ردیف دوم می‌افتد و یک
     نوار نارنجی تمام‌عرض زیر لوگو می‌سازد (طرح فرانت).
   - حالت `is-stuck` → همان منو `flex: 1` می‌شود و کنار لوگو می‌نشیند؛
     نوار نارنجی برداشته و متن‌ها تیره می‌شوند (حالت جمع‌وجور).

   نوار نارنجی با یک شبه‌المان تمام‌عرض (`inset-inline: calc(50% - 50vw)`)
   ساخته شده تا از لبه تا لبه برود، هرچند کانتینر عرض محدود دارد؛
   `overflow-x: clip` روی خود هدر جلوی اسکرول افقیِ ناشی از ۱۰۰vw را
   می‌گیرد و چون فقط محور افقی clip است، زیرمنوها همچنان بیرون می‌زنند.

   استایل‌ها اینجاست نه main.css، چون main.css از SCSS پروتوتایپ بیلد می‌شود.
   ====================================================================== */

/* دیده‌بان چسبندگی — بالای هدر، بدون ارتفاع مؤثر. */
.nx-stick-sentinel {
	block-size: 1px;
	margin-block-end: -1px;
	pointer-events: none;
}

.nx-masthead--withnav {
	position: sticky;
	inset-block-start: 0;
	z-index: 1040;
	overflow-x: clip;
	overflow-y: visible;
	/* فقط سایه انیمیشن می‌گیرد؛ هر چیزی که ارتفاع را عوض کند، نه. */
	transition: box-shadow .25s;
}

.nx-masthead--withnav.is-stuck {
	box-shadow: 0 6px 24px -14px rgba(11, 27, 43, .55);
}

.nx-masthead--withnav .nx-masthead__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	/*
	 * فاصله کم تا لوگو درست کنار همبرگر بنشیند (خواسته کاربر). فاصله عمودی
	 * تا نوار نارنجی را `margin-block-start` خودِ منو تأمین می‌کند، پس این
	 * عدد کوچک آنجا مشکلی درست نمی‌کند.
	 */
	gap: .1rem;
	padding-block: .7rem 0;
}

/* ترتیب: همبرگر ← لوگو ← ابزارها ← (ردیف دوم) منو */
.nx-masthead--withnav .nx-burger { order: 1; }
.nx-masthead--withnav .nx-logo { order: 2; }

.nx-masthead--withnav .nx-masthead__tools {
	order: 3;
	margin-inline-start: auto;
}

.nx-mainnav {
	order: 4;
	position: relative;
	flex: 0 0 100%;
	min-inline-size: 0;
	margin-block-start: .7rem;
}

/* نوار نارنجی تمام‌عرض پشت منو. */
.nx-mainnav::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline: calc(50% - 50vw);
	background: var(--nx-brand);
}

.nx-mainnav .nx-nav__list {
	position: relative;
	display: flex;
	align-items: center;
	gap: .1rem;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nx-mainnav .nx-nav__link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .72rem .9rem;
	border-radius: 0;
	color: #fff;
	font-weight: 700;
	font-size: var(--nx-fs-sm);
	white-space: nowrap;
	transition: background .18s, color .18s;
}

.nx-mainnav .nx-nav__link:hover,
.nx-mainnav .nx-nav__item:hover > .nx-nav__link,
.nx-mainnav .nx-nav__item:focus-within > .nx-nav__link {
	color: #fff;
	background: rgba(0, 0, 0, .1);
}

.nx-mainnav .nx-nav__item.is-active > .nx-nav__link {
	color: #fff;
	background: rgba(0, 0, 0, .16);
}

.nx-mainnav .nx-nav__caret {
	font-size: .7em;
	opacity: .75;
	transition: transform .18s;
}

.nx-mainnav .nx-nav__item:hover > .nx-nav__link .nx-nav__caret {
	transform: rotate(180deg);
	opacity: 1;
}

/* زیرمنوها از لبه پایین نوار باز شوند. */
.nx-mainnav .nx-nav__dd,
.nx-mainnav .nx-nav__mega {
	inset-block-start: 100%;
	border-radius: 0 0 var(--nx-radius) var(--nx-radius);
}

/* ---------- حالت چسبیده: منو کنار لوگو ---------- */

.nx-masthead--withnav.is-stuck .nx-masthead__inner {
	flex-wrap: nowrap;
	padding-block: .3rem;
}

.nx-masthead--withnav.is-stuck .nx-mainnav {
	order: 3;
	flex: 0 1 auto;
	margin-block-start: 0;
	margin-inline: auto;
}

.nx-masthead--withnav.is-stuck .nx-masthead__tools {
	order: 4;
	margin-inline-start: 0;
}

/* نوار نارنجی در حالت چسبیده کنار می‌رود. */
.nx-masthead--withnav.is-stuck .nx-mainnav::before {
	content: none;
}

.nx-masthead--withnav.is-stuck .nx-nav__link {
	padding: .38rem .78rem;
	border-radius: 10px;
	color: var(--nx-text);
}

.nx-masthead--withnav.is-stuck .nx-nav__link:hover,
.nx-masthead--withnav.is-stuck .nx-nav__item:hover > .nx-nav__link,
.nx-masthead--withnav.is-stuck .nx-nav__item:focus-within > .nx-nav__link {
	color: var(--nx-brand);
	background: var(--nx-brand-100);
}

.nx-masthead--withnav.is-stuck .nx-nav__item.is-active > .nx-nav__link {
	color: var(--nx-brand-600, var(--nx-brand));
	background: var(--nx-brand-100);
	position: relative;
}

.nx-masthead--withnav.is-stuck .nx-nav__item.is-active > .nx-nav__link::before {
	content: "";
	position: absolute;
	inset-block-end: -.3rem;
	inset-inline: 30%;
	block-size: 3px;
	border-radius: 3px;
	background: var(--nx-brand);
}

.nx-masthead--withnav.is-stuck .nx-nav__caret {
	opacity: .55;
}

.nx-masthead--withnav.is-stuck .nx-nav__dd,
.nx-masthead--withnav.is-stuck .nx-nav__mega {
	inset-block-start: calc(100% + .42rem);
	border-radius: var(--nx-radius);
}

/* خط زیرِ آیتم که در main.css برای پس‌زمینه نارنجی طراحی شده، در حالت
   چسبیده لازم نیست. */
.nx-masthead--withnav.is-stuck .nx-nav__link::after {
	content: none;
}

/* هدر چسبیده باریک‌تر می‌شود تا محتوا بیشتر دیده شود. */
.nx-masthead--withnav .nx-logo__mark {
	block-size: 48px;
}

.nx-masthead--withnav.is-stuck .nx-logo__mark {
	block-size: 34px;
}

.nx-masthead--withnav.is-stuck .nx-logo__slogan {
	display: none;
}

.nx-masthead--withnav.is-stuck .nx-logo__name {
	font-size: 1.1rem;
}

.nx-masthead--withnav.is-stuck .nx-search__input {
	padding-block: .35rem;
}

/* ---------- ریسپانسیو ---------- */

@media (max-width: 1199.98px) {

	/* منوی افقی جایش را به دکمه همبرگری می‌دهد. */
	.nx-mainnav {
		display: none;
	}

	.nx-masthead--withnav .nx-masthead__inner {
		flex-wrap: nowrap;
		padding-block: .55rem;
	}

	.nx-masthead--withnav .nx-burger {
		display: grid;
		background: var(--nx-brand-100);
		color: var(--nx-brand-600, var(--nx-brand));
	}

	.nx-masthead--withnav .nx-burger:hover {
		background: var(--nx-brand);
		color: #fff;
	}
}

@media (max-width: 575.98px) {
	.nx-masthead--withnav .nx-masthead__inner {
		gap: .6rem;
	}

	.nx-masthead--withnav .nx-logo__mark {
		block-size: 36px;
	}

	.nx-masthead--withnav .nx-logo__name {
		font-size: 1.15rem;
	}

	.nx-masthead--withnav .nx-logo__slogan {
		display: none;
	}
}

/* =============================================================
   تعداد ستون‌های صفحه بر اساس سایدبارهایی که واقعاً پر هستند
   -------------------------------------------------------------
   main.css برای `.nx-page--3col` همیشه سه ریل grid می‌سازد. اگر ناحیه ویجت
   خالی باشد قالب هیچ <aside>ای چاپ نمی‌کند، ولی ریل‌ها سر جایشان می‌مانند و
   ستون محتوا بی‌دلیل باریک می‌شود. `nemood_page_class()` کلاس درست را
   می‌گذارد و قاعده‌های زیر آن را اجرا می‌کنند.
   ============================================================= */

.nx-page--2col {
	--nx-side-w: clamp(250px, 19.5vw, 340px);
	grid-template-columns: minmax(0, 1fr) var(--nx-side-w);
	gap: 1.15rem;
}

.nx-page--1col {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.15rem;
}

/* صفحه اصلی با ریل تبلیغات (چپ). */
.nx-page--rail {
	grid-template-columns: minmax(0, 1fr) clamp(200px, 15vw, 280px);
}

@media (max-width: 1399.98px) {
	.nx-page--2col {
		--nx-side-w: clamp(225px, 18vw, 285px);
		gap: 1rem;
	}
}

@media (max-width: 1199.98px) {

	/* ریل تبلیغات زیر محتوا می‌رود. */
	.nx-page--rail {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * ستون بیرونی (b) در این عرض زیر محتوا می‌رود؛ اگر تنها ستون صفحه همین
	 * باشد، دیگر نباید ریل دومی باقی بماند وگرنه محتوا باریک می‌ماند.
	 */
	.nx-page--2col.nx-page--side-b {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 991.98px) {
	.nx-page--2col {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media print {
	.nx-page--2col,
	.nx-page--rail {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* =============================================================
   امضای طراح در پاورقی
   ============================================================= */

.nx-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.nx-footer__credit a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-block-end: 1px dotted rgba(255, 255, 255, .45);
}

.nx-footer__credit a:hover {
	color: var(--nx-brand);
	border-block-end-color: currentColor;
}

.nx-footer__bottom .nx-footer__sep {
	opacity: .35;
}

/* =============================================================
   ویجت تبلیغ با چند بنر
   -------------------------------------------------------------
   در پروتوتایپ هر بنر فرزند مستقیم ریل بود و از gap خودِ ریل فاصله
   می‌گرفت. در وردپرس همه بنرها داخل یک ویجت‌اند، پس فاصله باید روی
   خود ویجت تعریف شود وگرنه بنرها به هم می‌چسبند.
   ============================================================= */

.widget_nemood_ad {
	display: grid;
	gap: 1rem;
}

/* عنوان این ویجت نقش همان برچسب کوچک «فضای تبلیغات» پروتوتایپ را دارد. */
.widget_nemood_ad .nx-widget__title {
	margin: 0;
	font-size: var(--nx-fs-2xs);
	font-weight: 500;
	letter-spacing: .5px;
	text-align: center;
	color: var(--nx-text-muted);
}

.widget_nemood_ad .nx-widget__title i {
	display: none;
}

/*
 * داخل ریل و ستون‌های کناری، فاصله را grid می‌دهد؛ margin ویجت روی آن
 * اضافه می‌شد و فاصله‌ها ناهمگون می‌شد.
 *
 * `:where()` عمداً است تا وزن انتخابگر بالا نرود: در حالت چندستونی
 * (پایین‌تر) دوباره به همین ویجت‌ها margin داده می‌شود.
 */
:where(.nx-rail, .nx-side) > .nx-widget--flat {
	margin-block-end: 0;
}

/* =============================================================
   شبکه چندرسانه‌ای با تعداد کمتر از ۹ کارت
   -------------------------------------------------------------
   چیدمان طراحی (کارت بزرگ دو ردیفه + هشت کارت کوچک) فقط با ۹ کارت پر
   می‌شود؛ کمتر از آن، ردیف دوم خانه خالی می‌گذارد. این حالت جایگزین،
   کارت‌ها را هم‌اندازه و بدون حفره می‌چیند.
   ============================================================= */

.nx-photos__grid--even {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.nx-photos__grid--even > :first-child {
	grid-row: auto;
	grid-column: auto;
	min-height: 190px;
}

.nx-photos__grid--even > :first-child .nx-card__title {
	font-size: var(--nx-fs-sm);
}

/* =============================================================
   ستون‌های کناری وقتی زیر محتوا می‌روند — جریان آبشاری
   -------------------------------------------------------------
   در این عرض‌ها سایدبارها به شبکه چندستونی تبدیل می‌شدند. در grid ارتفاع
   هر ردیف برابر بلندترین خانه آن ردیف است، پس زیر باکس‌های کوتاه (مثلاً
   «جستجو» کنار «نرخ لحظه‌ای بازار») یک فضای خالی بزرگ می‌ماند تا ردیف بعد
   شروع شود.

   راه‌حل: چیدمان multi-column. هر باکس تا جای ممکن بالا می‌آید و درست زیر
   باکس قبلیِ همان ستون می‌نشیند؛ مرورگر هم ارتفاع ستون‌ها را متوازن می‌کند.
   `break-inside: avoid` جلوی نصف‌شدن یک باکس بین دو ستون را می‌گیرد و چون
   در multi-column فاصله عمودی از gap نمی‌آید، با margin داده می‌شود.
   ============================================================= */

/*
 * تعداد ستون‌ها یک بار به‌صورت متغیر تعریف می‌شود تا هم CSS و هم اسکریپت
 * آبشاری (theme.js) از یک منبع بخوانند.
 */
.nx-side {
	--nx-side-cols: 1;
}

@media (max-width: 1199.98px) {

	.nx-side--b {
		--nx-side-cols: 3;
		display: block;
		columns: 3;
		column-gap: 1rem;
	}

	.nx-side--b > * {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		margin-block-end: 1rem;
	}

	/*
	 * ریل در این عرض افقی می‌شود. اگر خودِ ریل چندستونی بماند، هر ویجت یک
	 * خانه می‌گیرد و کنار باکس کوتاه‌تر حفره می‌ماند. به‌جایش ریل تک‌ستونی
	 * می‌شود و در عوض محتوای داخل هر ویجت (بنرها و ردیف‌های کسب‌وکار) کنار
	 * هم می‌نشیند — همان رفتار افقی پروتوتایپ، بدون فضای خالی.
	 */
	.nx-rail {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * flex نه grid: با auto-fit، عنوانِ تمام‌عرض همه ریل‌ها را «پر» نشان
	 * می‌دهد و ستون خالی جمع نمی‌شود، پس کنار آخرین بنر یک جای خالی می‌ماند.
	 * در flex بنرها هرچند تا که باشند عرض را بین خودشان قسمت می‌کنند.
	 */
	.nx-rail .widget_nemood_ad {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}

	.nx-rail .widget_nemood_ad .nx-widget__title {
		flex: 1 0 100%;
	}

	.nx-rail .widget_nemood_ad .nx-ad {
		flex: 1 1 190px;
	}

	.nx-rail .nx-wbiz {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: .35rem .75rem;
	}
}

@media (max-width: 991.98px) {

	.nx-side--a,
	.nx-side--b {
		--nx-side-cols: 2;
		display: block;
		columns: 2;
		column-gap: 1rem;
	}

	.nx-side--a > * {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		margin-block-end: 1rem;
	}
}

@media (max-width: 575.98px) {

	.nx-side--a,
	.nx-side--b,
	.nx-rail {
		columns: 1;
	}

	.nx-side--a,
	.nx-side--b {
		--nx-side-cols: 1;
	}
}

/*
 * ارتقای اختیاری: چیدمان واقعی آبشاری.
 *
 * multi-column بالا حفره‌های میان‌ردیفی را حذف می‌کند، ولی چون محتوا را
 * ترتیبی بین ستون‌ها می‌شکند، ممکن است یک ستون خیلی بلندتر از دیگری شود.
 * theme.js اگر مرورگر ResizeObserver داشته باشد کلاس `is-masonry` را
 * می‌گذارد و برای هر باکس `grid-row: span N` حساب می‌کند؛ آن وقت الگوریتم
 * جای‌گذاری grid هر باکس را در نخستین فضای خالی می‌نشاند — یعنی دقیقاً زیر
 * کوتاه‌ترین ستون. بدون جاوااسکریپت، همان multi-column می‌ماند.
 */
.nx-side.is-masonry {
	display: grid;
	columns: auto;
	grid-template-columns: repeat(var(--nx-side-cols), minmax(0, 1fr));
	grid-auto-rows: 1px;
	align-items: start;
	gap: 0 1rem;
}

.nx-side.is-masonry > * {
	margin-block-end: 0;
	break-inside: auto;
}

/* =============================================================
   چسبندگی ستون‌های کناری
   -------------------------------------------------------------
   ستون کناری معمولاً کوتاه‌تر از ستون محتواست، پس با اسکرول‌کردن
   کنارِ محتوا یک ستون خالی می‌ماند. راه‌حل: خودِ `<aside>` چسبنده شود.

   دو نکته که بدون آن‌ها کار نمی‌کند:
   ۱) در grid، خانه به‌طور پیش‌فرض تا ارتفاع ردیف کش می‌آید؛ عنصری که
      ارتفاعش برابر ردیف است هیچ‌وقت نمی‌چسبد. پس `align-self: start`.
   ۲) فاصله از بالا باید به اندازه هدر چسبنده باشد، وگرنه باکس زیر هدر
      می‌رود. مقدار پایه ۷۸px است و theme.js آن را با ارتفاع واقعی هدر
      جایگزین می‌کند.

   برای ستون بلندتر از پنجره، theme.js مقدار `--nx-side-top` را منفی
   می‌کند تا ستون همراه صفحه بالا برود و وقتی تهش دیده شد بچسبد؛ وگرنه
   انتهای ستون هیچ‌وقت دیده نمی‌شد.

   فقط در عرض‌هایی اعمال می‌شود که ستون واقعاً کنار محتواست: ستون a از
   ۹۹۲ به بالا و ستون b از ۱۲۰۰ به بالا. پایین‌تر از آن، ستون‌ها زیر
   محتوا و چندستونی‌اند و چسباندنشان بی‌معنی است.
   ============================================================= */

@media (min-width: 992px) {

	.nx-side--a {
		align-self: start;
		position: sticky;
		inset-block-start: var(--nx-side-top, 78px);
	}
}

@media (min-width: 1200px) {

	.nx-side--b {
		align-self: start;
		position: sticky;
		inset-block-start: var(--nx-side-top, 78px);
	}

	/*
	 * ریل صفحه اصلی هم همین رفتار را دارد. ریل معمولاً از ستون محتوای
	 * صفحه اصلی کوتاه‌تر است، پس بدون چسبندگی از نیمه صفحه به بعد کنارش
	 * خالی می‌ماند. زیر ۱۲۰۰px ریل افقی و زیر محتوا می‌رود، پس آنجا
	 * چسبندگی بی‌معنی است و این قاعده اجرا نمی‌شود.
	 */
	.nx-rail {
		align-self: start;
		position: sticky;
		inset-block-start: var(--nx-side-top, 78px);
	}
}

/* =============================================================
   سرستون ویجت‌ها در ناحیه‌های مستقل (ریل، بنر بالا، زیر خبر اول)
   -------------------------------------------------------------
   این ناحیه‌ها با مارکاپ «تخت» ثبت می‌شوند: `.nx-widget--flat` با یک
   `<h2 class="nx-widget__title">` ساده، بدون `.nx-box` و بدون
   `.nx-sec-head`. برای بنرهای خام درست است، ولی ویجت‌هایی که واقعاً
   سرستون دارند (معرفی کسب‌وکار) عنوانشان یک خط متن بی‌شکل می‌شد.

   پس عنوان ویجت تخت هم‌شکل `.nx-sec-head__title` می‌شود و ویجت
   کسب‌وکار همان باکس کامل پروتوتایپ را می‌گیرد.

   `:not(.widget_nemood_ad)` عمدی است: عنوان ویجت تبلیغ در طراحی یک
   برچسب کوچک خاکستری وسط‌چین است («فضای تبلیغات» در پروتوتایپ)، نه
   سرستون؛ قاعده‌اش پایین‌تر در همین فایل آمده و نباید بازنویسی شود.
   ============================================================= */

.nx-widget--flat:not(.widget_nemood_ad) > .nx-widget__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--nx-fs-lg);
	font-weight: 800;
	line-height: 1.5;
}

.nx-widget--flat:not(.widget_nemood_ad) > .nx-widget__title i {
	color: var(--nx-brand);
	font-size: .9em;
}

/*
 * باکس کامل برای هر ویجتِ ریل و ناحیه‌های میانی — نه فقط کسب‌وکار.
 *
 * ویجت‌های نمود همه برای نشستن داخل `.nx-box` ساخته شده‌اند (padding داخلی
 * خودشان را دارند)، پس هر کدام که در ریل بیفتد باید همان باکس و سرستون
 * ستون‌های کناری را بگیرد؛ وگرنه مثلاً «ما را دنبال کنید» کنارِ باکسِ
 * «معرفی کسب‌وکار» بی‌قاب و ناجور دیده می‌شود.
 *
 * دامنه عمداً `.nx-rail` و `.nx-area` است (بنر بالای صفحه، میان صفحه اصلی،
 * پایان متن خبر): ستون‌های فوتر هم مارکاپ تخت دارند ولی روی زمینه تیره‌اند و
 * باکس روشن آنجا غلط است.
 *
 * `:not(.widget_nemood_ad)` همان استثنای بالاست — بنرهای تبلیغ قاب ندارند.
 */
:is(.nx-rail, .nx-area) > .nx-widget--flat:not(.widget_nemood_ad) {
	background: var(--nx-surface);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow-xs);
	overflow: hidden;
}

:is(.nx-rail, .nx-area) > .nx-widget--flat:not(.widget_nemood_ad) > .nx-widget__title {
	margin: 0;
	padding: .65rem .9rem;
	border-block-end: 1px solid var(--nx-border);
	/*
	 * نوار باریک برند در لبه سرستون — همان gradient ای که `.nx-sec-head`
	 * دارد. gradient جهت‌آگاه نیست، پس مثل خود پروتوتایپ با 90deg نوشته
	 * شده تا در RTL هم سر جای درست بنشیند.
	 */
	background: linear-gradient(90deg, var(--nx-brand) 0 5px, transparent 5px);
}

/* =============================================================
   نسبت تصویرها — رفع کشیدگی در عرض‌های کوچک
   -------------------------------------------------------------
   پروتوتایپ `img, svg { max-width: 100%; display: block }` دارد ولی
   `height: auto` ندارد، چون در HTML دستی هیچ `<img>` ای صفت
   width/height نداشت. وردپرس اما همیشه این دو صفت را چاپ می‌کند
   (`width="800" height="450"`).

   نتیجه: عرض از CSS می‌آمد (۱۰۰٪ → مثلاً ۳۴۹px روی موبایل) ولی ارتفاع
   از صفت HTML می‌ماند روی ۴۵۰px. چون `aspect-ratio` فقط وقتی اثر دارد
   که دست‌کم یکی از عرض/ارتفاع `auto` باشد، `.nx-figure--hero img` با
   `aspect-ratio: 16/8` هم نادیده گرفته می‌شد و تصویر در ارتفاع کشیده و
   با `object-fit: cover` بریده می‌شد. روی دسکتاپ اتفاقی درست به نظر
   می‌رسید (۸۰۰×۴۵۰ ≈ همان نسبت)، ولی هرچه عرض کمتر می‌شد بدتر می‌شد.

   انتخابگر عمداً خالی و بدون کلاس است (وزن ۰٫۰٫۱) تا هر قاعده‌ای که
   آگاهانه ارتفاع می‌دهد — مثل `.nx-card--overlay img { height: 100% }`
   یا `.nx-ad--strip img { height: 110px }` — همچنان برنده بماند.
   ============================================================= */

img {
	height: auto;
}

/* =========================================================================
   چندرسانه‌ای — ویدیوی بالای خبر، گالری داخل متن و لایت‌باکس

   ویدیو دقیقاً جای تصویر شاخص می‌نشیند، پس همان گوشه‌های گرد و فاصله را
   دارد. نسبت ۱۶:۹ با aspect-ratio بسته شده، نه padding-top، چون وردپرس
   روی iframe ارتفاع نمی‌گذارد.
   ====================================================================== */

.nx-video {
	margin: 0 0 1.1rem;
	border-radius: var(--nx-radius, 14px);
	overflow: hidden;
	background: #000;
}

.nx-video iframe,
.nx-video video,
.nx-video .wp-video,
.nx-video .mejs-container {
	inline-size: 100% !important;
	display: block;
	border: 0;
}

.nx-video > iframe {
	aspect-ratio: 16 / 9;
	block-size: auto;
}

.nx-video video {
	block-size: auto;
	max-block-size: 78vh;
}

.nx-audio {
	margin: 0 0 1.1rem;
}

.nx-video__link a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 700;
	color: var(--nx-brand);
}

/* ---------- گالری ---------- */

.nx-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .6rem;
	margin-block: 1.3rem;
}

@media (max-width: 767.98px) {
	.nx-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 420px) {
	.nx-gallery {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * نسبت خانه‌ها ۱۶:۹ است نه ۴:۳، چون سایزهای تصویر قالب (`nemood-card` =
 * ۵۶۰×۳۱۵) همگی ۱۶:۹اند. با ۴:۳ تصویر برای پر کردن خانه بزرگ‌نمایی و از
 * بالا و پایین بریده می‌شد و درشت و تار دیده می‌شد.
 */
.nx-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--nx-radius-sm, 8px);
	background: var(--nx-surface, #f7f8fa);
	aspect-ratio: 16 / 9;
}

.nx-gallery__item img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s;
}

.nx-gallery__item:hover img {
	transform: scale(1.05);
}

.nx-gallery__cap {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: .55rem .7rem .45rem;
	font-size: var(--nx-fs-xs, .78rem);
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- لایت‌باکس ---------- */

.nx-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: grid;
	grid-template-rows: 1fr auto;
	place-items: center;
	gap: .8rem;
	padding: 2.4rem 1rem 1.4rem;
	background: rgba(8, 12, 20, .93);
}

.nx-lightbox[hidden] {
	display: none;
}

.nx-lightbox__img {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	border-radius: var(--nx-radius-sm, 8px);
}

.nx-lightbox__cap {
	color: #e5e7eb;
	font-size: var(--nx-fs-sm, .9rem);
	text-align: center;
	max-inline-size: 60ch;
}

.nx-lightbox__btn {
	position: absolute;
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 1.3rem;
	cursor: pointer;
	transition: background .18s;
}

.nx-lightbox__btn:hover {
	background: var(--nx-brand, #f0821e);
}

.nx-lightbox__btn--close {
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
}

.nx-lightbox__btn--prev {
	inset-block-start: 50%;
	inset-inline-start: 1rem;
	transform: translateY(-50%);
}

.nx-lightbox__btn--next {
	inset-block-start: 50%;
	inset-inline-end: 1rem;
	transform: translateY(-50%);
}

/* =========================================================================
   برگه‌های «تماس با ما» و «درباره ما»

   مقادیر تماس از تنظیمات فوتر می‌آیند، پس این بخش فقط ظرف است. کارت‌ها با
   auto-fit چیده می‌شوند تا با دو یا چهار مورد، هر دو حالت متوازن دربیاید.
   ====================================================================== */

.nx-contact__intro {
	margin-block-end: 1.4rem;
}

.nx-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: .9rem;
	margin-block-end: 1.6rem;
}

.nx-contact-card {
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius);
	background: var(--nx-surface);
}

.nx-contact-card__icon {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	margin-block-end: .7rem;
	border-radius: 11px;
	background: var(--nx-brand-100);
	color: var(--nx-brand-600, var(--nx-brand));
	font-size: 1.15rem;
}

.nx-contact-card__title {
	margin: 0 0 .35rem;
	font-size: var(--nx-fs-sm);
	font-weight: 800;
	color: var(--nx-text-muted);
}

.nx-contact-card__value {
	margin: 0;
	font-size: var(--nx-fs-md);
	font-weight: 700;
	line-height: 1.7;
	color: var(--nx-text);
	overflow-wrap: anywhere;
}

.nx-contact-card__value a {
	color: inherit;
}

.nx-contact-card__value a:hover {
	color: var(--nx-brand);
}

.nx-contact-card__note {
	margin: .4rem 0 0;
	font-size: var(--nx-fs-xs);
	color: var(--nx-text-muted);
}

/* راهنمای مدیر وقتی هنوز چیزی در تنظیمات پر نشده. */
.nx-contact-hint {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	padding: .9rem 1.1rem;
	margin-block-end: 1.4rem;
	border: 1px dashed var(--nx-border);
	border-radius: var(--nx-radius);
	background: var(--nx-surface-2, var(--nx-surface));
	font-size: var(--nx-fs-sm);
	color: var(--nx-text-muted);
	line-height: 1.9;
}

.nx-contact-hint em {
	opacity: .75;
}

/* ---------- فرم ---------- */

.nx-contact-form {
	padding: 1.3rem;
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius);
	background: var(--nx-surface);
}

.nx-contact-form__lead {
	margin: .2rem 0 1rem;
	color: var(--nx-text-muted);
	font-size: var(--nx-fs-sm);
}

/*
 * فرم فوتر تک‌ستونی و باریک است؛ اینجا جا هست، پس دو ستون می‌شود و متن پیام
 * و دکمه تمام عرض را می‌گیرند.
 */
.nx-form--page {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .7rem;
}

.nx-form--page .nx-form__full {
	grid-column: 1 / -1;
}

.nx-form--page textarea {
	min-block-size: 140px;
	resize: vertical;
}

.nx-form--page button[type="submit"] {
	justify-self: start;
	padding-inline: 1.6rem;
}

@media (max-width: 575.98px) {
	.nx-form--page {
		grid-template-columns: minmax(0, 1fr);
	}

	.nx-form--page button[type="submit"] {
		justify-self: stretch;
	}
}

/* ---------- شبکه‌های اجتماعی ---------- */

.nx-contact-social {
	margin-block-start: 1.4rem;
}

.nx-contact-social__title {
	margin: 0 0 .8rem;
	font-size: var(--nx-fs-md);
	font-weight: 800;
}

.nx-contact-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

/* اینجا نشان‌ها نام هم دارند، پس دکمه‌ای‌اند نه دایره‌ای. */
.nx-contact-social__list .nx-social {
	inline-size: auto;
	block-size: auto;
	padding: .5rem .9rem;
	gap: .45rem;
	border-radius: 999px;
	font-size: var(--nx-fs-sm);
	font-weight: 700;
}

/* ---------- درباره ما ---------- */

.nx-about__body {
	max-inline-size: 72ch;
}

.nx-about__card {
	margin-block-start: 1.6rem;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius);
	background: var(--nx-surface);
}

.nx-about__card-title {
	margin: 0 0 .8rem;
	font-size: var(--nx-fs-md);
	font-weight: 800;
}

.nx-about__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: .7rem 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nx-about__facts li {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding-inline-start: 0;
	overflow-wrap: anywhere;
}

.nx-about__facts li::before {
	content: none;
}

.nx-about__label {
	font-size: var(--nx-fs-xs);
	font-weight: 700;
	color: var(--nx-text-muted);
}

/* =========================================================================
   اصلاح چیدمان و فرمِ برگه‌های ایستا

   دو مشکل: (۱) `.nx-article` خودش padding ندارد — در `single.php` فاصله از
   `.nx-article__layout` می‌آید که این برگه‌ها ندارند، برای همین متن به لبهٔ
   کارت می‌چسبید. (۲) `.nx-form` برای فوترِ تیره رنگ شده (متن روشن روی زمینهٔ
   نیمه‌شفاف)؛ روی برگهٔ سفید، کادرها و متنِ تایپ‌شده عملاً نامرئی بودند.
   ====================================================================== */

.nx-article--page {
	padding: 1.3rem 1.2rem 1.6rem;
}

/* سربرگ padding خودش را دارد؛ داخل این ظرف دوباره‌کاری می‌شود. */
.nx-article--page .nx-article__head {
	padding: 0 0 .9rem;
}

.nx-article--page .nx-figure--hero {
	margin-block-end: 1.2rem;
	border-radius: var(--nx-radius);
	overflow: clip;
}

@media (max-width: 575.98px) {
	.nx-article--page {
		padding: 1.1rem .95rem 1.3rem;
	}
}

/* ---------- متنِ «درباره ما» ---------- */

/*
 * عرضِ خوانا وسط‌چین می‌شود؛ وگرنه در RTL تمام فضای اضافه به چپ می‌افتاد و
 * متن به لبهٔ راست می‌چسبید.
 */
.nx-about__body {
	max-inline-size: 72ch;
	margin-inline: auto;
}

.nx-about__body p,
.nx-about__body li {
	text-align: justify;
	text-justify: inter-word;
}

.nx-about__body h2 {
	margin-block: 1.5rem .6rem;
	font-size: var(--nx-fs-lg);
	font-weight: 800;
}

.nx-about__body > *:first-child {
	margin-block-start: 0;
}

.nx-about__card {
	max-inline-size: 72ch;
	margin-inline: auto;
}

.nx-contact__intro p {
	text-align: justify;
	text-justify: inter-word;
}

/* ---------- فرمِ برگه روی زمینهٔ روشن ---------- */

.nx-form--page input,
.nx-form--page textarea {
	border: 1px solid var(--nx-border);
	background: var(--nx-bg, #fff);
	color: var(--nx-text);
	font: inherit;
	line-height: 1.9;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.nx-form--page input::placeholder,
.nx-form--page textarea::placeholder {
	color: var(--nx-text-muted);
	opacity: 1;
}

.nx-form--page input:focus,
.nx-form--page textarea:focus {
	outline: none;
	border-color: var(--nx-brand);
	box-shadow: 0 0 0 3px var(--nx-brand-100);
}

.nx-form--page input:focus-visible,
.nx-form--page textarea:focus-visible {
	outline: none;
}

.nx-form--page .nx-form__msg {
	margin: .2rem 0 0;
	color: var(--nx-text-muted);
}

/* =========================================================================
   تصویر شاخص صفحه خبر — کامل، بدون برش، با ارتفاع استاندارد

   `.nx-figure--hero img` در main.css نسبت ۱۶:۸ و object-fit: cover دارد؛
   یعنی عکس ۳:۲ از بالا و پایین بریده می‌شد و واترمارکِ گوشه بالا اصلاً
   دیده نمی‌شد. در صفحه تک‌خبر کل عکس باید دیده شود، پس نسبت آزاد می‌شود.
   کارت‌های فهرست و صفحه‌های ایستا دست‌نخورده می‌مانند تا شبکه‌شان به هم
   نریزد.

   ولی «نسبت آزاد + عرض ۱۰۰٪» یعنی هرچه نمایشگر عریض‌تر، عکس بزرگ‌تر —
   روی مانیتور ۲۵۶۰ یک عکس معمولی نصف صفحه را می‌گرفت. پس به‌جای عرض،
   **ارتفاع** ثابت می‌شود و عرض از نسبت خودِ عکس می‌آید:

   - `max-block-size: var(--nx-hero-h)` سقف ارتفاع است، پس عکس با عریض‌تر
     شدن نمایشگر بزرگ‌تر نمی‌شود؛ تقریباً همه عکس‌های خبری (که از ۱۲۸۰
     شروع می‌شوند) دقیقاً به همین ارتفاع می‌رسند، یعنی عملاً ارتفاع
     استاندارد.
   - `inline-size: auto` و `block-size: auto` روی یک عنصر جایگزین (img)
     یعنی اندازهٔ ذاتیِ مقیاس‌شده؛ نسبت عکس دست‌نخورده می‌ماند و چیزی
     بریده نمی‌شود.
   - `margin-inline: auto` وسط‌چینش می‌کند. عکس‌های غیرواید باریک‌تر از
     ستون محتوا می‌مانند و **عمداً** دو طرفشان خالی است — نه قاب، نه
     پس‌زمینه، نه نوار رنگی (`background: none` روی خودِ figure).

   چرا سقف و نه ارتفاع ثابت؟ چون عرض ستون محتوا در بریک‌پوینت‌های مختلف
   بین ۵۴۰ تا ۱۱۲۰ نوسان دارد (ستون‌های کناری جابه‌جا می‌شوند). با ارتفاع
   ثابت، یک عکس ۱۶:۹ در ستون‌های باریک به `max-inline-size` می‌خورد و
   `object-fit: contain` بالا و پایینش نوار خالی می‌گذاشت — دقیقاً همان
   چیزی که نباید باشد. با سقف، هیچ‌وقت نوار ساخته نمی‌شود.
   ========================================================================= */

.single-post .nx-figure--hero {
	--nx-hero-h: 420px;

	background: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.single-post .nx-figure--hero img {
	aspect-ratio: auto;
	object-fit: contain;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: var(--nx-hero-h);
	margin-inline: auto;
}

/* شرح عکس زیر تصویرِ وسط‌چین، خودش هم وسط باشد. */
.single-post .nx-figure--hero figcaption {
	inline-size: 100%;
	justify-content: center;
	text-align: center;
}

@media (max-width: 575.98px) {
	.single-post .nx-figure--hero {
		--nx-hero-h: 340px;
	}
}

/* =============================================================
   باکس چندرسانه‌ای صفحه اصلی — پنج کارت
   -------------------------------------------------------------
   چیدمان: تازه‌ترین خبر یک کارت بزرگ سمت راست که هر دو ردیف را می‌گیرد،
   و چهار کارت کوچک در دو ستون و دو ردیف رو‌به‌رویش.

   شبکه پایه در main.css برای نه کارت نوشته شده
   (`minmax(0,1.6fr) repeat(4, …)`)؛ چون main.css از SCSS پروتوتایپ بیلد
   می‌شود، تغییر پایدار اینجا می‌نشیند نه آنجا.

   `:not(.nx-photos__grid--even)` عمداً است: وقتی تعداد کارت‌ها پنج نباشد
   قالب کلاس `--even` را اضافه می‌کند و شبکه باید هم‌اندازه بماند. بدون این
   شرط، وزن برابرِ دو انتخابگر و ترتیب فایل باعث می‌شد همین قاعده‌ها روی
   حالت هم‌اندازه هم سوار شوند.
   ============================================================= */

.nx-photos__grid:not(.nx-photos__grid--even) {
	grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
}

.nx-photos__grid:not(.nx-photos__grid--even) > :first-child {
	grid-column: auto;
	grid-row: span 2;
	min-height: 100%;
}

/* ۱۲۰۰ تا ۱۳۹۹ — main.css اینجا چهار ستونه می‌شود؛ برمی‌گردانیم. */
@media (max-width: 1399.98px) {

	.nx-photos__grid:not(.nx-photos__grid--even) {
		grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
	}

	.nx-photos__grid:not(.nx-photos__grid--even) > :first-child {
		grid-column: auto;
		grid-row: span 2;
	}
}

/* ≤ ۹۹۱ — کارت بزرگ تمام‌عرض، چهار کارت دیگر در دو ستون زیرش. */
@media (max-width: 991.98px) {

	.nx-photos__grid:not(.nx-photos__grid--even) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nx-photos__grid:not(.nx-photos__grid--even) > :first-child {
		grid-column: span 2;
		grid-row: auto;
		min-height: 260px;
	}
}

@media (max-width: 575.98px) {

	.nx-photos__grid:not(.nx-photos__grid--even) {
		grid-template-columns: minmax(0, 1fr);
	}

	.nx-photos__grid:not(.nx-photos__grid--even) > :first-child {
		grid-column: auto;
	}
}

/* =============================================================
   برگه چندرسانه‌ای — دو کارت بزرگ بالای شبکه
   -------------------------------------------------------------
   دو خبر نخست هرکدام نصف عرض ستون محتوا می‌شوند و بقیه با همان شبکه
   چهارستونه قبلی زیرشان می‌آیند.

   این دو کارت در یک شبکه **جدا** چاپ می‌شوند نه با `grid-column: span 2`
   داخل همان شبکه: تعداد ستون‌های شبکه اصلی زیر ۱۴۰۰ سه‌تا می‌شود و دو
   خانهٔ دوستونی داخل شبکهٔ سه‌ستونه حفره می‌سازند.

   نسبت تصویر این دو کارت ۱۶:۹ است نه ۴:۳ — همه سایزهای تصویر قالب
   (`nemood-card` = ۵۶۰×۳۱۵) ۱۶:۹اند و با ۴:۳ تصویر برای پر کردن خانهٔ
   پهن بزرگ‌نمایی و بریده می‌شد.
   ============================================================= */

.nx-media-grid--lead {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nx-media-grid--lead .nx-media__media {
	aspect-ratio: 16 / 9;
}

.nx-media-grid--lead .nx-media__body {
	padding: 1.05rem 1.1rem;
	gap: .4rem;
}

.nx-media-grid--lead .nx-media__title {
	font-size: var(--nx-fs-lg);
	-webkit-line-clamp: 2;
}

@media (max-width: 767.98px) {

	.nx-media-grid--lead {
		grid-template-columns: minmax(0, 1fr);
	}

	.nx-media-grid--lead .nx-media__title {
		font-size: var(--nx-fs-md);
	}
}