/* ==========================================================================
   Apex Fx — وبلاگ
   ==========================================================================
   همه‌ی کلاس‌ها با `blg-` شروع می‌شوند تا هیچ‌کدام با سیستمِ مشترکِ `pub-*`
   یا استایل‌های داخلِ base.html تداخل نکنند. این فایل فقط در دو صفحه‌ی
   وبلاگ بارگذاری می‌شود.

   رنگ‌ها همان متغیرهای سایت‌اند (`--pub-*`)، پس تغییرِ پوسته‌ی روشن/تیره
   خودبه‌خود اینجا هم اعمال می‌شود و رنگ‌بندیِ سایت دست‌نخورده می‌ماند.

   یک نکته‌ی تکرارشونده در کلِ فایل: سبزِ `#10b981` روی پس‌زمینه‌ی روشن
   نسبتِ کنتراستِ حدود ۲٫۵ دارد که برای متن قابل قبول نیست؛ هرجا سبز
   *متن* باشد، در پوسته‌ی روشن به `#047857` (حدود ۴٫۶) عوض می‌شود.
   ========================================================================== */

.blg {
    --blg-radius: 18px;
    --blg-radius-sm: 12px;
    --blg-line: var(--pub-border);
    --blg-card: var(--pub-surface);
    --blg-ink: var(--pub-text);
    --blg-muted: var(--pub-text-muted);
    --blg-green: #10b981;
    --blg-green-ink: #10b981;      /* سبز وقتی *متن* است */
    --blg-green-soft: rgba(16, 185, 129, 0.12);
    --blg-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
    --blg-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.38);
}


/* --------------------------------------------------------------------------
   سبزِ «دکمه‌دار»
   --------------------------------------------------------------------------
   متنِ سفید روی سبزِ روشنِ سایت (#10b981) نسبتِ کنتراستِ ۲٫۶ می‌دهد که برای
   متنِ کوچک زیرِ حدِ خوانایی است. هرجا *متنِ سفید* روی سبز می‌نشیند از این
   گرادیانِ عمیق‌تر استفاده می‌کنیم (۵٫۵ تا ۷)؛ همان خانواده‌ی رنگی است، فقط
   یک پله تیره‌تر. دکمه‌های بدونِ متن (فلشِ جستجو، بازگشت به بالا) همان سبزِ
   روشن را نگه می‌دارند چون آنجا مسئله‌ی خوانایی مطرح نیست.
   -------------------------------------------------------------------------- */
.blg { --blg-btn: linear-gradient(135deg, #047857, #036249); }

body.light-mode .blg {
    --blg-green-ink: #047857;
    --blg-green-soft: rgba(4, 120, 87, 0.09);
    --blg-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
    --blg-shadow-lift: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.blg {
    padding: 5.5rem 1.25rem 4rem;
    color: var(--blg-ink);
    background:
        radial-gradient(circle at 12% 4%, var(--pub-glow), transparent 38%),
        radial-gradient(circle at 88% 96%, var(--pub-glow), transparent 42%);
}

.blg__wrap {
    max-width: 1240px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   بازنشانیِ لازم
   --------------------------------------------------------------------------
   `base.html` سلکتورِ عریانِ `header { }` را استایل می‌دهد (چون هدرِ اصلیِ
   سایت همان تگ است): `display:flex`، `position:fixed`، `backdrop-filter`
   و... . هر `<header>`ای که داخلِ مقاله بنویسیم همان‌ها را می‌گیرد و
   چیدمانش به‌هم می‌ریزد — سربرگِ وبلاگ دقیقاً به همین دلیل یک‌بار افقی
   رندر شد. به‌جای پرهیز از تگِ معنایی، اینجا صریح خنثی‌اش می‌کنیم.
   -------------------------------------------------------------------------- */
.blg header,
.blg-hero,
.blg-head {
    position: static;
    display: block;
    width: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: auto;
}

/* ==========================================================================
   ۱) سربرگِ آرشیو
   ========================================================================== */
.blg .blg-hero {
    position: relative;
    padding: 2.2rem 1.75rem;
    margin-bottom: 2rem;
    border: 1px solid var(--blg-line);
    border-radius: var(--blg-radius);
    background:
        linear-gradient(135deg, var(--blg-green-soft), transparent 55%),
        var(--blg-card);
    overflow: hidden;
}

/* خطِ سبزِ بالای کارت — امضای بصریِ ثابتِ سایت */
.blg-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--blg-green), transparent);
}

.blg-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--blg-green-ink);
    background: var(--blg-green-soft);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    margin-bottom: 0.85rem;
}

