/* ==========================================================
   CREATIVE INSTITUTE
   PREMIUM GALLERY
========================================================== */

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

.gallery{

    position:relative;

    padding:120px 0;

    overflow:hidden;

}

.gallery::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at top right,

    rgba(255,140,66,.08),

    transparent 35%),

    radial-gradient(circle at bottom left,

    rgba(255,255,255,.04),

    transparent 30%);

}

.gallery .container{

    position:relative;

    z-index:2;

}


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

.gallery .section-title{

    text-align:center;

    margin-bottom:70px;

}

.gallery .section-title span{

    display:inline-block;

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:.85rem;

    margin-bottom:18px;

}

.gallery .section-title h2{

    color:#fff;

    font-size:clamp(2.2rem,5vw,3.3rem);

    margin-bottom:18px;

}

.gallery .section-title p{

    color:#000000;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}


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

.gallery-grid{

columns:3 320px;

column-gap:18px;

}

.gallery-grid>*{

break-inside:avoid;

margin-bottom:18px;

}


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

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

    background:#111;

    transition:

    transform .45s,

    box-shadow .45s;

    opacity:0;

    transform:

    translateY(50px);

}

.gallery-card.show{

    opacity:1;

    transform:

    translateY(0);

}

.gallery-card:hover{

    transform:

    translateY(-8px);

}


/* ==========================================================
   GRID SIZES
========================================================== */

.gallery-card.square{

    grid-column:span 4;

}

.gallery-card.wide{

    grid-column:span 8;

}

.gallery-card.tall{

    grid-column:span 4;

}


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

.gallery-media{

    position:relative;

    overflow:hidden;

    background:#111;

}

.gallery-card.square img,

.gallery-card.square video{

    height:360px;

}

.gallery-card.wide img,

.gallery-card.wide video{

    height:320px;

}

.gallery-card.tall img,

.gallery-card.tall video{

    height:600px;

}

.gallery-media img{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

}

.gallery-media video{

    width:100%;

    height:auto;

    display:block;

    object-fit:cover;

}

.gallery-card:hover img{

    transform:scale(1.08);

    filter:brightness(.82);

}

.gallery-card:hover video{

    transform:scale(1.03);

}


/* ==========================================================
   PLAY BUTTON
========================================================== */

.play-badge{

    position:absolute;

    left:50%;

    top:50%;

    transform:

    translate(-50%,-50%);

    width:72px;

    height:72px;

    border-radius:50%;

    background:

    rgba(0,0,0,.45);

    backdrop-filter:blur(12px);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    transition:.35s;

}

.gallery-card:hover .play-badge{

    transform:

    translate(-50%,-50%)

    scale(1.1);

}
/* ==========================================================
   OVERLAY
========================================================== */

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:24px;

    background:

    linear-gradient(

        transparent 45%,

        rgba(0,0,0,.82)

    );

    opacity:0;

    transition:

    opacity .35s ease;

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay h3{

    color:#fff;

    font-size:1.1rem;

    font-weight:600;

    letter-spacing:.4px;

    transform:translateY(15px);

    transition:.35s;

}

.gallery-card:hover .gallery-overlay h3{

    transform:translateY(0);

}


/* ==========================================================
   BORDER EFFECT
========================================================== */

.gallery-card::after{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid transparent;

    border-radius:18px;

    transition:.35s;

    pointer-events:none;

}

.gallery-card:hover::after{

    border-color:

    rgba(255,140,66,.7);

}


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

