/* ---------- پایه ---------- */
.view-box {
    direction: rtl;
    display: flex;
    gap: 24px;
    --vcb-gap: 24px;
    /* دسکتاپ: مثل قبل می‌تونه هوریزنتال بشه؛ موبایل را پایین جدا می‌کنیم */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.view-box::-webkit-scrollbar {
    height: 0;
}

.view-box .view-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 292/206;
    overflow: hidden;
    border-radius: 28px;
    isolation: isolate;
    transform: translateZ(0);
    /* تعداد کارت در ردیف (قابل تنظیم با JS) */
    flex: 0 0 calc((100% - (var(--vcb-gap) * (var(--vcb-visible, 4) - 1))) / var(--vcb-visible, 4));
    max-width: calc((100% - (var(--vcb-gap) * (var(--vcb-visible, 4) - 1))) / var(--vcb-visible, 4));
    scroll-snap-align: center;
}

/* تصویر پس‌زمینهٔ کارت */
.view-box .view-bg {
    position: absolute;
    inset: 10px; /* پایین را به اندازهٔ پنل خالی می‌گذاریم */
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
}

.view-box .view-card:hover .view-bg {
    filter: grayscale(0);
}

/* ---------- پنل پایین: با ماسکِ SVG + لایهٔ بلور ---------- */
/* 1) خودِ پنل (پس‌زمینهٔ سفید) */
.view-box .view-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 120px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px 5px 16px;
    box-shadow: 0 14px 28px rgba(28, 34, 66, .12);
    background: #fff;

    /* ---- ماسک دسکتاپ (عین SVG شما) ---- */
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%22312%22%20height%3D%22116%22%20viewBox%3D%220%200%20312%20116%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M312%2068C312%2090.6274%20312%20101.941%20304.971%20108.971C297.941%20116%20286.627%20116%20264%20116H40C25.0461%20116%2017.5692%20116%2012%20112.785C8.35154%20110.678%205.32183%20107.648%203.21539%20104C0%2098.4308%200%2090.9538%200%2076C0%2061.0461%200%2053.5692%203.21539%2048C5.32183%2044.3515%208.35154%2041.3218%2012%2039.2154C17.5692%2036%2025.0461%2036%2040%2036H189C198.941%2036%20207%2027.9411%20207%2018C207%208.05888%20215.059%200%20225%200H264C286.627%200%20297.941%200%20304.971%207.02944C312%2014.0589%20312%2025.3726%20312%2048V68Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat bottom center / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg%20width%3D%22312%22%20height%3D%22116%22%20viewBox%3D%220%200%20312%20116%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M312%2068C312%2090.6274%20312%20101.941%20304.971%20108.971C297.941%20116%20286.627%20116%20264%20116H40C25.0461%20116%2017.5692%20116%2012%20112.785C8.35154%20110.678%205.32183%20107.648%203.21539%20104C0%2098.4308%200%2090.9538%200%2076C0%2061.0461%200%2053.5692%203.21539%2048C5.32183%2044.3515%208.35154%2041.3218%2012%2039.2154C17.5692%2036%2025.0461%2036%2040%2036H189C198.941%2036%20207%2027.9411%20207%2018C207%208.05888%20215.059%200%20225%200H264C286.627%200%20297.941%200%20304.971%207.02944C312%2014.0589%20312%2025.3726%20312%2048V68Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat bottom center / 100% 100%;
}

/* 2) لایهٔ بلور (زیرِ پنل، با همان ماسک) */
.view-box .view-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* همان ماسکِ خود پنل */
    -webkit-mask: inherit;
    mask: inherit;
}

.view-box .view-card:hover .view-cta:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/black.png");
    overflow: hidden;
    mix-blend-mode: overlay;
}

.view-box .view-card:hover .view-cta.is-even{
    background: var(--view-secondary);
}

.view-box .view-card:hover .view-cta.is-odd{
    background: var(--view-primary);
}


/* شمارندهٔ پست */
.view-box .view-count {
    position: absolute;
    top: 14px;
    right: 14px;
    height: 44px;
    line-height: 24px;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 500;
    color: #62667A;
}

.view-box .view-count b {
    font-weight: 500;
    color: #7a7f92;
}

/* CTA */
.view-box .view-cta {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 38px;
    border-radius: 56px;
    padding: 5px 16px 5px 0;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.view-box .view-cta.is-even {
    background: var(--view-secondary-100);
}

.view-box .view-cta.is-odd {
    background: var(--view-primary-100);
}

.view-box .view-label {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--view-accent);
}