.blg-hero__title {
    margin: 0 0 0.55rem;
    font-size: clamp(1.6rem, 3.4vw, 2.35rem);
    font-weight: 800;
    line-height: 1.35;
}

.blg-hero__title span { color: var(--blg-green-ink); }

.blg-hero__sub {
    margin: 0;
    max-width: 62ch;
    font-size: 0.98rem;
    line-height: 2;
    color: var(--blg-muted);
}

.blg-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.35rem;
}

/* جستجو ------------------------------------------------------------------ */
.blg-search {
    position: relative;
    /* عمداً کش نمی‌آید: یک کادرِ جستجوی ۷۰۰ پیکسلی در دسکتاپ بی‌قواره است و
       دکمه‌ی ارسال را از متن دور می‌اندازد. */
    flex: 0 1 380px;
    min-width: 0;
}

.blg-hero__row > :last-child { margin-inline-start: auto; }

.blg-search input {
    width: 100%;
    padding: 0.78rem 2.7rem 0.78rem 2.7rem;
    font: inherit;
    font-size: 0.92rem;
    color: var(--blg-ink);
    background: var(--pub-surface-2);
    border: 1px solid var(--blg-line);
    border-radius: 999px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blg-search input::placeholder { color: var(--blg-muted); }

.blg-search input:focus {
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 0 0 3px var(--blg-green-soft);
}

.blg-search__icon {
    position: absolute;
    inset-inline-start: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blg-muted);
    pointer-events: none;
    font-size: 0.9rem;
}

.blg-search__go {
    position: absolute;
    inset-inline-end: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--blg-green), var(--pub-accent));
    transition: transform 0.2s ease;
}

.blg-search__go:hover { transform: translateY(-50%) scale(1.06); }

.blg-hero__count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blg-muted);
    white-space: nowrap;
}

.blg-hero__rss {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--blg-muted);
    border: 1px solid var(--blg-line);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.blg-hero__rss:hover {
    color: var(--blg-green-ink);
    border-color: rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   ۲) نوارِ دسته‌ها
   ========================================================================== */
.blg-chips {
    display: flex;
    gap: 0.55rem;
    margin-bottom: 1.8rem;
    padding-bottom: 0.4rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.35) transparent;
    -webkit-overflow-scrolling: touch;
}

.blg-chips::-webkit-scrollbar { height: 5px; }
.blg-chips::-webkit-scrollbar-track { background: transparent; }
.blg-chips::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.35);
    border-radius: 50px;
}

.blg-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    color: var(--blg-muted);
    background: var(--blg-card);
    border: 1px solid var(--blg-line);
    border-radius: 999px;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.blg-chip:hover {
    color: var(--blg-ink);
    border-color: rgba(16, 185, 129, 0.35);
}

.blg-chip.is-active {
    color: #fff;
    background: var(--blg-btn);
    border-color: transparent;
}

/* عددِ کنارِ نامِ دسته */
.blg-chip__n {
    font-size: 0.72rem;
    font-weight: 800;
    opacity: 0.7;
    direction: ltr;
}

.blg-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blg-green);
    flex: 0 0 auto;
}

.blg-chip.is-active .blg-chip__dot { background: rgba(255, 255, 255, 0.9); }

/* ==========================================================================
   ۳) چیدمانِ اصلی: محتوا + ستونِ کناری
   ========================================================================== */
.blg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1040px) {
    .blg-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ۴) پستِ ویژه
   ========================================================================== */
.blg-featured {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    margin-bottom: 1.8rem;
    border: 1px solid var(--blg-line);
    border-radius: var(--blg-radius);
    background: var(--blg-card);
    box-shadow: var(--blg-shadow);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.blg-featured:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 185, 129, 0.32);
    box-shadow: var(--blg-shadow-lift);
}

