/* ==========================================
   Season of Postcards
   Gallery
========================================== */

/* ---------- Reset ---------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- Body ---------- */

body {

    background: #F3E6D3;
    color: #3D3127;

    font-family: "Caveat", cursive;

    line-height: 1.7;

    min-height: 100vh;

}

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

.hero {

    text-align: center;

    padding: 2.5rem 1.5rem 1.5rem;

}

.back-link {

    display: inline-block;

    margin-bottom: 2rem;

    text-decoration: none;

    font-family: "Kalam", cursive;

    font-size: 1.5rem;

    color: #7B6A58;

    transition: opacity .25s ease;

}

.back-link:hover {

    opacity: .7;

}

.hero h1 {

    font-family: "Kalam", cursive;

    font-size: 2.6rem;

    font-weight: normal;

    margin-bottom: .05rem;

}

.intro {

    max-width: 480px;

    margin: auto;

    color: #7B6A58;

    font-size: 1.35rem;

}

/* ---------- Layout ---------- */

main {

    max-width: 480px;

    margin: auto;

    padding: 1rem;

}

/* ---------- Gallery Grid ---------- */

.gallery-grid {

    display: grid;

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

    gap: 12px;

}

/* ---------- Thumbnail ---------- */

.thumbnail {

    width: 100%;

    border-radius: 12px;

    cursor: pointer;

    overflow: hidden;

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

    transition: .25s ease;

}

.thumbnail:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0,0,0,.08);

}

.thumbnail img {

    width: 100%;

    display: block;

}

/* ---------- Lightbox ---------- */

.lightbox {

    position: fixed;

    inset: 0;

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

    display: none;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 1rem;

    z-index: 999;

}

/* ---------- Image ---------- */

#lightbox-image {

    max-width: 100%;

    max-height: 72vh;

    border-radius: 8px;

}

/* ---------- Close ---------- */

.close-btn {

    position: absolute;

    top: 20px;

    right: 20px;

    border: none;

    background: none;

    color: white;

    font-size: 2rem;

    cursor: pointer;

}

/* ---------- Counter ---------- */

.photo-counter {

    color: white;

    margin-top: 1rem;

    font-family: "Kalam", cursive;

    font-size: 1.2rem;

}

/* ---------- Controls ---------- */

.lightbox-controls {

    display: flex;

    gap: 2rem;

    margin-top: 1.5rem;

}

.lightbox-controls button {

    border: none;

    border-radius: 30px;

    padding: .75rem 1.4rem;

    background: white;

    font-family: "Kalam", cursive;

    font-size: 1.2rem;

    cursor: pointer;

    transition: .2s;

}

.lightbox-controls button:hover {

    background: #ddd;

}

.video-container{

    width:min(90vw, 1200px);

    aspect-ratio:16/9;

    border-radius:18px;

    overflow:hidden;

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

}

.video-container iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

}

/* ==========================================
   Video Grid
========================================== */

.video-grid{

    display:grid;

    gap:1.5rem;

}

.video-card{

    display:block;

    text-decoration:none;

    color:inherit;

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

    border-radius:16px;

    overflow:hidden;

    transition:.25s;

}

.video-card:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(0,0,0,.08);

}

.video-card img{

    display:block;

    width:100%;

}

.video-card h2{

    padding:1rem;

    text-align:center;

    font-family:"Kalam",cursive;

    font-weight:normal;

    font-size:1.35rem;

}

/* ---------- Mobile ---------- */

@media (max-width:600px){

    .hero h1{

        font-size:2.2rem;

    }

    .intro{

        font-size:1.75rem;

    }

    .lightbox-controls button {

        font-size: 1.25rem;

    } 

    .gallery-grid{

        gap:10px;

    }

}


/* ==========================================
   Floating Navigation
========================================== */

.floating-nav{

    position:fixed;

    bottom:24px;

    left:50%;

    transform:translateX(-50%);

    opacity: .75;
    transition: opacity .25s ease;

    display:flex;

    gap:12px;

    z-index:999;

}

.floating-nav a{

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

    min-width:110px;

    padding:12px 20px;

    font-size: 1.2rem;

    text-decoration:none;

    color:#222;

    font-weight:600;

    border-radius:999px;

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

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

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

    box-shadow:
        0 8px 24px rgba(0,0,0,.15);

    transition:all .25s ease;

}

.floating-nav a:hover{

    transform:translateY(-2px);

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

    opacity: 1;

}

.floating-nav a:active{

    transform:scale(.96);

}

@media (max-width:768px){

    .floating-nav{

        width:90%;

        justify-content:space-between;

    }

    .floating-nav a{

        flex:1;

        min-width:auto;

        font-size: 1.5rem;

    }

}

/* ==========================================
   Loading
========================================== */

#loading{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:80px 20px;

    color:#666;

}

.spinner{

    width:42px;

    height:42px;

    border:4px solid rgba(0,0,0,.1);

    border-top:4px solid #555;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin-bottom:16px;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

#video-player{

    width:100%;

    height:100%;

    border:none;

}