/* =====================================================================
   صفحه لیست مقالات
   فقط استایل‌های اختصاصی این صفحه — هدر، منو، فوتر و متغیرهای رنگ
   همگی از assets/style.css می‌آیند و دست‌کاری نشده‌اند.
   ===================================================================== */

[hidden] { display: none !important }

/* ---------- سربرگ صفحه ---------- */
.ar-hero { padding: 26px 0 0 }

.ar-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: .88rem
}

.ar-crumbs a:hover { color: var(--primary-dark) }
[data-theme="dark"] .ar-crumbs a:hover { color: var(--primary) }
.ar-crumbs i { font-size: .6rem }
.ar-crumbs [aria-current] { color: var(--text); font-weight: 700 }

.ar-head { margin-bottom: 22px }

.ar-h1 {
    font-size: clamp(1.8rem, 4.2vw, 2.4rem);
    font-weight: 900;
    line-height: 1.4
}

.ar-total {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px;
    border-radius: 99px;
    background: var(--surface-2);
    color: var(--primary-dark);
    font-size: .9rem
}

[data-theme="dark"] .ar-total { color: var(--primary) }
.ar-total b { font-weight: 900 }

/* ---------- ظاهر مشترک تصویر مقاله: صفحه‌ی دفتر ---------- */
.ar-thumb {
    position: relative;
    display: grid;
    place-items: center;
    height: 170px;
    overflow: hidden;
    color: #fff;
    background: var(--g)
}

/* خط‌های دفتر + حاشیه‌ی قرمزِ سنتی دفتر، اینجا به رنگ سفید */
.ar-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to left, transparent 0 54px, rgba(255, 255, 255, .34) 54px 56px, transparent 56px),
        repeating-linear-gradient(to bottom, transparent 0 25px, rgba(255, 255, 255, .17) 25px 26px)
}

.ar-ic {
    position: relative;
    font-size: 2.9rem;
    transform: rotate(-8deg);
    filter: drop-shadow(0 8px 12px rgba(6, 78, 59, .35))
}

.ar-ghost {
    position: absolute;
    inset-inline-end: -14px;
    bottom: -26px;
    font-size: 8rem;
    opacity: .13;
    transform: rotate(-14deg)
}

.ar-fav.on { color: var(--primary-dark) }

/* ---------- مقاله‌ی ویژه ---------- */
.ar-feature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: border-color .25s
}

.ar-feature:hover { border-color: var(--primary) }

.ar-feature .ar-thumb { height: auto; min-height: 340px }
.ar-feature .ar-ic { font-size: 5.4rem }
.ar-feature .ar-ghost { font-size: 15rem; bottom: -50px }

/* سوراخ‌های سیمِ دفتر در لبه‌ی تصویر */
.ar-feature .ar-thumb::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 44px;
    background: radial-gradient(circle at 22px 13px, var(--surface) 0 6px, transparent 6.5px) 0 0 / 44px 26px repeat-y
}

/* برچسب «مقاله ویژه» کنار حاشیه‌ی دفتر، نه روی سوراخ‌ها */
.ar-feature .tag { inset-inline-start: 64px }

.ar-fbody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    padding: 34px 38px
}

.ar-fbody h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 900;
    line-height: 1.7
}

.ar-fbody p { color: var(--muted); line-height: 2 }
.ar-fbody .ameta { font-size: .85rem }
.ar-fbody .ameta { flex-wrap: wrap }
.ar-fbody .btn { margin-top: 8px }

/* لینک عنوان کل کارت را قابل‌کلیک می‌کند */
.ar-feature h2 a::after,
.ar-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1
}

.ar-feature .fav { z-index: 2 }
.ar-card .fav { z-index: 2 }

.ar-feature h2 a:focus-visible,
.ar-card h3 a:focus-visible { outline: none }

.ar-feature:has(h2 a:focus-visible),
.ar-card:has(h3 a:focus-visible) {
    outline: 3px solid var(--primary);
    outline-offset: 3px
}

.ar-feature:hover h2 a { color: var(--primary-dark) }
[data-theme="dark"] .ar-feature:hover h2 a { color: var(--primary) }

/* ---------- نوار ابزار ---------- */
.ar-toolbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 30px 0 26px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: var(--shadow);
    scroll-margin-top: 84px
}

.ar-chips { display: flex; flex-wrap: wrap; gap: 8px }

.ar-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--bg);
    font-weight: 500;
    font-size: .93rem;
    transition: .2s
}

.ar-chip:hover { border-color: var(--primary) }

.ar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--g, var(--lime));
    flex: none
}

.ar-chip small {
    min-width: 22px;
    padding: 0 7px;
    border-radius: 99px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.7
}

.ar-chip[aria-pressed="true"] {
    background: var(--deep);
    border-color: var(--primary);
    color: #fff
}

.ar-chip[aria-pressed="true"] small { background: rgba(255, 255, 255, .18); color: #fff }

.ar-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch }
.ar-tools .field { padding-block: 9px }
.ar-search { flex: 1 1 240px }
.ar-sort { flex: 0 0 190px; width: 190px }

.ar-view {
    display: flex;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg)
}

.ar-view button {
    width: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    transition: .2s
}

.ar-view button:hover { color: var(--primary) }

.ar-view button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--primary-dark);
    box-shadow: 0 2px 8px -3px rgba(6, 78, 59, .35)
}