.blg-featured__media {
    position: relative;
    min-height: 240px;
    background: var(--pub-surface-2);
    overflow: hidden;
}

.blg-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}

.blg-featured:hover .blg-featured__media img { transform: scale(1.04); }

.blg-featured__body {
    padding: 1.9rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
}

.blg-featured__title {
    margin: 0;
    font-size: clamp(1.2rem, 2.3vw, 1.6rem);
    font-weight: 800;
    line-height: 1.6;
}

.blg-featured__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blg-featured__title a:hover { color: var(--blg-green-ink); }

.blg-featured__excerpt {
    margin: 0;
    font-size: 0.93rem;
    line-height: 2.05;
    color: var(--blg-muted);
}

@media (max-width: 820px) {
    .blg-featured { grid-template-columns: 1fr; }
    .blg-featured__media { min-height: 200px; max-height: 260px; }
    .blg-featured__body { padding: 1.4rem 1.25rem; }
}

/* نشانِ «ویژه» */
.blg-star {
    position: absolute;
    top: 0.9rem;
    inset-inline-start: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: #06251b;
    background: linear-gradient(135deg, #34d399, var(--blg-green));
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
}

/* ==========================================================================
   ۵) شبکه‌ی کارت‌ها
   ========================================================================== */
.blg-grid {
    display: grid;
    /* `auto-fit` و نه `auto-fill`: با سه کارت در عرضِ کامل، `auto-fill` یک
       ستونِ خالی می‌سازد و شبکه از یک طرف تو می‌رود. */
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
    gap: 1.35rem;
}

.blg-card {
    display: flex;
    flex-direction: column;
    background: var(--blg-card);
    border: 1px solid var(--blg-line);
    border-radius: var(--blg-radius);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.blg-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.32);
    box-shadow: var(--blg-shadow-lift);
}

.blg-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--pub-surface-2);
    overflow: hidden;
}

.blg-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.blg-card:hover .blg-card__media img { transform: scale(1.05); }

/* جانشینِ تصویر وقتی پست عکس ندارد — بهتر از یک کادرِ خالی */
.blg-card__media--empty {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, var(--blg-green-soft), transparent 60%),
        var(--pub-surface-2);
}

.blg-card__media--empty i {
    font-size: 2rem;
    color: var(--blg-green);
    opacity: 0.45;
}

.blg-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.28rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 999px;
    color: var(--blg-green-ink);
    background: var(--blg-green-soft);
    border: 1px solid rgba(16, 185, 129, 0.22);
    transition: background 0.2s ease;
}

.blg-cat:hover { background: rgba(16, 185, 129, 0.2); }

.blg-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.15rem 1.15rem 1.25rem;
    flex: 1;
}

.blg-card__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.75;
}

.blg-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blg-card__title a:hover { color: var(--blg-green-ink); }

.blg-card__excerpt {
    margin: 0;
    font-size: 0.87rem;
    line-height: 1.95;
    color: var(--blg-muted);
    /* سه خط، بعدش سه‌نقطه — بدون این، کارت‌های شبکه قدهای مختلف می‌گیرند */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.9rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--blg-line);
    font-size: 0.78rem;
    color: var(--blg-muted);
}

.blg-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.blg-meta i { font-size: 0.78rem; opacity: 0.75; }

.blg-meta time { direction: rtl; }

.blg-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    color: var(--blg-green-ink);
}

.blg-card__more i { transition: transform 0.2s ease; }
.blg-card__more:hover i { transform: translateX(-3px); }

/* ==========================================================================
   ۶) ستونِ کناری
   ========================================================================== */
.blg-side {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: sticky;
    top: 90px;
}

@media (max-width: 1040px) {
    .blg-side { position: static; }
}

.blg-widget {
    padding: 1.15rem 1.15rem 1.25rem;
    background: var(--blg-card);
    border: 1px solid var(--blg-line);
    border-radius: var(--blg-radius-sm);
}

.blg-widget__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    font-size: 0.95rem;
    font-weight: 800;
    border-bottom: 1px solid var(--blg-line);
}

.blg-widget__title i { color: var(--blg-green-ink); font-size: 0.9rem; }

