/*
|--------------------------------------------------------------------------
| FitUI V2
| Listing Gallery
|--------------------------------------------------------------------------
*/

.fit-gallery{

    position:relative;

    padding:var(--fit-section-space) 0;

    overflow:hidden;

}

.fit-gallery::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:1200px;

    height:720px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(var(--fit-gold-rgb),.08) 0%,
            transparent 72%
        );

    filter:blur(90px);

    pointer-events:none;

    z-index:-1;

}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.fit-gallery__head{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:var(--fit-space-9);

    margin-bottom:var(--fit-space-9);

}

.fit-gallery__copy{

    max-width:760px;

}

.fit-gallery__copy h2{

    margin:
        var(--fit-space-4)
        0
        var(--fit-space-4);

    color:var(--fit-text);

    font-size:var(--fit-heading-lg);

    font-weight:var(--fit-weight-black);

    line-height:var(--fit-leading-tight);

    letter-spacing:var(--fit-tracking-tight);

}

.fit-gallery__copy p{

    max-width:640px;

    color:var(--fit-text-muted);

    font-size:var(--fit-text-lg);

    line-height:var(--fit-leading-body);

}

/*
|--------------------------------------------------------------------------
| View All Button
|--------------------------------------------------------------------------
*/

.fit-gallery__view-all{

    display:flex;

    align-items:center;

    gap:var(--fit-space-3);

    padding:
        0
        var(--fit-space-6);

    height:54px;

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

    border-radius:var(--fit-radius-pill);

    background:var(--fit-surface-glass);

    color:var(--fit-text);

    backdrop-filter:var(--fit-blur-panel);

    -webkit-backdrop-filter:var(--fit-blur-panel);

    box-shadow:
        var(--fit-shadow-card),
        var(--fit-shadow-inset);

    cursor:pointer;

    transition:

        all

        var(--fit-duration)

        var(--fit-ease);

}

.fit-gallery__view-all:hover{

    border-color:var(--fit-border-gold);

    box-shadow:

        var(--fit-shadow-card),

        var(--fit-glow-gold);

    transform:translateY(-2px);

}

.fit-gallery__view-all svg{

    transition:

        transform

        var(--fit-duration)

        var(--fit-ease);

}

.fit-gallery__view-all:hover svg{

    transform:scale(1.08);

}

/*
|--------------------------------------------------------------------------
| Wide Container
|--------------------------------------------------------------------------
*/

.fit-gallery__wide{

    width:100%;

    max-width:var(--fit-container-wide);

    margin-inline:auto;

    padding-inline:var(--fit-gutter);

}

/*
|--------------------------------------------------------------------------
| Gallery Grid
|--------------------------------------------------------------------------
*/

.fit-gallery__grid{

    position:relative;

    display:grid;

    grid-template-columns:

        1.65fr

        .8fr

        .8fr;

    grid-template-rows:

        repeat(
            2,
            minmax(260px,1fr)
        );

    gap:18px;

    min-height:760px;

    padding:18px;

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

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

    background:var(--fit-surface-glass-soft);

    backdrop-filter:var(--fit-blur-panel);

    -webkit-backdrop-filter:var(--fit-blur-panel);

    box-shadow:

        var(--fit-shadow-card),

        var(--fit-shadow-inset);

}

/*
|--------------------------------------------------------------------------
| Gallery Items
|--------------------------------------------------------------------------
*/

.fit-gallery__item{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    border:none;

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

    background:var(--fit-surface);

    cursor:pointer;

    transition:

        transform var(--fit-duration) var(--fit-ease),

        box-shadow var(--fit-duration) var(--fit-ease);

}

.fit-gallery__item img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:

        transform

        var(--fit-duration-slow)

        var(--fit-ease-out),

        filter

        var(--fit-duration)

        var(--fit-ease);

}

.fit-gallery__item:hover img{

    transform:scale(1.035);

    filter:

        saturate(1.05)

        contrast(1.03);

}

/*
|--------------------------------------------------------------------------
| Main Image
|--------------------------------------------------------------------------
*/

.fit-gallery__item--main{

    grid-column:1;

    grid-row:1 / span 2;

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

}
/*
|--------------------------------------------------------------------------
| Secondary Layout
|--------------------------------------------------------------------------
*/

.fit-gallery__item:nth-child(2){

    grid-column:2;

    grid-row:1;

}

.fit-gallery__item:nth-child(3){

    grid-column:3;

    grid-row:1;

}

.fit-gallery__item:nth-child(4){

    grid-column:2;

    grid-row:2;

}

.fit-gallery__item:nth-child(5){

    grid-column:3;

    grid-row:2;

}

/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.fit-gallery__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            transparent 18%,
            rgba(4,6,9,.18) 60%,
            rgba(4,6,9,.46) 100%
        );

    opacity:.72;

    transition:

        opacity var(--fit-duration) var(--fit-ease),

        background var(--fit-duration) var(--fit-ease);

    pointer-events:none;

}

