/* ============================================================
   Hotel Brown Palace — tasteful polish for the Rooms pages
   Typography, shadows, gradients, hover/transition/transform only.
   Scoped to rooms areas so the rest of the site is untouched.
   No layout/structure changes.
   ============================================================ */

/* ---- Room list cards (rooms.html) ---------------------------------- */
#rooms_list .room_list {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px -18px rgba(23, 42, 66, .35);
    transition: box-shadow .35s ease, transform .35s ease;
    overflow: hidden;
}
#rooms_list .room_list:hover {
    box-shadow: 0 22px 48px -20px rgba(23, 42, 66, .45);
    transform: translateY(-4px);
}
#rooms_list .room_list figure {
    overflow: hidden;
    border-radius: 8px;
}
#rooms_list .room_list figure img {
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
    will-change: transform;
}
#rooms_list .room_list:hover figure img {
    transform: scale(1.06);
    filter: saturate(1.05);
}

/* Room title + copy typography */
#rooms_list .room_desc h3 a,
#room_page .room_desc h3 a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .4s ease, color .25s ease;
    padding-bottom: 2px;
}
#rooms_list .room_desc h3 a:hover { background-size: 100% 2px; }
#rooms_list .room_desc p { line-height: 1.75; letter-spacing: .2px; }

/* Amenity icons */
#rooms_list .room_services i,
#room_page .room_facilitys_list i {
    transition: transform .25s ease, color .25s ease;
}
#rooms_list .room_services i:hover { transform: translateY(-3px) scale(1.15); }

/* Price block — subtle gradient + lift */
#rooms_list .room_price_inner,
#room_page .price .inner {
    background-image: linear-gradient(135deg, rgba(201, 162, 75, .10), rgba(201, 162, 75, 0) 60%);
    border-radius: 8px;
    transition: transform .3s ease;
}
#rooms_list .room_list:hover .room_price_inner { transform: translateY(-2px); }
#rooms_list .room_price_number {
    display: inline-block;
    letter-spacing: .3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    transition: transform .3s ease;
}

/* Buttons — smoother press + glow */
#rooms_list .button,
#room_page .button {
    transition: transform .2s ease, box-shadow .3s ease, background-color .25s ease, filter .25s ease;
    will-change: transform;
}
#rooms_list .button:hover,
#room_page .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(23, 42, 66, .55);
    filter: brightness(1.04);
}
#rooms_list .button:active,
#room_page .button:active { transform: translateY(0); }

/* ---- Room detail page (standard/deluxe/premium/family) -------------- */
#room_page .slider .image-gallery .item a img {
    border-radius: 8px;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
#room_page .slider .image-gallery .item:hover a img {
    transform: scale(1.03);
    box-shadow: 0 18px 40px -22px rgba(23, 42, 66, .6);
}
#room_page #thumbs .item img {
    border-radius: 5px;
    transition: transform .3s ease, filter .3s ease, box-shadow .3s ease;
    filter: saturate(.92) brightness(.97);
}
#room_page #thumbs .item img:hover {
    transform: translateY(-2px);
    filter: saturate(1.05) brightness(1);
    box-shadow: 0 8px 18px -10px rgba(23, 42, 66, .5);
}

/* Header price badge on detail pages */
#room_page_wrap .page_title .price .inner,
.page_title .price .inner {
    transition: transform .3s ease, box-shadow .3s ease;
}
.page_title .price .inner:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5);
}

/* Similar rooms cards */
#room_page .similar_rooms article figure {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 26px -18px rgba(23, 42, 66, .4);
    transition: box-shadow .35s ease, transform .35s ease;
}
#room_page .similar_rooms article figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px -20px rgba(23, 42, 66, .5);
}
#room_page .similar_rooms article figure img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
#room_page .similar_rooms article figure:hover img { transform: scale(1.07); }
#room_page .similar_rooms .price {
    background-image: linear-gradient(135deg, #c9a24b, #a9842f);
    box-shadow: 0 6px 16px -8px rgba(169, 132, 47, .7);
}

/* Editable room photo grid (replaces the old Owl slider) */
#room_page .hbp-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 165px;
    gap: 10px;
    margin-bottom: 40px;
}
#room_page .hbp-gallery .g-cell {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 26px -18px rgba(23, 42, 66, .45);
}
#room_page .hbp-gallery .g-main { grid-column: span 2; grid-row: span 2; }
#room_page .hbp-gallery .g-cell > img,
#room_page .hbp-gallery .g-cell > .hbp-edit-wrap { width: 100%; height: 100%; display: block; }
#room_page .hbp-gallery .g-cell img {
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
#room_page .hbp-gallery .g-cell:hover img { transform: scale(1.05); }
@media (max-width: 600px) {
    #room_page .hbp-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }
    #room_page .hbp-gallery .g-main { grid-column: span 2; grid-row: span 1; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    #rooms_list *, #room_page * { transition: none !important; }
    #rooms_list .room_list:hover, #rooms_list .room_list:hover figure img,
    #room_page .similar_rooms article figure:hover img,
    #room_page .hbp-gallery .g-cell:hover img { transform: none !important; }
}