/* ═══════════════════════════════════════════
   Justified Gallery Widget — style.css
   ═══════════════════════════════════════════ */

/* ── Grid: true justified flex layout ─────── */
.jgw-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
}

/* ── Each item ─────────────────────────────── */
.jgw-item {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    /* flex-grow set inline per-image (aspect ratio). flex-basis:0 inline.
       min-width:0 lets items shrink below their content size (required for
       flex-basis:0 to work correctly across all browsers). */
    flex-shrink: 1;
    min-width: 0;
    min-height: 0;
}

/* ── Cover image ───────────────────────────── */
.jgw-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

/* ── Overlay base (used by several animations) */
.jgw-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* background set via Elementor colour control */
    background: rgba(0, 0, 0, 0.22);
}

/* ════════════════════════════════════════════
   HOVER ANIMATION 1 — Levitate
   Image floats upward with a growing shadow.
   ════════════════════════════════════════════ */
.jgw-hover-levitate .jgw-item {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition:
        transform  0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease;
    will-change: transform, box-shadow;
    z-index: 1;
}
.jgw-hover-levitate .jgw-item .jgw-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.jgw-hover-levitate .jgw-item img {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jgw-hover-levitate .jgw-item:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.22),
        0  6px 14px rgba(0, 0, 0, 0.12);
    z-index: 2;
}
.jgw-hover-levitate .jgw-item:hover img {
    transform: scale(0.975);
}
.jgw-hover-levitate .jgw-item:hover .jgw-overlay {
    opacity: 1;
}

/* ════════════════════════════════════════════
   HOVER ANIMATION 2 — Zoom
   Image scales up smoothly from center.
   ════════════════════════════════════════════ */
.jgw-hover-zoom .jgw-item .jgw-overlay {
    opacity: 0;
    transition: opacity 0.35s ease;
}
.jgw-hover-zoom .jgw-item img {
    transform: scale(1);
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.jgw-hover-zoom .jgw-item:hover img {
    transform: scale(1.1);
}
.jgw-hover-zoom .jgw-item:hover .jgw-overlay {
    opacity: 1;
}

/* ════════════════════════════════════════════
   HOVER ANIMATION 3 — Reveal
   Dark overlay slides upward from the bottom,
   like a curtain drawing back.
   ════════════════════════════════════════════ */
.jgw-hover-reveal .jgw-item img {
    transform: scale(1);
    transition: transform 0.45s ease;
}
.jgw-hover-reveal .jgw-item .jgw-overlay {
    opacity: 1;
    transform: translateY(100%);
    transition: transform 0.42s cubic-bezier(0.23, 1, 0.32, 1);
}
.jgw-hover-reveal .jgw-item:hover .jgw-overlay {
    transform: translateY(0);
}
.jgw-hover-reveal .jgw-item:hover img {
    transform: scale(1.04);
}

/* ════════════════════════════════════════════
   HOVER ANIMATION 4 — Flash
   A bright shine sweeps diagonally across.
   ════════════════════════════════════════════ */
.jgw-hover-flash .jgw-item .jgw-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.jgw-hover-flash .jgw-item img {
    transform: scale(1);
    transition: transform 0.45s ease;
}
.jgw-hover-flash .jgw-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 70%,
        transparent 100%
    );
    background-size: 250% 100%;
    background-position: -100% 0;
    opacity: 0;
    transition: background-position 0s;
}
.jgw-hover-flash .jgw-item:hover .jgw-flash {
    background-position: 200% 0;
    opacity: 1;
    transition: background-position 0.55s ease, opacity 0s;
}
.jgw-hover-flash .jgw-item:hover .jgw-overlay {
    opacity: 1;
}
.jgw-hover-flash .jgw-item:hover img {
    transform: scale(1.04);
}

/* ── No animation ───────────────────────────── */
.jgw-hover-none .jgw-item .jgw-overlay {
    opacity: 0;
}