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

.room-hero{

height:100vh;

background:url("../images/stanza-nature.png") center center/cover no-repeat;

position:relative;

display:flex;

align-items:flex-end;


}

.room-overlay{

position:absolute;

inset:0;

background:linear-gradient(
rgba(15,25,45,.25),
rgba(15,25,45,.65)
);




}

.room-hero-content{

position:relative;

z-index:2;

width:90%;

max-width:1300px;

margin:auto;

color:white;

top:110px;


}

.room-badge{

display:inline-block;

padding:8px 18px;

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

border-radius:30px;

font-size:.8rem;

letter-spacing:3px;

backdrop-filter:blur(10px);

margin-bottom:20px;


}

.room-hero h1{

font-family:'Playfair Display',serif;

font-size:5rem;

margin-bottom:20px;

text-shadow:
0 10px 30px rgba(0,0,0,.35);


}

.room-hero p{

max-width:620px;

font-size:1.15rem;

line-height:1.8;

text-shadow:
0 3px 15px rgba(0,0,0,.5);



m-top:30px;

}




/*=========================================
            GALLERIA
=========================================*/

.room-gallery{

    padding:35px 0 80px;

    background:#F3EEE6;
    
      scroll-margin-top:80px;

}

.footer{
	
	
	scroll-margin-top:10px;
}

.gallery-container{

    width:95%;

    max-width:1700px;

    margin:auto;

}

/*=========================================
              TITOLO
=========================================*/

.gallery-title{

    font-family:'Playfair Display',serif;

    font-size:3rem;

    font-weight:600;

    color:#1E3558;

    text-align:center;

    margin-bottom:45px;

    letter-spacing:1px;

}


/*=========================================
             LAYOUT
=========================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:3.8fr 1fr;

    gap:28px;

    align-items:start;

}


/*=========================================
            FOTO PRINCIPALE
=========================================*/

.gallery-main{

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 18px 40px rgba(0,0,0,.10);

    cursor:pointer;

	position:relative;
	
}

.gallery-main img{

    width:100%;

    height:530px;

    object-fit:cover;

    display:block;

    transition:.45s;

}

.gallery-main:hover img{

    transform:scale(1.03);

}


/*=========================================
         COLONNA DESTRA
=========================================*/

.gallery-right{

    display:flex;

    flex-direction:column;

	
}


/*=========================================
          PULSANTI CAMERE
=========================================*/

.gallery-tabs{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-bottom:22px;

    padding-bottom:22px;

    border-bottom:1px solid #D8D1C5;

}

