/* ---------------------------------------------------------------------------
 * چیدمان تازه — با الهام از ساختار و تیپوگرافی مایو کلینیک
 *
 * این فایل آخر از همه صف می‌شود، پس در برابری ویژه‌گی روی قواعد Blocksy و
 * بخش‌های قدیمی main.css می‌نشیند. عمداً جدا نگه داشته شده تا مرزِ «آنچه
 * طراحی تازه عوض کرد» روشن بماند.
 *
 * سه چیز از مایو گرفته شد و بقیه نه:
 *   ۱. نوار عمیق برای عنوان صفحه
 *   ۲. نسبت اندازه‌ی سرتیتر به متن (۳۰px روی ۱۹px) و ریتم ۴۸/۳۲/۱۶
 *   ۳. بدنه‌ی تقریباً بی‌کادر
 * رنگ آبی برندشان و ستونِ پرِ تبلیغاتشان کپی نشد؛ رنگ قرمز خودمان ماند و
 * ستون کنار جایگاه تبلیغ خودمان است.
 * ------------------------------------------------------------------------ */

/*
 * نوار تمام‌عرض.
 *
 * نسخه‌ی اول این کار را با calc(50% - 50vw) انجام می‌داد و خراب بود: نیای
 * این عنصرها (article و main.site-main) از قبل تمام‌عرض است، پس ۵۰٪ و
 * ۵۰vw تقریباً برابر می‌شدند و حاشیه‌ی منفی فقط چند پیکسل می‌شد — نوار
 * تمام‌عرض نمی‌شد و مرکزچین‌شدنِ خود Blocksy هم می‌شکست و نوار کج می‌نشست.
 *
 * راه درست: قید عرض برداشته شود تا عنصر طبیعتاً تمام‌عرضِ نیا شود، و
 * فاصله‌ی داخلی برابر ناودان ظرف باشد تا متن با بقیه‌ی صفحه هم‌تراز بماند.
 *
 * ناودان از متغیرهای خود Blocksy مشتق می‌شود (ظرف = ۹۰vw با سقف ۱۲۹۰px)،
 * نه از عدد ثابت، تا اگر عرض ظرف در سفارشی‌ساز عوض شد این هم دنبالش برود.
 * درصد در padding نسبت به نیا حساب می‌شود، که همان چیزی است که می‌خواهیم.
 */
:root {
	--drg-gutter: calc(
		(100% - min(
			var(--theme-container-edge-spacing, 90vw),
			var(--theme-normal-container-max-width, 1290px)
		)) / 2
	);
}

/* ---------- نوار عنوان صفحه‌های مقاله ---------- */

/*
 * Blocksy خودش عنوان و توضیح و متا را در .hero-section می‌گذارد، پس نوار
 * فقط با CSS ساخته می‌شود و دست به قالب نمی‌خورد.
 */
body.drg-article .hero-section {
	max-width: none;
	width: auto;
	margin-inline: 0;
	padding-inline: var(--drg-gutter);
	padding-block: 2rem 2.5rem;
	margin-block-end: 0;
	background-color: var(--drg-band-a);
	background-image: radial-gradient(79.75% 134.25% at 4.29% 100%, var(--drg-band-a) 0%, var(--drg-band-b) 100%);
	color: #fff;
}

body.drg-article .hero-section .entry-header {
	max-width: var(--drg-measure);
	margin-inline: 0;
}

body.drg-article .hero-section .page-title {
	font-size: clamp(1.9rem, 4.6vw, 2.6rem);
	line-height: 1.35;
	font-weight: 700;
	color: #fff;
	margin-block: 0;
	text-wrap: balance;
}

body.drg-article .hero-section .page-description {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--drg-band-fade);
	margin-block: .9rem 0;
	max-width: 56ch;
}

/* متای Blocksy: نویسنده، تاریخ، دسته. روی نوار سفید می‌شود. */
body.drg-article .hero-section [class*='ct-meta'],
body.drg-article .hero-section [class*='meta-'] {
	color: var(--drg-band-fade);
}

body.drg-article .hero-section a {
	color: #fff;
	text-decoration-color: var(--drg-band-rule);
}

body.drg-article .hero-section a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ---------- مسیر صفحه ----------
 * قالب والد مسیر را بعد از نوار چاپ می‌کند و از هوک‌های موجود نمی‌شود
 * بالای عنوان بردش. پس نواری باریک زیر بند رنگی می‌شود، نه داخلش.
 */
