/* ================= FILTER BAR ================= */
.filter-bar{
    background:#fff;
    padding:15px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.filter-bar select,.filter-bar button{
    padding:8px 14px;
    margin:5px;
}

/* ================= HOTEL CARD ================= */
.hotel-card{
    background:#fff;
    max-width:1100px;
    margin:30px auto;
    padding:20px;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* ================= STARS ================= */
.stars{
    text-align:center;
    color:#f4b400;
    margin-bottom:15px;
}

/* ================= IMAGE FILLED CARD ================= */
.hotel-image-card{
    position:relative;
    width:100%;
    height:600px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
}

/* 4 image collage */
.image-collage{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    height:100%;
}

.image-collage img{
    width:100%;
    height:100%;
    object-fit:cover;
    cursor:pointer;
    transform:scale(1);
    transition:transform .8s ease;
    opacity:0;
    animation:cinemaIn 1.6s cubic-bezier(.22,1,.36,1) forwards;
}

/* animation delay */
.image-collage img:nth-child(1){ animation-delay:.2s }
.image-collage img:nth-child(2){ animation-delay:.4s }
.image-collage img:nth-child(3){ animation-delay:.6s }
.image-collage img:nth-child(4){ animation-delay:.8s }

/* hover zoom */
.hotel-image-card:hover img{
    transform:scale(1.08);
}

/* overlay */
.hotel-image-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,.15),
        rgba(0,0,0,.55)
    );
}

/* ================= CURVED TITLE ================= */
.hotel-title-curve{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);white-space:nowrap;
    padding:16px 36px;
    display:inline-block;   
    width:auto;
    max-width:90%;
    white-space:nowrap;
    color:#fff;
    font-size:26px;
    font-weight:700;
    text-align:center;
    letter-spacing:5px;
    z-index:5;
    background:rgba(0,0,0,.35);
    border-radius:90px 90px 130px 130px;
    backdrop-filter:blur(5px);
    animation:titleFloat 1.4s ease forwards;

}

@keyframes titleFloat{
    from{ opacity:0; transform:translate(-50%,-20%) scale(.9) }
    to{ opacity:1; transform:translate(-50%,-50%) scale(1) }
}

/* ================= IMAGE ANIMATION ================= */
@keyframes cinemaIn{
    from{
        opacity:0;
        transform:translateY(80px) scale(.85) rotateX(12deg);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1) rotateX(0deg);
    }
}

/* ================= LIGHTBOX ================= */
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999;
}
.lightbox img{
    max-width:90%;
    max-height:90%;
}

/* ================= MOBILE ================= */
@media(max-width:768px){
    .hotel-image-card{ height:300px; }
    .hotel-title-curve{
        font-size:20px;
        padding:14px 28px;
    }
}