.fit-gallery__item:hover .fit-gallery__overlay{

    opacity:.96;

}

/*
|--------------------------------------------------------------------------
| Border
|--------------------------------------------------------------------------
*/

.fit-gallery__item::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

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

    transition:

        border-color var(--fit-duration) var(--fit-ease),

        box-shadow var(--fit-duration) var(--fit-ease);

    pointer-events:none;

    z-index:2;

}

.fit-gallery__item:hover::before{

    border-color:var(--fit-border-gold);

    box-shadow:

        var(--fit-glow-gold),

        inset 0 0 0 1px rgba(var(--fit-gold-rgb),.08);

}

/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/

.fit-gallery__item:hover{

    transform:translateY(-2px);

}

.fit-gallery__item:focus-visible{

    outline:2px solid var(--fit-border-gold);

    outline-offset:5px;

}

/*
|--------------------------------------------------------------------------
| Expand Button
|--------------------------------------------------------------------------
*/

.fit-gallery__expand{

    position:absolute;

    top:var(--fit-space-4);

    right:var(--fit-space-4);

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    background:var(--fit-surface-glass);

    color:var(--fit-text);

    backdrop-filter:var(--fit-blur-panel);

    -webkit-backdrop-filter:var(--fit-blur-panel);

    box-shadow:

        var(--fit-shadow-card),

        var(--fit-shadow-inset);

    opacity:0;

    transform:

        translateY(-8px)

        scale(.94);

    transition:

        all

        var(--fit-duration)

        var(--fit-ease);

    z-index:5;

}

.fit-gallery__item:hover .fit-gallery__expand{

    opacity:1;

    transform:

        translateY(0)

        scale(1);

}

/*
|--------------------------------------------------------------------------
| More Photos
|--------------------------------------------------------------------------
*/

.fit-gallery__more{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:var(--fit-space-2);

    background:

        rgba(4,6,9,.62);

    backdrop-filter:var(--fit-blur-panel);

    -webkit-backdrop-filter:var(--fit-blur-panel);

    color:var(--fit-text);

    text-align:center;

    z-index:6;

    transition:

        background var(--fit-duration)

        var(--fit-ease);

}

.fit-gallery__item--more:hover .fit-gallery__more{

    background:

        rgba(4,6,9,.52);

}

.fit-gallery__more strong{

    color:var(--fit-gold-light);

    font-size:clamp(2.6rem,5vw,3.8rem);

    font-weight:var(--fit-weight-black);

    line-height:1;

    letter-spacing:var(--fit-tracking-tight);

    text-shadow:

        var(--fit-glow-gold);

}

.fit-gallery__more small{

    color:var(--fit-text-soft);

    font-size:var(--fit-text-md);

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

}

/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

.fit-gallery__view-all:focus-visible{

    outline:2px solid var(--fit-border-gold);

    outline-offset:4px;

}
/*
|--------------------------------------------------------------------------
| 1 Image
|--------------------------------------------------------------------------
*/

.fit-gallery__grid--1{

    grid-template-columns:1fr;

    grid-template-rows:minmax(620px,72vh);

}

.fit-gallery__grid--1 .fit-gallery__item--main{

    grid-column:1;

    grid-row:1;

}

/*
|--------------------------------------------------------------------------
| 2 Images
|--------------------------------------------------------------------------
*/

.fit-gallery__grid--2{

    grid-template-columns:1.45fr .85fr;

    grid-template-rows:minmax(620px,72vh);

}

.fit-gallery__grid--2 .fit-gallery__item--main{

    grid-column:1;

    grid-row:1;

}

.fit-gallery__grid--2 .fit-gallery__item:nth-child(2){

    grid-column:2;

    grid-row:1;

}

/*
|--------------------------------------------------------------------------
| 3 Images
|--------------------------------------------------------------------------
*/

.fit-gallery__grid--3{

    grid-template-columns:1.5fr .8fr;

    grid-template-rows:repeat(2,minmax(300px,1fr));

}

.fit-gallery__grid--3 .fit-gallery__item--main{

    grid-column:1;

    grid-row:1 / span 2;

}

.fit-gallery__grid--3 .fit-gallery__item:nth-child(2){

    grid-column:2;

    grid-row:1;

}

.fit-gallery__grid--3 .fit-gallery__item:nth-child(3){

    grid-column:2;

    grid-row:2;

}

/*
|--------------------------------------------------------------------------
| 4 Images
|--------------------------------------------------------------------------
*/