[data-theme="dark"] .ar-view button[aria-pressed="true"] { color: var(--primary) }

/* ---------- چیدمان لیست + کنار صفحه ---------- */
.ar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start
}

.ar-result { margin-bottom: 14px; color: var(--muted); font-size: .9rem; min-height: 1.9em }
.ar-result b { color: var(--text) }

.ar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px
}

.ar-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    transition: .25s;
    animation: arIn .45s calc(var(--i, 0) * 55ms) backwards
}

@keyframes arIn {
    from { opacity: 0; transform: translateY(12px) }
}

.ar-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    transform: translateY(-4px)
}

.ar-card:hover .ar-ic { transform: rotate(-3deg) scale(1.08) }
.ar-ic { transition: transform .3s }

.ar-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 16px
}

.ar-card h3 { font-size: 1.02rem; line-height: 1.8 }
.ar-card:hover h3 a { color: var(--primary-dark) }
[data-theme="dark"] .ar-card:hover h3 a { color: var(--primary) }

.ar-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.9
}

.ar-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    color: var(--muted);
    font-size: .82rem
}

.ar-by { display: inline-flex; align-items: center; gap: 8px; min-width: 0 }
.ar-views i { margin-inline-end: 5px }

.ar-av {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--g);
    color: #fff;
    font-size: .78rem;
    font-weight: 700
}

/* نمای لیستی */
.ar-grid.is-list { grid-template-columns: 1fr; gap: 16px }
.is-list .ar-card { flex-direction: row }
.is-list .ar-thumb { flex: none; width: 240px; height: auto; min-height: 190px }
.is-list .ar-body { padding: 18px 22px; justify-content: center }
.is-list .ar-card p { -webkit-line-clamp: 2 }

mark {
    padding: 0 3px;
    border-radius: 5px;
    background: var(--lime);
    color: var(--deep)
}

/* نتیجه‌ی خالی */
.ar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    text-align: center;
    color: var(--muted);
    border: 2px dashed var(--border);
    border-radius: var(--r)
}

.ar-empty > i { font-size: 2.6rem; color: var(--border) }
.ar-empty b { color: var(--text); font-size: 1.1rem }

.ar-more { display: flex; justify-content: center; margin-top: 26px }

/* ---------- کنار صفحه ---------- */
.ar-side { position: sticky; top: 84px }

.ar-box {
    margin-bottom: 18px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r)
}

.ar-box h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 1rem
}

.ar-box h3 i { color: var(--primary) }

.ar-top { list-style: none }

.ar-top a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px dashed var(--border);
    transition: .2s
}

.ar-top li:last-child a { border-bottom: 0 }
.ar-top a:hover b { color: var(--primary-dark) }
[data-theme="dark"] .ar-top a:hover b { color: var(--primary) }

.ar-top b {
    display: block;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.7;
    transition: color .2s
}

.ar-top small { color: var(--muted); font-size: .78rem }

.ar-rank {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--primary-dark);
    font-size: .9rem;
    font-weight: 900
}

[data-theme="dark"] .ar-rank { color: var(--primary) }
.ar-top li:first-child .ar-rank { background: var(--lime); color: var(--deep) }

.ar-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }

.ar-tag {
    padding: 2px 14px;
    border: 0;
    border-radius: 99px;
    background: var(--surface-2);
    color: var(--primary-dark);
    font-size: .9rem;
    font-weight: 500;
    transition: .2s
}

[data-theme="dark"] .ar-tag { color: var(--primary) }
.ar-tag:hover,
.ar-tag[aria-pressed="true"] { background: var(--primary); color: #fff }

.ar-shop {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    border: 0;
    background: linear-gradient(to left, #064e3b, #16a34a);
    color: #fff
}

.ar-shop::after {
    content: "\f5ac";
    position: absolute;
    inset-inline-start: -14px;
    bottom: -34px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 8rem;
    opacity: .1;
    transform: rotate(-12deg)
}

.ar-shop h3 i { color: var(--lime) }
.ar-shop p { margin-bottom: 14px; opacity: .92; font-size: .92rem }
.ar-shop .btn { position: relative; z-index: 1 }

/* ---------- پیام کوتاه ---------- */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 120;
    padding: 10px 22px;
    border-radius: 14px;
    background: var(--deep);
    color: #fff;
    font-size: .92rem;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity .25s, transform .25s
}

.toast.show { opacity: 1; transform: translate(-50%, 0) }

.ar-page { padding: 0 0 52px }

/* ---------- واکنش‌گرا ---------- */
@media (max-width:1000px) {
    .ar-layout { grid-template-columns: 1fr }
    .ar-side { position: static }
}

@media (max-width:820px) {
    .ar-feature { grid-template-columns: 1fr }
    .ar-feature .ar-thumb { min-height: 220px }
    .ar-fbody { padding: 24px 22px }
}

@media (max-width:600px) {
    .ar-toolbar { padding: 14px; border-radius: 22px }
    .ar-sort { flex: 1 1 100%; width: 100% }
    .ar-search { flex: 1 1 100% }
    .ar-view { margin-inline-start: auto }
    .ar-grid { grid-template-columns: 1fr }
    .is-list .ar-card { flex-direction: column }
    .is-list .ar-thumb { width: auto; min-height: 150px }
}