/* =========================================================
   GALLERY PAGE
========================================================= */

.gallery-page {

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            var(--body-bg) 0%,
            var(--background) 100%
        );

    color: var(--text);

    font-family: var(--font);

}



/* =========================================================
   COMMON CONTAINER
========================================================= */

.gallery-container {

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: 0 auto;

}



/* =========================================================
   PAGE HEADER
========================================================= */

.gallery-header {

    padding: 70px 0 40px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(
                var(--primary-rgb),
                .12
            ),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 10%,
            rgba(
                var(--secondary-rgb),
                .12
            ),
            transparent 30%
        );

}



.gallery-heading {

    max-width: 760px;


    .gallery-eyebrow {

        display: inline-flex;

        align-items: center;

        gap: 8px;

        margin-bottom: 10px;

        padding: 6px 12px;

        border-radius: var(--radius-round);

        background: var(--primary-light);

        color: var(--primary-dark);

        font-size: var(--fs-sm);

        font-weight: var(--fw-semibold);

        letter-spacing: .5px;

    }


    h1 {

        margin: 0 0 12px;

        color: var(--heading);

        font-size: clamp(
            32px,
            5vw,
            52px
        );

        line-height: 1.1;

        font-weight: var(--fw-bold);

    }


    p {

        margin: 0;

        max-width: 650px;

        color: var(--text-light);

        font-size: var(--fs-lg);

        line-height: 1.7;

    }

}



/* =========================================================
   FILTER SECTION
========================================================= */

.gallery-filter-section {

    padding: 20px 0 30px;

}



.filter-panel {

    position: relative;

    padding: 30px;

    background: rgba(
        255,
        255,
        255,
        .86
    );

    border: 1px solid var(--border);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-md);

    backdrop-filter: blur(14px);

}



/* =========================================================
   FILTER HEADER
========================================================= */

.filter-panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;

}



.filter-eyebrow {

    display: block;

    margin-bottom: 5px;

    color: var(--primary);

    font-size: var(--fs-sm);

    font-weight: var(--fw-semibold);

}



.filter-panel-header h2 {

    margin: 0;

    color: var(--heading);

    font-size: var(--fs-xl);

}



/* =========================================================
   CLEAR FILTERS
========================================================= */

.clear-filters-btn {

    flex-shrink: 0;

    padding: 10px 16px;

    border: 1px solid var(--border-dark);

    border-radius: var(--radius-sm);

    background: var(--section-bg);

    color: var(--text);

    font-family: inherit;

    font-size: var(--fs-sm);

    font-weight: var(--fw-semibold);

    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);


    &:hover {

        border-color: var(--primary);

        color: var(--primary);

        transform: translateY(-1px);

    }

}



/* =========================================================
   FILTER GRID
========================================================= */

.filter-grid {

    display: grid;

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

    gap: 15px;

}



.filter-field {

    min-width: 0;


    label {

        display: block;

        margin-bottom: 8px;

        color: var(--heading);

        font-size: var(--fs-sm);

        font-weight: var(--fw-semibold);

    }


    select {

        width: 100%;

        height: 48px;

        padding:
            0 40px 0 14px;

        border:
            1px solid
            var(--input-border);

        border-radius:
            var(--radius-sm);

        background-color:
            var(--input-bg);

        color:
            var(--text);

        font-family:
            inherit;

        font-size:
            var(--fs-sm);

        outline: none;

        cursor: pointer;

        appearance: none;

        background-image:
            linear-gradient(
                45deg,
                transparent 50%,
                var(--text-light) 50%
            ),
            linear-gradient(
                135deg,
                var(--text-light) 50%,
                transparent 50%
            );

        background-position:
            calc(100% - 18px) 20px,
            calc(100% - 12px) 20px;

        background-size:
            6px 6px,
            6px 6px;

        background-repeat:
            no-repeat;

        transition:
            border-color var(--transition-fast),
            box-shadow var(--transition-fast);


        &:focus {

            border-color:
                var(--input-focus);

            box-shadow:
                0 0 0 4px
                rgba(
                    var(--primary-rgb),
                    .10
                );

        }


        &:disabled {

            background-color:
                #F4F5F6;

            color:
                var(--text-muted);

            cursor:
                not-allowed;

            opacity:
                .7;

        }

    }

}



/* =========================================================
   FILTER RESULT INFORMATION
========================================================= */

.filter-result-info {

    margin-top: 18px;

    color: var(--text-light);

    font-size: var(--fs-sm);

}



/* =========================================================
   GALLERY SECTION
========================================================= */

.gallery-section {

    padding: 20px 0 80px;

}



.gallery-grid {

    display: grid;

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

    gap: 25px;

}



/* =========================================================
   GALLERY CARD
========================================================= */

.gallery-card {

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    min-width: 0;

    background:
        var(--card-bg);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

    cursor:
        pointer;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);


    &:hover {

        transform:
            translateY(-7px);

        border-color:
            rgba(
                var(--primary-rgb),
                .35
            );

        box-shadow:
            var(--shadow-lg);


        .gallery-card-image img {

            transform:
                scale(1.06);

        }


        .gallery-card-overlay {

            opacity: 1;

        }

    }

}



