/* ===================================== */
/* ROOT WRAPPER */
/* ===================================== */

.arta-stack-wrapper{

    width:100%;

    display:flex;

    flex-direction:row-reverse;

    /* گپ بین ستون‌ها الان با gap (کنترل Columns Gap) مشخص میشه،
       پس دیگه به فضای باقی‌مونده‌ی space-between نیازی نیست */
    justify-content:flex-start;

    align-items:center;

    gap: 60px;

}


/* ===================================== */
/* LEFT CONTENT */
/* ===================================== */

.arta-left {
    /* عرض همیشه از روی عرض واقعی کانتینر مادر (arta-stack-wrapper)
       و عرضی که به arta-cards اختصاص دادیم محاسبه میشه، تا این دو
       ستون همیشه دقیقاً لبه‌به‌لبه با فاصله‌ی gap مشخص جفت بشن. */
    width: calc(100% - var(--arta-cards-width, 45%) - var(--arta-stack-gap, 60px));
    position: relative;
    z-index: 5;
}

.arta-left-item {
    display: none;

    opacity: 0;
    transform: translateY(20px);
}

.arta-left-item.active {
    display: block;

    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

.arta-title {
    margin: 0 0 22px;

    font-size: 42px;
    font-weight: 800;
    line-height: 1.3;

    color: #fff;
}

.arta-desc {
    margin: 0 0 32px;

    color: #a8a8a8;

    font-size: 16px;
    line-height: 2.2;
}

.arta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    justify-content: center;

    color: #fff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.arta-btn:hover {
    transform: translateX(-5px);
}

.arta-btn-icon,
.arta-btn-icon svg {
    width: 18px;
    height: 18px;
}




/* ===================================== */
/* CARDS AREA */
/* ===================================== */

.arta-cards {
    
    position: relative;

    /* این fallback های width/height خیلی مهمن: اگه کاربر مقدار
       "Card Width (%)" یا "Card Height" رو توی پنل المنتور
       خالی بذاره، المنتور اصلاً هیچ CSSای برای اون سلکتور چاپ
       نمی‌کنه، و چون بچه‌های این باکس (.arta-card) position:absolute
       هستن، در محاسبه‌ی ارتفاع خودکار (auto) مادرشون شرکت
       نمی‌کنن - یعنی بدون fallback، .arta-cards به ارتفاع صفر
       کولاپس می‌شه.

       نکته‌ی مهم: قبلاً اینجا یه عدد ثابت (420px) بود. مشکلش
       این بود که این عدد به فضای واقعیِ در دسترس (که با تغییر
       ارتفاع صفحه/هدر عوض می‌شه) هیچ ربطی نداشت - روی صفحه‌های
       کوتاه‌تر (مثلاً لپ‌تاپ‌های معمولی با ارتفاع 768px)، همین
       420px ثابت به‌همراه هدر/تایتل/پدینگ از فضای واقعیِ
       .arta-stack-wrapper بیشتر می‌شد و کارت از سکشن بیرون
       می‌زد. الان به‌جاش height:100% گذاشتیم تا همیشه دقیقاً
       هم‌اندازه‌ی فضای واقعیِ در دسترس (arta-stack-wrapper) باشه -
       نه کمتر نه بیشتر، هیچ‌وقت overflow نمی‌کنه. */
    width: 45%;
    height: 100%;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    overflow: visible;
}

/* ===================================== */
/* SINGLE CARD */
/* ===================================== */

.arta-card {
    position: absolute;

    /* دیگه عرض/ارتفاع مستقل و جدا نداره؛ همیشه دقیقاً هم‌اندازه‌ی
       قاب (arta-cards) هست - قاب خودش با "Card Width (%)" و
       "Card Height" کنترل می‌شه. این‌طوری کارت هیچ‌وقت از قاب
       بیرون نمی‌زنه یا با فاصله‌ی نامنظم داخلش شناور نمی‌مونه. */
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    transform-origin: center center;

    will-change: transform, opacity;
}


/* ===================================== */
/* CARD INNER */
/* ===================================== */

.arta-card-inner {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(26,26,26,0.98),
            rgba(11,11,11,0.98)
        );

    border: 1px solid rgba(126, 87, 255, 0.45);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.28);
}


