/* ریشه و ویو */
.magazine {
    position: relative;
    background: var(--color-bg, #0c0a22);
    color: var(--color-white, #fff);
    overflow: hidden;
    margin-top: 4rem;
}
/* برای حالت دسکتاپِ استک‌شونده از این متغیر استفاده می‌کنیم */
.magazine { --mag-stack-gap: -45px; --mag-stack-right: 88px; --mag-stack-scale: .06; }

.mag-viewport { overflow: hidden; width: 100%; }
.mag-track {
    display: flex;
    will-change: transform;
    transition: transform 440ms cubic-bezier(.22,.61,.36,1);
    touch-action: pan-y;
}

/* عرض اسلایدها (مود افقی/موبایل) */
.mag-slide { flex: 0 0 100%; }

/* حاشیه داخلی امن محتوا */
.mag-center {
    max-width: 1200px;
    margin-inline: auto;
    padding: 24px clamp(16px, 4vw, 56px) 56px;
}

/* هدر بالا */
.mag-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px clamp(16px,4vw,56px) 0;
}
.mag-titlebox { text-align: right; }
.mag-top-title {
    display: inline-block;
    margin: 0;
    font-size: clamp(20px, 3.2vw, 34px);
    margin-left: 0.3rem;
}
.mag-top-sub {
    display: inline-block;
    margin: 6px 0 0;
    font-size: clamp(20px, 3.2vw, 34px);
    color: #5E5E5E;
}

/* pagination */
.mag-pager { display: flex; align-items: center; gap: 12px; }
.mag-page-btn {
    background: transparent; border: none; cursor: pointer;
    padding: 6px; line-height: 0; opacity: .6;
}
.mag-page-btn img { display: block; }
.mag-bars { display: flex; align-items: center; gap: 8px; }
.mag-bar {
    width: 28px; height: 2px; background: rgba(255,255,255,.35);
    display: inline-block; border-radius: 2px; cursor: pointer;
    transition: opacity .2s, transform .2s;
}
.mag-bar.is-active { background: var(--color-white,#fff); transform: scaleY(1.6); }

/* دو ستون دسکتاپ (داخل هر اسلاید) */
.mag-hero, .mag-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "right left";
    gap: clamp(10px,2vw,20px);
    margin-bottom: clamp(14px,2.2vw,22px);
}
.mag-right { grid-area: right; }
.mag-left  { grid-area: left; }
.mag-left a:not(.mag-link),.mag-right a:not(.mag-link){
    color: unset;
    text-decoration: unset;
}

/* تصاویر */
.mag-figure { margin: 0; overflow: hidden; }
.mag-figure img {
    width: 100%;
    height: clamp(220px, 42vw, 420px);
    object-fit: cover;
    display: block;
}

/* متن‌ها */
.mag-eyebrow { margin: 0 0 6px; font-size: 14px; opacity: 60%; font-weight: 600; }
.mag-h2      { margin: 0 0 8px; font-size: clamp(18px, 3vw, 30px); }
.mag-p       { margin: 0 0 30px; line-height: 30px; opacity: 60%; font-size: 16px; font-weight: 600; }

.mag-link{
    color: inherit;
    text-decoration: none;
    border: none;
    background: transparent;
    display: flex;
    gap: 11px;
    align-items: center;
    opacity: 60%;
    font-weight: 600;
    font-size: 16px;
}
.mag-link:hover{ text-decoration: underline; }

/* =========================
   مود «استک‌شونده» فقط دسکتاپ
   ========================= */
@media (min-width: 769px){
    .magazine.is-stacked .mag-viewport{ overflow: visible; }
    .magazine.is-stacked .mag-track{
        /* در حالت استک، دیگر فلکس نیست؛ مطلق می‌چینیم */
        position: relative;
        display: block;
        height: var(--mag-stack-height, auto);
        will-change: height;
        transition: height 440ms cubic-bezier(.22,.61,.36,1);
        transform: none !important;
    }
    .magazine.is-stacked .mag-slide{
        position: absolute;
        inset-inline: 0; top: 0;
        /* انیمیشن روی خود اسلایدها اعمال می‌شود */
        will-change: transform, opacity, filter;
        transition:
            transform 440ms cubic-bezier(.22,.61,.36,1),
            opacity 300ms ease,
            filter 300ms ease;
    }
    .magazine.is-stacked .mag-slide::before{
        content: "";
        position: absolute; inset: 0;
        border-radius: 18px;
        pointer-events: none;
    }
    /* کمی کوچک‌نمایی اسلایدهای پشتِ دست */
    .magazine.is-stacked .mag-slide.is-behind{
        filter: saturate(.9) contrast(.98);
    }
    .magazine.is-stacked .mag-slide.is-out{
        pointer-events: none;
    }
}

/* =========================
   موبایل
   ========================= */
@media (max-width: 768px){
    .mag-top{
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 24px 16px 8px;
    }
    .mag-titlebox{ text-align: center; }
    .mag-top-title{
        display: inline-block; margin: 0; font-size: 34px; font-weight: 600; margin-left: 1rem; width: 100%;
        text-align: right;
    }
    .mag-top-sub{
        font-size: 24px; text-align: right; color: #5E5E5E; opacity: 1;
    }
    .mag-pager{ display: none; }

    /* ستون‌ها تک‌ستونه شوند ولی حذف نشوند */
    .mag-hero, .mag-body{
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .mag-figure img{ height: clamp(220px, 56vw, 420px); border-radius: 16px; }
    .mag-center{ padding: 12px 16px 36px; }

    .mag-body .mag-left .mag-eyebrow,
    .mag-body .mag-left .mag-h2,
    .mag-body .mag-left .mag-p,
    .mag-body .mag-left .mag-link,
    .mag-body .mag-right .mag-eyebrow,
    .mag-body .mag-right .mag-h2,
    .mag-body .mag-right .mag-p,
    .mag-body .mag-right .mag-link{
        justify-content: flex-start;
        text-align: right;
    }
    .mag-h2{ font-size: clamp(22px, 6.4vw, 32px); }
    .mag-p { font-size: 15px; }
    .mag-link{ justify-content: center; }
}


/* ---- تنظیمات اضافی حالت استک‌شونده (فقط دسکتاپ) ---- */
@media (min-width: 769px){
    .magazine{
        --gap-base: clamp(10px, 2vw, 20px);
        --spread-step: 30px;      /* هر عمق → افزایش گپ بین ستون‌ها (قبلاً 18 بود) */
        --side-shift-step: 70px;  /* هر عمق → شیفت ستون راست/چپ به راست/چپ (قبلاً 16 بود) */
        --img-scale-step: .05;    /* هر عمق → کاهش scale تصویر در اسلایدهای پشتی */
    }

    /* انیمیشن نرم روی ستون‌ها و متن‌ها */
    .magazine.is-stacked .mag-slide .mag-right,
    .magazine.is-stacked .mag-slide .mag-left{
        transition: transform 440ms cubic-bezier(.22,.61,.36,1);
    }
    .magazine.is-stacked .mag-slide .mag-eyebrow,
    .magazine.is-stacked .mag-slide .mag-h2,
    .magazine.is-stacked .mag-slide .mag-p,
    .magazine.is-stacked .mag-slide .mag-link{
        transition: opacity 300ms ease;
    }

    /* تصویرها هم ترنزیشن و مبدأ مناسب داشته باشند */
    .magazine.is-stacked .mag-slide .mag-figure img{
        transition: transform 440ms cubic-bezier(.22,.61,.36,1);
        transform-origin: center center;
    }

    /* فاصلهٔ ستون‌ها تابع عمق باشد */
    .magazine.is-stacked .mag-slide { --depth: 0; }
    .magazine.is-stacked .mag-slide .mag-hero,
    .magazine.is-stacked .mag-slide .mag-body{
        gap: calc(var(--gap-base) + var(--depth) * var(--spread-step));
    }

    /* متنِ پشتی نامرئی؛ رویی ۱ */
    .magazine.is-stacked .mag-slide.is-behind .mag-eyebrow,
    .magazine.is-stacked .mag-slide.is-behind .mag-h2,
    .magazine.is-stacked .mag-slide.is-behind .mag-p,
    .magazine.is-stacked .mag-slide.is-behind .mag-link,
    .magazine.is-stacked .mag-slide.is-out .mag-eyebrow,
    .magazine.is-stacked .mag-slide.is-out .mag-h2,
    .magazine.is-stacked .mag-slide.is-out .mag-p,
    .magazine.is-stacked .mag-slide.is-out .mag-link{
        opacity: 0 !important;
        pointer-events: none;
    }
    .magazine.is-stacked .mag-slide.is-active .mag-eyebrow,
    .magazine.is-stacked .mag-slide.is-active .mag-h2,
    .magazine.is-stacked .mag-slide.is-active .mag-p,
    .magazine.is-stacked .mag-slide.is-active .mag-link{
        opacity: 60% !important;
    }

    .magazine.is-stacked .mag-slide.is-active .mag-h2{
        opacity: 100% !important;
    }

    /* بازشدن طرفین (هرچه عقب‌تر → بازتر) */
    .magazine.is-stacked .mag-slide.is-behind .mag-right{
        transform: translateX(calc(var(--depth) * var(--side-shift-step)));
    }
    .magazine.is-stacked .mag-slide.is-behind .mag-left{
        transform: translateX(calc(var(--depth) * -1 * var(--side-shift-step)));
    }
}

/* جلوگیری از درگ/سلکت پیش‌فرض روی iOS */
.mag-track,
.mag-figure img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* مطمئن شو touch-action روی تمام سطوحِ درگیر اعمال است */
.mag-viewport,
.mag-track,
.mag-figure img {
    touch-action: pan-y;       /* نه none */
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}