.GBB-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   3. Gallery Layout (Mobile First: 3 rows of 2)
   ========================================================================== */
.GBB-gallery-section {
    padding: 32px 0;
}

.GBB-section-title {
    text-align: center;
    margin-bottom: 36px;
    font-size: 1.6rem;
}

.GBB-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px; /* Expanded row gap to cleanly clear title and subtitle stacks */
    align-items: center;
    justify-items: center;
    padding: 12px 4px;
}

/* Default state: All items are unexpanded links, at 80% opacity */
.GBB-gallery-item {
    display: flex;
    flex-direction: column; /* Organises titles and subtitles vertically */
    width: 100%;
    max-width: 180px;
    text-align: center;
    text-decoration: none;
    color: #333;
    opacity: 0.8; 
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.GBB-gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.25s ease-out;
}

.GBB-image-title {
    margin-bottom: 8px; /* Gap above image */
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.GBB-image-subtitle {
    margin-top: 8px; /* Gap below image */
    font-weight: 400;
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   4. No-JS Dynamic Activation Rules
   ========================================================================== */
#page-one .GBB-gallery-item.page-one,
#page-two .GBB-gallery-item.page-two,
#page-three .GBB-gallery-item.page-three,
#page-four .GBB-gallery-item.page-four,
#page-five .GBB-gallery-item.page-five,
#page-six .GBB-gallery-item.page-six {
    transform: scale(1.30);
    opacity: 1; 
    z-index: 2;
    cursor: default;
    }

/* Style changes specifically for the active page subtitle */
#page-one .GBB-gallery-item.page-one .GBB-image-subtitle,
#page-two .GBB-gallery-item.page-two .GBB-image-subtitle,
#page-three .GBB-gallery-item.page-three .GBB-image-subtitle,
#page-four .GBB-gallery-item.page-four .GBB-image-subtitle,
#page-five .GBB-gallery-item.page-five .GBB-image-subtitle,
#page-six .GBB-gallery-item.page-six .GBB-image-subtitle 
    {
    color: #333; /* Darkens font to stand out alongside the active thumbnail */
    font-weight: 500;
    }

/* Apply vibrant red box shadow to the active thumbnail */
#page-one .GBB-gallery-item.page-one img,
#page-two .GBB-gallery-item.page-two img,
#page-three .GBB-gallery-item.page-three img,
#page-four .GBB-gallery-item.page-four img,
#page-five .GBB-gallery-item.page-five img,
#page-six .GBB-gallery-item.page-six img 
    {
    box-shadow: 0 8px 16px rgba(231, 76, 60, 0.6); /* Red highlight shadow */
    }
/* --- Hover Reset Logic (Only active on pointer-capable desktop screens) --- */
@media (hover: hover) {
    .GBB-gallery-item:hover {
        opacity: 0.95;
        transform: scale(1.3);
    }

/* Scale back down to 1 when another item is active-hovered */
#page-one .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-one):hover) .GBB-gallery-item.page-one,
#page-two .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-two):hover) .GBB-gallery-item.page-two,
#page-three .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-three):hover) .GBB-gallery-item.page-three,
#page-four .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-four):hover) .GBB-gallery-item.page-four,
#page-five .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-five):hover) .GBB-gallery-item.page-five,
#page-six .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-six):hover) .GBB-gallery-item.page-six 
    {transform: scale(1.0);
    opacity: 0.6; /* Reverts back to standard inactive transparency */
    }

/* Drop the shadow back to standard grey when another item is active-hovered */
#page-one .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-one):hover) .GBB-gallery-item.page-one img,
#page-two .GBB-gallery-grid:has(.GBB-gallery-grid:not(.page-two):hover) .GBB-gallery-item.page-two img,
#page-three .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-three):hover) .GBB-gallery-item.page-three img,
#page-four .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-four):hover) .GBB-gallery-item.page-four img,
#page-five .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-five):hover) .GBB-gallery-item.page-five img,
#page-six .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-six):hover) .GBB-gallery-item.page-six img 
    {Box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Standard grey shadow */
    }
    
/* Reset active subtitle color back to grey when another item is active-hovered */
    #page-one .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-one):hover) .GBB-gallery-item.page-one .GBB-image-subtitle,
    #page-two .GBB-gallery-grid:has(.GBB-gallery-itemm:not(.page-two):hover) .GBB-gallery-item.page-two .GBB-image-subtitle,
    #page-three .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-three):hover) .GBB-gallery-item.page-three .GBB-image-subtitle,
    #page-four .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-four):hover) .GBB-gallery-item.page-four .GBB-image-subtitle,
    #page-five .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-five):hover) .GBB-gallery-item.page-five .GBB-image-subtitle,
    #page-six .GBB-gallery-grid:has(.GBB-gallery-item:not(.page-six):hover) .GBB-gallery-item.page-six .GBB-image-subtitle {
        color: #666;
    }
}
/*Use code with caution.How this works::has(...) tells the browser: "Look inside the gallery grid container. If it currently contains a child item that is being hovered...":not(.page-X) narrows down the rule: "...but only if that hovered child item is NOT the active page item."The Override: When those conditions are true, the CSS temporarily targets the active page asset and overrides its scale and shadow back to matching the rest of the layout smoothly.Would you like to also add an expansion animation effect to the inactive image that is currently being hovered, or should we finalize the mobile layout styling rules?AI responses may include mistakes. Learn more */

/* ==========================================================================
   5. Responsive Breakpoints
   ========================================================================== */

/* Tablet Viewport: 2 rows of 3 */
@media (min-width: 650px) {
    .GBB-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px 32px;
    }
    .GBB-gallery-item {
        max-width: 220px;
    }
}



/* Desktop Viewport: 1 row of 6 (Centered alignment, Max 1300px via container) */
@media (min-width: 1024px) {
    .GBB-gallery-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 24px;
    }
    .GBB-gallery-item {
        max-width: 250px;
    }
}