/* =========================
   GALLERY DESIGN SYSTEM
========================= */
:root{

    /* =========================
       BASE
    ========================= */

    --body-bg: #0b0c0e;
    --body-text: #e7e7e7;
    --body-font: Arial, sans-serif;


    /* =========================
       WRAP
    ========================= */

    --wrap-width: min(1100px, 92%);
    --wrap-padding: 100px 0;


    /* =========================
       TYPOGRAPHY
    ========================= */

    --h1-size: 42px;
    --h1-weight: 900;
    --h1-spacing: -1px;
    --h1-margin: 40px;


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

    --grid-cols: 4;
    --grid-gap: 14px;

    --grid-cols-1000: 3;
    --grid-cols-700: 2;
    --grid-cols-450: 1;


    /* =========================
       ITEM
    ========================= */

    --item-radius: 14px;
    --item-aspect: 4 / 3;
    --item-bg: #111;

    --item-hover-scale: 1.06;
    --item-transition: 0.3s ease;

    --item-filter: contrast(1.05) brightness(0.9);


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

    --lightbox-bg: rgba(0,0,0,0.95);
    --lightbox-shadow: 0 30px 80px rgba(0,0,0,0.6);


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

    --close-size: 34px;
    --close-opacity: 0.8;


    /* =========================
       NAV ARROWS
    ========================= */

    --nav-size: 40px;
    --nav-opacity: 0.6;
    --nav-opacity-hover: 1;


    /* =========================
       BACK BUTTON
    ========================= */

    --btn-padding: 12px 18px;
    --btn-radius: 12px;

    /* CHANGED (red → hero blue) */
    --btn-bg: #4f86c6;
}

/* =========================
   BASE
========================= */

body{
    margin:0;
    font-family:var(--body-font);
    background:var(--body-bg);
    color:var(--body-text);
}

/* =========================
   WRAP
========================= */

.wrap{
    width:var(--wrap-width);
    margin:0 auto;
    padding:var(--wrap-padding);
}

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

h1{
    font-size:var(--h1-size);
    font-weight:var(--h1-weight);
    margin-bottom:var(--h1-margin);
    letter-spacing:var(--h1-spacing);
}

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

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(var(--grid-cols), 1fr);
    gap:var(--grid-gap);
}

@media(max-width:1000px){
    .gallery-grid{
        grid-template-columns:repeat(var(--grid-cols-1000), 1fr);
    }
}

@media(max-width:700px){
    .gallery-grid{
        grid-template-columns:repeat(var(--grid-cols-700), 1fr);
    }
}

@media(max-width:450px){
    .gallery-grid{
        grid-template-columns:repeat(var(--grid-cols-450), 1fr);
    }
}

/* =========================
   ITEM
========================= */

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:var(--item-radius);
    aspect-ratio:var(--item-aspect);
    cursor:pointer;
    background:var(--item-bg);
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:var(--item-transition);
    filter:var(--item-filter);
}

.gallery-item:hover img{
    transform:scale(var(--item-hover-scale));
}

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

.lightbox{
    position:fixed;
    inset:0;
    background:var(--lightbox-bg);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.lightbox img{
    max-width:90%;
    max-height:85%;
    border-radius:12px;
    box-shadow:var(--lightbox-shadow);
}

/* CLOSE */
.close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:var(--close-size);
    color:var(--body-text);
    cursor:pointer;
    opacity:var(--close-opacity);
}

.close:hover{
    opacity:1;
}

/* =========================
   NAV
========================= */

/* =========================
   NAV BUTTONS (MODERN SIDE UI)
========================= */

.nav-gal{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:26px;
    font-weight:800;

    color:#fff;

    background:rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);

    border:1px solid rgba(255,255,255,0.15);
    border-radius:50%;

    cursor:pointer;

    z-index:10000;

    transition:0.25s ease;
}

.nav-gal:hover{
    background:rgba(0,0,0,0.7);
    transform:translateY(-50%) scale(1.08);
}

/* POSITION */
.prev{
    left:18px;
}

.next{
    right:18px;
}

.prev{ left:20px; }
.next{ right:20px; }

/* =========================
   BACK HOME
========================= */

.back-home{
    display:flex;
    justify-content:center;
    margin-top:50px;
}

.back-home a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:var(--btn-padding);
    border-radius:var(--btn-radius);

    font-size:14px;
    font-weight:700;
    text-decoration:none;

    color:var(--body-text);
    background:var(--btn-bg);
    border:1px solid rgba(79, 15, 255, 0.08);

    transition:0.25s ease;
}

.back-home a:hover{
    transform:translateY(-2px);
    border-color:rgba(91, 103, 240, 0.505);
    box-shadow:0 12px 30px rgba(61, 8, 255, 0.15);
}