/* ============================================================================
   Hotels: the card, the results layout with its filter rail, and the property
   detail page (gallery, room table, facilities, policies, enquiry form).
   ========================================================================== */

/* --------------------------------------------------------------- card --- */

.hotel-card { display: flex; flex-direction: column; height: 100%; }
.hotel-card .pt-card__body { display: flex; flex-direction: column; flex: 1; gap: .4rem; }

.hotel-card__stars {
    position: absolute;
    left: .875rem;
    bottom: .875rem;
    z-index: 2;
    padding: .25rem .55rem;
    border-radius: var(--pt-radius-pill);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
}

.hotel-card__tagline {
    color: var(--pt-text-muted);
    font-size: var(--pt-text-sm);
    line-height: 1.55;
    /* Two lines maximum so a long tagline cannot make one card taller than the
       rest of the row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hotel-card__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }

.hotel-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pt-gap);
    /* Pinned to the bottom so the price line sits level across a row of cards
       whose descriptions differ in length. */
    margin-top: auto;
    padding-top: var(--pt-gap);
    border-top: 1px solid var(--pt-line-soft);
}

.hotel-card__go {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 600;
    color: var(--pt-blue-600);
    white-space: nowrap;
}

.hotel-card__go svg { width: 15px; height: 15px; transition: transform .25s var(--pt-ease); }
.hotel-card:hover .hotel-card__go svg { transform: translateX(3px); }

/* ------------------------------------------------------------ results --- */

.hotel-results {
    display: grid;
    gap: var(--pt-gap-xl);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1000px) {
    .hotel-results { grid-template-columns: 280px 1fr; }
}

.hotel-filters {
    background: var(--pt-paper);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-lg);
    padding: var(--pt-gap-lg);
}

@media (min-width: 1000px) {
    /* Follows the list down a long results page rather than scrolling away
       after the first three cards. */
    .hotel-filters { position: sticky; top: calc(var(--pt-header-h) + 1rem); }
}

.hotel-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-gap);
    margin-bottom: var(--pt-gap);
    padding-bottom: var(--pt-gap);
    border-bottom: 1px solid var(--pt-line-soft);
}

.hotel-filters__head h2 { font-size: var(--pt-text-lg); margin: 0; }

.hotel-filters__group + .hotel-filters__group {
    margin-top: var(--pt-gap-lg);
    padding-top: var(--pt-gap-lg);
    border-top: 1px solid var(--pt-line-soft);
}

.hotel-filters__group > h3 {
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    margin-bottom: .7rem;
}

.hotel-filters__options { display: grid; gap: .15rem; max-height: 260px; overflow-y: auto; }

.hotel-filter-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .5rem;
    border-radius: var(--pt-radius-sm);
    font-size: var(--pt-text-base);
    color: var(--pt-slate-700);
    cursor: pointer;
    transition: background .15s var(--pt-ease);
    min-height: 40px;
}

.hotel-filter-option:hover { background: var(--pt-blue-050); }
.hotel-filter-option input { accent-color: var(--pt-blue-600); width: 17px; height: 17px; flex: none; }
.hotel-filter-option .amenity-icon { font-size: 1rem; line-height: 1; }
.hotel-filter-option .count { margin-left: auto; font-size: var(--pt-text-xs); color: var(--pt-text-faint); }

.hotel-results__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-gap);
    margin-bottom: var(--pt-gap-lg);
}

.hotel-results__count { color: var(--pt-text-muted); font-size: var(--pt-text-base); margin: 0; }
.hotel-results__count strong { color: var(--pt-heading); font-family: var(--pt-font-display); }

.hotel-results__list { display: grid; gap: var(--pt-gap-lg); grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

/* Filter drawer trigger, mobile only. */
.hotel-filters__toggle { display: inline-flex; }

@media (min-width: 1000px) {
    .hotel-filters__toggle { display: none; }
}

@media (max-width: 999.98px) {
    .hotel-filters {
        position: fixed;
        inset: auto 0 0;
        z-index: 880;
        max-height: 86dvh;
        overflow-y: auto;
        border-radius: var(--pt-radius-xl) var(--pt-radius-xl) 0 0;
        box-shadow: var(--pt-shadow-xl);
        transform: translateY(101%);
        transition: transform .35s var(--pt-ease-out);
        padding-bottom: calc(var(--pt-gap-lg) + env(safe-area-inset-bottom));
    }

    .hotel-filters.is-open { transform: none; }
}

/* ------------------------------------------------------------- detail --- */

.hotel-detail__head { margin-bottom: var(--pt-gap-lg); }

.hotel-detail__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pt-gap-lg);
}

.hotel-detail__title-row h1 { font-size: clamp(1.75rem, 2.4vw + 1.1rem, 2.75rem); margin-bottom: .35rem; }

.hotel-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    color: var(--pt-text-muted);
    font-size: var(--pt-text-base);
}

.hotel-detail__meta > span { display: inline-flex; align-items: center; gap: .35rem; }
.hotel-detail__meta svg { width: 15px; height: 15px; color: var(--pt-blue-600); }

.hotel-detail__price-box {
    flex: none;
    padding: var(--pt-gap) var(--pt-gap-lg);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-paper);
    box-shadow: var(--pt-shadow-sm);
    text-align: right;
}

/* -- gallery -------------------------------------------------------------- */

/* One tall lead image with a stack of three beside it — the layout every hotel
   site uses because it works: the hero sells the property and the thumbnails
   prove there is more to see. */
.hotel-gallery {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr;
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    margin-bottom: var(--pt-section-y);
}

