/* ==================================================================
   ABITAPRONTO24 - GALLERY V2
   ================================================================== */


/* ==================================================================
   ADMIN PAGE
   ================================================================== */

.gallery-admin-page{
    max-width:1380px;
    margin:0 auto;
    padding:55px 30px 100px;
}


.gallery-admin-hero{
    margin-bottom:25px;
    padding:35px 38px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    border-radius:25px;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #0b3327,
            #194d3a
        );
    box-shadow:
        0 22px 60px rgba(9,38,28,.16);
}


.gallery-admin-hero h1{
    margin:6px 0 8px;
    font-size:clamp(2rem,4vw,3.7rem);
    line-height:.95;
    letter-spacing:-.05em;
}


.gallery-admin-hero p{
    max-width:620px;
    margin:0;
    color:#b7cbc0;
}


.gallery-admin-hero .admin-kicker{
    color:#dff25c;
}


.gallery-admin-hero-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}


.gallery-admin-hero-actions .secondary{
    color:#fff!important;
    border-color:rgba(255,255,255,.2)!important;
    background:rgba(255,255,255,.08)!important;
}


.gallery-flash{
    margin:0 0 20px;
    padding:14px 17px;
    border-radius:12px;
    font-weight:700;
}


.gallery-flash.success{
    color:#145033;
    border:1px solid #acd2ba;
    background:#edf9f1;
}


.gallery-flash.error{
    color:#862f29;
    border:1px solid #dfb2ae;
    background:#fff1ef;
}


.gallery-editor-card{
    margin-top:20px;
    padding:30px;
    border:1px solid #dce2dc;
    border-radius:24px;
    background:rgba(255,255,255,.95);
    box-shadow:
        0 15px 50px rgba(15,42,30,.07);
}


.gallery-editor-head{
    margin-bottom:27px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:30px;
}


.gallery-editor-number{
    display:inline-block;
    margin-bottom:7px;
    color:#688073;
    font-size:.68rem;
    font-weight:800;
}


.gallery-editor-head h2{
    margin:0;
    color:#15241b;
    font-size:1.8rem;
    letter-spacing:-.035em;
}


.gallery-editor-head p{
    margin:7px 0 0;
    color:#758078;
}


.gallery-photo-count{
    min-width:75px;
    padding:10px 15px;
    display:flex;
    flex-direction:column;
    align-items:center;
    border-radius:14px;
    color:#173d31;
    background:#edf3ee;
    font-size:1.3rem;
}


.gallery-photo-count span{
    font-size:.62rem;
    text-transform:uppercase;
}


.gallery-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}


.gallery-form-grid label,
.gallery-order-form label{
    display:flex;
    flex-direction:column;
    gap:7px;
}


.gallery-form-grid label>span,
.gallery-order-form label>span{
    color:#344a3e;
    font-size:.75rem;
    font-weight:750;
}


.gallery-form-grid input,
.gallery-form-grid select,
.gallery-form-grid textarea,
.gallery-order-form input{
    width:100%;
    border:1px solid #d5ddd6;
    border-radius:11px;
    background:#fbfcfa;
}


.gallery-form-grid input,
.gallery-form-grid select{
    min-height:46px;
}


.gallery-form-grid textarea{
    padding:13px;
    resize:vertical;
}


.gallery-form-wide{
    grid-column:1/-1;
}


.gallery-form-grid small{
    color:#808a84;
    font-size:.67rem;
}


.gallery-upload-button{
    margin-top:20px;
}


.gallery-admin-empty{
    padding:65px 25px;
    text-align:center;
    border:1px dashed #cbd6cd;
    border-radius:18px;
    color:#77847b;
    background:#f7f9f6;
}


.gallery-admin-empty strong{
    display:block;
    margin-bottom:7px;
    color:#32503f;
    font-size:1.15rem;
}


.gallery-admin-empty p{
    margin:0;
}


.gallery-admin-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:15px;
}


