/*==========================================================
    RESPONSIVE
    Neuray Design System — اندازه‌ها، فاصله‌ها، breakpoint ها
==========================================================*/


/*==========================================================
    BREAKPOINT REFERENCE TABLE

    ⚠️ این‌ها var واقعی نیستن (چون داخل @media نمی‌شه از
    var() برای خودِ شرط استفاده کرد) — فقط جدول مرجع مستندسازی
    هستن که فایل‌های دیگه (مثل hero.css) به‌عنوان "--bp-xxl" و
    غیره بهش اشاره می‌کنن. هر بخش/فایل جدیدی که breakpoint
    تعریف می‌کنه باید دقیقاً همین اعداد رو استفاده کنه تا سایت
    یکپارچه بمونه:

    --bp-xxl : 1400px   (دسکتاپ بزرگ)
    --bp-xl  : 1200px   (لپ‌تاپ)
    --bp-lg  :  992px   (تبلت)
    --bp-md  :  768px   (موبایل landscape)
    --bp-sm  :  576px   (موبایل)
    --bp-xs  :  380px   (موبایل خیلی کوچک)
==========================================================*/


:root{

    /* ============================================
       Container Widths
       ============================================ */
    --container:1400px;
    --container-md:1200px;
    --container-width:620px;
    --content-width:620px;

    /* ============================================
       Section / Layout
       ============================================ */
    --section-space:clamp(70px,10vw,140px);
    --header-height:90px;             

    /* ============================================
       Fluid Spacing Scale (clamp — با تغییر سایز صفحه خودش تنظیم میشه)
       ============================================ */
    --space-2xs:clamp(10px,1.5vw,14px);
    --space-xs:clamp(14px,3vh,28px);
    --space-sm:clamp(16px,3vh,34px);
    --space-md:clamp(20px,4vh,42px);
    --space-lg:clamp(20px,4vh,90px);
    --space-xl:clamp(24px,5vh,55px);
    --space-header-gap:clamp(12px,2.5vh,40px);
    --space-inline:clamp(20px,6vw,80px);
    --gap-container:clamp(30px,5vw,90px);

    /* ============================================
       Fixed Spacing برای breakpoint های مشخص
       (چون داخل @media نمی‌شه از var استفاده کرد، این‌ها فقط
       برای استفاده در خود قوانین داخل هر breakpoint هستن)
       ============================================ */
    --space-section-lg:70px;          /* پدینگ سکشن در تبلت (≤992px) */
    --space-section-md:60px;          /* پدینگ سکشن در موبایل landscape (≤768px) */
    --space-section-sm:50px;          /* پدینگ سکشن در موبایل (≤576px) */

    --gap-lg:70px;                    /* گپ کانتینر در ≤1400px */
    --gap-md:60px;                    /* گپ کانتینر در تبلت */
    --gap-sm:40px;                    /* گپ کانتینر در موبایل */

    /* ============================================
       Fluid Sizes مخصوص کامپوننت‌ها
       ============================================ */
    --hero-circle-size:clamp(260px,40vw,520px);
    --hero-title-size:clamp(2.8rem,5vw,4.6rem);      /* سایز پایه عنوان هیرو */
    --hero-title-size-laptop:clamp(2.4rem,4vw,3.8rem); /* نسخه ≤1200px */
    --hero-desc-size-laptop:1.05rem;                   /* توضیحات هیرو در ≤1200px */
    --hero-desc-size:clamp(1rem,1.4vw,1.25rem);

    /* ============================================
       Technology Hero — فاصله‌ها
       ⚠️ --space-header-gap-tech و --gap-container-md حذف شدن؛
       طبق تأیید، تفاوتشون با --space-header-gap و --gap-container
       اشتباه بود (نه عمدی) — پس در technology-hero.css همون
       متغیرهای فایل هیروی اول استفاده می‌شن.
       ============================================ */
    --space-2xl:clamp(40px,6vw,90px);                /* پدینگ پایین هیروی تکنولوژی */

    /* Technology Hero — تایپوگرافی فلوئید
       ⚠️ الان استفاده نمی‌شن: technology-hero.css به‌جای این دو،
       مستقیم از --hero-title-size و --hero-desc-size (همون‌های
       hero.css) استفاده می‌کنه. اگه جای دیگه‌ای بهشون نیاز نداری
       بگو تا حذفشون کنم. */


    /* Technology Hero — تصاویر/بصری */
    --tech-visual-min-height:clamp(400px,55vh,650px);
    --tech-visual-min-height-tablet:450px;   /* ≤992px (--bp-lg) */
    --tech-visual-min-height-mobile:380px;   /* ≤576px (--bp-sm) */
    --tech-device-width:clamp(220px,35vw,420px);
    --tech-device-width-mobile:240px;        /* ≤576px (--bp-sm) */
    --tech-brain-width:clamp(230px,35vw,420px);
    --tech-brain-width-mobile:220px;         /* ≤576px (--bp-sm) */

}


/*==========================================================
    CONTAINER
    
==========================================================*/

.container{

   width:100%;

   max-width:var(--container);

   margin-inline:auto;

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

}


/* نسخه‌ی باریک‌تر — اگه جایی از سایت به کانتینر تنگ‌تر
   نیاز داشت (مثلاً بخش‌های متن‌محور)، از قبل متغیرش تعریف
   شده بود ولی کلاسی نداشت */

.container-md{

   width:100%;

   max-width:var(--container-md);

   margin-inline:auto;

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

}