/* ==========================================================================
   Kovia Modern Blog — Premium Responsive
   ساختار فایل:
   1. Design Tokens   2. Layout   3. Hero   4. Headings
   5. Categories      6. Cards    7. Sidebar 8. Pagination
   9. Article Detail  10. Shop Box 11. States & A11y
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */
:root{
    /* رنگ‌ها */
    --k-dark:#35241D;
    --k-brown:#6B4A36;
    --k-gold:#B88B60;
    --k-gold-l:#C79A68;
    --k-bg:#FFFDF9;
    --k-border:#E7D8C8;
    --k-text-muted:#8B7B70;
    --k-text-soft:#5D5148;

    /* سایه و گردی */
    --k-shadow:0 12px 30px rgba(36,24,20,.08);
    --k-shadow-hover:0 18px 40px rgba(36,24,20,.14);
    --k-radius:24px;
    --k-radius-sm:14px;

    /* مقیاس فاصله — ریتم یکدست کل سایت */
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-fluid-sm:clamp(10px,2vw,16px);    /* داخل کارت‌های کوچک */
    --space-fluid-md:clamp(14px,2.5vw,22px);  /* gap گریدها، بدنه کارت */
    --space-fluid-lg:clamp(20px,4vw,40px);    /* پدینگ سکشن‌ها */
    --space-fluid-xl:clamp(30px,5vw,50px);    /* فاصله بین سکشن‌ها */

    /* مقیاس تایپوگرافی */
    --text-xs:clamp(13px,1.6vw,15px);
    --text-sm:clamp(14px,1.8vw,17px);
    --text-base:clamp(15px,1.8vw,17px);
    --text-md:clamp(16px,2vw,19px);
    --text-lg:clamp(18px,3vw,26px);
    --text-xl:clamp(20px,3.2vw,30px);
    --text-2xl:clamp(22px,4vw,38px);
    --text-hero:clamp(24px,4.5vw,42px);
}

/* ==========================================================================
   2. Layout
   ========================================================================== */
.blog-modern-page{padding-block:var(--space-fluid-xl)}

/* ==========================================================================
   3. Hero
   ========================================================================== */
.blog-hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--k-dark),var(--k-brown));
    border-radius:clamp(18px,3vw,30px);
    min-height:clamp(200px,30vw,280px);
    display:flex;align-items:center;
    padding:var(--space-fluid-xl);
    color:#fff;
    margin-block-end:var(--space-fluid-xl);
}
/* هاله طلایی لطیف برای حس لوکس */
.blog-hero::after{
    content:"";position:absolute;
    inset-inline-start:-80px;inset-block-start:-80px;
    width:260px;height:260px;border-radius:50%;
    background:radial-gradient(circle,rgba(199,154,104,.25),transparent 70%);
    pointer-events:none;
}
.blog-hero-content{position:relative;z-index:1}
.blog-hero-content span{color:var(--k-gold-l);font-weight:800;font-size:var(--text-sm)}
.blog-hero h1{font-size:var(--text-hero);margin-block:14px;font-weight:900;line-height:1.5}
.blog-hero p{color:#F7F2EA;font-size:var(--text-sm);line-height:2}

/* ==========================================================================
   4. Headings
   ========================================================================== */
.blog-heading{margin-block-end:clamp(18px,3vw,28px)}
.blog-heading span,
.blog-category-header span{color:var(--k-gold);font-weight:800;font-size:var(--text-xs)}
.blog-heading h2,
.blog-category-header h1{color:var(--k-dark);font-weight:900;font-size:var(--text-xl)}

/* ==========================================================================
   5. Categories
   ========================================================================== */
.blog-category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:clamp(12px,2vw,18px);
    margin-block-end:var(--space-fluid-xl);
}
.blog-category-card{
    background:var(--k-bg);
    border-radius:var(--k-radius);
    overflow:hidden;
    border:1px solid var(--k-border);
    box-shadow:var(--k-shadow);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.blog-category-card img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover}
.blog-category-card div{padding:var(--space-fluid-sm);text-align:center}
.blog-category-card h3{color:var(--k-dark);font-size:var(--text-xs);margin:0}

