/* =========================================
   PREMIER DYNAMIC GALLERY
   FRONTEND STYLING

   Includes:
   - Filter navigation
   - Responsive gallery grid
   - Image/video cards
   - Hover states
   - Load More
   - Result counter
   - Responsive lightbox
   ========================================= */


/* =========================================
   GALLERY WRAPPER
   ========================================= */

.premier-dg-wrapper {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
    padding: 10px 18px 40px;

    box-sizing: border-box;
}


/* =========================================
   FILTER BAR
   ========================================= */

.premier-dg-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 10px;

    margin: 0 0 28px;
}


/* =========================================
   FILTER BUTTON
   ========================================= */

.premier-dg-filter {
    appearance: none;
    -webkit-appearance: none;

    min-height: 44px;

    padding: 10px 18px;

    background: transparent;
    color: #061d45;

    border: 1px solid transparent;
    border-radius: 4px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* =========================================
   FILTER HOVER
   ========================================= */

.premier-dg-filter:hover {
    background: #ffffff;
    color: #061d45;

    border-color:
        rgba(
            6,
            29,
            69,
            0.10
        );

    box-shadow:
        0 5px 15px
        rgba(
            6,
            29,
            69,
            0.06
        );

    transform:
        translateY(-1px);
}


/* =========================================
   ACTIVE FILTER
   ========================================= */

.premier-dg-filter.active {
    position: relative;

    background: #061d45;
    color: #ffffff;

    border-color: #061d45;

    box-shadow:
        0 5px 14px
        rgba(
            6,
            29,
            69,
            0.16
        );
}


/* =========================================
   ACTIVE FILTER GOLD ACCENT
   ========================================= */

.premier-dg-filter.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 3px;

    background: #f8c21c;

    border-radius:
        0 0 4px 4px;
}


/* =========================================
   FILTER FOCUS
   ========================================= */

.premier-dg-filter:focus-visible {
    outline:
        3px solid
        rgba(
            248,
            194,
            28,
            0.45
        );

    outline-offset: 2px;
}


/* =========================================
   GALLERY GRID
   ========================================= */

.premier-dg-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 14px;

    width: 100%;
}


/* =========================================
   GALLERY ITEM
   ========================================= */

.premier-dg-item {
    position: relative;

    min-width: 0;
    margin: 0;

    overflow: hidden;

    background: transparent;

    border-radius: 3px;
}


/* =========================================
   NATIVE HIDDEN STATE
   ========================================= */

.premier-dg-item[hidden] {
    display: none !important;
}


/* =========================================
   ITEM BUTTON RESET
   ========================================= */

.premier-dg-item-button {
    appearance: none;
    -webkit-appearance: none;

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 3px;

    cursor: pointer;

    text-align: left;

    overflow: hidden;
}


/* =========================================
   MEDIA AREA
   ========================================= */

.premier-dg-media {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #e9edf5;

    border-radius: 3px;
}


/* =========================================
   MEDIA IMAGE
   ========================================= */

.premier-dg-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* =========================================
   IMAGE HOVER
   ========================================= */

.premier-dg-item-button:hover
.premier-dg-media img {
    transform: scale(1.025);
}


/* =========================================
   IMAGE HOVER OVERLAY
   ========================================= */

.premier-dg-hover-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(
            6,
            29,
            69,
            0.05
        );

    opacity: 0;

    transition:
        opacity 0.25s ease;
}


/* =========================================
   SHOW IMAGE OVERLAY
   ========================================= */

.premier-dg-item-button:hover
.premier-dg-hover-overlay {
    opacity: 1;
}


/* =========================================
   IMAGE ZOOM ICON
   ========================================= */

.premier-dg-zoom-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        rgba(
            6,
            29,
            69,
            0.80
        );

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.85
        );

    border-radius: 50%;

    font-size: 32px;
    font-weight: 300;
    line-height: 1;

    transform: scale(0.90);

    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}


/* =========================================
   IMAGE ZOOM HOVER
   ========================================= */

.premier-dg-item-button:hover
.premier-dg-zoom-icon {
    transform: scale(1);
}


/* =========================================
   VIDEO PLAY ICON
   ========================================= */

.premier-dg-video-icon {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ff1717;

    border:
        3px solid
        #ffffff;

    border-radius: 50%;

    box-shadow:
        0 8px 22px
        rgba(
            0,
            0,
            0,
            0.22
        );

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================
   VIDEO PLAY TRIANGLE
   ========================================= */

.premier-dg-video-icon span {
    display: block;

    margin-left: 4px;

    color: #ffffff;

    font-size: 20px;
    line-height: 1;
}


/* =========================================
   VIDEO PLAY HOVER
   ========================================= */

.premier-dg-item-button:hover
.premier-dg-video-icon {
    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.07);

    box-shadow:
        0 10px 28px
        rgba(
            0,
            0,
            0,
            0.28
        );
}


