/* Auto-generated from the original style.css during code reorganization.
   Grouped by component so each concern can be found and debugged independently. */

/* Gallery grid + filter buttons */
/* ==========================================================
GALLERY
========================================================== */

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

.gallery{

    position:relative;

    padding:150px 0;

    overflow:hidden;

    background:

        radial-gradient(
            circle at top left,
            rgba(0,168,150,.05),
            transparent 38%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(11,114,133,.04),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F7FBFC 100%
        );

}

.gallery::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.28),

            transparent

        );

    opacity:.45;

}

/* ==========================================================
   GALLERY FILTER
========================================================== */

.gallery-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin:65px 0 70px;

}

.filter-btn{

    position:relative;

    border:none;

    outline:none;

    cursor:pointer;

    padding:14px 28px;

    border-radius:999px;

    background:#F4F8FA;

    color:var(--dark);

    font-size:15px;

    font-weight:600;

    letter-spacing:.3px;

    transition:

        transform .35s ease,

        background .35s ease,

        color .35s ease,

        box-shadow .35s ease;

}

.filter-btn:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-4px);

    box-shadow:

        0 14px 34px rgba(10,105,120,.18);

}

.filter-btn.active{

    background:

        linear-gradient(

            135deg,

            var(--secondary),

            var(--primary)

        );

    color:#fff;

    transform:translateY(-2px);

    box-shadow:

        0 16px 38px rgba(0,168,150,.30);

}

.filter-btn:focus{

    outline:none;

}

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

.gallery-grid{

    display:grid;

    grid-template-columns:

        1.6fr

        1fr

        1fr;

    grid-auto-rows:280px;

    gap:28px;

    margin-top:30px;

    align-items:stretch;

}

.gallery-item:nth-child(1){

grid-row:span 2;

}

.gallery-item:nth-child(5){

grid-column:span 2;

}

/* ==========================================================
   GALLERY CARDS
========================================================== */

.gallery-item{

    position:relative;

    overflow:hidden;

    cursor:pointer;

    border-radius:28px;

    background:#fff;

    border:1px solid rgba(10,105,120,.08);

    box-shadow:

        0 14px 40px rgba(0,0,0,.06),

        0 6px 16px rgba(10,105,120,.05);

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease,

        opacity .45s ease;

    opacity:1;

    isolation:isolate;

}

.gallery-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

        linear-gradient(

            90deg,

            var(--secondary),

            var(--primary)

        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s ease;

    z-index:5;

}

.gallery-item:hover{

    transform:

        translateY(-12px);

    border-color:

        rgba(10,105,120,.20);

    box-shadow:

        0 28px 70px rgba(0,0,0,.12),

        0 12px 30px rgba(10,105,120,.10);

}

.gallery-item:hover::before{

    transform:scaleX(1);

}

/* Featured Item */

.gallery-item.large{

    grid-column:span 2;

}

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

.gallery-item img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transform:scale(1);

    transition:

        transform .9s ease,

        filter .45s ease;

}

/* Dark cinematic layer */

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,0) 5%,

            rgba(0,0,0,.08) 45%,

            rgba(0,0,0,.28) 100%

        );

    opacity:1;

    transition:.45s ease;

    pointer-events:none;

    z-index:1;

}

/* Soft spotlight */

.gallery-item .gallery-glow{

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at center,

            rgba(255,255,255,.14),

            transparent 65%

        );

    opacity:0;

    transition:.45s ease;

    z-index:2;

    pointer-events:none;

}

.gallery-item:hover img{

    transform:scale(1.10);

    filter:

        brightness(1.05)

        saturate(1.08);

}

.gallery-item:hover::after{

    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,.05) 0%,

            rgba(0,0,0,.20) 45%,

            rgba(0,0,0,.45) 100%

        );

}

.gallery-item:hover .gallery-glow{

    opacity:1;

}

/* ==========================================================
   GALLERY OVERLAY
========================================================== */

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:flex-start;

    padding:32px;

    z-index:5;

    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,0) 18%,

            rgba(0,0,0,.22) 55%,

            rgba(0,0,0,.82) 100%

        );

    transition:

        background .45s ease,

        padding .45s ease;

}

/* ==========================================================
   CATEGORY BADGE
========================================================== */

.gallery-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:999px;

    background:

        rgba(255,255,255,.14);

    backdrop-filter:blur(14px);

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

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

    opacity:0;

    transform:

        translateY(20px);

    transition:.40s ease;

}

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

.gallery-overlay h3{

    margin:0;

    font-size:30px;

    font-weight:700;

    line-height:1.2;

    color:#fff;

    text-shadow:

        0 3px 12px rgba(0,0,0,.35);

    opacity:.92;

    transform:

        translateY(18px);

    transition:.40s ease;

}

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

.gallery-overlay p{

    margin:

        14px 0 0;

    max-width:90%;

    font-size:15px;

    line-height:1.75;

    color:

        rgba(255,255,255,.88);

    opacity:0;

    transform:

        translateY(18px);

    transition:

        .45s ease;

}

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

