/* ============================================================
   استایل‌های محتوایی: صفحه‌بندی، هدِ سکشن، حالت خالی، جزئیات محتوا
   نسخهٔ ۱.۱ — بهینه‌سازی موبایل
   ============================================================ */

/* ---------- سرِ سکشن با دکمهٔ «مشاهدهٔ همه» ---------- */
.section__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.section__head-row .section__title {
    margin: 0;
    text-align: start;
}

/* ---------- حالت خالی ---------- */
.empty-state {
    padding: 48px 24px;
    text-align: center;
    border-radius: var(--glass-radius-sm, 24px);
    background: oklch(1 0 0 / .35);
    border: .5px dashed oklch(.78 .10 290 / .35);
    color: var(--ink-muted, oklch(.56 .03 290));
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.empty-state .ico {
    color: oklch(.78 .10 290 / .5);
    width: 2.4em;
    height: 2.4em;
}

.empty-state p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.9;
}

/* ---------- صفحه‌بندی ---------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    background: oklch(1 0 0 / .45);
    border: .5px solid oklch(1 0 0 / .55);
    box-shadow:
        0 2px 8px oklch(.28 .05 290 / .06),
        inset 0 1px 0 oklch(1 0 0 / .85);
    font-size: .9rem;
    font-weight: 800;
    color: var(--ink-soft, oklch(.44 .04 290));
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1),
                background .25s,
                color .25s,
                border-color .25s,
                box-shadow .25s;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pagination__item .ico {
    width: 1.05em;
    height: 1.05em;
}

@media (hover: hover) {
    .pagination__item:hover {
        background: oklch(1 0 0 / .7);
        color: var(--plum, oklch(.62 .13 300));
        transform: translateY(-2px);
        box-shadow:
            0 6px 16px oklch(.28 .05 290 / .10),
            inset 0 1px 0 oklch(1 0 0 / .9);
    }
}

.pagination__item.is-active {
    background: linear-gradient(160deg, oklch(.84 .13 45 / .75), oklch(.80 .11 15 / .55));
    color: var(--ink, oklch(.28 .05 290));
    border-color: oklch(.84 .13 45 / .45);
    box-shadow:
        0 6px 18px oklch(.84 .13 45 / .28),
        inset 0 1.5px 0 oklch(1 0 0 / .9);
    pointer-events: none;
}

.pagination__item.is-disabled {
    opacity: .35;
    pointer-events: none;
    cursor: not-allowed;
}

.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 44px;
    color: var(--ink-muted, oklch(.56 .03 290));
    font-weight: 800;
    user-select: none;
}

/* ============================================================
   صفحهٔ جزئیات محتوا (اخبار و مقالات) — تراز و عرض کامل قالب
   ============================================================ */

/* تصویر شاخص صفحهٔ جزئیات */
.content-hero-media {
    width: 100%;
    margin: 0 0 32px;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-glass, 0 8px 32px oklch(.28 .05 290 / .1));
    background: linear-gradient(135deg,
        oklch(.84 .13 45),
        oklch(.78 .10 290),
        oklch(.74 .10 185));
    aspect-ratio: var(--post-image-ratio, 16 / 9);
    position: relative;
    isolation: isolate;
}

.content-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   ستون خواندن متن مطلب (فقط صفحهٔ جزئیات خبر/مقاله)
   طول خطوط به اندازهٔ استاندارد مطالعه محدود و وسط‌چین می‌شود تا
   چشم در رفت‌وبرگشت‌های طولانی خسته نشود؛ ولی تصاویر و جدول‌ها
   می‌توانند تمام عرض کارت را بگیرند.
   ============================================================ */
/* پاراگراف آغازین مطلب کمی خواناتر دیده شود */
.prose--reading > p:first-child {
    font-size: 1.05rem;
    color: oklch(.36 .04 290);
}

/* ============================================================
   چیدمان وبلاگی صفحهٔ مطلب
   ستون راست (۸ قسمت از ۱۲): عکس شاخص و متن مطلب
   ستون چپ (۴ قسمت از ۱۲): خلاصهٔ مطلب و مطالب پربازدید
   در دسکتاپ ستون کنار هنگام اسکرول همراه کاربر می‌ماند.
   ============================================================ */
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 26px;
    align-items: start;
}

.post-layout__main {
    min-width: 0;
}

.post-layout__main .content-hero-media {
    margin-bottom: 26px;
}

.post-layout__main .prose {
    margin-bottom: 0;
}

.post-layout__aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 96px;
    align-self: start;
}

/* ---------- کارت‌های ستون کنار ---------- */
/* سطح روشن و یک‌لایه: بدون حاشیهٔ داخلی و سایهٔ چندلایه تا کادر دومی پشت کارت دیده نشود */
.post-aside-card {
    position: relative;
    padding: 20px 22px;
    border-radius: 22px;
    background: linear-gradient(165deg, oklch(1 0 0 / .92), oklch(.99 .008 60 / .85));
    border: 1px solid oklch(1 0 0 / .9);
    box-shadow:
        0 4px 18px oklch(.28 .05 290 / .07),
        0 1px 2px oklch(.28 .05 290 / .05);
}

