/* VARIÁVEIS */
:root {
    --cream: #FDFBF7;
    --gold: #8FBBD9;
    --gold-dark: #6FA3C8;
    --text: #333333;
    --text-light: #666666;
    --white: #FFFFFF;
    --serif: 'Playfair Display', serif;
    --sans: 'Montserrat', sans-serif;
}

/* RESET E BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    background-color: var(--white); 
    color: var(--text); 
    font-family: var(--sans); 
    line-height: 1.6; 
    overflow-x: hidden;
}
.body-presente{
    background-color: var(--cream);
}

.bg-cream { background-color: var(--cream); }
.container { max-width: 1300px; margin: 0 auto; padding: 30px 20px; text-align: center; }
.serif { font-family: var(--serif); font-weight: 400; color: var(--gold-dark); margin-bottom: 20px; }

/* HERO */
.hero {
    height: 100vh;
    background: url('/image/bg.png') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 3vh;
    position: relative;
    color: var(--white);
    text-align: center;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
}
.hero-content { 
    position: relative; 
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero-content h1 { font-family: var(--serif); font-size: 4rem; margin: 10px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.5);}
.hero-subtitle { letter-spacing: 5px; font-weight: 300;}
.hero-date { font-size: 1.5rem; letter-spacing: 2px; text-shadow: 0 2px 10px rgba(0,0,0,0.5);}


/* COUNTDOWN */
.countdown-section { background-color: var(--cream); padding: 60px 20px; }
#countdown { display: flex; justify-content: center; gap: 30px; margin-top: 30px; }
.count-item span { font-size: 2.5rem; font-family: var(--serif); color: var(--gold); display: block; }
.count-item p { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }

/* GALLERY MOSAIC */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
    gap: 15px;
    margin-top: 40px;
}
.gallery-item {
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    border-radius: 4px;
    cursor: pointer;
}
.gallery-item:hover { transform: scale(1.02); }
.item-v { grid-row: span 2; }
.item-h { grid-column: span 2; }

.gallery-quote{
    grid-column: 1 / -1;
    height: auto;
    align-self: center;
    margin: 0;
    padding: 10px 20px;
    font-style: italic;
}

/* INFO CARDS */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; }
.info-card {
    background: var(--white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    border-bottom: 3px solid transparent;
    transform: translateY(-10px); border-bottom: 3px solid var(--gold);
}

/* BUTTONS */
.btn-gold {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--gold);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    transition: 0.3s;
    margin-top: 20px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    letter-spacing: 1px;
    
}
.btn-gold:hover { background-color: var(--gold-dark); }

.btn-presente {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--gold);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    transition: 0.3s;
    margin-top: 20px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    letter-spacing: 1px;
    width: 100%;
}
.btn-presente:hover { background-color: var(--gold-dark); }

/* FIXED NAV */
.fixed-nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 10px 25px;
    border-radius: 50px;
    display: flex;
    gap: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    z-index: 1000;
    align-items: center;
}
.fixed-nav a { text-decoration: none; color: var(--text); font-size: 0.57rem; font-weight: 600; }
.btn-rsvp { background: var(--gold); color: white !important; padding: 8px 15px; border-radius: 20px; }

/* FOOTER */
footer { padding: 60px 20px; background: var(--cream); text-align: center; }
.copyright { font-size: 0.8rem; margin-top: 20px; color: var(--text-light); }

/* RESPONSIVO */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.5rem; }
    .item-h { grid-column: span 1; }
    .fixed-nav { width: 90%; justify-content: space-around; }
}

.logo-inicio{width: 150px; 
    height: auto;
    margin-bottom: clamp(200px, 5vh, 250px);
}

@media (min-width: 1024px) {

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
        margin: 40px auto 0;
    }

}

@media (min-width: 1024px) {

    .gallery-grid {
        grid-template-columns: 2fr 1fr;
        gap: 20px;
    }

    .item-h {
        grid-column: 1;
    }

    .item-v {
        grid-column: 2;
        grid-row: span 2;
    }

}

@media (min-width: 1024px) {

    .gallery-single .gallery-grid {
        display: block;
    }

    .gallery-single .gallery-item {
        height: 500px;
        width: 100%;
    }

}

/* Algumas alterações referente pagina de presentes */

.logo-presente{
    width:150px;
    height:auto;
    margin:40px auto 20px;
    display:block;
}

.hero2{
    color: var(--white);
    text-align: center; 
    padding-top:30px;
    padding-bottom:10px; 
}

.gift-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    margin-top:40px;
}

@media (min-width:768px){
    .gift-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (min-width:1024px){
    .gift-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

.gift-card{
    display:flex;
    flex-direction:column;
    width:100%;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.25s;
}

.gift-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.gift-card img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.gift-content p{
    color:var(--text-light);
    font-size:.9rem;
    flex:1;
}

.gift-value{
    display:block;
    font-size:1.4rem;
    font-weight:700;
    color:var(--gold-dark);
    margin:18px 0;
}

.album-header{

    position:sticky;
    top:0;

    z-index:999;

    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);

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

    padding: 10px 35px;

    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 3px 12px rgba(0,0,0,.04);

}

.album-logo img{

    width:90px;

}

.btn-upload{

    background:var(--gold);

    color:white;

    border:none;

    padding:12px 22px;

    border-radius:30px;

    cursor:pointer;

    font-size:.9rem;

    transition:.3s;

}

.btn-upload:hover{

    background:var(--gold-dark);

}

@media(max-width:768px){

.album-header{

    padding:15px;

}

.album-logo img{

    width:70px;

}

.btn-upload{

    padding:10px 15px;

    font-size:.8rem;

}

}

.album-title{

    text-align:center;

    padding:60px 20px 30px;

}

.album-title h1{

    font-size:3rem;

}

.album-title p{

    color:#777;

    max-width:600px;

    margin:auto;

}

.album-grid{

    columns:4 280px;

    column-gap:15px;

    padding-bottom:40px;

}

.photo-card{

    break-inside:avoid;

    margin-bottom:15px;

    overflow:hidden;

    border-radius:12px;

    cursor:pointer;

    position:relative;

}

.photo-card img{

    width:100%;

    display:block;

    transition:.4s;

}

.photo-card:hover img{

    transform:scale(1.04);

}

.loading-overlay{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loading-box{

    text-align:center;

}

.spinner{

    width:60px;

    height:60px;

    border:6px solid #eee;

    border-top:6px solid var(--gold);

    border-radius:50%;

    animation:spin .8s linear infinite;

    margin:auto auto 25px;

}

.loading-box h3{

    font-family:'Playfair Display', serif;

    margin-bottom:10px;

}

.loading-box p{

    color:#777;

    font-size:.9rem;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}