.blg-catlist { list-style: none; margin: 0; padding: 0; }

.blg-catlist li + li { margin-top: 0.15rem; }

.blg-catlist a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 9px;
    font-size: 0.87rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--blg-ink);
    transition: background 0.2s ease, color 0.2s ease;
}

.blg-catlist a:hover,
.blg-catlist a.is-active {
    background: var(--blg-green-soft);
    color: var(--blg-green-ink);
}

.blg-catlist b {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--blg-muted);
    background: var(--pub-surface-2);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    direction: ltr;
}

/* پست‌های پربازدید */
.blg-mini { display: flex; flex-direction: column; gap: 0.85rem; }

.blg-mini__item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    text-decoration: none;
    color: inherit;
}

.blg-mini__n {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--blg-green-ink);
    background: var(--blg-green-soft);
    direction: ltr;
}

.blg-mini__t {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.8;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blg-mini__item:hover .blg-mini__t { color: var(--blg-green-ink); }

.blg-mini__d { font-size: 0.73rem; color: var(--blg-muted); margin-top: 0.15rem; }

/* ابرِ برچسب */
.blg-tagcloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.blg-tagcloud a {
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.32rem 0.65rem;
    border-radius: 8px;
    color: var(--blg-muted);
    background: var(--pub-surface-2);
    border: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.blg-tagcloud a::before { content: '#'; opacity: 0.5; margin-inline-end: 2px; }

.blg-tagcloud a:hover,
.blg-tagcloud a.is-active {
    color: var(--blg-green-ink);
    border-color: rgba(16, 185, 129, 0.35);
}

/* جعبه‌ی دعوت به اقدام در ستونِ کناری */
.blg-cta {
    padding: 1.3rem 1.15rem;
    text-align: center;
    border-radius: var(--blg-radius-sm);
    border: 1px solid rgba(16, 185, 129, 0.28);
    background:
        radial-gradient(circle at 50% 0%, var(--blg-green-soft), transparent 70%),
        var(--blg-card);
}

.blg-cta i { font-size: 1.5rem; color: var(--blg-green-ink); }

.blg-cta h4 { margin: 0.6rem 0 0.35rem; font-size: 0.98rem; font-weight: 800; }

.blg-cta p { margin: 0 0 1rem; font-size: 0.82rem; line-height: 1.9; color: var(--blg-muted); }

.blg-cta a {
    display: inline-block;
    padding: 0.6rem 1.3rem;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
    border-radius: 999px;
    background: var(--blg-btn);
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.28);
    transition: transform 0.2s ease;
}

.blg-cta a:hover { transform: translateY(-2px); }

/* ==========================================================================
   ۷) صفحه‌بندی
   ========================================================================== */
.blg-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2.2rem;
}

.blg-pager a,
.blg-pager span {
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 11px;
    color: var(--blg-ink);
    background: var(--blg-card);
    border: 1px solid var(--blg-line);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.blg-pager a:hover {
    color: var(--blg-green-ink);
    border-color: rgba(16, 185, 129, 0.4);
}

.blg-pager .is-current {
    color: #fff;
    background: var(--blg-btn);
    border-color: transparent;
}

.blg-pager .is-gap {
    border: 0;
    background: transparent;
    min-width: 24px;
    color: var(--blg-muted);
}

/* ==========================================================================
   ۸) حالتِ خالی
   ========================================================================== */
.blg-empty {
    grid-column: 1 / -1;
    padding: 3.5rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--blg-line);
    border-radius: var(--blg-radius);
    background: var(--blg-card);
}

.blg-empty i { font-size: 2.4rem; color: var(--blg-green); opacity: 0.45; }
.blg-empty h3 { margin: 1rem 0 0.4rem; font-size: 1.05rem; font-weight: 800; }
.blg-empty p { margin: 0; font-size: 0.88rem; color: var(--blg-muted); }
.blg-empty a { color: var(--blg-green-ink); font-weight: 700; text-decoration: none; }

/* ==========================================================================
   ۹) صفحه‌ی پست
   ========================================================================== */

