/**
 * Stylesheet for EP KU Gallery Widget
 * Premium visual aesthetics, fully responsive, and highly animated.
 */

/* ========================================
   GRID WRAPPER & CONTAINER
   ======================================== */
.ep-ku-gallery-wrapper {
    width: 100%;
}

.ep-ku-gallery-grid {
    display: grid;
    /* Respect Rule 2.2: Do not mix flex and grid. Controlled via CSS variables */
    grid-template-columns: repeat(var(--ep-ku-gallery-cols, 4), 1fr);
    column-gap: var(--ep-ku-gallery-gap, 20px);
    row-gap: var(--ep-ku-gallery-row-gap, 20px);
    width: 100%;
}

/* Responsive grid fallbacks */
@media (max-width: 1024px) {
    .ep-ku-gallery-grid {
        grid-template-columns: repeat(var(--ep-ku-gallery-cols-tablet, 2), 1fr);
    }
}

@media (max-width: 767px) {
    .ep-ku-gallery-grid {
        grid-template-columns: repeat(var(--ep-ku-gallery-cols-mobile, 1), 1fr);
    }
}

/* ========================================
   IMAGE ASPECT RATIOS
   ======================================== */
.ep-ku-gallery-grid.ratio-16-9 .ep-ku-gallery__card-wrap {
    aspect-ratio: 16/9;
}

.ep-ku-gallery-grid.ratio-16-10 .ep-ku-gallery__card-wrap {
    aspect-ratio: 16/10;
}

.ep-ku-gallery-grid.ratio-4-3 .ep-ku-gallery__card-wrap {
    aspect-ratio: 4/3;
}

.ep-ku-gallery-grid.ratio-square .ep-ku-gallery__card-wrap {
    aspect-ratio: 1/1;
}

.ep-ku-gallery-grid.ratio-auto .ep-ku-gallery__card-wrap {
    aspect-ratio: auto;
}

/* ========================================
   CARD & BOX STYLING
   ======================================== */
.ep-ku-gallery__card-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.ep-ku-gallery__card {
    border-radius: inherit;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ep-ku-gallery__card:hover {
    box-shadow: 0px 16px 36px rgba(0, 0, 0, 0.08);
}

/* Zoom Hover Effect on Featured Image */
.ep-ku-gallery__image {
    border-radius: inherit;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ep-ku-gallery__card:hover .ep-ku-gallery__image {
    transform: scale(1.06);
}

/* ========================================
   PREMIUM GLASSMORPHISM HOVER OVERLAY
   ======================================== */
.ep-ku-gallery__overlay {
    border-radius: inherit;
    background-color: var(--ep-ku-overlay-bg, rgba(236, 0, 140, 0.75));
    backdrop-filter: blur(4px); /* Premium backdrop blur styling! */
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

/* Zoom Icon and Caption Animations */
.ep-ku-gallery__zoom-icon {
    color: var(--ep-ku-overlay-icon-color, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ep-ku-gallery__caption {
    color: var(--ep-ku-caption-color, #ffffff);
    margin: 0;
    max-width: 90%;
    word-break: break-word;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}