/* =========================================
   LOAD MORE AREA
   ========================================= */

.premier-dg-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 30px;
}


/* =========================================
   GALLERY COUNTER
   ========================================= */

.premier-dg-count {
    color: #687386;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}


/* =========================================
   LOAD MORE BUTTON
   ========================================= */

.premier-dg-load-more {
    appearance: none;
    -webkit-appearance: none;

    min-width: 150px;
    min-height: 46px;

    padding: 11px 24px;

    background: #061d45;
    color: #ffffff;

    border:
        1px solid
        #061d45;

    border-radius: 4px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(
            6,
            29,
            69,
            0.12
        );

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================
   LOAD MORE HOVER
   ========================================= */

.premier-dg-load-more:hover {
    background: #0b3477;
    color: #ffffff;

    border-color: #0b3477;

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 25px
        rgba(
            6,
            29,
            69,
            0.17
        );
}


/* =========================================
   LOAD MORE FOCUS
   ========================================= */

.premier-dg-load-more:focus-visible {
    outline:
        3px solid
        rgba(
            248,
            194,
            28,
            0.45
        );

    outline-offset: 3px;
}


/* =========================================
   HIDDEN LOAD MORE
   ========================================= */

.premier-dg-load-more[hidden] {
    display: none !important;
}


/* =========================================
   BODY LOCK WHEN LIGHTBOX OPEN
   ========================================= */

body.premier-dg-lightbox-open {
    overflow: hidden;
}


/* =========================================
   LIGHTBOX ROOT
   ========================================= */

.premier-dg-lightbox {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 40px;

    box-sizing: border-box;
}


/* =========================================
   OPEN LIGHTBOX
   ========================================= */

.premier-dg-lightbox.is-open {
    display: flex;
}


/* =========================================
   LIGHTBOX BACKDROP
   ========================================= */

.premier-dg-lightbox-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            7,
            17,
            34,
            0.94
        );

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* =========================================
   LIGHTBOX CONTAINER
   ========================================= */

.premier-dg-lightbox-container {
    position: relative;

    z-index: 2;

    width: min(
        1080px,
        calc(
            100vw - 100px
        )
    );

    max-height:
        calc(
            100vh - 80px
        );

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================
   LIGHTBOX PANEL
   ========================================= */

.premier-dg-lightbox-panel {
    width: 100%;
    max-height:
        calc(
            100vh - 80px
        );

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border-radius: 7px;

    box-shadow:
        0 28px 80px
        rgba(
            0,
            0,
            0,
            0.38
        );
}


/* =========================================
   LIGHTBOX MEDIA AREA
   ========================================= */

.premier-dg-lightbox-media {
    position: relative;

    width: 100%;

    min-height: 200px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #05080d;
}


/* =========================================
   LIGHTBOX IMAGE
   ========================================= */

.premier-dg-lightbox-media img {
    display: block;

    max-width: 100%;
    max-height:
        calc(
            100vh - 190px
        );

    width: auto;
    height: auto;

    object-fit: contain;

    margin: 0 auto;
}


/* =========================================
   LIGHTBOX YOUTUBE
   ========================================= */

.premier-dg-lightbox-media iframe {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    max-height:
        calc(
            100vh - 190px
        );

    border: 0;

    background: #000000;
}


/* =========================================
   LIGHTBOX INFORMATION
   ========================================= */

.premier-dg-lightbox-info {
    padding: 18px 22px 20px;

    background: #ffffff;
}


/* =========================================
   LIGHTBOX TITLE
   ========================================= */

.premier-dg-lightbox-title {
    margin: 0 0 6px;

    color: #061d45;

    font-size: 20px;
    font-weight: 750;
    line-height: 1.3;
}


/* =========================================
   LIGHTBOX CAPTION
   ========================================= */

.premier-dg-lightbox-caption {
    margin: 0;

    color: #637086;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================
   LIGHTBOX CLOSE BUTTON
   ========================================= */

.premier-dg-lightbox-close {
    position: absolute;

    top: -18px;
    right: -18px;

    z-index: 6;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: #263a78;
    color: #ffffff;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.85
        );

    border-radius: 50%;

    font-size: 28px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 8px 18px
        rgba(
            0,
            0,
            0,
            0.24
        );
}


/* =========================================
   LIGHTBOX NAVIGATION BUTTONS
   ========================================= */

.premier-dg-lightbox-prev,
.premier-dg-lightbox-next {
    position: absolute;

    top: 50%;

    z-index: 5;

    transform:
        translateY(-50%);

    width: 42px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background:
        rgba(
            22,
            38,
            67,
            0.82
        );

    color: #ffffff;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 5px;

    font-size: 31px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


/* =========================================
   PREVIOUS BUTTON
   ========================================= */

.premier-dg-lightbox-prev {
    left: -58px;
}


/* =========================================
   NEXT BUTTON
   ========================================= */

.premier-dg-lightbox-next {
    right: -58px;
}


/* =========================================
   NAVIGATION HOVER
   ========================================= */

.premier-dg-lightbox-prev:hover,
.premier-dg-lightbox-next:hover {
    background:
        rgba(
            38,
            58,
            120,
            0.96
        );
}


/* =========================================
   HIDDEN LIGHTBOX CONTROLS
   ========================================= */

.premier-dg-lightbox-prev[hidden],
.premier-dg-lightbox-next[hidden] {
    display: none !important;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1024px) {

    .premier-dg-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }


    .premier-dg-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 12px;
    }


    .premier-dg-lightbox {
        padding:
            35px 55px;
    }


    .premier-dg-lightbox-container {
        width: 100%;
    }


    .premier-dg-lightbox-prev {
        left: -48px;
    }


    .premier-dg-lightbox-next {
        right: -48px;
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .premier-dg-wrapper {
        padding:
            8px 12px 32px;
    }


    /* =========================================
       HORIZONTAL MOBILE FILTER SCROLLER
       ========================================= */

    .premier-dg-filters {
        justify-content: flex-start;
        flex-wrap: nowrap;

        gap: 8px;

        margin-bottom: 20px;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;

        padding-bottom: 7px;
    }


    .premier-dg-filter {
        flex:
            0 0 auto;

        min-height: 40px;

        padding:
            9px 14px;

        font-size: 13px;

        white-space: nowrap;
    }


    /* =========================================
       TWO COLUMN MOBILE GRID
       ========================================= */

    .premier-dg-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 9px;
    }


    .premier-dg-zoom-icon {
        width: 42px;
        height: 42px;

        font-size: 25px;
    }


    .premier-dg-video-icon {
        width: 46px;
        height: 46px;
    }


    .premier-dg-video-icon span {
        font-size: 16px;
    }


    /* =========================================
       MOBILE PAGINATION
       ========================================= */

    .premier-dg-pagination {
        margin-top: 24px;
    }


    .premier-dg-load-more {
        min-width: 145px;
        min-height: 44px;

        padding:
            10px 20px;

        font-size: 13.5px;
    }


    /* =========================================
       MOBILE LIGHTBOX
       ========================================= */

    .premier-dg-lightbox {
        align-items: center;

        padding:
            18px 14px;
    }


    .premier-dg-lightbox-container {
        width: 100%;
        max-height:
            calc(
                100vh - 36px
            );
    }


    .premier-dg-lightbox-panel {
        max-height:
            calc(
                100vh - 36px
            );

        border-radius: 6px;
    }


    .premier-dg-lightbox-media img {
        max-height:
            calc(
                100vh - 190px
            );
    }


    .premier-dg-lightbox-info {
        padding:
            14px 16px 16px;
    }


    .premier-dg-lightbox-title {
        font-size: 17px;
    }


    .premier-dg-lightbox-caption {
        font-size: 13px;
    }


    .premier-dg-lightbox-close {
        top: 8px;
        right: 8px;

        width: 38px;
        height: 38px;

        border-width: 1px;

        background:
            rgba(
                20,
                24,
                33,
                0.88
            );

        font-size: 25px;
    }


    .premier-dg-lightbox-prev,
    .premier-dg-lightbox-next {
        top: 50%;

        width: 38px;
        height: 46px;

        font-size: 28px;

        background:
            rgba(
                22,
                38,
                67,
                0.78
            );
    }


    .premier-dg-lightbox-prev {
        left: 8px;
    }


    .premier-dg-lightbox-next {
        right: 8px;
    }
}


/* =========================================
   EXTRA SMALL MOBILE
   ========================================= */

@media (max-width: 420px) {

    .premier-dg-wrapper {
        padding-left: 9px;
        padding-right: 9px;
    }


    /*
     * One column gives very small phones
     * cleaner image presentation.
     */

    .premier-dg-grid {
        grid-template-columns:
            1fr;

        gap: 10px;
    }


    .premier-dg-media {
        aspect-ratio: 4 / 3;
    }


    .premier-dg-count {
        font-size: 12.5px;
    }
}


/* =========================================
   END PREMIER DYNAMIC GALLERY
   FRONTEND STYLING
   ========================================= */