/* ============================================================================
   Blog_Page.css — فهرستِ خواندنی‌ها و صفحه‌ی مقاله
   مسیر روی سرور: public_html/Blog_Page/Blog_Page.css

   فقط بلاگ. پوسته (هدر، فوتر، کشو، نوارِ پایین) از Home_Page.css می‌آید و
   اینجا هیچ‌کدامشان بازنویسی نمی‌شوند.

   ── از کجا آمد ─────────────────────────────────────────────────────────
   اعداد از دو جای آزموده گرفته شده‌اند، نه از سلیقه:

   • ریتمِ متن از ‎@tailwindcss/typography‎ (کلاسِ prose): پاراگراف ‎1.25em‎،
     h2 با ‎2em‎ بالا و ‎1em‎ پایین، h3 با ‎1.6em‎/‎0.6em‎، فهرست با
     ‎1.625em‎ تورفتگی، تصویر و نقل‌قول ‎2em‎، خطِ جداکننده ‎3em‎.
   • چیدمانِ کارت و ترتیبِ اجزا از پوسته‌ی Casper (پیش‌فرضِ Ghost).

   ⚠ سه عدد عمداً با Tailwind فرق دارند:

   ۱) ‎line-height‎ به‌جای ‎1.75‎ شد ‎1.9‎ — وزیرمتن کشیدگیِ افقی دارد و
      حرف‌های زیرخطی (ج چ ح خ) با ۱.۷۵ به سطرِ بعد می‌چسبند.

   ۲) ⛔ **این سایت `html { zoom: .8 }` دارد.** اندازه‌گیریِ زنده روی همین
      صفحه: ‎getComputedStyle‎ برای ‎1.0625rem‎ عدد ‎17px‎ می‌دهد ولی جعبه‌ی
      واقعیِ حرف روی صفحه ‎13.6px‎ درمی‌آید و ستونِ ‎44rem‎ به ‎563px‎ می‌رسد.
      یعنی هر عددی که اینجا بنویسی، ۲۰٪ کوچک‌تر دیده می‌شود.
      برای متنِ بلند این فاجعه است، پس اعداد از پیش تقسیم بر ‎0.8‎ شده‌اند:
      ‎1.33rem‎ روی صفحه ‎≈17px‎ می‌شود و ‎53rem‎ می‌شود ‎≈678px‎.
      ⚠ اگر روزی آن zoom برداشته شد، این سه عدد باید برگردند سرِ جای اولشان.
      (زوم فقط روی فروشگاه است، نه روی سامانه.)

   ۳) ستونِ متن معادلِ ‎65ch‎ تنظیم شد ولی با حسابِ همان زوم — نه ‎44rem‎ خام،
      که روی صفحه ستونی به پهنای ۳۳ نویسه می‌ساخت.

   ── چهار دسته‌ی دستگاه ─────────────────────────────────────────────────
   پایه(۰) · تبلت(۷۶۸) · لپ‌تاپ(۱۲۸۰) · نمایشگر بزرگ(۱۶۰۰)
   پله‌های کمکیِ مجاز: ۶۴۰ و ۱۰۲۴. ⛔ پله‌ی خودسر ساخته نشود.
   ← Memory/ganjdanesh-four-device-classes.md
   ========================================================================= */

/* ══════════════════ ۱. فهرست ══════════════════ */

.gd-blogx .gd-section__h1 { margin-block: var(--gd-space-2) var(--gd-space-1); }

/* ---------- تب‌های دسته ----------
   ریلِ افقیِ اسکرول‌شونده روی موبایل به‌جای شکستنِ چند سطری: با هفت دسته،
   سه سطر تب بالای صفحه یعنی محتوا از تاشدگی بیرون می‌افتد. */