/* نوارِ پیشرفتِ مطالعه — دقیقاً زیرِ هدرِ ثابت می‌نشیند.
   ارتفاعِ هدر با جاوااسکریپت اندازه گرفته و در `--blg-hdr` ریخته می‌شود؛
   عددِ ثابت روی موبایل (که هدر کوتاه‌تر است) یک فاصله‌ی زشت می‌ساخت. */
.blg-progress {
    position: fixed;
    top: var(--blg-hdr, 66px);
    inset-inline: 0;
    height: 3px;
    z-index: 999;
    pointer-events: none;
    background: transparent;
}

.blg-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(270deg, var(--pub-accent), #34d399);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.55);
}

.blg-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
    font-size: 0.8rem;
    color: var(--blg-muted);
}

.blg-crumb a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.blg-crumb a:hover { color: var(--blg-green-ink); }
.blg-crumb__sep { opacity: 0.45; }
.blg-crumb__cur {
    color: var(--blg-ink);
    font-weight: 600;
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blg .blg-head { display: block; margin-bottom: 1.5rem; }

.blg-head__title {
    margin: 0.85rem 0 0.9rem;
    font-size: clamp(1.5rem, 3.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.55;
}

.blg-head .blg-meta {
    margin: 0;
    padding-top: 0;
    border: 0;
    font-size: 0.83rem;
}

.blg-cover {
    margin: 0 0 1.9rem;
    border-radius: var(--blg-radius);
    overflow: hidden;
    border: 1px solid var(--blg-line);
    background: var(--pub-surface-2);
}

.blg-cover img {
    width: 100%;
    display: block;
    /* تصویرِ شاخصِ ۱۲۰۰×۶۳۰ در عرضِ ۱۲۴۰ حدود ۶۵۰ پیکسل بلند می‌شود و کلِ
       صفحه‌ی اول را می‌خورد؛ سقف می‌گذاریم و وسطش را نگه می‌داریم. */
    height: clamp(180px, 32vw, 420px);
    object-fit: cover;
    object-position: center;
}

.blg-cover figcaption {
    padding: 0.6rem 1rem;
    font-size: 0.78rem;
    color: var(--blg-muted);
    text-align: center;
    border-top: 1px solid var(--blg-line);
}

/* چیدمانِ مقاله: متن + ستونِ چسبانِ فهرست */
.blg-post {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1040px) {
    .blg-post { grid-template-columns: minmax(0, 1fr); }
}

.blg-article {
    padding: 1.75rem;
    background: var(--blg-card);
    border: 1px solid var(--blg-line);
    border-radius: var(--blg-radius);
    box-shadow: var(--blg-shadow);
}

@media (max-width: 560px) {
    .blg-article { padding: 1.2rem 1rem; }
}

.blg-lead {
    margin: 0 0 1.5rem;
    padding: 1rem 1.15rem;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 2.1;
    border-inline-start: 3px solid var(--blg-green);
    border-radius: 0 10px 10px 0;
    background: var(--blg-green-soft);
}

/* ==========================================================================
   ۱۰) تایپوگرافیِ متنِ پست
   ==========================================================================
   این بخش روی HTMLای اعمال می‌شود که ادمین در ویرایشگر می‌نویسد، پس باید
   هر تگی که ممکن است بیاید را پوشش بدهد — وگرنه یک <table> یا <pre> در
   وسطِ مقاله بی‌ریخت و گاهی سرریز می‌شود. */
.blg-prose {
    font-size: 1rem;
    line-height: 2.15;
    color: var(--blg-ink);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.blg-prose > *:first-child { margin-top: 0; }
.blg-prose > *:last-child { margin-bottom: 0; }

.blg-prose p { margin: 0 0 1.15rem; }

.blg-prose h2,
.blg-prose h3,
.blg-prose h4 {
    margin: 2.1rem 0 0.9rem;
    font-weight: 800;
    line-height: 1.65;
    /* هدرِ ثابت نباید تیتر را بپوشاند وقتی از فهرستِ مطالب پرش می‌شود */
    scroll-margin-top: 90px;
}

.blg-prose h2 {
    font-size: 1.3rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--blg-line);
}

.blg-prose h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 0.95em;
    margin-inline-end: 0.55rem;
    vertical-align: -0.13em;
    border-radius: 3px;
    background: linear-gradient(180deg, #34d399, var(--pub-accent));
}

.blg-prose h3 { font-size: 1.12rem; color: var(--blg-green-ink); }
.blg-prose h4 { font-size: 1rem; }

.blg-prose a {
    color: var(--blg-green-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(16, 185, 129, 0.4);
}

.blg-prose a:hover { text-decoration-color: currentColor; }

.blg-prose ul,
.blg-prose ol { margin: 0 0 1.15rem; padding-inline-start: 1.4rem; }
.blg-prose li { margin-bottom: 0.5rem; }
.blg-prose ul { list-style: none; padding-inline-start: 1.1rem; }

.blg-prose ul > li { position: relative; padding-inline-start: 1rem; }

.blg-prose ul > li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.85em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blg-green);
}

.blg-prose ul ul { margin-top: 0.5rem; }

.blg-prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    border-inline-start: 3px solid var(--blg-green);
    border-radius: 0 12px 12px 0;
    background: var(--pub-surface-2);
    color: var(--blg-muted);
    font-style: normal;
}