@media (min-width: 760px) {
    .hotel-gallery { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); height: 460px; }
    .hotel-gallery > :first-child { grid-row: span 2; }
    /* A property with only two or three photos still fills the frame rather
       than leaving a gap where the fourth would be. */
    .hotel-gallery > :nth-child(n+5) { display: none; }
}

.hotel-gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--pt-sand-deep);
    min-height: 180px;
}

.hotel-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pt-ease-out); }
.hotel-gallery__item:hover img { transform: scale(1.05); }

.hotel-gallery__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(5, 12, 24, .6);
    color: #fff;
    font-family: var(--pt-font-display);
    font-weight: 700;
    font-size: var(--pt-text-lg);
    backdrop-filter: blur(2px);
}

/* -- body layout ---------------------------------------------------------- */

.hotel-body {
    display: grid;
    gap: var(--pt-gap-xl);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1000px) {
    .hotel-body { grid-template-columns: 1fr 380px; }
}

.hotel-section + .hotel-section { margin-top: var(--pt-section-y); }

.hotel-section > h2 {
    font-size: var(--pt-h3);
    margin-bottom: var(--pt-gap);
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--pt-line);
}

.hotel-prose { color: var(--pt-slate-700); line-height: 1.75; }
.hotel-prose h3 { font-size: var(--pt-text-lg); margin-top: var(--pt-gap-lg); }
.hotel-prose ul, .hotel-prose ol { padding-left: 1.15rem; }
.hotel-prose li { margin-bottom: .35rem; }
.hotel-prose img { border-radius: var(--pt-radius); margin-block: var(--pt-gap); }
.hotel-prose table { width: 100%; border-collapse: collapse; }
.hotel-prose td, .hotel-prose th { border: 1px solid var(--pt-line); padding: .5rem .65rem; }

/* -- amenities ------------------------------------------------------------ */

.amenity-group + .amenity-group { margin-top: var(--pt-gap-lg); }

.amenity-group > h3 {
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    margin-bottom: .65rem;
}

.amenity-list {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.amenity-list li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--pt-text-base);
    color: var(--pt-slate-700);
}

.amenity-list .amenity-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--pt-blue-050);
    font-size: 1rem;
    line-height: 1;
}

/* -- rooms ---------------------------------------------------------------- */

.room-list { display: grid; gap: var(--pt-gap); }

.room {
    display: grid;
    gap: var(--pt-gap);
    grid-template-columns: 1fr;
    padding: var(--pt-gap);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-paper);
    transition: border-color .25s var(--pt-ease), box-shadow .25s var(--pt-ease);
}

.room:hover { border-color: var(--pt-blue-200); box-shadow: var(--pt-shadow); }

@media (min-width: 640px) {
    .room { grid-template-columns: 190px 1fr auto; align-items: center; }
}

.room__media {
    border-radius: var(--pt-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--pt-sand-deep);
}

.room__media img { width: 100%; height: 100%; object-fit: cover; }

.room__name { font-family: var(--pt-font-display); font-size: var(--pt-text-lg); font-weight: 700; color: var(--pt-heading); margin: 0 0 .2rem; }
.room__desc { color: var(--pt-text-muted); font-size: var(--pt-text-sm); margin: .35rem 0 0; }

.room__specs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

.room__buy { text-align: right; display: grid; gap: .5rem; justify-items: end; }

@media (max-width: 639.98px) {
    .room__buy { text-align: left; justify-items: stretch; }
}

.room__price-note { font-size: var(--pt-text-xs); color: var(--pt-text-faint); }
.room--soldout { opacity: .62; }

/* -- sticky enquiry card -------------------------------------------------- */

.hotel-enquiry {
    background: var(--pt-paper);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow);
    overflow: hidden;
}

@media (min-width: 1000px) {
    .hotel-enquiry { position: sticky; top: calc(var(--pt-header-h) + 1rem); }
}

.hotel-enquiry__head {
    padding: var(--pt-gap-lg);
    background: linear-gradient(135deg, var(--pt-ink-800), var(--pt-ink-600));
    color: #fff;
}

.hotel-enquiry__head h2 { color: #fff; font-size: var(--pt-text-xl); margin-bottom: .25rem; }
.hotel-enquiry__head p { color: rgba(255, 255, 255, .7); font-size: var(--pt-text-sm); margin: 0; }

.hotel-enquiry__body { padding: var(--pt-gap-lg); display: grid; gap: .85rem; }
.hotel-enquiry__row { display: grid; gap: .85rem; grid-template-columns: 1fr 1fr; }

.hotel-enquiry__note {
    display: flex;
    gap: .5rem;
    padding: .7rem .85rem;
    border-radius: var(--pt-radius);
    background: var(--pt-blue-050);
    color: var(--pt-slate-700);
    font-size: var(--pt-text-xs);
    line-height: 1.55;
}

.hotel-enquiry__note svg { width: 15px; height: 15px; flex: none; color: var(--pt-blue-600); margin-top: .1rem; }

/* Success banner after a lead is saved. */
.hotel-enquiry__done {
    display: flex;
    gap: .6rem;
    padding: .85rem 1rem;
    margin-bottom: var(--pt-gap);
    border-radius: var(--pt-radius);
    background: var(--pt-success-soft);
    color: var(--pt-success);
    font-size: var(--pt-text-sm);
    font-weight: 600;
}

.hotel-enquiry__done svg { width: 18px; height: 18px; flex: none; }

/* -- map ------------------------------------------------------------------ */

.hotel-map {
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    border: 1px solid var(--pt-line);
    aspect-ratio: 16 / 9;
    background: var(--pt-sand-deep);
}

.hotel-map iframe { width: 100%; height: 100%; border: 0; display: block; }