.gd-btabs {
    display: flex;
    gap: var(--gd-space-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: var(--gd-space-2);
    margin-block-end: var(--gd-space-5);
    border-block-end: 1px solid var(--gd-line-subtle);
}
.gd-btabs::-webkit-scrollbar { display: none; }

.gd-btabs__opt {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    /* ۴۴px کفِ ناحیه‌ی لمسی. اندازه‌گیریِ زنده روی ۳۷۵px: بدون این خط
       تب‌ها **۴۱px** درمی‌آمدند — و این‌ها ناوبریِ اصلیِ بلاگ روی موبایل‌اند.
       صفحه‌بندی از اول همین کف را داشت؛ تب‌ها جا مانده بودند. */
    min-height: 44px;
    gap: var(--gd-space-2);
    padding: var(--gd-space-2) var(--gd-space-4);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-full);
    background: var(--gd-surface);
    color: var(--gd-ink);
    font-size: var(--gd-text-sm);
    text-decoration: none;
    transition: background var(--gd-dur-fast) var(--gd-ease),
                border-color var(--gd-dur-fast) var(--gd-ease);
}
.gd-btabs__opt:hover { background: var(--gd-surface-hover); border-color: var(--gd-line-strong); }
.gd-btabs__opt.is-active {
    background: var(--gd-primary);
    border-color: var(--gd-primary);
    color: var(--gd-on-primary);
}
.gd-btabs__n {
    font-family: var(--gd-font-num);
    font-size: var(--gd-text-2xs);
    opacity: .75;
}

/* ---------- شبکه ---------- */
.gd-bgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gd-grid-gap);
}
.gd-bfeat { margin-block-end: var(--gd-grid-gap); }

/* ---------- کارتِ مقاله ----------
   کلِ کارت یک لینک است، نه عنوانِ داخلش: ناحیه‌ی لمسیِ بزرگ‌تر و یک توقفِ
   Tab به‌جای سه. ترتیب — تصویر ← دسته ← عنوان ← چکیده ← پاورقی — از Casper. */
.gd-acard {
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
    overflow: hidden;
    transition: border-color var(--gd-dur-fast) var(--gd-ease),
                box-shadow var(--gd-dur-fast) var(--gd-ease),
                transform var(--gd-dur-fast) var(--gd-ease);
}
.gd-acard:hover {
    border-color: var(--gd-primary-border);
    box-shadow: var(--gd-shadow-2);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .gd-acard:hover { transform: translateY(-2px); }
}
.gd-acard:focus-within { outline: var(--gd-focus-ring); outline-offset: 2px; }

.gd-acard__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.gd-acard__link:focus-visible { outline: none; }

.gd-acard__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--gd-surface-sunken);
    overflow: hidden;
}
.gd-acard__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--gd-dur-slow) var(--gd-ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .gd-acard:hover .gd-acard__media img { transform: scale(1.04); }
}
.gd-acard__ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: var(--gd-ink-disabled);
    font-size: var(--gd-text-2xl);
}

.gd-acard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--gd-space-2);
    padding: var(--gd-space-4);
}
.gd-acard__cat {
    align-self: flex-start;
    font-size: var(--gd-text-2xs);
    color: var(--gd-primary);
    font-weight: var(--gd-fw-medium);
}
.gd-acard__title {
    margin: 0;
    font-size: var(--gd-text-md);
    font-weight: var(--gd-fw-bold);
    line-height: var(--gd-lh-snug);
    /* سه سطر سقف: عنوانِ بلندتر ارتفاعِ کارت‌های یک ردیف را از هم می‌اندازد */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gd-acard__excerpt {
    margin: 0;
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
    color: var(--gd-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* پاورقی همیشه ته کارت می‌چسبد تا تاریخِ همه‌ی کارت‌های یک ردیف روی یک خط
   بنشیند — همان قاعده‌ای که برای قیمتِ کارتِ کالا گذاشته شد. */
.gd-acard__meta {
    display: flex;
    align-items: center;
    gap: var(--gd-space-3);
    margin-block-start: auto;
    padding-block-start: var(--gd-space-2);
    font-size: var(--gd-text-2xs);
    color: var(--gd-muted);
}
.gd-acard__meta time { font-family: var(--gd-font-num); }
.gd-acard__mins { display: inline-flex; align-items: center; gap: var(--gd-space-1); }

/* کارتِ کوچکِ بلوکِ «بیشتر بخوانید» */
.gd-acard--sm .gd-acard__media { aspect-ratio: 3 / 2; }
.gd-acard--sm .gd-acard__title { font-size: var(--gd-text-sm); -webkit-line-clamp: 2; }

/* ---------- حالتِ خالی ---------- */
.gd-bempty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gd-space-4);
    padding: var(--gd-space-16) var(--gd-space-4);
    text-align: center;
    color: var(--gd-muted);
    background: var(--gd-surface-soft);
    border: 1px dashed var(--gd-line);
    border-radius: var(--gd-radius-lg);
}
.gd-bempty i { font-size: var(--gd-text-4xl); color: var(--gd-ink-disabled); }
.gd-bempty p { margin: 0; }

/* ---------- صفحه‌بندی ---------- */
.gd-bpager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gd-space-2);
    margin-block-start: var(--gd-space-8);
}
.gd-bpager a {
    min-width: 44px;              /* حداقلِ ناحیه‌ی لمسی */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gd-space-1);
    padding-inline: var(--gd-space-3);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-sm);
    background: var(--gd-surface);
    color: var(--gd-ink);
    font-family: var(--gd-font-num);
    text-decoration: none;
}
.gd-bpager a:hover { background: var(--gd-surface-hover); }
.gd-bpager a.is-active {
    background: var(--gd-primary);
    border-color: var(--gd-primary);
    color: var(--gd-on-primary);
}

