/* ==========================================
   Horizontal Collage Grid Gallery
========================================== */

.custom-gallery-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
}

.custom-gallery-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.custom-gallery-scroll::-webkit-scrollbar {
    display: none;
}

/* Track styled as a multi-row grid collage */
.gallery-track {
    display: grid;
    grid-template-rows: repeat(2, 180px); /* 2 rows, 180px tall each */
    grid-auto-columns: minmax(220px, auto); /* Dynamic width columns */
    grid-auto-flow: column dense; /* Dynamically packs images into empty spaces */
    gap: 12px;
    padding: 8px 0;
    min-width: max-content;
}

/* Base item styling */
.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

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

/* Asymmetrical Collage Pattern Rules (repeats every 5 items) */
.gallery-item:nth-child(5n + 1) {
    grid-row: span 2;  /* Tall image spanning both rows */
    width: 280px;
}

.gallery-item:nth-child(5n + 2) {
    grid-row: span 1;  /* Normal square/rectangle top row */
    width: 220px;
}

.gallery-item:nth-child(5n + 3) {
    grid-row: span 1;  /* Normal square/rectangle bottom row */
    width: 240px;
}

.gallery-item:nth-child(5n + 4) {
    grid-row: span 2;  /* Large feature square spanning both rows */
    width: 360px;
}

.gallery-item:nth-child(5n + 5) {
    grid-row: span 1;  /* Compact top/bottom row filler */
    width: 200px;
}

/* Arrow Navigation Buttons */
.gallery-scroll-btn {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #1e40af;
    color: #ffffff;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.gallery-scroll-btn:hover {
    background: #1d4ed8;
    transform: scale(1.05);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .gallery-track {
        grid-template-rows: repeat(2, 140px); /* Slightly shorter rows on mobile */
        gap: 8px;
    }

    .gallery-item:nth-child(5n + 1) { width: 200px; }
    .gallery-item:nth-child(5n + 2) { width: 160px; }
    .gallery-item:nth-child(5n + 3) { width: 180px; }
    .gallery-item:nth-child(5n + 4) { width: 260px; }
    .gallery-item:nth-child(5n + 5) { width: 150px; }

    .gallery-scroll-btn {
        display: none; /* Pure touch-swipe on mobile */
    }
}