.gallery-item:hover .gallery-overlay{

    padding-bottom:42px;

    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,.05) 0%,

            rgba(0,0,0,.28) 55%,

            rgba(0,0,0,.90) 100%

        );

}

.gallery-item:hover .gallery-category{

    opacity:1;

    transform:

        translateY(0);

}

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

    opacity:1;

    transform:

        translateY(0);

    transition-delay:.05s;

}

.gallery-item:hover .gallery-overlay p{

    opacity:1;

    transform:

        translateY(0);

    transition-delay:.10s;

}

.gallery-button{

margin-top:60px;

text-align:center;

}


/* Gallery Lightbox (moved here from the end of the original stylesheet) */
/* ==========================================================
   GALLERY LIGHTBOX
========================================================== */

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

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        rgba(5,18,28,.94);

    backdrop-filter:blur(18px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:

        opacity .35s ease,

        visibility .35s ease;

    z-index:999999;

}

.lightbox.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

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

.lightbox-content{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:100%;

    padding:70px;

}

#lightbox-image{

    max-width:min(90vw,1400px);

    max-height:85vh;

    width:auto;

    height:auto;

    display:block;

    object-fit:contain;

    border-radius:22px;

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

    box-shadow:

        0 35px 90px rgba(0,0,0,.45),

        0 0 0 1px rgba(255,255,255,.04);

    animation:galleryZoom .35s ease;

}

/* ==========================================================
   IMAGE ANIMATION
========================================================== */

@keyframes galleryZoom{

    from{

        opacity:0;

        transform:scale(.88);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

.lightbox-nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:72px;

    height:72px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        rgba(255,255,255,.14);

    backdrop-filter:blur(18px);

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

    color:#fff;

    font-size:22px;

    cursor:pointer;

    transition:

        transform .30s ease,

        background .30s ease,

        box-shadow .30s ease;

    z-index:10;

}

.lightbox-prev{

    left:40px;

}

.lightbox-next{

    right:40px;

}

.lightbox-nav:hover{

    background:

        linear-gradient(

            135deg,

            var(--secondary),

            var(--primary)

        );

    transform:

        translateY(-50%)

        scale(1.08);

    box-shadow:

        0 15px 40px rgba(0,168,150,.30);

}

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

.lightbox-close{

    position:absolute;

    top:35px;

    right:35px;

    width:62px;

    height:62px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        rgba(255,255,255,.14);

    backdrop-filter:blur(18px);

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

    color:#fff;

    font-size:24px;

    cursor:pointer;

    transition:

        transform .30s ease,

        background .30s ease,

        box-shadow .30s ease;

    z-index:20;

}

.lightbox-close:hover{

    background:#D62839;

    transform:rotate(90deg);

    box-shadow:

        0 14px 36px rgba(214,40,57,.35);

}

/* ---------- Responsive ---------- */

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

@media (max-width:1200px){

    .gallery-grid{

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

        grid-auto-rows:260px;

        gap:24px;

    }

    .gallery-item.large{

        grid-column:span 2;

    }

}

@media (max-width:992px){

    .gallery{

        padding:120px 0;

    }

    .gallery-filter{

        gap:14px;

        margin:50px 0;

    }

    .filter-btn{

        padding:12px 22px;

        font-size:14px;

    }

    .gallery-overlay{

        padding:24px;

    }

    .gallery-overlay h3{

        font-size:26px;

    }

}

@media (max-width:768px){

    .gallery{

        padding:90px 0;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        grid-auto-rows:260px;

        gap:22px;

    }

    .gallery-item.large{

        grid-column:auto;

    }

    .gallery-item:nth-child(1){

        grid-row:auto;

    }

    .gallery-item:nth-child(5){

        grid-column:auto;

    }

    .gallery-filter{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:8px;

        scrollbar-width:none;

    }

    .gallery-filter::-webkit-scrollbar{

        display:none;

    }

    .filter-btn{

        white-space:nowrap;

        flex-shrink:0;

    }

    .gallery-category{

        font-size:11px;

    }

    .gallery-overlay h3{

        font-size:22px;

    }

    .gallery-overlay p{

        font-size:14px;

        max-width:100%;

    }

    .lightbox-content{

        padding:30px;

    }

    .lightbox-nav{

        width:56px;

        height:56px;

        font-size:18px;

    }

    .lightbox-prev{

        left:15px;

    }

    .lightbox-next{

        right:15px;

    }

    .lightbox-close{

        width:52px;

        height:52px;

        top:15px;

        right:15px;

        font-size:20px;

    }

}

@media (max-width:480px){

    .gallery-grid{

        grid-auto-rows:220px;

    }

    .gallery-item{

        border-radius:22px;

    }

    .gallery-overlay{

        padding:20px;

    }

    .gallery-overlay h3{

        font-size:20px;

    }

    .gallery-overlay p{

        display:none;

    }

    .gallery-category{

        padding:7px 14px;

        font-size:10px;

    }

}