.room-tab{

    height:44px;

    font-size:1.05rem;
    
    border:none;

    border-radius:14px;

    background:#FFFFFF;

    color:#1E3558;

    font-family:'Playfair Display',serif;

    font-size:1.2rem;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.room-tab:hover{

    background: background:#C8A86B;
    border-color:#C8A86B;

    color:white;

    transform:translateX(6px);

}

.room-tab.active{

    background:#214B4E;

    color:white;

    box-shadow:0 12px 25px rgba(33,75,78,.25);

}

.room-tab:not(.active):hover{

    background:#C8A86B;

    border-color:#C8A86B;

    color:#1E3558;

    transform:translateX(6px);

}


/*=========================================
             MINIATURE
=========================================*/

.gallery-thumbs{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.gallery-thumbs img{

    width:100%;

    height:72px;

    object-fit:cover;

    border-radius:14px;

    cursor:pointer;

    transition:.35s;

    display:block;

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

}

.gallery-thumbs img:hover{

    transform:scale(1.04);

}

.gallery-thumbs img.active{

    outline:3px solid #C8A86B;

}


/*=========================================
              + FOTO
=========================================*/

.gallery-more{

    position:relative;

    overflow:hidden;

    border-radius:14px;

    cursor:pointer;

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

}

.gallery-more img{

    width:100%;

    height:72px;

    object-fit:cover;

    display:block;

    filter:brightness(.45);

    transition:.35s;

}

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:white;

    background:rgba(20,30,50,.25);

    transition:.35s;

}

.gallery-overlay span{

    font-family:'Playfair Display',serif;

    font-size:2rem;

    font-weight:700;

}

.gallery-overlay p{

    margin-top:6px;

    font-size:.85rem;

    letter-spacing:1px;

}

.gallery-more:hover img{

    transform:scale(1.08);

}

.gallery-more:hover .gallery-overlay{

    background:rgba(33,75,78,.55);

}
/*=========================================
            SERVIZI
=========================================*/

.room-services{

    padding:100px 0;

    
      scroll-margin-top:-20px;
   	background:#F7F7F7;

}

.services-title{

    text-align:center;

    font-family:'Playfair Display',serif;

    font-size:3rem;

    color:#1E3558;

    margin-bottom:10px;

}

.services-subtitle{

    text-align:center;

    color:#666;

    font-size:1.05rem;

    max-width:700px;

    margin:0 auto 60px;

    line-height:1.8;

}


/*=========================================
            LAYOUT
=========================================*/

.services-layout{

    display:grid;

    grid-template-columns:2.5fr 1fr;

    gap:45px;

    align-items:start;
  

}


/*=========================================
          ELENCO SERVIZI
=========================================*/

.services-grid{

    display:grid;

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

    gap:20px;
    
  

}

.service-item{

display:flex;

align-items:flex-start;

gap:18px;

padding:20px;

background:#FCFAF7;

border-radius:22px;

border:1px solid #ECE4D7;

box-shadow:
0 10px 25px rgba(30,53,88,.05);

transition:.35s;

overflow:hidden;

position:relative;

}

.service-item:hover{

	transform:translateY(-6px);
	
	box-shadow:
	0 20px 40px rgba(30,53,88,.10);
	
	background:white;

}


.service-icon{

width:60px;

height:60px;

border-radius:18px;

background:#F2ECE2;

display:flex;

justify-content:center;

align-items:center;

flex-shrink:0;

font-size:1.45rem;

color:#1E3558;

transition:.35s;

}

.service-text h3{

    font-family:'Playfair Display',serif;

 color:#163150;	

    font-size:1.2rem;

    margin-bottom:8px;

}

.service-text p{

    color:#6E6E6E;

    font-size:.92rem;

    line-height:1.6;

}

.service-item:hover .service-icon{

background:#214B4E;

color:white;

transform:rotate(-8deg) scale(1.08);

}

.service-item::before{

content:"";

position:absolute;

left:0;

top:25px;

width:4px;

height:45px;

background:#C8A86B;

border-radius:10px;

transition:.35s;

}

.service-item:hover::before{

height:65px;

background:#214B4E;

}


/*=========================================
             CTA
=========================================*/

.booking-card-side{

    background:#1E3558;

    color:white;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    position:sticky;

    top:120px;

}

.booking-card-side h2{

    font-family:'Playfair Display',serif;

    font-size:2rem;

    margin-bottom:20px;

}

.booking-card-side p{

    line-height:1.8;

    margin-bottom:35px;

    opacity:.9;

}

.booking-card-side .btn-primary{

    display:inline-block;

}


/* ANIMAZIONI DINAMICHE */

.fade-change{

opacity:0;

transform:scale(.98);

transition:.30s ease;

}

.room-hero{

transition:
opacity .35s ease,
transform .35s ease,
background-image .35s ease;

}

.gallery-main img{

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

}


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

.lightbox{

position:fixed;

inset:0;

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

display:none;

justify-content:center;

align-items:center;

z-index:9999;

}

.lightbox.active{

display:flex;

}

#lightboxImage{

max-width:90%;

max-height:85vh;

border-radius:18px;

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

animation:fadeImage .3s;

}

@keyframes fadeImage{

from{

opacity:0;

transform:scale(.96);

}

to{

opacity:1;

transform:scale(1);

}

}

.lightbox-close{

    position:absolute;

    top:25px;

    right:35px;

    font-size:3rem;

    color:#E53935;

    cursor:pointer;

    transition:.3s;

    user-select:none;

}

.lightbox-close:hover{

    color:#ff6b6b;

    transform:scale(1.15);

}

.lightbox-prev,
.lightbox-next{

position:absolute;

top:50%;

transform:translateY(-50%);

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

border:none;

width:60px;

height:60px;

border-radius:50%;

color:white;

font-size:2rem;

cursor:pointer;

transition:.3s;

}

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

background:#214B4E;

}

.lightbox-prev{

left:40px;

}

.lightbox-next{

right:40px;

}

.lightbox-counter{

    position:absolute;

    top:28px;

    left:35px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 20px;

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

    backdrop-filter:blur(14px);

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

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

    border-radius:40px;

    color:white;

    font-size:1rem;

    font-weight:500;

}
.lightbox-counter i{

    color:#C8A86B;

    font-size:1rem;

}
.divider{

    opacity:.65;

}

#currentPhoto{

    color:#E4C892;

    font-size:1.15rem;

    font-weight:700;

}
#totalPhotos{

    color:white;

}

.gallery-tabs-mobile{
	
	
	display:none;
}

.gallery-main{

    position:relative;

    overflow:hidden;

}

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

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

    color:white;

    font-size:1.3rem;

    cursor:pointer;

    z-index:100;

    opacity:1;

}

.gallery-prev{

    left:20px;

}

.gallery-next{

    right:20px;

}

.gallery-arrow:hover{

    background:#214B4E;

    transform:translateY(-50%) scale(1.08);

}