body.drg-article .drg-crumbs {
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--drg-gutter);
	padding-block: .7rem;
	margin-block: 0 0;
	background: var(--drg-bg-subtle);
	border-block-end: 1px solid var(--drg-border);
	font-size: .95rem;
}

/* ---------- دو ستون ---------- */

.drg-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--drg-rail);
	column-gap: 3.5rem;
	align-items: start;
	margin-block-start: 2rem;
}

.drg-cols__main { min-width: 0; }

.drg-rail {
	display: grid;
	gap: 2.5rem;
	align-content: start;
}

@media (max-width: 60rem) {
	.drg-cols {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 3rem;
	}

	/* ستون زیر متن می‌رود نه اینکه فشرده شود: تبلیغ ۳۰۰px در ستون باریک بد می‌نشیند. */
	.drg-rail {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	}
}

/* ---------- جایگاه تبلیغ ---------- */

/*
 * برچسب «تبلیغات» همیشه چاپ می‌شود، حتی وقتی تبلیغ خودیِ سایت است.
 * روی سایت پزشکی، تبلیغی که شکل محتوا داشته باشد اعتماد خواننده را
 * می‌شکند و در راهنمای گوگل هم تخلف است.
 */
.drg-ad {
	max-width: var(--drg-rail);
}

.drg-ad__label {
	margin: 0 0 .5rem;
	padding-block-end: .5rem;
	border-block-end: 1px solid var(--drg-border);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.6;
	text-align: center;
	color: var(--drg-text-muted);
}

.drg-ad__widget + .drg-ad__widget {
	margin-block-start: 1.25rem;
}

.drg-ad__widget-title {
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
}

/* تبلیغ خودی. اندازه‌اش روی ۲۵۰px قفل است تا روزِ جایگزینی با تبلیغ واقعی، چیدمان تکان نخورد. */
.drg-house {
	display: block;
	min-height: 250px;
	padding: 1.4rem 1.25rem;
	background: var(--drg-red-tint);
	border: 1px solid var(--drg-border);
	border-radius: var(--drg-radius);
	color: var(--drg-text);
}

.drg-house:hover {
	border-color: var(--drg-red);
	text-decoration: none;
}

.drg-house__eyebrow,
.drg-house__title,
.drg-house__text,
.drg-house__cta {
	display: block;
}

.drg-house__eyebrow {
	margin-block-end: .6rem;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--drg-red);
}

.drg-house__title {
	margin-block-end: .5rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	text-wrap: balance;
}

.drg-house__text {
	margin-block-end: 1.1rem;
	font-size: .95rem;
	line-height: 1.75;
	color: var(--drg-text-muted);
}

.drg-house__cta {
	width: fit-content;
	padding: .45rem 1.1rem;
	background: var(--drg-red);
	border-radius: var(--drg-radius);
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
}


/* ---------- فهرست «در این صفحه» ----------
 * افقی و فشرده بالای متن، نه ستون کنار. مقالات این سایت تا چهارده بخش
 * دارند و بی فهرست، رسیدن به «چه زمانی باید فوراً اقدام کرد» یعنی
 * اسکرول کردن کل صفحه.
 */

.drg-toc {
	margin-block: 0 2rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var(--drg-border);
}

.drg-toc__title {
	margin: 0 0 .8rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--drg-text-muted);
}

.drg-toc__list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	line-height: 1.7;
}

.drg-toc__list a {
	display: inline-flex;
	align-items: baseline;
	gap: .3rem;
}

.drg-toc__list a::after {
	content: '↓';
	font-size: .8em;
	opacity: .6;
}

/* پرش نرم به بخش‌ها، و فاصله‌ی امن از سربرگ چسبان Blocksy. */
html {
	scroll-behavior: smooth;
}