/* ==========================================================================
   6. Article Cards
   ========================================================================== */
.blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));
    gap:var(--space-fluid-md);
}
.blog-card{
    display:flex;flex-direction:column;
    background:var(--k-bg);
    border-radius:var(--k-radius);
    overflow:hidden;
    border:1px solid var(--k-border);
    box-shadow:var(--k-shadow);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.blog-card img{
    width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;
    transition:transform .4s ease;
}
.blog-card-body{
    padding:clamp(14px,2.5vw,20px);
    display:flex;flex-direction:column;gap:10px;flex:1;
}
.blog-card h2{font-size:var(--text-md);line-height:1.9;margin:0}
.blog-card h2 a{color:var(--k-dark);transition:color .2s}
.blog-meta,
.article-meta{
    display:flex;gap:14px;flex-wrap:wrap;
    color:var(--k-text-muted);font-size:13px;
    margin-block-start:auto;
}

/* ==========================================================================
   7. Sidebar
   ========================================================================== */
.blog-sidebar{
    background:var(--k-bg);
    border-radius:var(--k-radius);
    padding:clamp(18px,3vw,24px);
    border:1px solid var(--k-border);
    box-shadow:var(--k-shadow);
}
.blog-sidebar h3{
    color:var(--k-dark);font-weight:900;
    margin-block-end:14px;
    padding-block-end:var(--space-3);
    border-block-end:2px solid var(--k-gold);
    font-size:var(--text-md);
}
.blog-sidebar a{
    display:block;padding-block:var(--space-3);   /* تارگت لمسی بزرگ‌تر */
    border-block-end:1px solid #eee0d3;
    color:var(--k-text-soft);font-size:14px;
    transition:color .2s,padding-inline-start .2s;
}
.blog-sidebar a:last-child{border-block-end:none}
.blog-sidebar a:hover{color:var(--k-gold);padding-inline-start:6px}
/* روی دسکتاپ سایدبار همراه اسکرول */
@media(min-width:992px){
    .blog-sidebar{position:sticky;inset-block-start:90px}
}
/* روی موبایل که سایدبار میره پایین، فاصله بگیره */
@media(max-width:991px){
    .blog-sidebar{margin-block-start:30px}
}

/* ==========================================================================
   8. Pagination
   ========================================================================== */
.blog-pagination{
    margin-block:clamp(28px,5vw,40px);
    display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-2);
}
.blog-pagination a,
.blog-pagination span{
    min-width:44px;height:44px;      /* استاندارد تارگت لمسی */
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;
    background:var(--k-bg);
    border:1px solid var(--k-border);
    color:var(--k-dark);
    transition:background .2s,color .2s;
}
.blog-pagination a:hover{background:var(--k-gold);color:#fff;border-color:var(--k-gold)}
.blog-pagination .active{background:var(--k-dark);color:#fff;border-color:var(--k-dark)}

/* ==========================================================================
   9. Article Detail
   ========================================================================== */
.blog-category-header{
    background:#FCF8F3;
    padding:var(--space-fluid-lg);
    border-radius:var(--k-radius);
    margin-block-end:clamp(24px,4vw,40px);
    border:1px solid var(--k-border);
}
.article-detail{
    background:var(--k-bg);
    border-radius:var(--k-radius);
    padding:clamp(16px,4vw,35px);
    border:1px solid var(--k-border);
    box-shadow:var(--k-shadow);
}
.article-header h1{
    font-size:var(--text-2xl);
    color:var(--k-dark);font-weight:900;line-height:1.7;
}
.article-image{
    width:100%;height:auto;
    max-height:550px;object-fit:cover;
    border-radius:clamp(12px,2vw,20px);
    margin-block:clamp(16px,3vw,25px);
}
.article-content{
    font-size:var(--text-base);
    line-height:2.2;color:var(--k-dark);
    overflow-wrap:break-word;        /* جلوگیری از سرریز لینک/کلمه بلند */
}
.article-content img{max-width:100%;height:auto;border-radius:16px}
.article-content table{display:block;overflow-x:auto;max-width:100%} /* جدول‌ها موبایل رو نمی‌شکنن */

/* ==========================================================================
   10. Shop Box
   ========================================================================== */
.article-shop-box{
    margin-block-start:clamp(28px,5vw,40px);
    background:linear-gradient(135deg,var(--k-dark),var(--k-brown));
    padding:clamp(20px,4vw,35px);
    border-radius:var(--k-radius);
    color:#fff;text-align:center;
}
.article-shop-box h2{color:#fff;font-size:var(--text-lg)}
.article-shop-btn{
    display:inline-block;margin-block-start:15px;
    background:var(--k-gold);
    padding:13px 28px;border-radius:var(--k-radius-sm);
    color:#fff!important;font-weight:700;
    transition:background .2s,transform .2s;
}
.article-shop-btn:hover{background:var(--k-gold-l);transform:translateY(-2px)}
.article-shop-btn:active{transform:scale(.97)}

.empty-blog{padding:clamp(30px,6vw,50px);text-align:center;color:var(--k-text-muted)}

/* ==========================================================================
   11. States & A11y
   ========================================================================== */

/* افکت‌های hover فقط دسکتاپ — موبایل سبک و روان */
@media(hover:hover){
    .blog-category-card:hover,
    .blog-card:hover{
        transform:translateY(-6px);
        box-shadow:var(--k-shadow-hover);
        border-color:var(--k-gold);
    }
    .blog-card:hover img{transform:scale(1.05)}
    .blog-card h2 a:hover{color:var(--k-gold)}
}
/* فیدبک لمس روی موبایل به‌جای hover */
@media(hover:none){
    .blog-card:active,
    .blog-category-card:active{transform:scale(.98)}
}

/* موبایل خیلی کوچک (زیر 360px) */
@media(max-width:360px){
    .blog-category-grid{grid-template-columns:repeat(2,1fr)}
    .blog-hero{min-height:auto}
    .blog-meta,.article-meta{gap:var(--space-2);font-size:12px}
}

/* دسترس‌پذیری — فوکوس کیبورد */
.blog-card a:focus-visible,
.blog-sidebar a:focus-visible,
.blog-pagination a:focus-visible,
.article-shop-btn:focus-visible{
    outline:2px solid var(--k-gold);outline-offset:3px;border-radius:6px;
}
@media(prefers-reduced-motion:reduce){
    *{transition:none!important}
}



/* ==========================================================================
   Grid — حالت اپلیکیشنی موبایل
   ========================================================================== */

/* پایه (موبایل): دسته‌بندی‌ها ۳تایی، مقاله‌ها ۲تایی */
.blog-category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}
.blog-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

/* تبلت به بالا: برگرد به حالت خودکار قبلی */
@media(min-width:768px){
    .blog-category-grid{
        grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
        gap:var(--space-4,20px);
    }
    .blog-grid{
        grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
        gap:var(--space-5,24px);
    }
}


/* جمع‌وجور کردن داخل کارت‌ها فقط روی موبایل */
@media(max-width:767px){
    /* کارت دسته‌بندی: آیکون/عکس کوچیک‌تر + متن فشرده */
    .blog-category-card{padding:10px 6px;border-radius:14px}
    .blog-category-card img{aspect-ratio:1/1;border-radius:10px}
    .blog-category-card h3{font-size:12px;font-weight:700;margin-block-start:6px}
    .blog-category-card p{display:none} /* توضیحات روی موبایل حذف — مثل اپ‌ها فقط عنوان */

    /* کارت مقاله: دوتایی فشرده */
    .blog-card{border-radius:14px}
    .blog-card img{aspect-ratio:16/11}
    .blog-card .blog-card-body,
    .blog-card-content{padding:10px}
    .blog-card h2{font-size:13px;line-height:1.6;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
        overflow:hidden} /* عنوان حداکثر ۲ خط */
    .blog-card p{display:none}          /* خلاصه مقاله روی موبایل حذف */
    .blog-meta{font-size:11px;gap:6px}
}

/* موبایل خیلی کوچک: دسته‌بندی‌ها همون ۳تایی بمونن ولی فشرده‌تر */
@media(max-width:360px){
    .blog-category-grid{gap:8px}
    .blog-category-card h3{font-size:11px}
}