.blg-prose blockquote p:last-child { margin-bottom: 0; }

.blg-prose img,
.blg-prose video,
.blg-prose iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.4rem auto;
    border-radius: 12px;
}

.blg-prose figure { margin: 1.4rem 0; }
.blg-prose figcaption {
    text-align: center;
    font-size: 0.8rem;
    color: var(--blg-muted);
    margin-top: 0.5rem;
}

.blg-prose code {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.86em;
    direction: ltr;
    display: inline-block;
    padding: 0.12em 0.45em;
    border-radius: 6px;
    background: var(--pub-surface-2);
    border: 1px solid var(--blg-line);
    color: var(--blg-green-ink);
}

.blg-prose pre {
    margin: 1.4rem 0;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    border-radius: 12px;
    background: var(--pub-surface-2);
    border: 1px solid var(--blg-line);
    font-size: 0.86rem;
    line-height: 1.85;
}

.blg-prose pre code {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    display: block;
}

/* جدول: در قابِ اسکرول‌دار می‌نشیند تا صفحه را افقی نکشد */
.blg-prose table {
    width: 100%;
    margin: 1.4rem 0;
    border-collapse: collapse;
    font-size: 0.9rem;
    border: 1px solid var(--blg-line);
    border-radius: 10px;
    overflow: hidden;
}

.blg-prose th,
.blg-prose td {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--blg-line);
    text-align: start;
}

.blg-prose thead th {
    background: var(--pub-surface-2);
    font-weight: 800;
}

.blg-prose tbody tr:nth-child(even) { background: rgba(127, 127, 127, 0.04); }

.blg-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.blg-prose hr {
    margin: 2rem 0;
    border: 0;
    height: 1px;
    background: var(--blg-line);
}

/* ==========================================================================
   ۱۱) فهرستِ مطالب
   ========================================================================== */
.blg-aside {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: sticky;
    top: 90px;
}

@media (max-width: 1040px) {
    .blg-aside { position: static; }
}

.blg-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 46vh;
    overflow-y: auto;
    padding-inline-end: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.45) transparent;
}

.blg-toc__list::-webkit-scrollbar { width: 6px; }
.blg-toc__list::-webkit-scrollbar-track { background: transparent; }
.blg-toc__list::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.45);
    border-radius: 50px;
}
body.light-mode .blg-toc__list::-webkit-scrollbar-thumb { background: rgba(4, 120, 87, 0.4); }

