/* =====================================
   Research Resources

   یکپارچه‌سازی:
   - این بخش بدون .container بود و resources-grid هم padding-inline
     نداشت → عناصر در سایزهای میانی به لبه می‌چسبیدن؛ مثل هیروها
     padding-inline مستقیم به خود section اضافه شد
   - .resource-icon مربع‌گرد (14px) بود؛ با شکل دایره‌ای استاندارد
     همه‌ی آیکون‌های سایت (50%) یکی شد
   - لینک «مشاهده مقالات» برعکس الگوی .read-link بود (پیش‌فرض
     secondary/هاور primary-dark) → به پیش‌فرض primary/هاور
     secondary اصلاح شد
   - primary-dark/text-muted روی heading و متن بدنه → var(--text)/
     var(--text-light)
   - white/rgba هاردکد/px→rem/transition → همون الگوی همیشگی
===================================== */


.research-resources{

    padding:var(--section-space) 0;

    padding-inline:var(--space-inline);

    background:var(--background);

}



.resources-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}



.resource-card{

    background:var(--background);

    padding:35px 25px;

    border-radius:20px;

    border:1px solid rgba(var(--primary-rgb),.08);

    box-shadow:
    0 15px 35px rgba(var(--primary-rgb),.08);

    transition:var(--transition);

}



.resource-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 45px rgba(var(--primary-rgb),.15);

}



.resource-icon{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--surface);

    border-radius:50%;

    font-size:1.5625rem;

    margin-bottom:20px;

}



.resource-card h3{

    font-family:var(--font-heading);
    font-weight:var(--heading-weight);

    color:var(--text);

    font-size:1.375rem;

    margin-bottom:15px;

}



.resource-card p{

    font-family:var(--font-body);
    font-weight:var(--body-weight);

    color:var(--text-light);

    line-height:1.8;

    font-size:var(--font-size-p);

    min-height:90px;

}



.resource-card a{

    font-family:var(--font-body);

    display:inline-block;

    margin-top:20px;

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}



.resource-card a:hover{

    color:var(--secondary);

}



@media(max-width:992px){


.resources-grid{

    grid-template-columns:
    repeat(2,1fr);

}


}



@media(max-width:576px){


.resources-grid{

    grid-template-columns:1fr;

}


}