.post-aside-card__label {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    color: var(--plum);
    background: oklch(1 0 0 / .55);
    border: .5px solid oklch(.78 .10 290 / .3);
}

.post-aside-card__text {
    margin: 0;
    font-size: .86rem;
    line-height: 2;
    color: var(--ink-soft);
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.post-aside-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* آیکون هرگز فشرده یا بریده نشود */
.post-aside-card__title .ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--plum);
    overflow: visible;
}

/* ردیف‌های تاریخ/نویسنده/بازدید */
.post-facts {
    margin-top: 14px;
    padding-top: 6px;
    border-top: .5px dashed oklch(.82 .03 300 / .8);
}

.post-facts__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    font-size: .78rem;
    border-bottom: .5px dashed oklch(.86 .02 300 / .7);
}

.post-facts__row:last-child { border-bottom: 0; }

.post-facts__row dt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
    font-weight: 700;
    white-space: nowrap;
}

.post-facts__row dt .ico {
    width: 1.05em;
    height: 1.05em;
    color: var(--teal);
}

.post-facts__row dd {
    margin: 0;
    min-width: 0;
    color: var(--ink);
    font-weight: 800;
    text-align: end;
    overflow-wrap: anywhere;
}

/* فهرست پربازدیدترین‌ها */
.top-posts {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.top-posts__link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 12px;
    transition: background .2s;
    -webkit-tap-highlight-color: transparent;
}

.top-posts__link:hover { background: oklch(1 0 0 / .6); }

.top-posts__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 8px;
    font-size: .74rem;
    font-weight: 800;
    color: var(--plum);
    background: linear-gradient(160deg, oklch(.84 .13 45 / .55), oklch(.78 .10 290 / .35));
    box-shadow: inset 0 1px 0 oklch(1 0 0 / .8);
}

.top-posts__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.top-posts__title {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.85;
    color: var(--ink);
    overflow-wrap: anywhere;
    transition: color .2s;
}

.top-posts__link:hover .top-posts__title { color: var(--plum); }

.top-posts__views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink-muted);
}

.top-posts__views .ico {
    width: 1em;
    height: 1em;
    color: var(--teal);
}

.post-aside-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: .78rem;
    font-weight: 800;
    color: var(--plum);
    transition: gap .3s var(--ease-out);
}

.post-aside-card__more:hover { gap: 12px; }

/* فاصلهٔ دکمهٔ بازگشت از چیدمان دو ستونی */
.post-layout + .content-back {
    margin-top: 34px;
}

/* دکمهٔ بازگشت انتهای صفحهٔ جزئیات */
.content-back {
    display: flex;
    justify-content: center;
    margin: 40px 0 8px;
}

/* اطمینان از پر شدن عرض کامل صفحه در جزئیات */
.prose {
    width: 100%;
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 1000px) {
    .post-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .post-layout__aside {
        position: static;
        max-height: none;
        overflow: visible;
    }

    /* در موبایل اطلاعات مطلب در هدر صفحه نمایش داده می‌شود؛ کارت خلاصه لازم نیست */
    .post-aside-card--summary { display: none; }

    .post-layout__main .content-hero-media { margin-bottom: 22px; }
}

@media (max-width: 720px) {
    .content-hero-media {
        aspect-ratio: var(--post-image-ratio, 16 / 9);
        border-radius: 20px;
        margin-bottom: 24px;
    }
    .content-back {
        margin: 32px 0 4px;
    }
    .content-back .glass-btn { width: 100%; }
}

@media (max-width: 480px) {
    .pagination { gap: 4px; margin-top: 28px; }
    .pagination__item {
        min-width: 40px;
        height: 40px;
        padding: 0 8px;
        font-size: .82rem;
        border-radius: 12px;
    }
    .pagination__ellipsis {
        min-width: 20px;
        height: 40px;
    }
    .section__head-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .content-hero-media {
        aspect-ratio: var(--post-image-ratio, 16 / 9);
        border-radius: 18px;
        margin-bottom: 20px;
    }
    .empty-state { padding: 36px 18px; border-radius: 20px; }
    .empty-state p { font-size: .86rem; }
}

@media (max-width: 360px) {
    .pagination__item {
        min-width: 36px;
        height: 36px;
        padding: 0 6px;
        font-size: .78rem;
        border-radius: 10px;
    }
    .pagination__ellipsis {
        min-width: 14px;
        height: 36px;
    }
}

/* در دسکتاپ اطلاعات مطلب در ستون کنار نمایش داده می‌شود */
@media (min-width: 1001px) {
    .post-hero-meta { display: none; }
}