/* --- GLOBAL RESETS & VARS --- */
:root {
    --text-primary: #333333;
    --bg-color: #ffffff;
    --btn-bg: #ffffff;
    --btn-hover: #f0f0f0;
    --btn-border: #e0e0e0;
    --gap-size: 0.5%;
    /* Adjusts the white line thickness */
}

/* --- SHARD GRID SYSTEM (Layouts 1, 2, 3, 4, 5) --- */
.shard-gallery {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #fff;
    display: none;
}

.shard-item {
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.shard-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Image fills the bounding box */
    display: block;
    transition: 0.2s ease;
}

.shard-item:hover {
    z-index: 10;
    filter: brightness(1.1);
}

.shard-item:hover img {
    transform: scale(1.01);
}

/* --- Layout 1 (Single Full Image) --- */
.layout-1-img-1 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: none;
    /* No clipping needed */
}

/* --- Layout 2 (Split Diagonal) --- */
/* Left Shard */
.layout-2-img-1 {
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 81% 100%, 0 100%);
}

/* Right Shard */
.layout-2-img-2 {
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    clip-path: polygon(19% 0, 100% 0, 100% 100%, 0 100%);
}

/* --- Layout 3 (1 Left, 2 Right) --- */
/* Left Featured */
.layout-3-img-1 {
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

/* Top Right */
.layout-3-img-2 {
    top: 0;
    right: 0;
    width: 55%;
    height: 50%;
    z-index: 2 !important;
    clip-path: polygon(19% 0%, 100% 0, 100% 100%, 10% 100%);
}

/* Bottom Right */
.layout-3-img-3 {
    bottom: 0;
    right: 0;
    width: 55%;
    height: 50%;
    z-index: 2 !important;
    clip-path: polygon(10% 2%, 100% 2%, 100% 100%, 1% 100%);
}

/* --- Layout 4 (1 Left, 2 Middle, 1 Right) --- */
/* Left Tall */
.layout-4-img-1 {
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 83% 100%, 0 100%);
}

/* Middle Top */
.layout-4-img-2 {
    top: 0;
    left: 27%;
    width: 44%;
    height: 50%;
    clip-path: polygon(7.5% 0, 97.5% 0, 92.5% 100%, 0 130%);
}

/* Middle Bottom */
.layout-4-img-3 {
    bottom: 0;
    left: 25%;
    width: 43%;
    height: 50%;
    clip-path: polygon(6.5% 2%, 99% 2%, 94% 100%, 0 108%);
}

/* Right Tall */
.layout-4-img-4 {
    top: 0;
    right: 0;
    width: 35%;
    height: 100%;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 116%);
}

/* --- Layout 5 (2 Left, Center Featured, 2 Right) --- */
/* Featured Center (Index 0 in logic) */
.layout-5-center {
    top: 0;
    left: 20%;
    width: 59%;
    height: 100%;
    clip-path: polygon(18% 0%, 89% 0%, 76% 100%, 3% 100%);
}

/* Left Top (Index 1) */
.layout-5-left-top {
    top: 0;
    left: 0;
    width: 32%;
    height: 50%;
    clip-path: polygon(0 0, 95% 0, 81% 100%, 0 100%);
}

/* Left Bot (Index 2) */
.layout-5-left-bot {
    bottom: 0;
    left: 0;
    width: 26%;
    height: 50%;
    clip-path: polygon(0 2%, 99.5% 2%, 83% 100%, 0 100%);
}

/* Right Top (Index 3) */
.layout-5-right-top {
    top: 0;
    right: 0;
    width: 32%;
    height: 50%;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 126%);
}

/* Right Bot (Index 4) */
.layout-5-right-bot {
    bottom: 0;
    right: 0;
    width: 35%;
    height: 50%;
    clip-path: polygon(11% 2%, 100% 2%, 100% 100%, 0% 101%);
}


/* --- COMPLEX GRID (> 5 images) --- */
.gallery-grid-layout {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: 470px 70px 1fr;
    grid-template-rows: 240px 240px;
    gap: 6px;
    padding: 0 0 0 6px;
    background-color: #F2F1F3;
    height: 486px;
}

.grid-item {
    overflow: hidden;
    border-radius: 20px;
}

.grid-item img,
.scroll-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Scroller Styles */
.scroll-item {
    flex-shrink: 0;
    width: 100%;
    max-width: 600px;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background-color: #eee;
}

.scroll-item img {
    pointer-events: none;
    user-select: none;
}

.scroll-container {
    overflow: hidden;
    position: relative;
    cursor: grab;
    border-radius: 0;
}

.scroll-container.active {
    cursor: grabbing;
}

.scroll-wrapper {
    display: flex;
    gap: 6px;
    width: max-content;
    position: relative;
    z-index: 1;
    height: 100%;
    will-change: transform;
}

.scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 114px;
    background: linear-gradient(270deg, rgba(242, 241, 243, 0.00) 0%, #F2F1F3 80.7%);
    z-index: 2;
    pointer-events: none;
}

/* --- MOBILE SLIDER --- */
.mobile-slider-container {
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    height: 40vh;
    background: #eee;
}

.mobile-slider-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}

.mobile-slider-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.mobile-slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    font-size: 18px;
    color: #333;
    transition: opacity 0.2s;
}

.slider-arrow:hover {
    background-color: white;
}

.slider-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

#prev-btn {
    left: 16px;
}

#next-btn {
    right: 16px;
}

#slider-counter {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(255, 255, 255, 0.60);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 400;
    padding: 4px 6px;
    border-radius: 6px;
    backdrop-filter: blur(2px);
}

/* --- VISIBILITY LOGIC --- */
@media (max-width: 991px) {

    .gallery-grid-layout,
    .shard-gallery {
        display: none !important;
    }

    .mobile-slider-container {
        display: block !important;
    }

    .map--switch__wrapper {
        justify-content: center;
    }
}

@media (min-width: 992px) {
    .mobile-slider-container {
        display: none !important;
    }

    .shard-gallery {
        display: block;
    }

    /* Show shard by default if created */
}