body.drg-article :is(h2, h3)[id] {
	scroll-margin-block-start: 5rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---------- تیپوگرافی متن مقاله ----------
 * نسبت ۳۰px سرتیتر به ۱۹px متن، همان کاری را می‌کند که تضاد سریف/سنس در
 * مایو انجام می‌دهد. فونت وزیرمتن برای همه‌ی نقش‌ها ماند (انتخاب کاربر)،
 * پس سلسله‌مراتب باید از اندازه و فاصله بیاید.
 */

body.drg-article .entry-content {
	font-size: var(--drg-text-size);
}

body.drg-article .entry-content > h2 {
	font-size: 1.875rem;
	line-height: 1.5;
	font-weight: 700;
	margin-block: 3rem .5rem;
	text-wrap: balance;
}

body.drg-article .entry-content > h3 {
	font-size: 1.25rem;
	line-height: 1.7;
	font-weight: 700;
	margin-block: 2rem .25rem;
}

body.drg-article .entry-content > :is(p, ul, ol) {
	margin-block: 0 1.05rem;
}

body.drg-article .entry-content > h2 + p,
body.drg-article .entry-content > h3 + p {
	margin-block-start: 0;
}

/* ---------- صفحه‌ی اول: نوار قهرمان ---------- */

.drg-hero {
	padding-block: 2.75rem 3rem;
	background-color: var(--drg-band-a);
	background-image: radial-gradient(79.75% 134.25% at 4.29% 100%, var(--drg-band-a) 0%, var(--drg-band-b) 100%);
	color: #fff;
}

.drg-hero__title {
	max-width: 30ch;
	margin: 0;
	font-size: clamp(2rem, 5vw, 2.75rem);
	line-height: 1.35;
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
}

.drg-hero__lead {
	max-width: 58ch;
	margin: .9rem 0 0;
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--drg-band-fade);
}

.drg-hero__search {
	display: flex;
	gap: .6rem;
	max-width: 44rem;
	margin-block-start: 1.75rem;
}

.drg-hero__search input {
	flex: 1 1 auto;
	min-width: 0;
	padding: .8rem 1rem;
	font: inherit;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--drg-text);
	background: var(--drg-bg);
	border: 1px solid transparent;
	border-radius: var(--drg-radius);
}

.drg-hero__search input:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.drg-hero__search button {
	padding: .8rem 1.6rem;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--drg-band-a);
	background: #fff;
	border: 0;
	border-radius: var(--drg-radius);
	cursor: pointer;
}

.drg-hero__search button:hover {
	background: var(--drg-band-fade);
}

.drg-hero__hint {
	margin: .8rem 0 0;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--drg-band-fade);
}

@media (max-width: 34rem) {
	.drg-hero__search {
		flex-direction: column;
	}

	.drg-hero__search button {
		width: 100%;
	}
}

/* ---------- صفحه‌ی اول: ردیف نشانه‌ها ----------
 * بیمار نام بیماری‌اش را نمی‌داند، نشانه‌اش را می‌داند. صفحه‌ی اول اگر
 * فقط «بیماری‌ها» و «ابزارهای تشخیص» بگوید، کسی که درد سینه دارد
 * نمی‌داند کجا کلیک کند.
 */

.drg-symptoms {
	padding-block: 1.6rem;
	background: var(--drg-bg-subtle);
	border-block-end: 1px solid var(--drg-border);
}

.drg-symptoms__title {
	margin: 0 0 .8rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--drg-text-muted);
}

.drg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drg-chips a {
	display: inline-block;
	padding: .35rem 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--drg-text);
	background: var(--drg-bg);
	border: 1px solid var(--drg-border);
	border-radius: 999px;
}

.drg-chips a:hover {
	color: var(--drg-red);
	border-color: var(--drg-red);
	text-decoration: none;
}

/* ---------- صفحه‌ی اول: بلوک‌های محتوا ---------- */

.drg-home {
	padding-block: 3rem 0;
}

.drg-home .drg-cols {
	margin-block-start: 0;
}

.drg-block + .drg-block {
	margin-block-start: 3.5rem;
}

.drg-block__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .3rem 1rem;
	margin-block-end: .5rem;
	padding-block-end: .6rem;
	border-block-end: 2px solid var(--drg-red);
}

.drg-block__title {
	margin: 0;
	font-size: 1.875rem;
	line-height: 1.5;
	font-weight: 700;
	text-wrap: balance;
}

.drg-block__more {
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
}

.drg-block__lede {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--drg-text-muted);
}

/*
 * مقالات به‌شکل فهرست، نه کارت. صفحه‌ی مقاله تقریباً بی‌کادر است و اگر
 * صفحه‌ی اول پر از کارت گرد باشد، دو زبان طراحی می‌شود.
 */
.drg-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.drg-list__row {
	display: block;
	padding-block: 1rem;
	color: var(--drg-text);
}

.drg-list__row:hover {
	text-decoration: none;
}

.drg-list__row:hover .drg-list__name {
	color: var(--drg-red);
}

.drg-list__name {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
}

.drg-list__desc {
	display: block;
	margin-block-start: .15rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--drg-text-muted);
}

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

.drg-sections {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
	margin-block-start: .75rem;
	background: var(--drg-border);
	border: 1px solid var(--drg-border);
	border-radius: var(--drg-radius);
	overflow: hidden;
}

.drg-sections__item {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: 1.1rem 1.15rem;
	background: var(--drg-bg);
	color: var(--drg-text);
}