.gallery-lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    rgba(0,0,0,.95);

    backdrop-filter:blur(10px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.gallery-lightbox.active{

    opacity:1;

    visibility:visible;

}


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

.lightbox-content{

    position:relative;

    width:min(90%,1300px);

    max-height:90vh;

}

.lightbox-image,

.lightbox-video{

    width:100%;

    max-height:82vh;

    display:block;

    object-fit:contain;

    border-radius:18px;

    background:#000;

    animation:galleryZoom .35s ease;

}


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

.lightbox-caption{

    margin-top:20px;

    text-align:center;

}

.lightbox-caption span{

    display:inline-block;

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.82rem;

    margin-bottom:8px;

}

.lightbox-caption h3{

    color:#fff;

    font-size:1.35rem;

    font-weight:600;

}


/* ==========================================================
   BUTTONS
========================================================== */

.lightbox-btn,

.lightbox-close{

    position:absolute;

    width:60px;

    height:60px;

    border:none;

    outline:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    color:#fff;

    font-size:20px;

    transition:.35s;

}

.lightbox-btn:hover,

.lightbox-close:hover{

    background:var(--primary);

    transform:scale(1.08);

}

.prev{

    left:35px;

    top:50%;

    transform:translateY(-50%);

}

.next{

    right:35px;

    top:50%;

    transform:translateY(-50%);

}

.lightbox-close{

    top:30px;

    right:30px;

}


/* ==========================================================
   BODY LOCK
========================================================== */

body.gallery-open{

    overflow:hidden;

}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes galleryZoom{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes galleryReveal{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.gallery-card.show{

    animation:

    galleryReveal .7s ease forwards;

}
/* ==========================================================
   LOADING EFFECT
========================================================== */

.gallery-media{

    background:

    linear-gradient(

        90deg,

        #141414,

        #222,

        #141414

    );

    background-size:300% 100%;

    animation:

    shimmer 2s linear infinite;

}

.gallery-media img,

.gallery-media video{

    background:#111;

}


/* ==========================================================
   VIDEO
========================================================== */

.gallery-video{

    pointer-events:none;

}

.gallery-card:hover .gallery-video{

    filter:brightness(.95);

}


/* ==========================================================
   SCROLLBAR
========================================================== */

.gallery-lightbox::-webkit-scrollbar{

    width:8px;

}

.gallery-lightbox::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}


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

@media (max-width:1200px){

.gallery-grid{

grid-template-columns:

repeat(8,1fr);

}

.gallery-card.square{

grid-column:span 4;

}

.gallery-card.wide{

grid-column:span 8;

}

.gallery-card.tall{

grid-column:span 4;

}

.gallery-media img,
.gallery-media video{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

    transition:
    transform .7s ease,
    filter .5s ease;

}
}



@media (max-width:992px){

.gallery{

padding:100px 0;

}

.gallery-grid{

grid-template-columns:

repeat(2,1fr);

gap:18px;

}

.gallery-card,

.gallery-card.square,

.gallery-card.wide,

.gallery-card.tall{

grid-column:span 1;

}

.gallery-card img,

.gallery-card video{

height:340px;

}

.lightbox-btn{

width:54px;

height:54px;

}

}


@media (max-width:768px){

.gallery{

padding:80px 0;

}

.gallery-grid{

grid-template-columns:1fr;

gap:16px;

}

.gallery-card img,

.gallery-card video{

height:300px;

}

.gallery-overlay{

opacity:1;

padding:18px;

background:

linear-gradient(

transparent,

rgba(0,0,0,.72)

);

}

.gallery-overlay h3{

transform:none;

font-size:1rem;

}

.play-badge{

width:58px;

height:58px;

font-size:18px;

}

.lightbox-content{

width:95%;

}

.prev{

left:15px;

}

.next{

right:15px;

}

.lightbox-close{

top:15px;

right:15px;

}

}


@media (max-width:576px){

.lightbox-btn{

display:none;

}

.gallery-card img,

.gallery-card video{

height:240px;

}

.lightbox-image,

.lightbox-video{

max-height:72vh;

}

}


/* ==========================================================
   PERFORMANCE
========================================================== */

.gallery-card,

.gallery-media,

.gallery-media img,

.gallery-media video,

.gallery-overlay,

.play-badge{

will-change:

transform,

opacity;

}

.gallery-card{

contain:layout paint;

}

.gallery-media{

transform:translateZ(0);

}

.gallery-media img,

.gallery-media video{

backface-visibility:hidden;

}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes shimmer{

0%{

background-position:100%;

}

100%{

background-position:-100%;

}

}


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

.gallery-card:focus-visible{

outline:2px solid var(--primary);

outline-offset:4px;

}

.lightbox-btn:focus-visible,

.lightbox-close:focus-visible{

outline:2px solid #fff;

outline-offset:3px;

}


/* ==========================================================
   SELECTION
========================================================== */

.gallery img,

.gallery video{

user-select:none;

-webkit-user-drag:none;

}


/* ==========================================================
   END
========================================================== */