/* ==========================================================
   KIAN DEZH - GALLERY WIDE ITEM HEIGHT FIX
   نسخه اصلاح‌شده: آیتم Wide حدوداً 2.5 برابر آیتم معمولی
   ========================================================== */

:root {
    --kd-gallery-unit-row: 108px;
    --kd-gallery-gap: 18px;
    --kd-gallery-radius: 30px;

    --kd-gallery-normal-row-span: 2;
    --kd-gallery-large-row-span: 4;
    --kd-gallery-wide-row-span: 5;
}

/* ==========================================================
   GLOBAL GALLERY GRID NORMALIZATION
   ========================================================== */

html body main .hotel-gallery-grid,
html body main .restaurant-gallery-grid,
html body main .bazaar-gallery-grid,
html body main .residence-gallery-grid,
html body main .golf-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-rows: var(--kd-gallery-unit-row) !important;
    grid-auto-flow: dense !important;
    gap: var(--kd-gallery-gap) !important;
    align-items: stretch !important;
}

/* ==========================================================
   NORMAL ITEMS
   ========================================================== */

html body main .hotel-gallery-item,
html body main .restaurant-gallery-item,
html body main .bazaar-gallery-item,
html body main .residence-gallery-item,
html body main .golf-gallery-item {
    position: relative !important;
    margin: 0 !important;
    grid-column: span 4 !important;
    grid-row: span var(--kd-gallery-normal-row-span) !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: var(--kd-gallery-radius) !important;
    overflow: hidden !important;
    background: #111111 !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .12) !important;
}

/* ==========================================================
   LARGE ITEMS
   ========================================================== */

html body main .hotel-gallery-big,
html body main .hotel-gallery-large,
html body main .restaurant-gallery-large,
html body main .bazaar-gallery-large,
html body main .residence-gallery-large,
html body main .golf-gallery-large {
    grid-column: span 8 !important;
    grid-row: span var(--kd-gallery-large-row-span) !important;
}

/* ==========================================================
   WIDE ITEMS
   تصویر آخر گالری: حدوداً 2.5 برابر آیتم معمولی
   ========================================================== */

html body main .hotel-gallery-wide,
html body main .restaurant-gallery-wide,
html body main .bazaar-gallery-wide,
html body main .residence-gallery-wide,
html body main .golf-gallery-wide {
    grid-column: span 8 !important;
    grid-row: span var(--kd-gallery-wide-row-span) !important;
}

/* ==========================================================
   MEDIA INSIDE GALLERY
   ========================================================== */

html body main .hotel-gallery-item img,
html body main .hotel-gallery-item video,
html body main .restaurant-gallery-item img,
html body main .restaurant-gallery-item video,
html body main .bazaar-gallery-item img,
html body main .bazaar-gallery-item video,
html body main .residence-gallery-item img,
html body main .residence-gallery-item video,
html body main .golf-gallery-item img,
html body main .golf-gallery-item video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

html body main .bazaar-gallery-video,
html body main .restaurant-gallery-item[data-bazaar-gallery-video] .bazaar-gallery-video,
html body main .hotel-gallery-item[data-bazaar-gallery-video] .bazaar-gallery-video,
html body main .residence-gallery-item[data-bazaar-gallery-video] .bazaar-gallery-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* ==========================================================
   SOFT OVERLAY
   ========================================================== */

html body main .hotel-gallery-item::after,
html body main .restaurant-gallery-item::after,
html body main .bazaar-gallery-item::after,
html body main .residence-gallery-item::after,
html body main .golf-gallery-item::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(to top, rgba(0, 0, 0, .18), transparent 58%) !important;
}

/* ==========================================================
   PLAY BUTTON SAFETY
   ========================================================== */

html body main .bazaar-gallery-play-btn {
    position: absolute !important;
    z-index: 8 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

html body main .bazaar-gallery-play-btn:hover,
html body main .bazaar-gallery-play-btn:focus-visible {
    transform: translate(-50%, -50%) scale(1.05) !important;
}

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

@media (max-width: 1100px) {
    :root {
        --kd-gallery-unit-row: 104px;
        --kd-gallery-gap: 16px;
    }

    html body main .hotel-gallery-grid,
    html body main .restaurant-gallery-grid,
    html body main .bazaar-gallery-grid,
    html body main .residence-gallery-grid,
    html body main .golf-gallery-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        grid-auto-rows: var(--kd-gallery-unit-row) !important;
        gap: var(--kd-gallery-gap) !important;
    }

    html body main .hotel-gallery-item,
    html body main .restaurant-gallery-item,
    html body main .bazaar-gallery-item,
    html body main .residence-gallery-item,
    html body main .golf-gallery-item {
        grid-column: span 6 !important;
        grid-row: span 2 !important;
    }

    html body main .hotel-gallery-big,
    html body main .hotel-gallery-large,
    html body main .restaurant-gallery-large,
    html body main .bazaar-gallery-large,
    html body main .residence-gallery-large,
    html body main .golf-gallery-large {
        grid-column: span 6 !important;
        grid-row: span 4 !important;
    }

    html body main .hotel-gallery-wide,
    html body main .restaurant-gallery-wide,
    html body main .bazaar-gallery-wide,
    html body main .residence-gallery-wide,
    html body main .golf-gallery-wide {
        grid-column: span 6 !important;
        grid-row: span 5 !important;
    }
}

/* ==========================================================
   MOBILE
   در موبایل هم Wide خیلی بلندتر می‌شود، اما تک‌ستونه می‌ماند.
   ========================================================== */

@media (max-width: 720px) {
    :root {
        --kd-gallery-unit-row: 92px;
        --kd-gallery-gap: 14px;
        --kd-gallery-radius: 24px;
    }

    html body main .hotel-gallery-grid,
    html body main .restaurant-gallery-grid,
    html body main .bazaar-gallery-grid,
    html body main .residence-gallery-grid,
    html body main .golf-gallery-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: var(--kd-gallery-unit-row) !important;
        gap: var(--kd-gallery-gap) !important;
    }

    html body main .hotel-gallery-item,
    html body main .restaurant-gallery-item,
    html body main .bazaar-gallery-item,
    html body main .residence-gallery-item,
    html body main .golf-gallery-item {
        grid-column: 1 / -1 !important;
        grid-row: span 3 !important;
        border-radius: var(--kd-gallery-radius) !important;
    }

    html body main .hotel-gallery-big,
    html body main .hotel-gallery-large,
    html body main .restaurant-gallery-large,
    html body main .bazaar-gallery-large,
    html body main .residence-gallery-large,
    html body main .golf-gallery-large {
        grid-column: 1 / -1 !important;
        grid-row: span 5 !important;
    }

    html body main .hotel-gallery-wide,
    html body main .restaurant-gallery-wide,
    html body main .bazaar-gallery-wide,
    html body main .residence-gallery-wide,
    html body main .golf-gallery-wide {
        grid-column: 1 / -1 !important;
        grid-row: span 8 !important;
    }
}