.drg-sections__item:hover {
	background: var(--drg-red-tint);
	text-decoration: none;
}

.drg-sections__name {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.5;
}

.drg-sections__n {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--drg-text-muted);
}

/* ---------- صفحه‌ی اول: سلب مسئولیت ---------- */

.drg-disclaimer {
	padding-block: 2.25rem;
	margin-block-start: 4rem;
	background: var(--drg-bg-sunken);
	border-block-start: 1px solid var(--drg-border);
}

.drg-disclaimer__in {
	max-width: var(--drg-measure);
}

.drg-disclaimer h2 {
	margin: 0 0 .3rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.6;
}

.drg-disclaimer p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.8;
}

/* ---------------------------------------------------------------------------
 * پوسته — دکمه‌ها، بلوک‌های تصویری، پاصفحه، تب بازخورد
 *
 * اندازه‌ها از خود مایو کلینیک اندازه‌گیری شد، نه تخمین:
 *   دکمه و قرص → گردی ۲۴px کامل، بلندی ۵۲px
 *   فیلد جستجو → گردی کامل، خط مویی ۰٫۸px، بلندی ۴۸px
 *   قرص فعال   → زمینه سفید با متن تیره؛ غیرفعال → سفیدِ ۱۰٪ با متن سفید
 * ------------------------------------------------------------------------ */

/* ---------- دکمه‌ها ----------
 * چهار نقش، هر کدام یک معنی. قرصِ کامل است نه گوشه‌گردِ ۱۲px — تفاوتی
 * که در نسخه‌ی اول جا افتاده بود.
 */

.drg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 52px;
	padding-inline: 1.75rem;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.drg-btn:hover { text-decoration: none; }