.fit-gallery__grid--4{

    grid-template-columns:1.5fr .75fr .75fr;

    grid-template-rows:repeat(2,minmax(260px,1fr));

}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width:1024px){

    .fit-gallery{

        padding:calc(var(--fit-section-space) * .75) 0;

    }

    .fit-gallery__head{

        flex-direction:column;

        align-items:flex-start;

        gap:var(--fit-space-7);

    }

    .fit-gallery__grid{

        min-height:620px;

        gap:var(--fit-space-3);

        padding:var(--fit-space-3);

    }

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:768px){

    .fit-gallery__wide{

        padding-inline:var(--fit-space-4);

    }

    .fit-gallery__head{

        gap:var(--fit-space-5);

    }

    .fit-gallery__view-all{

        width:100%;

        justify-content:center;

    }

    .fit-gallery__grid,

    .fit-gallery__grid--2,

    .fit-gallery__grid--3,

    .fit-gallery__grid--4,

    .fit-gallery__grid--5{

        grid-template-columns:1fr 1fr;

        grid-template-rows:

            280px

            160px

            160px;

        min-height:auto;

        gap:var(--fit-space-2);

        padding:var(--fit-space-2);

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

    }

    .fit-gallery__item,

    .fit-gallery__item--main{

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

    }

    .fit-gallery__item--main{

        grid-column:1 / -1;

        grid-row:1;

    }

    .fit-gallery__item:nth-child(2){

        grid-column:1;

        grid-row:2;

    }

    .fit-gallery__item:nth-child(3){

        grid-column:2;

        grid-row:2;

    }

    .fit-gallery__item:nth-child(4){

        grid-column:1;

        grid-row:3;

    }

    .fit-gallery__item:nth-child(5){

        grid-column:2;

        grid-row:3;

    }

    .fit-gallery__copy h2{

        font-size:var(--fit-heading-md);

    }

    .fit-gallery__copy p{

        font-size:var(--fit-text-base);

    }

    .fit-gallery__expand{

        opacity:1;

        transform:none;

        width:40px;

        height:40px;

        top:var(--fit-space-3);

        right:var(--fit-space-3);

    }

    .fit-gallery__more strong{

        font-size:clamp(2rem,8vw,3rem);

    }

}

/*
|--------------------------------------------------------------------------
| Small Phones
|--------------------------------------------------------------------------
*/

@media (max-width:480px){

    .fit-gallery__grid{

        grid-template-rows:

            230px

            120px

            120px;

    }

    .fit-gallery__copy h2{

        font-size:clamp(2rem,8vw,2.4rem);

    }

}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion:reduce){

    .fit-gallery__item,

    .fit-gallery__item img,

    .fit-gallery__overlay,

    .fit-gallery__expand,

    .fit-gallery__view-all{

        transition:none !important;

    }

    .fit-gallery__item:hover{

        transform:none;

    }

    .fit-gallery__item:hover img{

        transform:none;

        filter:none;

    }

}
/*
|--------------------------------------------------------------------------
| Gallery upload status
|--------------------------------------------------------------------------
*/

#fitGalleryCounter,
#fitGalleryStatus {
    box-sizing: border-box;
}

#fitGalleryCounter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: var(--fit-space-4);
    padding: 8px 14px;
    border: 1px solid var(--fit-border-gold-soft);
    border-radius: var(--fit-radius-pill);
    background: rgba(var(--fit-gold-rgb), .08);
    color: var(--fit-gold-light);
    box-shadow: var(--fit-shadow-inset);
    font-size: var(--fit-text-sm);
    font-weight: var(--fit-weight-bold);
    line-height: 1;
    letter-spacing: .02em;
}

#fitGalleryStatus {
    display: flex;
    align-items: center;
    gap: var(--fit-space-2);
    width: 100%;
    margin: 0 0 var(--fit-space-4);
    padding: 12px 14px;
    border: 1px solid var(--fit-border);
    border-radius: var(--fit-radius-sm);
    background: var(--fit-surface-glass-soft);
    color: var(--fit-text-muted);
    font-size: var(--fit-text-sm);
    font-weight: var(--fit-weight-medium);
    line-height: 1.4;
}

#fitGalleryStatus::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fit-gold);
    box-shadow: 0 0 14px rgba(var(--fit-gold-rgb), .34);
}

#fitGalleryStatus.is-info {
    border-color: var(--fit-border-gold-soft);
    background: rgba(var(--fit-gold-rgb), .045);
    color: var(--fit-text-soft);
}

#fitGalleryStatus.is-success {
    border-color: rgba(var(--fit-success-rgb), .24);
    background: rgba(var(--fit-success-rgb), .065);
    color: var(--fit-success);
}

#fitGalleryStatus.is-success::before {
    background: var(--fit-success);
    box-shadow: 0 0 14px rgba(var(--fit-success-rgb), .34);
}

#fitGalleryStatus.is-warning {
    border-color: rgba(var(--fit-warning-rgb), .24);
    background: rgba(var(--fit-warning-rgb), .065);
    color: var(--fit-warning);
}

#fitGalleryStatus.is-warning::before {
    background: var(--fit-warning);
    box-shadow: 0 0 14px rgba(var(--fit-warning-rgb), .34);
}

.fit-gallery-btn + #fitGalleryCounter {
    margin-left: var(--fit-space-3);
}

@media (max-width: 680px) {
    .fit-gallery-btn + #fitGalleryCounter {
        width: 100%;
        margin-left: 0;
    }

    #fitGalleryCounter {
        margin-top: var(--fit-space-3);
    }
}