/* ══════════════════ ۲. صفحه‌ی مقاله ══════════════════ */

.gd-article { padding-block: var(--gd-section-y); }

.gd-article__head {
    max-width: 53rem;   /* ~678px on screen after the .8 zoom */
    margin-inline: auto;
    text-align: center;
}
.gd-article__head .gd-crumb { justify-content: center; }

.gd-article__tag {
    display: inline-block;
    margin-block-start: var(--gd-space-4);
    color: var(--gd-primary);
    font-size: var(--gd-text-sm);
    font-weight: var(--gd-fw-medium);
    text-decoration: none;
}
.gd-article__tag:hover { text-decoration: underline; }

.gd-article__title {
    margin-block: var(--gd-space-3) 0;
    font-size: var(--gd-text-3xl);
    font-weight: var(--gd-fw-bold);
    line-height: var(--gd-lh-tight);
    text-wrap: balance;   /* عنوانِ دو سطری با یک کلمه در سطرِ دوم زشت است */
}
.gd-article__lead {
    margin-block: var(--gd-space-4) 0;
    font-size: var(--gd-text-lg);
    line-height: var(--gd-lh-relaxed);
    color: var(--gd-muted);
}

.gd-article__byline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gd-space-2) var(--gd-space-5);
    margin-block-start: var(--gd-space-5);
    font-size: var(--gd-text-xs);
    color: var(--gd-muted);
}
.gd-article__byline > * { display: inline-flex; align-items: center; gap: var(--gd-space-2); }
.gd-article__byline time { font-family: var(--gd-font-num); }

/* تصویرِ شاخص: پهن‌تر از ستونِ متن ولی نه تمام‌عرض — همان کاریِ که Casper
   با gh-canvas می‌کند. نسبت ۲:۱ تا روی موبایل نصفِ صفحه را نخورد. */
.gd-article__cover {
    max-width: 75rem;   /* ~960px on screen */
    margin: var(--gd-space-8) auto 0;
    border-radius: var(--gd-radius-lg);
    overflow: hidden;
    background: var(--gd-surface-sunken);
}
.gd-article__cover img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.gd-article__wrap {
    max-width: 53rem;   /* ~678px on screen after the .8 zoom */
    margin-inline: auto;
    margin-block-start: var(--gd-space-10);
}

/* ---------- فهرستِ مطالب ---------- */
.gd-toc {
    padding: var(--gd-space-4) var(--gd-space-5);
    margin-block-end: var(--gd-space-8);
    background: var(--gd-surface-soft);
    border: 1px solid var(--gd-line-subtle);
    border-radius: var(--gd-radius);
}
.gd-toc__title {
    margin: 0 0 var(--gd-space-2);
    font-size: var(--gd-text-sm);
    font-weight: var(--gd-fw-bold);
    color: var(--gd-muted);
}
.gd-toc ol {
    margin: 0;
    padding-inline-start: var(--gd-space-5);
    font-size: var(--gd-text-md);
    line-height: 2;
    list-style: decimal;
    list-style-type: persian;
}
.gd-toc a { color: var(--gd-ink); text-decoration: none; }
.gd-toc a:hover { color: var(--gd-primary); text-decoration: underline; }