/* =========================================================
   CARD IMAGE
========================================================= */

.gallery-card-image {

    position: relative;

    height: 230px;

    overflow: hidden;

    background:
        var(--primary-light);


    img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition:
            transform var(--transition-slow);

    }

}



/* =========================================================
   CARD IMAGE OVERLAY
========================================================= */

.gallery-card-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            transparent 20%,
            rgba(0,0,0,.45) 100%
        );

    opacity: 0;

    transition:
        opacity var(--transition);

}



.view-details {

    padding: 9px 14px;

    border-radius: 12px;

    background:
        rgba(255,255,255,.95);

    color:
        var(--primary-dark);

    font-size:
        var(--fs-sm);

    font-weight:
        var(--fw-semibold);

}



/* =========================================================
   CARD BODY
========================================================= */

.gallery-card-body {

    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 20px;

}



.gallery-card-body h3 {

    margin: 0 0 9px;

    color:
        var(--heading);

    font-size:
        var(--fs-lg);

    line-height:
        1.35;

}



.gallery-card-description {

    display:
        -webkit-box;

    margin:
        0 0 15px;

    overflow:
        hidden;

    color:
        var(--text-light);

    font-size:
        var(--fs-sm);

    line-height:
        1.6;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

}



.gallery-location {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        auto;

    color:
        var(--text-muted);

    font-size:
        var(--fs-sm);

}



.location-item {

    color:
        var(--secondary-dark);

    font-weight:
        var(--fw-medium);

}



.location-separator {

    color:
        var(--text-muted);

}



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

.load-more-wrapper {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        45px;

}



.load-more-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        170px;

    justify-content:
        center;

    padding:
        13px 20px;

    border:
        1px solid
        var(--primary);

    border-radius:
        var(--radius-round);

    background:
        var(--primary);

    color:
        var(--text-white);

    font-family:
        inherit;

    font-size:
        var(--fs-sm);

    font-weight:
        var(--fw-semibold);

    cursor:
        pointer;

    box-shadow:
        0 8px 20px
        rgba(
            var(--primary-rgb),
            .20
        );

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);


    &:hover {

        background:
            var(--primary-dark);

        transform:
            translateY(-2px);

        box-shadow:
            0 12px 25px
            rgba(
                var(--primary-rgb),
                .28
            );

    }


    &:active {

        transform:
            translateY(0);

    }

}



.load-more-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        24px;

    height:
        24px;

    border:
        1px solid
        rgba(255,255,255,.5);

    border-radius:
        50%;

}



/* =========================================================
   NO RESULTS
========================================================= */

.no-results {

    padding:
        70px 20px;

    text-align:
        center;

    background:
        var(--section-bg);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-xl);

}



.no-results-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        55px;

    height:
        55px;

    margin:
        0 auto 15px;

    border-radius:
        50%;

    background:
        var(--warning-light);

    color:
        var(--warning-dark);

    font-size:
        var(--fs-xl);

    font-weight:
        var(--fw-bold);

}



.no-results h3 {

    margin:
        0 0 8px;

    color:
        var(--heading);

}



.no-results p {

    margin:
        0;

    color:
        var(--text-light);

}



/* =========================================================
   MODAL
========================================================= */

.gallery-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        var(--z-modal);

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;

}



.gallery-modal.is-open {

    display:
        flex;

}



.gallery-modal-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            15,
            23,
            42,
            .72
        );

    backdrop-filter:
        blur(8px);

}



.gallery-modal-dialog {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            1100px,
            100%
        );

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

    overflow:
        hidden;

    background:
        var(--section-bg);

    border:
        1px solid
        rgba(255,255,255,.2);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-xl);

    animation:
        modalEnter .3s ease;

}



@keyframes modalEnter {

    from {

        opacity:
            0;

        transform:
            translateY(20px)
            scale(.97);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}



/* =========================================================
   MODAL CLOSE
========================================================= */

.modal-close {

    position:
        absolute;

    z-index:
        5;

    top:
        15px;

    right:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    border:
        0;

    border-radius:
        50%;

    background:var(--primary);

    color:
        var(--text-white);

    font-size:
        28px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);


    &:hover {

        background:
            var(--primary);

        transform:
            rotate(90deg);

    }

}



/* =========================================================
   MODAL CONTENT
========================================================= */

.modal-content {

    display:
        grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

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

    overflow:
        auto;

}



.modal-image-wrapper {

    min-height:
        600px;

    background:
        var(--dark);



    img {

        display:
            block;

        width:
            100%;

        height:
            100%;

        min-height:
            600px;

        object-fit:
            cover;

    }

}



.modal-details {

    padding:
        45px;

    overflow-y:
        auto;

}



.modal-category {

    display:
        inline-flex;

    margin-bottom:
        12px;

    padding: 10px 15px;

    border-radius:12px;

    background:
        var(--primary);

    color:
        var(--text-white);

    font-size:
        var(--fs-sm);

    font-weight:
        var(--fw-semibold);

}