.drg-btn--primary { background: var(--drg-red); color: #fff; }
.drg-btn--primary:hover { background: var(--drg-band-a); color: #fff; }

/* خط‌دار: زمینه شفاف با قاب یک‌پیکسلی. inset shadow به‌جای border تا
   اضافه شدن قاب، اندازه‌ی دکمه را تکان ندهد. */
.drg-btn--outline {
	background: transparent;
	color: var(--drg-red);
	box-shadow: inset 0 0 0 1px var(--drg-red);
}

.drg-btn--outline:hover { background: var(--drg-red-tint); color: var(--drg-red); }

.drg-btn--onband { background: #fff; color: var(--drg-band-a); }
.drg-btn--onband:hover { background: var(--drg-band-fade); color: var(--drg-band-a); }

/* دکمه‌ی جستجوی نوار قهرمان هم قرصی می‌شود. */
.drg-hero__search button {
	min-height: 52px;
	border-radius: 999px;
}

.drg-hero__search input {
	border-radius: 999px;
	padding-inline: 1.25rem;
}

/* فیلد جستجو: خط مویی، نه قاب ضخیم — همان ۰٫۸px مایو. */
.drg-search-field input {
	border-width: .8px;
	border-radius: 999px;
}

/* ---------- بلوک‌های تصویر + متن ----------
 * تصویر بزرگ یک طرف، تیتر و یک بند و دکمه‌ی خط‌دار طرف دیگر، و جهت
 * یکی‌درمیان عوض می‌شود.
 */

.drg-spotlight { padding-block: 4rem 0; }

.drg-feat {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 3.5rem;
	align-items: center;
}

.drg-feat + .drg-feat { margin-block-start: 4rem; }

.drg-feat:nth-of-type(even) .drg-feat__media { order: 2; }

.drg-feat__media {
	display: block;
	overflow: hidden;
	border-radius: var(--drg-radius);
	background: var(--drg-bg-subtle);
}

.drg-feat__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.drg-feat__kicker {
	margin: 0 0 .5rem;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.6;
	color: var(--drg-red);
}

.drg-feat__title {
	margin: 0 0 .6rem;
	font-size: clamp(1.6rem, 3.2vw, 2.1rem);
	line-height: 1.4;
	font-weight: 700;
	text-wrap: balance;
}

.drg-feat__title a { color: var(--drg-text); }
.drg-feat__title a:hover { color: var(--drg-red); text-decoration: none; }

.drg-feat__text {
	margin: 0 0 1.5rem;
	font-size: 1.1rem;
	line-height: 1.8;
	color: var(--drg-text-muted);
}

@media (max-width: 48rem) {
	.drg-feat { grid-template-columns: minmax(0, 1fr); }
	.drg-feat:nth-of-type(even) .drg-feat__media { order: 0; }
}

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

.ct-footer { display: none !important; }

.drg-foot {
	padding-block: 3rem 0;
	background: var(--drg-deep);
	color: #f0e4e4;
}

.drg-foot a { color: #f0e4e4; }
.drg-foot a:hover { color: #fff; }

.drg-foot__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2rem 2.5rem;
	padding-block-end: 2.5rem;
}

.drg-foot__col h2 {
	margin: 0 0 .9rem;
	padding-block-end: .6rem;
	border-block-end: 1px solid rgb(255 255 255 / 16%);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
}

.drg-foot__list {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drg-foot__list a { font-size: 1rem; line-height: 1.7; }

.drg-foot__n {
	margin-inline-start: .3rem;
	font-size: .9rem;
	color: #b9a2a5;
	font-variant-numeric: tabular-nums;
}

/*
 * خط اورژانس. پاصفحه جایی است که خواننده وقتی چیزی پیدا نکرده به آن
 * می‌رسد — پس مفیدترین چیزی که می‌تواند اینجا باشد همین شماره است.
 */
.drg-foot__sos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin: 0;
	padding: 1rem 1.15rem;
	background: rgb(255 255 255 / 7%);
	border-inline-start: 4px solid var(--drg-red-bright);
	border-radius: var(--drg-radius);
	font-size: 1rem;
	line-height: 1.7;
}

.drg-foot__sos b {
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.drg-foot__social {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.drg-foot__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: rgb(255 255 255 / 8%);
	border-radius: 999px;
}

.drg-foot__social a:hover { background: rgb(255 255 255 / 18%); }

.drg-foot__legal {
	padding-block: 1.25rem 2rem;
	border-block-start: 1px solid rgb(255 255 255 / 16%);
}

.drg-foot__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.25rem;
	margin: 0 0 .8rem;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}

.drg-foot__copy {
	margin: 0;
	font-size: .9rem;
	line-height: 1.8;
	color: #b9a2a5;
}

/* ---------- تب بازخورد ----------
 * مایو آن را به لبه‌ی راست می‌چسباند. در راست‌به‌چپ قرینه‌اش لبه‌ی چپ است
 * تا جلوی متن را نگیرد. روی موبایل برداشته می‌شود چون عرض کم است.
 */

.drg-feedback {
	position: fixed;
	inset-inline-start: 0;
	inset-block-end: 18vh;
	z-index: 40;
	padding: .9rem .5rem;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: var(--drg-red);
	border-start-end-radius: var(--drg-radius);
	border-end-end-radius: var(--drg-radius);
	writing-mode: vertical-rl;
	box-shadow: 0 4px 14px rgb(42 20 24 / 25%);
}

.drg-feedback:hover {
	background: var(--drg-band-a);
	color: #fff;
	text-decoration: none;
}

@media (max-width: 48rem) {
	.drg-feedback { display: none; }
}

/* ---------- آگاه‌سازی آرشیو خالی ----------
 * این بلوک ناخواسته در پاک‌سازی main.css حذف شده بود و آرشیو خالی
 * (پزشکان، اخبار) بی‌استایل می‌شد. از نسخه‌ی پیشین بازگردانده شد، با
 * دکمه‌ی قرصی هم‌شکل بقیه‌ی دکمه‌های سایت.
 */

.drg-empty {
	max-width: 34rem;
	margin: 0 auto 4rem;
	padding: 2rem;
	text-align: center;
	background: var(--drg-bg-subtle);
	border: 1px dashed var(--drg-border);
	border-radius: var(--drg-radius);
	color: var(--drg-text-muted);
}

.drg-empty__title {
	margin: 0 0 .5rem;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--drg-deep);
}

.drg-empty p {
	margin: 0 0 .5rem;
	line-height: var(--drg-leading-body);
}

.drg-empty__actions {
	margin-block-start: 1.25rem;
}

.drg-empty__actions a {
	display: inline-block;
	min-height: 52px;
	padding: .8rem 1.75rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: var(--drg-red);
	border-radius: 999px;
	text-decoration: none;
}

.drg-empty__actions a:hover {
	background: var(--drg-band-a);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * سربرگ — فونت و اندازه
 *
 * ریشه‌ی «منو خیلی ریز است» فونت بود نه اندازه. اندازه‌گیری روی سایت زنده:
 *
 *   .ct-menu-link  →  ۲۰px، وزن ۷۰۰، فونت ‎-apple-system/Segoe UI‎
 *   .site-title    →  ۲۵px، وزن ۸۰۰، همان فونت سیستم
 *   .drg-foot__list a → ۱۶px، وزن ۴۰۰، وزیرمتن
 *
 * یعنی منو از پاصفحه بزرگ‌تر بود ولی با فونت سیستم رندر می‌شد. فارسی در
 * Segoe UI باریک و جمع می‌نشیند، پس درشت‌تر بودنش هم نجاتش نمی‌داد. قالب
 * والد روی این دو عنصر فونت خودش را می‌گذارد و --drg-font هرگز به آن‌ها
 * نمی‌رسید.
 * ------------------------------------------------------------------------ */

/*
 * منو با همان فونت و اندازه‌ی منوی پاصفحه.
 *
 * وزن ۵۰۰ گرفته شده نه ۴۰۰ پاصفحه: منوی اصلی باید به‌عنوان ناوبری خوانده
 * شود، ولی ۷۰۰ قبلی با فونت درست بیش از حد سنگین می‌شد.
 */
.ct-menu-link,
.ct-header [class*='menu'] .ct-menu-link {
	font-family: var(--drg-font);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.7;
}

/*
 * نشان برند: فونت درست، و ۲۰٪ بزرگ‌تر (۲۵px → ۳۰px).
 *
 * قلبِ ::before با em اندازه گرفته شده، پس با بزرگ شدن فونت خودش هم
 * متناسب بزرگ می‌شود و نسبت‌ها به هم نمی‌ریزد.
 *
 * اندازه اینجا عدد ثابت است و مقدار سفارشی‌ساز را می‌پوشاند — اگر روزی
 * از «سفارشی‌سازی» اندازه‌ی عنوان سایت را عوض کردید، این خط برنده می‌شود
 * و باید همین را عوض کرد.
 */
.site-title,
.site-title a {
	font-family: var(--drg-font);
	font-size: 1.875rem;
}
/*
 * برش عکس پزشکان روی کارت‌های آرشیو.
 *
 * مسئله: عکس پزشکان پرتره است (۲۷۰×۳۰۰ رجایی، ۶۰۰×۶۰۰ مرکز قلب تهران)
 * ولی قالب مادر کادر کارت را ۴:۳ و پهن می‌گیرد. با object-fit: cover
 * این یعنی ۳۲٪ ارتفاع عکس بریده می‌شود و چون برش از مرکز است، ۱۶٪ از
 * *بالا* می‌رود — یعنی بالای سر. این را روی خود صفحه اندازه گرفتم.
 *
 * چاره: کادر را مربع می‌کنم. آن‌وقت افت ارتفاع از ۳۲٪ به ۱۰٪ می‌رسد و
 * عکس‌های مربعِ مرکز قلب تهران هیچ برشی نمی‌خورند. نقطه‌ی برش را هم به
 * بالا می‌کشم تا همان ۱۰٪ از پایینِ قاب برود، نه از سر.
 *
 * چرا !important: قالب مادر خودش `aspect-ratio: 4/3` را *درون‌خطی* روی
 * تگ عکس می‌نویسد. سبک درون‌خطی بر شیوه‌نامه‌ی بیرونی مقدم است، پس بی
 * !important این قاعده بی‌اثر است. اینجا !important راه‌حل تنبلی نیست،
 * تنها راه است.
 *
 * روی کلاس نوع مطلب سوار است نه روی آرشیو، تا هرجای دیگری هم کارت پزشک
 * نشان داده شد همین برش را داشته باشد.
 */
article.type-drg_doctor .ct-media-container img {
	aspect-ratio: 1 / 1 !important;
	object-position: 50% 15%;
}

/*
 * آرشیو فوق‌تخصص‌ها و انجمن‌ها: شبکه‌ی سه‌ستونه‌ی کارت.
 *
 * قالب مادر این آرشیوها را یک‌ستونه می‌داد (grid-template-columns: 1290px)
 * که برای صفحه‌های کوتاه، فهرستی بلند و خسته‌کننده می‌ساخت.
 *
 * سه کار اینجا انجام می‌شود:
 *
 * ۱. سه ستون. !important لازم است چون شمار ستون‌ها را قالب مادر از
 *    «سفارشی‌سازی» به‌صورت متغیرِ درون‌خطی می‌نویسد.
 *
 * ۲. عکس به بالای کارت می‌رود. کارت از قبل فلکسِ ستونی است، پس با order
 *    جابه‌جا می‌شود و به تغییر قالب نیاز نیست. بی این کار، عنوانِ
 *    دوخطی عکس را پایین می‌راند و عکس‌های یک ردیف هم‌تراز نمی‌شدند —
 *    اندازه گرفتم: فاصله‌ی بالای عکس‌ها در یک ردیف متفاوت بود و پس از
 *    این تغییر هر سه روی یک خط نشستند.
 *
 * ۳. نسبت ثابت ۱۶:۱۰ برای عکس و چسباندن متا به پایین کارت، تا ردیف‌ها
 *    منظم بمانند حتی وقتی طول عنوان و چکیده فرق دارد.
 */
body.post-type-archive-drg_fellowship .entries,
body.post-type-archive-drg_society .entries {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 32px;
}

body.post-type-archive-drg_fellowship article.type-drg_fellowship .ct-media-container,
body.post-type-archive-drg_society article.type-drg_society .ct-media-container {
	order: -1;
	margin-bottom: 18px;
}

body.post-type-archive-drg_fellowship article.type-drg_fellowship .ct-media-container img,
body.post-type-archive-drg_society article.type-drg_society .ct-media-container img {
	aspect-ratio: 16 / 10 !important;
}

body.post-type-archive-drg_fellowship article.type-drg_fellowship .entry-title,
body.post-type-archive-drg_society article.type-drg_society .entry-title {
	font-size: 1.25rem;
	line-height: 1.5;
}

/* متا پایین کارت می‌ماند تا کارت‌های یک ردیف ته‌یکسان شوند. */
body.post-type-archive-drg_fellowship article.type-drg_fellowship .entry-meta,
body.post-type-archive-drg_society article.type-drg_society .entry-meta {
	margin-top: auto;
}

@media (max-width: 1024px) {
	body.post-type-archive-drg_fellowship .entries,
	body.post-type-archive-drg_society .entries {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	body.post-type-archive-drg_fellowship .entries,
	body.post-type-archive-drg_society .entries {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/*
 * نشان انجمن‌ها، در بالای صفحه‌ی هر انجمن.
 *
 * مسئله: نسبت نشان‌ها بسیار متفاوت است — از ۱۹۱۸×۳۱۴ (نزدیک ۶ به ۱)
 * تا ۱۸۰×۱۸۰ مربع. اگر عرض را آزاد بگذاریم، نشانِ مربع غول‌پیکر می‌شود
 * و نشانِ پهن یک نوار باریک. پس *ارتفاع* را مهار می‌کنم نه عرض را:
 * هر نشان حداکثر ۸۸ پیکسل بلند می‌شود و عرضش خودش را پیدا می‌کند.
 *
 * پس‌زمینه‌ی روشن لازم است چون این نشان‌ها PNG با پس‌زمینه‌ی شفاف‌اند و
 * روی حالت تیره‌ی سایت، نوشتار تیره‌شان ناخوانا می‌شود.
 */
.drg-soclogo {
	margin: 0 0 1.6rem;
	padding: 1.1rem 1.3rem;
	background: #fff;
	border: 1px solid var(--drg-border, #e6ddd9);
	border-radius: var(--drg-radius, 10px);
	text-align: start;
}

.drg-soclogo img {
	width: auto;
	max-width: 100%;
	max-height: 88px;
	height: auto;
	object-fit: contain;
}

@media (max-width: 640px) {
	.drg-soclogo img {
		max-height: 64px;
	}
}

/*
 * کارتِ نشان‌دار در آرشیو انجمن‌ها.
 *
 * کلاس drg-logo-card را drghalb_mark_logo_cards() فقط به کارتی می‌دهد که
 * تصویر شاخصش نشانِ سازمان است. دلیل تفکیک: برش `cover` برای عکس درست
 * است و نشانِ پهن را می‌بُرد؛ `contain` برای نشان درست است و عکس پرتره
 * را نواری باریک می‌کند. هر کدام جای خودش.
 *
 * پس‌زمینه‌ی سفید لازم است چون نشان‌ها PNG شفاف‌اند و روی کارتِ کرم‌رنگ
 * یا حالت تیره، نوشتار تیره‌شان ناخوانا می‌شود.
 */
body.post-type-archive-drg_society article.drg-logo-card .ct-media-container {
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--drg-border, #ecdfdd);
	border-radius: var(--drg-radius, 12px);
}

body.post-type-archive-drg_society article.drg-logo-card .ct-media-container img {
	object-fit: contain !important;
	object-position: center !important;
}

/*
 * فهرست پزشکان روی صفحه‌ی فوق‌تخصص.
 *
 * این بخش را قالب می‌سازد نه متن صفحه، پس سرتیترش داخل جریان محتوا
 * نیست و فاصله‌ی بالایش را باید خودش بگیرد تا به بند آخر نچسبد.
 */
.drg-fellow-docs {
	margin-block-start: 2.5rem;
}

.drg-fellow-docs__list {
	margin-block-start: 0.75rem;
	padding-inline-start: 1.25rem;
}

.drg-fellow-docs__list li {
	margin-block-end: 0.4rem;
}

.drg-fellow-docs__where {
	color: var(--drg-text-muted, #7a6468);
	font-size: 0.95em;
}

/* ---------- فیلتر فهرست پزشکان ---------- */

.drg-docfilter {
	margin-block-end: 2rem;
	padding: 1.25rem;
	background: var(--drg-bg-subtle, #faf6f5);
	border: 1px solid var(--drg-border, #ecdfdd);
	border-radius: var(--drg-radius, 12px);
}

.drg-docfilter__title {
	margin: 0 0 0.9rem;
	font-size: 1.15rem;
}

.drg-docfilter__fields {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.drg-docfilter__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.9rem;
}

.drg-docfilter__field input {
	width: 100%;
	padding: 0.5rem 0.7rem;
	background: #fff;
	border: 1px solid var(--drg-border, #ecdfdd);
	border-radius: 8px;
	font: inherit;
	font-size: 0.95rem;
}

.drg-docfilter__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-block-start: 1rem;
}

/*
 * دکمه، نه فهرست کشویی: گزینه‌ها کم‌اند و با دکمه هم تعدادِ هر رشته
 * دیده می‌شود و هم یک کلیک کمتر لازم است.
 */
.drg-tag {
	padding: 0.35rem 0.75rem;
	background: #fff;
	border: 1px solid var(--drg-border, #ecdfdd);
	border-radius: 999px;
	color: var(--drg-text, #2d2020);
	cursor: pointer;
	font: inherit;
	font-size: 0.88rem;
	line-height: 1.6;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.drg-tag:hover {
	border-color: var(--drg-red, #c0392b);
}

.drg-tag.is-active {
	background: var(--drg-red, #c0392b);
	border-color: var(--drg-red, #c0392b);
	color: #fff;
}

.drg-tag__n {
	opacity: 0.65;
	font-size: 0.85em;
}

.drg-docfilter__status {
	margin: 0.9rem 0 0;
	color: var(--drg-text-muted, #7a6468);
	font-size: 0.9rem;
}

.drg-docfilter__empty {
	margin: 0.5rem 0 0;
	font-size: 0.95rem;
}

/* ---------- دعوت از پزشکان و مراکز ---------- */

.drg-invite {
	margin-block-start: 2.5rem;
	padding: 1.4rem;
	background: var(--drg-red-tint, #fdf3f1);
	border: 1px solid var(--drg-border, #ecdfdd);
	border-radius: var(--drg-radius, 12px);
}

.drg-invite__title {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
}

.drg-invite__what {
	margin-block-end: 0.4rem;
	font-weight: 600;
}

.drg-invite ul {
	margin: 0 0 1rem;
	padding-inline-start: 1.25rem;
}

.drg-invite li {
	margin-block-end: 0.3rem;
}

.drg-invite__btn {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	background: var(--drg-red, #c0392b);
	border-radius: 8px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.drg-invite__alt {
	margin-inline-start: 0.6rem;
	font-size: 0.93rem;
}

.drg-invite__note {
	margin-block-end: 0;
	color: var(--drg-text-muted, #7a6468);
	font-size: 0.9em;
}

/* ---------- نوار مشخصات مرکز ---------- */

.drg-cprofile {
	margin-block-end: 1.75rem;
	padding: 1.1rem 1.25rem;
	background: var(--drg-bg-subtle, #faf6f5);
	border: 1px solid var(--drg-border, #ecdfdd);
	border-radius: var(--drg-radius, 12px);
}

.drg-cprofile__title {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}

.drg-cprofile__grid {
	display: grid;
	gap: 0.75rem 1.5rem;
	margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.drg-cprofile__item dt {
	margin-block-end: 0.15rem;
	color: var(--drg-text-muted, #7a6468);
	font-size: 0.88rem;
}

.drg-cprofile__item dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.drg-cprofile__n {
	color: var(--drg-red, #c0392b);
	font-size: 1.3rem !important;
}

.drg-cprofile__none {
	color: var(--drg-text-muted, #7a6468);
	font-weight: 500;
}

.drg-cprofile__note {
	margin: 0.85rem 0 0;
	color: var(--drg-text-muted, #7a6468);
	font-size: 0.87rem;
	line-height: 1.7;
}