.view-cta.is-even .view-hash, .view-cta.is-even .view-arrow {
    color: var(--view-secondary);
}

.view-cta.is-odd .view-hash, .view-cta.is-odd .view-arrow {
    color: var(--view-primary);
}

.view-card:hover .view-cta .view-hash,
.view-card:hover .view-cta .view-arrow,
.view-card:hover .view-cta .view-label {
    color: #fff;
}

.view-arrow {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
    margin-left: 16px;
}

/* ---------- موبایل: ۲ ستونه + ماسک موبایل ---------- */
@media (max-width: 767px) {
    .view-box {
        flex-wrap: wrap;
        overflow-x: hidden; /* بدون اسکرول افقی */
        gap: var(--vcb-gap, 16px);
    }

    .view-box .view-card {
        flex: 0 0 calc((100% - var(--vcb-gap, 16px)) / 2);
        max-width: calc((100% - var(--vcb-gap, 16px)) / 2);
        scroll-snap-align: unset;
    }

    /* فضای تصویر بالا کمی کمتر، چون پنل کوتاه‌تر می‌شود */
    .view-box .view-bg {
        inset: 10px;
        bottom: 45px;
    }

    /* پنل: ماسک موبایل (عین SVG شما) + قد دینامیک */
    .view-box .view-panel {
        /*height: clamp(96px, 36vw, 120px);*/
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%22156%22%20height%3D%2296%22%20viewBox%3D%220%200%20156%2096%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M156%2048C156%2070.6274%20156%2081.9411%20148.971%2088.9706C141.941%2096%20130.627%2096%20108%2096H33.5C24.6593%2096%2020.239%2096%2016.6583%2094.8495C9.29134%2092.4825%203.51755%2086.7087%201.1505%2079.3417C0%2075.761%200%2071.3407%200%2062.5C0%2053.6593%200%2049.239%201.1505%2045.6583C3.51755%2038.2913%209.29134%2032.5175%2016.6583%2030.1505C20.239%2029%2024.6593%2029%2033.5%2029H63.5C71.5081%2029%2078%2022.5081%2078%2014.5C78%206.49187%2084.4919%200%2092.5%200H117C131.008%200%20138.012%200%20143.314%202.83389C147.5%205.07149%20150.929%208.50022%20153.166%2012.6865C156%2017.9883%20156%2024.9922%20156%2039V48Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat bottom center / 100% 100%;
        mask: url("data:image/svg+xml,%3Csvg%20width%3D%22156%22%20height%3D%2296%22%20viewBox%3D%220%200%20156%2096%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M156%2048C156%2070.6274%20156%2081.9411%20148.971%2088.9706C141.941%2096%20130.627%2096%20108%2096H33.5C24.6593%2096%2020.239%2096%2016.6583%2094.8495C9.29134%2092.4825%203.51755%2086.7087%201.1505%2079.3417C0%2075.761%200%2071.3407%200%2062.5C0%2053.6593%200%2049.239%201.1505%2045.6583C3.51755%2038.2913%209.29134%2032.5175%2016.6583%2030.1505C20.239%2029%2024.6593%2029%2033.5%2029H63.5C71.5081%2029%2078%2022.5081%2078%2014.5C78%206.49187%2084.4919%200%2092.5%200H117C131.008%200%20138.012%200%20143.314%202.83389C147.5%205.07149%20150.929%208.50022%20153.166%2012.6865C156%2017.9883%20156%2024.9922%20156%2039V48Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat bottom center / 100% 100%;
        padding: 8px;
        bottom: 0;

    }

    .view-box .view-count {
        top: 6px;
        right: 0;
        line-height: 24px;
        font-size: 14px;
    }

    .view-box .view-cta {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 31px;
        border-radius: 56px;
        padding: 8px;
        box-sizing: border-box;
        height: 48px;
    }

    .view-box .view-label{
        font-size: 14px;
    }

    .view-box {
        gap: 24px;
        --vcb-gap: 24px;
    }

    .view-box .view-card{
        aspect-ratio : 1/1;
    }
}

/* هاور در موبایل بی‌اثر */
@media (hover: none) {
    .view-box .view-card:hover .view-bg {
        filter: grayscale(100%);
    }
}