.modal-details h2 {

    margin:
        0 0 12px;

    color:
        var(--heading);

    font-size:
        var(--fs-xxl);

    line-height:
        1.25;

}



.modal-short-description {

    margin: 0 0 25px;
    color: var(--text-light);
    font-size: var(--fs-lg);
    line-height: 1.7;

}



/* =========================================================
   MODAL LOCATION
========================================================= */

.modal-location {

    padding:
        18px;

    margin-bottom:
        25px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    background:
        var(--body-bg);

}



.modal-location-title {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        10px;

    color:
        var(--heading);

    font-size:
        var(--fs-sm);

    font-weight:
        var(--fw-semibold);

}



.location-icon {

    color:
        var(--primary);

}



.modal-breadcrumb {

    color: var(--text-light);
    line-height: 1.6;

}



/* =========================================================
   META
========================================================= */

.modal-meta-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        12px;

    margin-bottom:
        25px;

}



.modal-meta-item {

    padding:
        15px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-sm);

    background:
        var(--card-bg);

}



.meta-label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--text-muted);

    font-size:
        var(--fs-sm);

}



.modal-meta-item strong {

    display: block;
    color: var(--heading);
    word-break: break-word;

}



/* =========================================================
   LONG DESCRIPTION
========================================================= */

.modal-long-description {

    margin-bottom:
        25px;



    h3 {

        margin:
            0 0 10px;

        color:
            var(--heading);

        font-size:
            var(--fs-xxl);

    }


    p {
        margin: 0;
        color: var(--text-light);
        line-height: 1.8;
    }

}



/* =========================================================
   MAP BUTTON
========================================================= */

.modal-actions {

    display:
        flex;

    gap:
        10px;

}



.map-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px 20px;

    border-radius:
        var(--radius-sm);

    background:
        var(--primary);

    color:
        var(--text-white);

    font-size:
        var(--fs-sm);

    font-weight:
        var(--fw-semibold);

    text-decoration:
        none;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);


    &:hover {

        background:
            var(--primary-dark);

        transform:
            translateY(-2px);

    }

}



/* =========================================================
   RESPONSIVE
========================================================= */


/* Large desktop */

@media (max-width: 1200px) {

    .gallery-grid {

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

    }


    .filter-grid {

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

    }

}



/* Tablet */

@media (max-width: 900px) {

    .gallery-container {

        width:
            min(
                calc(100% - 30px),
                var(--container)
            );

    }


    .gallery-grid {

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

    }


    .modal-content {

        grid-template-columns:
            1fr;

    }


    .modal-image-wrapper {

        min-height:
            350px;

        max-height:
            400px;

    }


    .modal-image-wrapper img {

        min-height:
            350px;

    }


    .modal-details {

        padding:
            30px;

    }

}



/* Mobile */

@media (max-width: 650px) {

    .gallery-header {

        padding:
            45px 0 25px;

    }


    .gallery-filter-section {

        padding:
            10px 0 20px;

    }


    .filter-panel {

        padding:
            20px;

    }


    .filter-panel-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .filter-grid {

        grid-template-columns:
            1fr;

    }


    .gallery-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .gallery-card-image {

        height:
            220px;

    }


    .modal-meta-grid {

        grid-template-columns:
            1fr;

    }


    .gallery-modal {

        padding:
            10px;

    }


    .gallery-modal-dialog {

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

        border-radius:
            var(--radius-lg);

    }


    .modal-details {

        padding:
            25px 20px;

    }


    .modal-details h2 {

        font-size:
            var(--fs-xl);

    }

}



/* Small mobile */

@media (max-width: 400px) {

    .gallery-container {

        width:
            calc(100% - 20px);

    }


    .filter-panel {

        padding:
            15px;

    }


    .gallery-card-body {

        padding:
            16px;

    }

}

/* =========================================================
   PREMIUM MODAL SCROLLBAR
========================================================= */

.modal-content {

    scrollbar-width: thin;

    scrollbar-color:
        var(--primary)
        rgba(
            var(--primary-rgb),
            .08
        );

}


.modal-content::-webkit-scrollbar {

    width: 9px;

}


.modal-content::-webkit-scrollbar-track {

    margin:
        12px 0;

    background:
        rgba(
            var(--primary-rgb),
            .06
        );

    border-radius:
        var(--radius-round);

}


.modal-content::-webkit-scrollbar-thumb {

    min-height: 45px;

    background:
        linear-gradient(
            180deg,
            var(--primary),
            var(--primary-dark)
        );

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            .8
        );

    border-radius:
        var(--radius-round);

    box-shadow:
        0 2px 8px
        rgba(
            var(--primary-rgb),
            .25
        );

    transition:
        background var(--transition-fast);

}


.modal-content::-webkit-scrollbar-thumb:hover {

    background:
        linear-gradient(
            180deg,
            var(--primary-hover),
            var(--primary-dark)
        );

}