﻿/* =========================================================
   GALLERY – CLEAN DESIGN SYSTEM (SLICK SAFE)
   ========================================================= */

/* BASE GRID / WRAPPER */
.gallery-grid,
.gallery-carousel-wrapper {
    width: 100%;
}

/* =========================================================
   CARD CORE (MAIN FIX HERE)
   ========================================================= */

.gallery-item-single {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin: 12px 15px;
    display: flex;
    flex-direction: column;
    background: transparent;
    transition: transform 0.35s ease-out, box-shadow 0.35s ease-out;
    will-change: transform;
}

    .gallery-item-single:hover {
        transform: translateY(-6px);

        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 
                    0 0 0 1px rgba(255, 255, 255, 0.4), 
                    0 0 18px rgba(247, 217, 221, 0.6);
    }
        .gallery-item-single:hover::before {
            filter: brightness(1.03);
        }
    /* Background layer (fixes uneven bottom/top rendering) */
    .gallery-item-single::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #F7D9DD;
        border-radius: 5px;
        z-index: 0;
    }

    /* Ensure all content sits above background */
    .gallery-item-single > * {
        position: relative;
        z-index: 1;
    }

    /*FIGURE / IMAGE AREA*/

    .gallery-item-single figure {
        margin: 0;
        flex: 1;
        display: flex;
        align-items: flex-end;
        min-height: 280px;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
    }

        /* Image safety (fix stretching + edge bleed) */
        .gallery-item-single figure img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: inherit;
            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }

    /* Hover zoom */
    .gallery-item-single:hover figure img {
        transform: scale(1.02);
        transition: transform 0.35s ease-out;
    }

    /*CONTENT AREA*/

    .gallery-item-single figcaption {
        padding: 10px;
        text-align: left;
        color: #002856;
    }

        .gallery-item-single figcaption h2 {
            margin: 0 0 8px;
            font-size: 1.4rem;
        }

        .gallery-item-single figcaption .sub-title {
            font-size: 0.85rem;
            opacity: 0.85;
            margin-bottom: 6px;
        }

        .gallery-item-single figcaption p {
            margin-bottom: 10px;
        }

        .gallery-item-single figcaption .btn {
            margin-top: 10px;
        }

/* GRID MODE*/

.gallery-grid .gallery-item-single {
    height: 100%;
}

/* SLICK FIXES (IMPORTANT) */

.gallery-carousel-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.gallery-carousel .slick-track {
    display: flex !important;
}

.gallery-carousel .slick-slide {
    padding: 0;
}

.gallery-carousel .gallery-item {
    padding: 0 10px;
    box-sizing: border-box;
}

.gallery-carousel .gallery-item-single {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* DOTS */

.gallery-carousel-dots {
    text-align: center;
    margin-top: 25px;
}

    .gallery-carousel-dots .slick-dots {
        position: static !important;
    }

        .gallery-carousel-dots .slick-dots li {
            margin: 0 4px;
        }

            .gallery-carousel-dots .slick-dots li button:before {
                font-size: 25px;
                opacity: 0.4;
                color: var(--GC-Aspire);
            }

            .gallery-carousel-dots .slick-dots li.slick-active button:before {
                opacity: 1;
            }

/*FALLBACK LOADING STATE */

.gallery-carousel {
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .gallery-carousel.slick-initialized {
        opacity: 1;
    }

    .gallery-carousel .slick-dots {
        position: absolute;
        bottom: -45px;
        left: 0;
        right: 0;
    }

/* RESPONSIVE*/

@media (max-width: 992px) {
    .gallery-item-single figure {
        min-height: 260px;
    }
}

@media (max-width: 768px) {
    .gallery-item-single figure {
        min-height: 230px;
    }
}

@media (max-width: 576px) {
    .gallery-item-single figure {
        min-height: 200px;
    }
}