.gallery-admin-photo{
    overflow:hidden;
    border:1px solid #dce2dc;
    border-radius:18px;
    background:#fff;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.gallery-admin-photo:hover{
    transform:translateY(-2px);
    box-shadow:
        0 15px 36px rgba(16,44,31,.09);
}


.gallery-admin-photo.is-hidden{
    opacity:.66;
}


.gallery-admin-photo-image{
    position:relative;
    height:210px;
    overflow:hidden;
    background:#e8ece8;
}


.gallery-admin-photo-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


.gallery-category-badge,
.gallery-hidden-badge{
    position:absolute;
    top:12px;
    padding:6px 9px;
    border-radius:8px;
    font-size:.58rem;
    font-weight:850;
    letter-spacing:.05em;
}


.gallery-category-badge{
    left:12px;
    color:#143b2c;
    background:#dff25c;
}


.gallery-hidden-badge{
    right:12px;
    color:#fff;
    background:rgba(22,30,25,.8);
}


.gallery-admin-photo-body{
    padding:17px;
}


.gallery-admin-photo-body h3{
    margin:0;
    color:#173d31;
    font-size:1rem;
}


.gallery-admin-photo-body>p{
    min-height:36px;
    margin:8px 0;
    color:#717c75;
    font-size:.76rem;
    line-height:1.5;
}


.gallery-photo-info{
    margin:11px 0 16px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}


.gallery-photo-info span{
    padding:5px 7px;
    border-radius:7px;
    color:#617067;
    background:#f0f3ef;
    font-size:.62rem;
}


.gallery-order-form{
    padding:11px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:end;
    border-radius:10px;
    background:#f7f9f6;
}


.gallery-order-form input{
    min-height:38px;
}


.gallery-admin-photo-actions{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}


.gallery-danger{
    color:#8d332d!important;
    border-color:#e4bbb7!important;
    background:#fff3f2!important;
}


.gallery-danger:hover{
    color:#fff!important;
    background:#983d35!important;
}



/* ==================================================================
   PUBLIC GALLERY
   ================================================================== */

.work-gallery{
    position:relative;
    overflow:hidden;
    padding:115px 0 120px;
    background:
        radial-gradient(
            circle at 0 0,
            rgba(38,92,65,.11),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            #eef2ed,
            #e8eee9
        );
}


.work-gallery-shell{
    max-width:1440px;
    margin:auto;
}


.work-gallery-heading{
    padding:0 34px 45px;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:80px;
    align-items:end;
}


.gallery-section-label{
    color:#3c6751;
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.15em;
}


.work-gallery-heading h2{
    max-width:750px;
    margin:13px 0 0;
    color:#101a13;
    font-size:clamp(2.8rem,4.7vw,5rem);
    line-height:.94;
    letter-spacing:-.06em;
}


.work-gallery-heading h2 em{
    display:block;
    margin-top:8px;
    color:#78877d;
    font-style:normal;
}


.work-gallery-heading-side{
    display:flex;
    gap:30px;
    align-items:flex-end;
    justify-content:space-between;
}


.work-gallery-heading-side>p{
    max-width:440px;
    margin:0;
    color:#68756d;
    line-height:1.65;
}


.gallery-controls{
    display:flex;
    gap:8px;
}


.gallery-control{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border:1px solid rgba(23,61,49,.13);
    border-radius:50%;
    cursor:pointer;
    color:#173d31;
    background:#fff;
    font-size:1.15rem;
    transition:
        transform .2s ease,
        color .2s ease,
        background .2s ease;
}


.gallery-control:hover{
    transform:translateY(-2px);
    color:#fff;
    background:#173d31;
}


.work-gallery-window{
    overflow:hidden;
    cursor:grab;
}


.work-gallery-window:active{
    cursor:grabbing;
}


.work-gallery-track{
    padding:8px 34px 31px;
    display:flex;
    gap:17px;
    will-change:transform;
    transition:
        transform .7s
        cubic-bezier(.22,.61,.36,1);
}


.work-photo{
    position:relative;
    flex:0 0 min(570px,42vw);
    height:405px;
    overflow:hidden;
    border-radius:26px;
    cursor:pointer;
    background:#dce4dd;
    box-shadow:
        0 20px 55px rgba(14,45,31,.13);
}


