/* ===========================
   PHOTOS PAGE
=========================== */

body{
    margin:0;
    background:linear-gradient(180deg,#fdf8f2 0%,#f7efe4 100%);
    font-family:"Poppins",sans-serif;
    color:#5b4332;
}

/* ---------- Header ---------- */

.page-header{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 0 10px;
}

.logo img{
    width:180px;
    height:auto;
    display:block;
}

/* ---------- Home button ---------- */

.back-btn{
    position:fixed;
    top:24px;
    left:24px;

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

    padding:12px 24px;

    border-radius:999px;

    background:rgba(255,250,242,.9);

    color:#6b4a2d;

    text-decoration:none;

    font-weight:600;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    transition:.25s;

    z-index:9999;
}

.back-btn:hover{

    transform:translateY(-2px);

    background:#ffffff;

    box-shadow:0 18px 36px rgba(0,0,0,.15);

}

/* ---------- Hero ---------- */

.hero{

    text-align:center;

    margin-top:10px;

    margin-bottom:60px;

    padding:0 20px;

}

.hero h1{

    margin:0;

    font-size:54px;

    font-family:"Cormorant Garamond",serif;

    font-weight:700;

    color:#5c3d28;

}

.hero p{

    margin-top:16px;

    font-size:19px;

    line-height:1.7;

    color:#8b6c54;

}

/* ---------- Albums ---------- */

.albums{

    width:min(1200px,92%);

    margin:0 auto 80px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}
/* ===========================
   Album Cards
=========================== */

.album-card{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:28px;

    height:340px;

    text-decoration:none;

    box-shadow:0 18px 45px rgba(0,0,0,.12);

    transition:.35s;

    background:#ddd;

}

.album-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 60px rgba(0,0,0,.18);

}

.album-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.album-card:hover img{

    transform:scale(1.05);

}

.album-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:28px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.72)
    );

}

.album-overlay h2{

    margin:0;

    color:white;

    font-size:30px;

    font-family:"Cormorant Garamond",serif;

}

.album-overlay span{

    display:block;

    margin-top:8px;

    color:#eee;

    font-size:16px;

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

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.lightbox.active{

    display:flex;

}

.lightbox img{

    max-width:min(900px,72vw);

    max-height:75vh;

    width:auto;
    height:auto;

    border-radius:18px;

    box-shadow:0 20px 70px rgba(0,0,0,.45);
}

.close{

    position:absolute;

    top:25px;

    right:35px;

    font-size:50px;

    color:white;

    cursor:pointer;

}

.nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

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

    color:white;

    font-size:34px;

    cursor:pointer;

    backdrop-filter:blur(10px);

}

.prev{

    left:30px;

}

.next{

    right:30px;

}

.nav:hover{

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

}
/* ---------- Album gallery ---------- */

.gallery{
    width:min(1200px,92%);
    margin:40px auto 80px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
}

.photo{
    aspect-ratio:1 / 1;
    overflow:hidden;
    border-radius:18px;
    background:#f5f5f5;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    cursor:pointer;
    transition:.3s;
}

.photo img:hover{
    transform:scale(1.03);
}