/* ===================================== */
/* GIF */
/* ===================================== */

.arta-card-inner img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

.arta-card-inner video{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

    background:transparent;
}

/* ===================================== */
/* PIN ICON */
/* ===================================== */

.arta-pin {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 300;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.arta-pin img,
.arta-pin svg {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ===================================== */
/* TABLET */
/* ===================================== */

@media (max-width: 992px) {

    .arta-stack-wrapper {
        flex-direction: column;

        gap: 40px;

        padding: 80px 0;
    }

    .arta-left,
    .arta-cards {
        width: 100%;
    }

    .arta-cards {
        height: 420px;
    }

    .arta-left {
        text-align: center;
    }

    .arta-title {
        font-size: 30px;
    }
}


/* ===================================== */
/* MOBILE */
/* ===================================== */

@media (max-width: 768px) {

    .arta-stack-wrapper {
        min-height: auto;

        padding: 70px 0;
    }

    .arta-cards {
        order: 1;
    }

    .arta-left {
        order: 2;

        width: 100%;

        text-align: center;

        margin-top: 10px;
    }

    .arta-desc {
        display:block;
    }

    .arta-title {
        font-size: 24px;
        margin-bottom: 14px;
    }

    .arta-btn {
        justify-content: center;
    }


    .arta-pin {
        width: 34px;
        height: 34px;

        top: 12px;
        left: 12px;
    }
}


/* =====================================
   ساختار پایه (مقادیر Fallback؛ کنترل‌های
   استایل ویجت در پنل المنتور با اختصاصیت
   بالاتر این‌ها رو override می‌کنن)
===================================== */

/* این لایه همیشه لبه‌به‌لبه (تمام‌عرض) می‌مونه؛ بک‌گراند
   (Background - Pinned Area) دقیقاً همینجا نشسته می‌شه.
   عرضِ محتوا رو هیچ‌وقت اینجا محدود نکن - برای اون
   .arta-stack-inner هست. */
.arta-stack-viewport{
    position: relative;
}

/* لایه‌ی محتوا: همون چیزیه که "Content Width" (Max Width /
   Horizontal Padding) روش اعمال می‌شه. مستقل از بک‌گراند بالاست،
   پس محدودکردن عرض محتوا هیچ‌وقت بک‌گراند رو هم جمع نمی‌کنه.
   دیگه اینجا padding-top نمی‌ذاریم؛ آفست هدر الان یک‌بار روی
   body اعمال می‌شه (توسط arta-scroll-core.js) + خودِ نقطه‌ی
   شروع pin در stack-cards.js هم با آفست هدر هماهنگ شده - پس
   اینجا این‌ها دیگه لازم نیستن و باعث دوبار کم‌شدن فضا نمی‌شن. */
.arta-stack-inner{
    width: 100%;
    height: 100%;

    display:flex;
    flex-direction:column;
}

.arta-stack-header{
    display:flex;

    flex-direction:column;

    /* پیش‌فرض‌های Vertical/Horizontal Align در پنل المنتور،
       دقیقاً همین دو مقدار را (justify-content/align-items) ست می‌کنن */
    justify-content:center;

    align-items:center;

    min-height:200px;
    flex:0 0 200px;

    position:relative;
    z-index:20;
}

.arta-stack-wrapper{
    flex:1;

    /* بدون این، کارت‌ها/متن مستقیم به لبه‌ی بالا (زیر هدر
       تایتل) و پایینِ ناحیه‌ی pin‌شده می‌چسبیدن. */
    padding: 28px 0;

    /* بدون border-box، این padding روی فضای flex:1 محاسبه‌شده
       اضافه می‌شد (نه داخلش)، یعنی می‌تونست از فضای واقعیِ
       در دسترس بیشتر بشه و باعث overflow کارت‌ها از سکشن بشه. */
    box-sizing: border-box;

    min-height: 0;
}


.arta-stack-section{

    /* برگردوندیم به 100vh ساده: تست واقعی نشون داد هدر
       position:static داره (نه fixed/sticky)، پس خودش توی
       جریان عادی صفحه محتوا رو هول می‌ده پایین و هیچ نیازی به
       کم‌کردن ارتفاع هدر از اینجا نیست. */
    min-height: 100vh;

}

.arta-stack-viewport{

    height: 100vh;

}