/* =====================================
   Evidence Summary
   Research Page

   یکپارچه‌سازی (قبلی):
   - var(--text-primary)/var(--text-secondary) که اصلاً در
     variables.css وجود ندارن (عمداً حذف شده بودن) → var(--text)/
     var(--text-light)
   - .evidence-card/.evidence-number با کلاس هم‌نام در دو بخش
     دیگه‌ی سایت تداخل داشتن → تغییر نام به .evidence-summary-card/
     .evidence-summary-number/.evidence-summary-text (در HTML هم اعمال شد)
   - .section-label اولین‌بار زنده استفاده شده بود، با نسخه‌ی
     استاندارد سراسری (که در بخش‌های قبلی یکپارچه شد) یکی شد
   - .evidence-summary .container فرمول سومی برای کانتینر بود؛
     حذف شد تا از کلاس مشترک .container سایت استفاده کنه
   - واحدهای px → rem، وزن h2 از --title-weight به --heading-weight
     (مطابق همه‌ی h2های دیگه‌ی سایت)

   اضافات این نسخه:
   - .evidence-summary-icon: بج آیکون دایره‌ای بالای هر کارت (از
     پالت primary/accent موجود، بدون رنگ جدید)
   - شمارنده‌ی افزایشی: کلاس .evidence-summary-count (JS جدا:
     evidence-summary.js) عدد رو از صفر تا مقدار data-target می‌شمره؛
     "+" داخل .evidence-summary-suffix جداست تا انیمیت نشه
   - ریویل هنگام اسکرول: کارت‌ها با fade+translateY وارد می‌شن،
     با تأخیر پلکانی per nth-child؛ کلاس .is-visible توسط
     IntersectionObserver در JS اضافه می‌شه
   - prefers-reduced-motion: انیمیشن ریویل و شمارش غیرفعال/آنی می‌شه
===================================== */


.evidence-summary{

    padding:var(--section-space) 0;


    direction:rtl;

}



/* Header */

.evidence-header{

    max-width:var(--content-width);

    margin:0 auto 60px;

    text-align:center;

}


.section-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 20px;

    border-radius:var(--radius-round);

    background:rgba(var(--accent-rgb),.12);

    color:var(--primary);

    font-family:var(--font-body);
    font-size:var(--font-size-tag);
    font-weight:600;

}



.evidence-header h2{

    font-family:var(--font-heading);
    font-weight:var(--heading-weight);

    margin:0 0 20px;

    color:var(--text);

    font-size:clamp(2rem,4vw,3rem);

    line-height:1.2;

}



.evidence-header p{

    font-family:var(--font-body);
    font-weight:var(--body-weight);

    margin:0;

    color:var(--text-light);

    font-size:1.0625rem;

    line-height:1.8;

}



/* Grid */

.evidence-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}



/* Cards */

.evidence-summary-card{

    position:relative;

    overflow:hidden;

    padding:42px 30px;

    text-align:center;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    transition:transform .6s cubic-bezier(.16,1,.3,1),
               opacity .6s cubic-bezier(.16,1,.3,1),
               box-shadow var(--transition),
               border-color var(--transition);

    opacity:0;
    transform:translateY(28px);

}


/* پلکانی شدن ورود کارت‌ها هنگام اسکرول */
.evidence-summary-card:nth-child(1){ transition-delay:0ms; }
.evidence-summary-card:nth-child(2){ transition-delay:90ms; }
.evidence-summary-card:nth-child(3){ transition-delay:180ms; }
.evidence-summary-card:nth-child(4){ transition-delay:270ms; }

.evidence-summary-card.is-visible{

    opacity:1;

    transform:translateY(0);

}



/* Accent line */

.evidence-summary-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:center;

    transition:var(--transition);

}



.evidence-summary-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}



.evidence-summary-card:hover::before{

    transform:scaleX(1);

}



/* Icon badge */

.evidence-summary-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    margin:0 auto 20px;

    border-radius:50%;

    background:rgba(var(--primary-rgb),.08);

    color:var(--primary);

    transition:var(--transition);

}


.evidence-summary-icon svg{

    width:28px;

    height:28px;

}


.evidence-summary-card:hover .evidence-summary-icon{

    background:var(--primary);

    color:var(--background);

    transform:scale(1.08) rotate(-4deg);

}



/* Number */

.evidence-summary-number{

    font-family:var(--font-heading);

    margin-bottom:18px;

    color:var(--primary);

    font-size:3.25rem;

    font-weight:var(--title-weight);

    line-height:1;

    font-variant-numeric:tabular-nums;

}


.evidence-summary-suffix{

    /* بخشی از عدد که شمرده نمی‌شه (مثل "+") - همیشه ثابته */

}



.evidence-summary-text{

    font-size:1.75rem;

    line-height:1.2;

}



/* Title */

.evidence-summary-card h3{

    font-family:var(--font-heading);
    font-weight:var(--heading-weight);

    margin:0 0 14px;

    color:var(--text);

    font-size:1.25rem;

}



/* Description */

.evidence-summary-card p{

    font-family:var(--font-body);
    font-weight:var(--body-weight);

    margin:0;

    color:var(--text-light);

    font-size:var(--font-size-p);

    line-height:1.8;

}

.evidence-card-summary{
    grid-column: 1 / -1;
}


/* ==========================
   Reduced motion
========================== */

@media(prefers-reduced-motion:reduce){

    .evidence-summary-card{

        transition:box-shadow var(--transition), border-color var(--transition);

        opacity:1;

        transform:none;

    }

    .evidence-summary-card:hover{

        transform:none;

    }

}



/* ==========================
   Tablet
========================== */


@media(max-width:1200px){


    .evidence-grid{

        grid-template-columns:repeat(2,1fr);

    }


}



/* ==========================
   Mobile
========================== */


@media(max-width:576px){


    .evidence-header{

        margin-bottom:40px;

    }


    .evidence-grid{

        grid-template-columns:1fr;

    }


    .evidence-summary-card{

        padding:35px 24px;

    }


    .evidence-summary-number{

        font-size:2.75rem;

    }


}
