/* ==========================
   PHOTO HERO
========================== */

.photo-hero{

    padding:180px 4% 100px;

    max-width:1400px;

    margin:auto;

}


/* ==========================
   HERO TOP
========================== */

.photo-hero-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:30px;

    border-bottom:1px solid
    rgba(255,255,255,.08);

}


.eyebrow{

    font-size:.7rem;

    letter-spacing:.18em;

    color:rgba(255,255,255,.5);

}


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

.photo-hero-content{

    padding-top:70px;

    max-width:900px;

}


.photo-hero h1{

    margin:0;

    font-size:clamp(4rem,9vw,9rem);

    line-height:.88;

    letter-spacing:-.06em;

    font-weight:500;

}


.photo-hero h1 em{

    font-family:Georgia,serif;

    font-weight:400;

}


.photo-hero p{

    max-width:460px;

    margin-top:45px;

    color:rgba(255,255,255,.5);

    line-height:1.8;

}


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

.photo-gallery{

    max-width:1400px;

    margin:auto;

    padding:
        20px 4% 150px;

}


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

.photo-grid{

    display:grid;

    grid-template-columns:
        repeat(12, 1fr);

    gap:20px;

    align-items:start;

}


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

.photo-item{

    position:relative;

    overflow:hidden;

    cursor:pointer;

    width:100%;

}



/* ==========================
   RANDOM VISUAL SIZE
========================== */

/*
   Ukuran berbeda secara visual.
   
   Rasio gambar TIDAK diubah.
   Foto tetap menggunakan ukuran
   dan aspect ratio aslinya.
*/


.photo-item.photo-small{

    grid-column:span 3;

}


.photo-item.photo-medium{

    grid-column:span 4;

}


.photo-item.photo-large{

    grid-column:span 6;

}


/*
   Supaya foto yang lebih kecil
   tidak selalu menempel di kiri.
*/

.photo-item.photo-small{

    margin-left:7%;

}


.photo-item.photo-medium{

    margin-left:3%;

}


.photo-item.photo-large{

    margin-left:0;

}


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



.photo-item img{

    display:block;

    width:100%;

    height:auto;

    transition:
        transform .8s
        cubic-bezier(.2,.7,.2,1);

}


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

.photo-item:hover img{

    transform:scale(1.035);

}


/* ==========================
   PHOTO LOAD
========================== */

.photo-load{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding-top:70px;

}


.photo-load .btn{

    min-width:170px;

    justify-content:center;

}


#photoCount{

    font-size:.7rem;

    letter-spacing:.12em;

    color:rgba(255,255,255,.35);

}


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

.photo-lightbox{

    position:fixed;

    inset:0;

    z-index:999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:rgba(5,5,5,.96);

    backdrop-filter:blur(20px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}


.photo-lightbox.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


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

.lightbox-content{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}


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

#lightbox-image{

    display:block;

    max-width:90vw;

    max-height:88vh;

    width:auto;

    height:auto;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

    transition:
        opacity .15s ease;

}


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

.lightbox-close,
.lightbox-prev,
.lightbox-next{

    position:absolute;

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    background:rgba(255,255,255,.04);

    color:white;

    border-radius:50%;

    cursor:pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

    z-index:2;

}


.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{

    background:
        rgba(255,255,255,.1);

    border-color:
        rgba(255,255,255,.2);

}


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

.lightbox-close{

    top:30px;

    right:30px;

}


.lightbox-close:hover{

    transform:rotate(90deg);

}


/* ==========================
   PREVIOUS
========================== */

.lightbox-prev{

    left:30px;

    top:50%;

    transform:
        translateY(-50%);

}


.lightbox-prev:hover{

    transform:
        translateY(-50%)
        translateX(-3px);

}


/* ==========================
   NEXT
========================== */

.lightbox-next{

    right:30px;

    top:50%;

    transform:
        translateY(-50%);

}


.lightbox-next:hover{

    transform:
        translateY(-50%)
        translateX(3px);

}


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

.lightbox-close svg,
.lightbox-prev svg,
.lightbox-next svg{

    width:20px;

    height:20px;

    display:block;

}


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

.photo-item.image-error{

    display:none;

}


/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    /* ======================
       HERO
    ====================== */

    .photo-hero{

        padding:
            140px 20px 70px;

    }


    .photo-hero-top{

        padding-bottom:20px;

    }


    .photo-hero-content{

        padding-top:50px;

    }


    .photo-hero h1{

        font-size:
            clamp(3.5rem,17vw,6rem);

    }


    .photo-hero p{

        margin-top:30px;

        font-size:.85rem;

        line-height:1.7;

    }


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

    .photo-gallery{

        padding:
            20px 20px 100px;

    }


    /*
       Dua kolom di mobile.
    */

    .photo-grid{

        columns:2 0;

        column-gap:10px;

    }


    .photo-item{

        margin-bottom:10px;

    }


    /*
       Ukuran kembali penuh
       agar masonry tetap rapi.
    */

    .photo-item.photo-small,
    .photo-item.photo-medium,
    .photo-item.photo-large{

        width:100%;

        margin-left:0;

    }


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

    .photo-item img{

        transition:
            transform .5s ease;

    }


    /* ======================
       LOAD MORE
    ====================== */

    .photo-load{

        padding-top:50px;

    }


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

    .photo-lightbox{

        padding:15px;

    }


    #lightbox-image{

        max-width:94vw;

        max-height:82vh;

    }


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

    .lightbox-close{

        top:18px;

        right:18px;

        width:40px;

        height:40px;

    }


    /* ======================
       PREV / NEXT
    ====================== */

    .lightbox-prev,
    .lightbox-next{

        width:38px;

        height:38px;

    }


    .lightbox-prev{

        left:12px;

    }


    .lightbox-next{

        right:12px;

    }


    .lightbox-close svg,
    .lightbox-prev svg,
    .lightbox-next svg{

        width:17px;

        height:17px;

    }

}


/* ==========================
   SMALL MOBILE
========================== */

@media(max-width:480px){

    .photo-hero{

        padding-top:125px;

    }


    .photo-hero h1{

        font-size:
            clamp(3rem,18vw,5rem);

    }


    .photo-grid{

        column-gap:8px;

    }


    .photo-item{

        margin-bottom:8px;

    }


    .photo-lightbox{

        padding:10px;

    }


    #lightbox-image{

        max-width:96vw;

        max-height:78vh;

    }

}