/* ---------- متنِ مقاله ----------
   این تنها جای سایت است که HTMLِ نوشته‌شده به دستِ سردبیر رندر می‌شود، پس
   استایل به همین ظرف بسته است و بیرون نمی‌ریزد. */
.gd-prose {
    font-size: 1.33rem;     /* = 1.0625rem ÷ 0.8 — روی صفحه ۱۷px دیده می‌شود */
    line-height: 1.9;
    color: var(--gd-ink);
    overflow-wrap: break-word;
}
.gd-prose > :first-child { margin-block-start: 0; }
.gd-prose > :last-child  { margin-block-end: 0; }

.gd-prose p  { margin-block: 1.25em; }
.gd-prose h2 {
    margin-block: 2em 1em;
    font-size: 1.5em;
    line-height: var(--gd-lh-snug);
    font-weight: var(--gd-fw-bold);
    scroll-margin-block-start: var(--gd-space-20);   /* لنگرِ #h-1 زیرِ هدرِ چسبان نرود */
}
.gd-prose h3 { margin-block: 1.6em .6em; font-size: 1.25em;  line-height: var(--gd-lh-snug); font-weight: var(--gd-fw-bold); }
.gd-prose h4 { margin-block: 1.5em .5em; font-size: 1.0625em; line-height: var(--gd-lh-normal); font-weight: var(--gd-fw-bold); }
.gd-prose h5 { margin-block: 1.5em .5em; font-size: 1em; font-weight: var(--gd-fw-bold); color: var(--gd-muted); }

.gd-prose ul,
.gd-prose ol { margin-block: 1.25em; padding-inline-start: 1.625em; }
.gd-prose li { margin-block: .5em; }
.gd-prose li > ul,
.gd-prose li > ol { margin-block: .75em; }
.gd-prose ul { list-style: disc; }
/* شماره‌ی فهرست هم فارسی، وگرنه وسطِ متنِ فارسی «1. 2. 3.» لاتین می‌ماند.
   `persian` یک سبکِ شمارشِ از پیش‌تعریف‌شده‌ی CSS است، نه چیزی که ما ساخته
   باشیم؛ `decimal` تهِ خط برای مرورگرِ قدیمی. */
.gd-prose ol { list-style: decimal; list-style-type: persian; }

.gd-prose a {
    color: var(--gd-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gd-prose a:hover { color: var(--gd-primary-hover); }

.gd-prose strong, .gd-prose b { font-weight: var(--gd-fw-bold); }

/* نقل‌قول: نوارِ رنگی سمتِ شروعِ متن — با خاصیتِ منطقی، تا در RTL خودش
   راست بیفتد و در LTR چپ. border-left در سایتِ راست‌چین اشتباهِ کلاسیک است. */
.gd-prose blockquote {
    margin-block: 2em;
    margin-inline: 0;
    padding-inline-start: 1em;
    border-inline-start: 3px solid var(--gd-primary);
    color: var(--gd-muted);
    font-style: normal;   /* ایتالیکِ فارسی وجود ندارد؛ مرورگر آن را کج می‌کشد و بد می‌شود */
}

.gd-prose img,
.gd-prose figure { margin-block: 2em; }
.gd-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--gd-radius);
}
.gd-prose figure { margin-inline: 0; }
.gd-prose figcaption {
    margin-block-start: var(--gd-space-2);
    font-size: var(--gd-text-xs);
    color: var(--gd-muted);
    text-align: center;
}

.gd-prose hr {
    margin-block: 3em;
    border: 0;
    border-block-start: 1px solid var(--gd-line);
}

.gd-prose code {
    font-size: .875em;
    font-family: var(--gd-font-num), monospace;
    background: var(--gd-surface-sunken);
    padding: .15em .4em;
    border-radius: var(--gd-radius-sm);
    direction: ltr;
    unicode-bidi: embed;
}
.gd-prose pre {
    margin-block: 1.714em;
    padding: var(--gd-space-4);
    font-size: .875em;
    line-height: 1.714;
    background: var(--gd-gray-900);
    color: var(--gd-gray-50);
    border-radius: var(--gd-radius);
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}
.gd-prose pre code { background: none; padding: 0; color: inherit; }