.blg-toc__list a {
    display: block;
    padding: 0.42rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.75;
    text-decoration: none;
    color: var(--blg-muted);
    border-inline-start: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.blg-toc__list a:hover { color: var(--blg-ink); background: var(--pub-surface-2); }

.blg-toc__list a.is-active {
    color: var(--blg-green-ink);
    font-weight: 700;
    background: var(--blg-green-soft);
    border-inline-start-color: var(--blg-green);
}

.blg-toc__list li.lvl-3 a { padding-inline-start: 1.4rem; font-size: 0.82rem; }

/* اشتراک‌گذاری */
.blg-share { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.blg-share a,
.blg-share button {
    flex: 1 1 auto;
    min-width: 42px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    color: var(--blg-muted);
    background: var(--pub-surface-2);
    border: 1px solid var(--blg-line);
    border-radius: 10px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.blg-share a:hover,
.blg-share button:hover {
    color: var(--blg-green-ink);
    border-color: rgba(16, 185, 129, 0.4);
}

.blg-share button.is-ok { color: var(--blg-green-ink); border-color: var(--blg-green); }

/* ==========================================================================
   ۱۲) برچسب‌ها، نویسنده، ناوبری، مرتبط
   ========================================================================== */
.blg-posttags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.9rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--blg-line);
}

.blg-posttags > span { font-size: 0.82rem; font-weight: 700; color: var(--blg-muted); }

/* نوارِ «آخرین به‌روزرسانی».

   اینجا عمداً هیچ جعبه‌ی نویسنده‌ای نیست: مقالات به‌نامِ سایت منتشر
   می‌شوند و هیچ نام یا ایمیلِ فردی روی صفحه نمی‌آید. تاریخِ به‌روزرسانی
   می‌ماند، چون سیگنالِ تازگیِ محتواست. */
.blg-updated {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1.1rem;
    font-size: 0.84rem;
    color: var(--blg-muted);
    border-radius: var(--blg-radius-sm);
    background: var(--pub-surface-2);
    border: 1px solid var(--blg-line);
}

.blg-updated i { color: var(--blg-green-ink); }
.blg-updated b { color: var(--blg-ink); font-weight: 700; }

.blg-updated a {
    margin-inline-start: auto;
    color: var(--blg-green-ink);
    font-weight: 700;
    text-decoration: none;
}

.blg-updated a:hover { text-decoration: underline; }

.blg-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.9rem;
    margin-top: 1.6rem;
}

.blg-nav__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.05rem;
    text-decoration: none;
    color: inherit;
    background: var(--blg-card);
    border: 1px solid var(--blg-line);
    border-radius: var(--blg-radius-sm);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.blg-nav__item:hover {
    border-color: rgba(16, 185, 129, 0.35);
    transform: translateY(-2px);
}

.blg-nav__item i { color: var(--blg-green-ink); flex: 0 0 auto; }
.blg-nav__item--next { flex-direction: row-reverse; text-align: end; }

.blg-nav__k { display: block; font-size: 0.74rem; color: var(--blg-muted); margin-bottom: 0.2rem; }

.blg-nav__t {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.7;
}

.blg-secttl {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 2.6rem 0 1.2rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.blg-secttl::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--blg-line), transparent);
}

.blg-secttl i { color: var(--blg-green-ink); font-size: 1rem; }

/* ==========================================================================
   ۱۳) دکمه‌ی بازگشت به بالا
   ========================================================================== */
.blg-top {
    position: fixed;
    inset-inline-end: 18px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    z-index: 900;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--blg-green), var(--pub-accent));
    box-shadow: 0 10px 26px rgba(16, 185, 129, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.blg-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .blg-card,
    .blg-featured,
    .blg-nav__item,
    .blg-top,
    .blg-progress__fill { transition: none; }
    .blg-card:hover,
    .blg-featured:hover,
    .blg-nav__item:hover { transform: none; }
}

/* ==========================================================================
   ۱۴) موبایل
   ========================================================================== */
@media (max-width: 640px) {
    .blg { padding: 4.8rem 0.9rem 3rem; }
    .blg-hero { padding: 1.5rem 1.15rem; }
    .blg-hero__row { gap: 0.6rem; }
    .blg-hero__count { width: 100%; }
    .blg-grid { grid-template-columns: 1fr; gap: 1.1rem; }
    .blg-prose { font-size: 0.96rem; line-height: 2.05; }
    .blg-prose h2 { font-size: 1.15rem; }
    .blg-prose h3 { font-size: 1.02rem; }
    .blg-nav__item--next { text-align: start; }
}

@media (max-width: 380px) {
    .blg-pager a,
    .blg-pager span { min-width: 34px; height: 34px; padding: 0 0.5rem; font-size: 0.8rem; }
}