.work-photo>img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:
        transform .75s
        cubic-bezier(.2,.7,.2,1);
}


.work-photo:hover>img,
.work-photo:focus>img{
    transform:scale(1.05);
}


.work-photo-overlay{
    position:absolute;
    inset:auto 0 0;
    padding:70px 25px 23px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    background:
        linear-gradient(
            transparent,
            rgba(5,26,18,.92)
        );
}


.work-photo-overlay>span{
    margin-bottom:6px;
    color:#dff25c;
    font-size:.62rem;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
}


.work-photo-overlay>strong{
    color:#fff;
    font-size:1.28rem;
}


.work-photo-overlay>p{
    max-width:440px;
    margin:7px 0 0;
    color:rgba(255,255,255,.74);
    font-size:.77rem;
}


.work-photo-open{
    margin-top:14px;
    padding:8px 10px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:8px;
    color:#fff;
    background:rgba(255,255,255,.08);
    font-size:.62rem;
    font-weight:800;
}


.gallery-progress{
    height:3px;
    margin:13px 34px 0;
    overflow:hidden;
    border-radius:100px;
    background:rgba(23,61,49,.11);
}


.gallery-progress span{
    width:0;
    height:100%;
    display:block;
    border-radius:inherit;
    background:#49765e;
    transition:width .5s ease;
}



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

.work-lightbox{
    position:fixed;
    inset:0;
    z-index:100000;
    padding:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    visibility:hidden;
    opacity:0;
    background:rgba(4,18,12,.92);
    backdrop-filter:blur(15px);
    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.work-lightbox.is-open{
    visibility:visible;
    opacity:1;
}


.work-lightbox-content{
    width:min(1200px,94vw);
    overflow:hidden;
    border-radius:24px;
    background:#0a271d;
    box-shadow:
        0 40px 110px rgba(0,0,0,.4);
}


.work-lightbox-content img{
    width:100%;
    max-height:74vh;
    display:block;
    object-fit:contain;
    background:#071710;
}


.work-lightbox-copy{
    padding:18px 22px 21px;
}


.work-lightbox-copy strong{
    color:#fff;
    font-size:1.15rem;
}


.work-lightbox-copy p{
    margin:5px 0 0;
    color:#adc1b5;
}


.work-lightbox-close{
    position:absolute;
    top:20px;
    right:25px;
    width:50px;
    height:50px;
    border:0;
    border-radius:50%;
    cursor:pointer;
    color:#fff;
    background:rgba(255,255,255,.13);
    font-size:2rem;
}



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

@media(max-width:980px){

    .gallery-admin-grid{
        grid-template-columns:1fr 1fr;
    }

    .work-gallery-heading{
        grid-template-columns:1fr;
        gap:25px;
    }

    .work-photo{
        flex-basis:70vw;
    }
}


@media(max-width:700px){

    .gallery-admin-page{
        padding:
            30px 15px 70px;
    }

    .gallery-admin-hero{
        padding:25px;
        flex-direction:column;
        align-items:flex-start;
    }

    .gallery-editor-card{
        padding:20px;
    }

    .gallery-form-grid,
    .gallery-admin-grid{
        grid-template-columns:1fr;
    }

    .gallery-form-wide{
        grid-column:auto;
    }

    .work-gallery{
        padding:
            82px 0 88px;
    }

    .work-gallery-heading{
        padding:
            0 18px 30px;
    }

    .work-gallery-heading-side{
        flex-direction:column;
        align-items:flex-start;
    }

    .work-gallery-track{
        padding-left:18px;
        padding-right:18px;
        gap:11px;
    }

    .work-photo{
        flex-basis:86vw;
        height:345px;
        border-radius:20px;
    }

    .gallery-progress{
        margin-left:18px;
        margin-right:18px;
    }

    .work-lightbox{
        padding:13px;
    }

    .work-lightbox-close{
        top:10px;
        right:10px;
    }
}