/* جدول در مقاله باید داخلِ خودش اسکرول بخورد، وگرنه کلِ صفحه افقی می‌شود */
.gd-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-block: 2em;
    font-size: var(--gd-text-md);
}
.gd-prose th,
.gd-prose td {
    padding: var(--gd-space-2) var(--gd-space-3);
    border: 1px solid var(--gd-line);
    text-align: start;
}
.gd-prose th { background: var(--gd-surface-soft); font-weight: var(--gd-fw-bold); }

/* ---------- پرسش‌های پرتکرار ---------- */
.gd-article__faq { margin-block-start: var(--gd-space-12); }
.gd-article__faq h2 {
    font-size: var(--gd-text-xl);
    margin-block-end: var(--gd-space-4);
}
.gd-article__faqitem {
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    margin-block-end: var(--gd-space-2);
    background: var(--gd-surface);
}
.gd-article__faqitem summary {
    cursor: pointer;
    padding: var(--gd-space-4);
    font-weight: var(--gd-fw-medium);
    list-style: none;
}
.gd-article__faqitem summary::-webkit-details-marker { display: none; }
.gd-article__faqitem summary::after {
    content: "\f107";                       /* fa-angle-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    float: inline-end;
    color: var(--gd-muted);
    transition: transform var(--gd-dur-fast) var(--gd-ease);
}
.gd-article__faqitem[open] summary::after { transform: rotate(180deg); }
.gd-article__faqitem > div {
    padding: 0 var(--gd-space-4) var(--gd-space-4);
    color: var(--gd-muted);
    line-height: var(--gd-lh-relaxed);
}

/* ---------- هم‌رسانی ---------- */
.gd-article__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gd-space-3);
    margin-block-start: var(--gd-space-10);
    padding-block-start: var(--gd-space-5);
    border-block-start: 1px solid var(--gd-line-subtle);
    font-size: var(--gd-text-sm);
    color: var(--gd-muted);
}
.gd-share__btn {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-full);
    background: var(--gd-surface);
    color: var(--gd-ink);
    font-size: var(--gd-text-lg);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--gd-dur-fast) var(--gd-ease);
}
.gd-share__btn:hover { background: var(--gd-surface-hover); color: var(--gd-primary); }
.gd-share__btn.is-done { color: var(--gd-success); border-color: var(--gd-success); }

/* ---------- قبلی و بعدی ---------- */
.gd-article__nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gd-space-3);
    margin-block-start: var(--gd-space-8);
}
.gd-article__nav a {
    display: flex;
    flex-direction: column;
    gap: var(--gd-space-1);
    padding: var(--gd-space-4);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    background: var(--gd-surface);
    color: var(--gd-ink);
    text-decoration: none;
}
.gd-article__nav a:hover { border-color: var(--gd-primary-border); background: var(--gd-surface-hover); }
.gd-article__nav span   { font-size: var(--gd-text-2xs); color: var(--gd-muted); }
.gd-article__nav strong { font-size: var(--gd-text-md); font-weight: var(--gd-fw-medium); line-height: var(--gd-lh-snug); }
.gd-article__nav-next   { text-align: end; }

/* ---------- بلوک‌های پایینِ صفحه ---------- */
.gd-arel { background: var(--gd-surface-soft); }

/* ══════════════════ ۳. چهار دسته‌ی دستگاه ══════════════════ */

/* --- تبلت: دو ستون، و کارتِ شاخص افقی می‌شود --- */
@media (min-width: 768px) {
    .gd-bgrid { grid-template-columns: repeat(2, 1fr); }

    .gd-acard--lead .gd-acard__link { flex-direction: row; }
    .gd-acard--lead .gd-acard__media { flex: 0 0 55%; aspect-ratio: 16 / 10; }
    .gd-acard--lead .gd-acard__body  { padding: var(--gd-space-6); justify-content: center; }
    .gd-acard--lead .gd-acard__title { font-size: var(--gd-text-xl); -webkit-line-clamp: 2; }
    .gd-acard--lead .gd-acard__excerpt { -webkit-line-clamp: 3; font-size: var(--gd-text-md); }

    .gd-article__nav { grid-template-columns: 1fr 1fr; }
}

/* --- لپ‌تاپ: سه ستون --- */
@media (min-width: 1280px) {
    .gd-bgrid { grid-template-columns: repeat(3, 1fr); }
    .gd-acard--lead .gd-acard__media { flex: 0 0 60%; }
}

/* --- نمایشگر بزرگ: چهار ستون، و ستونِ متن یک پله پهن‌تر ---
   ⚠ فقط ستونِ متن پهن‌تر می‌شود، نه اندازه‌ی قلم: خواندن روی نمایشگرِ بزرگ
     از فاصله‌ی بیشتری انجام می‌شود و بزرگ کردنِ قلم آن را بدتر می‌کند. 

   zoom-lint: ok — ۱۶۰۰ عمدی است و پیشنهادِ ابزار (۱۲۸۰) اینجا غلط است:
   ۱۲۸۰ همین بالا (خط ۵۵۷) از قبل یک پله‌ی دیگر است، پس منتقل کردنِ
   این بلوک به ۱۲۸۰ دو قاعده‌ی هم‌عرض می‌سازد و چهارستونی را ۳۲۰ پیکسل
   زودتر روشن می‌کند — دقیقاً خلافِ همین یادداشتی که بالا نوشته شده. */
/* zoom-lint: ok — ۱۲۸۰ بالاتر از قبل یک پله‌ی دیگر است؛ منتقل کردن چهارستونی را ۳۲۰px زودتر روشن می‌کند. */
@media (min-width: 1600px) {
    /* ⛔ این‌جا اول `repeat(4, 1fr)` بود و غلط بود: کانتینر در ۱۲۸۰ و
       ۱۶۰۰ دقیقاً یک پهنا دارد (۱۳۹۲px)، پس ستونِ چهارم پهنای تازه نمی‌آورد —
       فقط همان پهنا را ریزتر خرد می‌کند. اندازه‌گیریِ زنده:

           ۱۲۸۰ → ۳ ستون، کارت ۴۴۸px
           ۱۶۰۰ → ۴ ستون، کارت ۳۳۰px   ← نمایشگرِ بزرگ‌تر، کارتِ کوچک‌تر

       ⚠ و کفِ `minmax` اول ۳۰۰px گذاشتم که **باز هم ۴ ستون داد** — چون
         ۱۳۹۲ جای چهار تای ۳۰۰ را دارد. کف باید همان پهنایی باشد که
         پله‌ی ۱۲۸۰ ثابت کرده خوب است، نه یک عددِ دلخواه.

       با ۳۸۰px: در ۱۳۹۲ سه ستون می‌ماند؛ ستونِ چهارم فقط وقتی
       می‌آید که کانتینر واقعاً از ~۱۶۰۰px رد شود. اگر روزی `--gd-container`
       در این پله پهن‌تر شد، بدون دست زدن به این فایل خودش چهارستونی می‌شود.

       ⚠ عددها CSS px اند (پیش از zoom ۰.۸)؛ روی صفحه ۲۰٪ کوچک‌تر دیده
         می‌شوند. getBoundingClientRect پس‌اززوم می‌دهد و getComputedStyle پیش‌اززوم —
         یک بار همین دو را قاطی کردم و نتیجه گرفتم «کانتینر عوض نمی‌شود». */
    .gd-bgrid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
    .gd-article__head,
    .gd-article__wrap { max-width: 58rem; }
    .gd-article__cover { max-width: 85rem; }
}

/* --- چاپ: فقط متن. هدر، فوتر، تب‌ها، هم‌رسانی و ناوبری روی کاغذ بی‌معنی‌اند --- */
@media print {
    .gd-btabs, .gd-article__share, .gd-article__nav, .gd-arel { display: none !important; }
    .gd-article__wrap, .gd-article__head { max-width: none; }
    .gd-prose { font-size: 11pt; line-height: 1.7; }
    /* تنها رنگِ خامِ این فایل بود؛ توکن در چاپ هم حل می‌شود. */
    .gd-prose a::after { content: " (" attr(href) ")"; font-size: .8em; color: var(--gd-muted); }
}