/* ==========================================================================
   Rooms catalogue (rooms.php) — page-only styles on top of site.css.
   ========================================================================== */

/* ------------------------------------------------------------ filter bar */
.pb-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
    margin-bottom: clamp(24px, 3vw, 36px); padding: 12px; border-radius: 22px;
    background: var(--sand-0); border: 1px solid var(--line); box-shadow: var(--shadow-s);
}
.pb-filter__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pb-filter__group--sort { gap: 6px; }
.pb-filter__label { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; color: var(--muted); font-size: .86rem; font-weight: 700; }
.pb-filter__label .pb-i { width: 18px; height: 18px; color: var(--teal-700); }
.pb-filter__btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; border-radius: 999px;
    border: 1.5px solid rgba(15, 31, 30, .14); background: #fff; color: var(--ink-2) !important;
    font-weight: 700; font-size: .95rem; line-height: 1.1; white-space: nowrap;
    transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.pb-filter__btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.pb-filter__btn .pb-i { width: 18px; height: 18px; color: var(--teal-700); transition: color .25s; }
.pb-filter__btn--sm { min-height: 40px; padding: 8px 12px; font-size: .88rem; }
.pb-filter__n {
    display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
    background: var(--sand-100); color: var(--ink-2); font-size: .78rem; font-weight: 800;
}
.pb-filter__btn[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.pb-filter__btn[aria-current="true"] .pb-i { color: var(--gold); }
/* --terra-btn: white small text on plain --terra is only ~3.4:1 */
.pb-filter__btn[aria-current="true"] .pb-filter__n { background: var(--terra-btn); color: #fff; }
.pb-filter__count { margin: 0 6px 0 auto; color: var(--muted); font-size: .86rem; font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------ room grid */
/* The catalogue ends with a short login note: less air below it. */
.pb-rooms-cat { padding-bottom: clamp(56px, 7vw, 96px); }

/* Wrappers carry data-kind/price for rooms.js; display: contents keeps the
   cards themselves as grid items so the shared wide-card rules apply. */
.pb-rooms__item { display: contents; }
.pb-rooms__item[hidden] { display: none; }

/* Filtered or re-sorted: every card is a regular tile. */
.pb-rooms--plain .pb-room--wide { grid-column: auto; flex-direction: column; }
.pb-rooms--plain .pb-room--wide .pb-room__media { flex: none; aspect-ratio: 4 / 3.2; min-height: 0; }
.pb-rooms--plain .pb-room--wide .pb-room__body { padding: 22px 24px 24px; }
/* site.css hides the arrow of a wide card narrower than 760 px (its text
   column is narrow there). As a regular tile it is a normal card again:
   without the arrow its footer was shorter and the meta row sat lower than
   in the neighbouring cards. Narrow tiles still drop it (site.css, 345 px). */
@container (min-width: 346px) {
    .pb-rooms--plain .pb-room--wide .pb-room__go { display: grid; }
}
/* Wide first card: the photo takes more of the width, the text keeps the
   shared top-to-bottom layout (title up top, meta and price at the foot). */
.pb-rooms--catalog:not(.pb-rooms--plain) .pb-room--wide .pb-room__media { flex: 1.4; min-height: 380px; }
.pb-rooms--catalog:not(.pb-rooms--plain) .pb-room--wide .pb-room__body { padding: clamp(28px, 3vw, 40px); gap: 14px; }
.pb-rooms--catalog:not(.pb-rooms--plain) .pb-room--wide h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); }
.pb-rooms--catalog:not(.pb-rooms--plain) .pb-room--wide .pb-room__tagline { font-size: 1.06rem; line-height: 1.6; }
/* fill-mode "backwards": once finished, the animation must not keep holding
   transform, or the shared hover lift stops working on every shown card. */
.js .pb-rooms--catalog .pb-room.pb-rooms-pop { animation: pb-rooms-pop .7s var(--ease) backwards; }
@keyframes pb-rooms-pop { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* help tile: fills the rest of the last row */
.pb-rooms__help {
    grid-column: span var(--span3, 1);
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 18px 26px;
    padding: clamp(24px, 3vw, 36px); border-radius: 26px; color: #fff;
    background: radial-gradient(420px 260px at 100% 0%, rgba(224, 104, 58, .38), transparent 70%), linear-gradient(160deg, var(--teal-800), var(--teal-950));
    box-shadow: var(--shadow);
}
.pb-rooms__help::after {
    content: ''; position: absolute; z-index: -1; right: -90px; bottom: -120px; width: 280px; height: 280px;
    border-radius: 50%; border: 1px dashed rgba(242, 181, 107, .4);
}
.pb-rooms__help-text { flex: 1 1 240px; min-width: 0; }
.pb-rooms__help h3 { color: #fff; margin: 0 0 8px; }
.pb-rooms__help p { color: rgba(236, 246, 244, .8); margin: 0; }
.pb-rooms__help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pb-rooms__help-phone { display: inline-flex; align-items: center; gap: 8px; color: #fff !important; font-weight: 700; }
.pb-rooms__help-phone:hover { color: var(--gold) !important; }
/* A tile spanning 2+ columns gets a room photo behind a dark fade, so a
   filtered view (e.g. only the hall) does not end in a big empty block. */
@media (min-width: 981px) {
    .pb-rooms__help[data-photo][data-wide3] .pb-rooms__help-text { max-width: 30rem; }
    .pb-rooms__help[data-photo][data-wide3] {
        background: linear-gradient(90deg, rgba(4, 31, 30, .95) 0%, rgba(4, 31, 30, .9) 45%, rgba(4, 31, 30, .6) 100%), var(--help-img) center / cover no-repeat;
    }
}
@media (min-width: 681px) and (max-width: 980px) {
    .pb-rooms__help[data-photo][data-wide2] .pb-rooms__help-text { max-width: 34rem; }
    .pb-rooms__help[data-photo][data-wide2] {
        background: linear-gradient(90deg, rgba(4, 31, 30, .95) 0%, rgba(4, 31, 30, .9) 45%, rgba(4, 31, 30, .6) 100%), var(--help-img) center / cover no-repeat;
    }
}

.pb-rooms-login { margin-top: clamp(24px, 3vw, 36px); align-items: center; }
.pb-rooms-login p { margin: 0; }
.pb-rooms-login .pb-link-arrow { margin-left: 4px; white-space: nowrap; }

/* ----------------------------------------------------------- comparison */
.pb-cmp .pb-table { min-width: 920px; }
/* Headers may wrap: long AZ/EN labels must not push the table past its box. */
.pb-cmp .pb-table thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.pb-cmp .pb-table tbody th { font-weight: inherit; text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.pb-cmp .pb-table tbody tr:last-child th { border-bottom: 0; }
.pb-cmp .pb-table__room { color: var(--ink) !important; }
.pb-cmp .pb-table__room:hover { color: var(--terra) !important; }
.pb-cmp .pb-table__room img { transition: transform .5s var(--ease); }
.pb-cmp .pb-table__room:hover img { transform: scale(1.06); }
.pb-cmp__noimg { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--teal-50); color: var(--teal-700); }
.pb-cmp__name { display: block; line-height: 1.3; }
.pb-cmp__code {
    display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 8px; vertical-align: 1px;
    background: var(--teal-900); color: #fff; font: 700 .78rem/1.4 var(--font-display); letter-spacing: .02em;
}
.pb-cmp__cap { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; }
.pb-cmp__cap .pb-i { color: var(--teal-700); }
.pb-cmp__rate b { font: 700 1.3rem/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.pb-cmp__rate small { color: var(--muted); font-weight: 600; }
.pb-cmp__rate--pkg b { color: var(--teal-700); }
.pb-cmp__sub { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.pb-cmp__none { color: var(--muted); }
.pb-cmp__best { white-space: normal !important; min-width: 190px; max-width: 290px; color: var(--ink-2); font-size: .9rem; line-height: 1.4; }
.pb-cmp__best ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pb-cmp__best li { position: relative; padding-left: 14px; }
.pb-cmp__best li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); }
/* Scroll hint: shown by CSS where the table usually overflows; rooms.js then
   switches it on/off from the real scrollWidth (is-on / is-off). */
.pb-cmp__hint { display: none; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: .86rem; font-weight: 700; }
.pb-cmp__hint .pb-i { color: var(--terra); animation: pb-rooms-nudge 1.6s var(--ease) infinite; }
.pb-cmp__hint.is-on { display: flex; }
.pb-cmp__hint.is-off { display: none; }
@keyframes pb-rooms-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.pb-cmp__foot { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 18px 32px; align-items: center; margin-top: 24px; }
.pb-cmp__foot .pb-actions { margin: 0; justify-content: flex-end; }

/* ------------------------------------------------------------ amenities */
.pb-amen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.pb-amen__item {
    display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius);
    background: var(--sand-50); border: 1px solid var(--line); box-shadow: var(--shadow-s);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pb-amen__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pb-amen__item h3 { margin: 0 0 6px; font-size: 1.1rem; }
.pb-amen__item p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.pb-amen__rules { margin-top: clamp(24px, 3vw, 36px); background: var(--sand-50); border-color: var(--line); align-items: center; }
.pb-amen__rules p { margin: 0; }
.pb-amen__rules .pb-link-arrow { margin-left: 4px; white-space: nowrap; }

/* ---------------------------------------------------------------- guide */
.pb-guide__codes {
    position: absolute; left: 0; top: clamp(18px, 3vw, 40px); width: 55%; height: 1px; pointer-events: none; z-index: 0;
}
.pb-guide__codes::before {
    content: attr(data-text); position: absolute; left: 0; top: 0; white-space: nowrap;
    font: 700 clamp(4.2rem, 12vw, 10.5rem)/1 var(--font-display); letter-spacing: -.04em;
    color: transparent; -webkit-text-stroke: 1px rgba(15, 118, 110, .13);
}
.pb-guide .pb-container { position: relative; z-index: 1; }
/* Fallback: the text block absorbs height differences between cards. */
.pb-guide__card { display: flex; flex-direction: column; }
.pb-guide__card h3 { margin-top: 18px; }
.pb-guide__card > .pb-muted { flex: 1; }
.pb-guide__fits { padding-top: 18px; border-top: 1px dashed var(--line); }
.pb-guide__label { display: block; margin-bottom: 10px; color: var(--terra-700); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pb-guide__rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pb-guide__room {
    display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 4px 14px 4px 4px; border-radius: 999px;
    background: var(--sand-50); border: 1px solid var(--line); color: var(--ink) !important; font-size: .88rem; font-weight: 600; line-height: 1.25;
    transition: border-color .25s, background .25s, transform .3s var(--ease);
}
.pb-guide__room:hover { border-color: var(--terra); background: #fff; transform: translateY(-2px); }
.pb-guide__room img, .pb-guide__noimg { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.pb-guide__noimg { display: grid; place-items: center; background: var(--teal-50); color: var(--teal-700); }
.pb-guide__noimg .pb-i { width: 18px; height: 18px; }
.pb-guide__room b { color: var(--teal-700); font-family: var(--font-display); }
/* Cards in a row share row tracks, so the "fits" labels line up. The row
   gap moves into a card margin: parent gutters would otherwise sit between
   the subgrid rows inside every card. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 681px) {
        .pb-guide .pb-grid--3 { row-gap: 0; margin-bottom: calc(-1 * clamp(16px, 2.2vw, 28px)); }
        .pb-guide__card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: clamp(16px, 2.2vw, 28px); }
        .pb-guide__card > .pb-muted { margin-bottom: 18px; }
        .pb-guide__fits { align-self: start; }
    }
}

/* ----------------------------------------------------------------- band */
.pb-rooms-band { padding-block: clamp(72px, 9vw, 112px); }
.pb-rooms-band__example {
    display: flex; align-items: flex-start; gap: 12px; max-width: 580px; margin: 22px 0 0; padding: 14px 18px; border-radius: 18px;
    background: rgba(255, 255, 255, .1); border: 1px solid var(--line-light); color: #fff; font-weight: 600;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pb-rooms-band__example .pb-i { color: var(--gold); margin-top: 2px; }

/* ------------------------------------------------------------------ FAQ */
.pb-rooms-faq__head { position: sticky; top: calc(var(--header-h) + 32px); }
.pb-rooms-faq__links { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
#faq .pb-faq details { background: var(--sand-50); }

/* ----------------------------------------------------------- responsive */
@media (min-width: 981px) {
    .pb-cmp .pb-table th, .pb-cmp .pb-table td { padding-inline: 14px; }
}
@media (max-width: 1260px) {
    /* The table can be wider than its box here: hint + room column pinned. */
    .pb-cmp__hint { display: flex; }
    .pb-cmp .pb-table tbody th, .pb-cmp .pb-table thead th:first-child {
        position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--line), 8px 0 14px -10px rgba(6, 48, 46, .35);
    }
    .pb-cmp .pb-table tbody th { background: var(--sand-0); }
    .pb-cmp .pb-table thead th:first-child { z-index: 3; }
    .pb-cmp .pb-table tbody tr:hover th { background: var(--teal-50); }
}
@media (max-width: 1080px) {
    .pb-amen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .pb-rooms__help { grid-column: span var(--span2, 2); }
    .pb-rooms--catalog:not(.pb-rooms--plain) .pb-room--wide .pb-room__media { min-height: 320px; }
    .pb-cmp__foot { grid-template-columns: minmax(0, 1fr); }
    .pb-cmp__foot .pb-actions { justify-content: flex-start; }
    .pb-rooms-faq__head { position: relative; top: 0; }
}
@media (max-width: 680px) {
    .pb-filter { padding: 12px; gap: 12px; }
    .pb-filter__group { width: 100%; gap: 6px; }
    .pb-filter__btn { min-height: 42px; padding: 8px 12px; font-size: .9rem; gap: 6px; }
    .pb-filter__btn .pb-i { display: none; }
    .pb-filter__label { width: 100%; }
    /* sort: an equal-width segmented control */
    /* min-content: a single long word ("Рекомендуемые") never spills out */
    .pb-filter__group--sort { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); }
    .pb-filter__group--sort .pb-filter__label { grid-column: 1 / -1; }
    .pb-filter__group--sort .pb-filter__btn { justify-content: center; text-align: center; white-space: normal; padding: 7px 8px; font-size: .84rem; line-height: 1.2; }
    .pb-filter__count { margin: 0; width: 100%; }
    .pb-rooms__help { grid-column: auto; }
    /* shorter photos: seven cards stack on a phone */
    .pb-rooms--catalog .pb-room__media,
    .pb-rooms--catalog:not(.pb-rooms--plain) .pb-room--wide .pb-room__media,
    .pb-rooms--plain .pb-room--wide .pb-room__media { aspect-ratio: 16 / 10; min-height: 0; flex: none; }
    .pb-rooms--catalog:not(.pb-rooms--plain) .pb-room--wide h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
    .pb-rooms--catalog:not(.pb-rooms--plain) .pb-room--wide .pb-room__tagline { font-size: .96rem; }
    .pb-rooms--catalog:not(.pb-rooms--plain) .pb-room--wide .pb-room__body { padding: 22px 24px 24px; gap: 12px; }

    /* comparison: one card per room instead of a sideways-scrolling table */
    .pb-cmp .pb-table, .pb-cmp .pb-table tbody { display: block; min-width: 0; }
    .pb-cmp .pb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* DOM order: room, hourly, package, saving, capacity, best-for */
    .pb-cmp .pb-table tbody tr {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 12px; padding: 16px;
        grid-template-areas: "room room room" "cap cap cap" "hour pkg save" "best best best";
        border-bottom: 1px solid var(--line);
    }
    .pb-cmp .pb-table tbody tr:last-child { border-bottom: 0; }
    .pb-cmp .pb-table tbody tr:hover { background: none; }
    .pb-cmp .pb-table tbody th,
    .pb-cmp .pb-table tbody tr:hover th { grid-area: room; align-self: center; position: static; box-shadow: none; padding: 0; border: 0; background: none; }
    .pb-cmp .pb-table td { display: block; padding: 0; border: 0; white-space: normal; text-align: left; min-width: 0; }
    .pb-cmp .pb-table td:nth-of-type(1) { grid-area: hour; }
    .pb-cmp .pb-table td:nth-of-type(2) { grid-area: pkg; }
    .pb-cmp .pb-table td:nth-of-type(3) { grid-area: save; }
    /* capacity: a meta line under the room name (the icon says what it is) */
    .pb-cmp .pb-table td:nth-of-type(4) { grid-area: cap; margin-top: -8px; padding-left: 54px; }
    .pb-cmp .pb-table td:nth-of-type(4)::before { display: none; }
    .pb-cmp .pb-table td::before {
        content: attr(data-label); display: block; min-height: 2.6em; margin-bottom: 4px;
        color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3;
    }
    .pb-cmp .pb-table td.pb-cmp__best::before { display: none; }
    .pb-cmp .pb-table__room { min-width: 0; gap: 10px; font-size: .95rem; }
    .pb-cmp .pb-table__room img, .pb-cmp__noimg { width: 44px; height: 44px; border-radius: 12px; }
    .pb-cmp__code { display: block; width: max-content; margin: 0 0 3px; }
    .pb-cmp__rate b { font-size: 1.15rem; }
    .pb-cmp__rate small { font-size: .74rem; }
    .pb-cmp__sub { font-size: .74rem; line-height: 1.35; }
    .pb-cmp__cap { font-size: .88rem; }
    .pb-cmp .pb-badge { padding: 4px 9px; font-size: .78rem; }
    .pb-cmp__best { grid-area: best; min-width: 0; max-width: none; padding-top: 10px !important; border-top: 1px dashed var(--line) !important; }
    .pb-cmp__hint { display: none; }
    .pb-cmp__hint.is-on { display: none; }

    /* amenities: one compact card with a divided list */
    .pb-amen { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--sand-50); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); overflow: hidden; }
    .pb-amen__item { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 0; border-radius: 0; box-shadow: none; background: none; }
    .pb-amen__item + .pb-amen__item { border-top: 1px dashed var(--line); }
    .pb-amen__item:hover { transform: none; box-shadow: none; }
    .pb-amen__item .pb-icon { width: 42px; height: 42px; border-radius: 13px; }
    .pb-amen__item .pb-icon .pb-i { width: 22px; height: 22px; }
    .pb-amen__item h3 { font-size: 1.02rem; margin-bottom: 4px; }
    .pb-amen__item p { font-size: .9rem; }
    .pb-amen__rules, .pb-rooms-login { align-items: flex-start; }

    /* guide: icon beside the title, like the home page's compact cards */
    .pb-guide__codes { width: 60%; }
    .pb-guide__card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; }
    .pb-guide__card .pb-icon { width: 48px; height: 48px; border-radius: 14px; }
    .pb-guide__card h3 { margin: 0; }
    .pb-guide__card > .pb-muted, .pb-guide__fits { grid-column: 1 / -1; }
    .pb-guide__card > .pb-muted { margin: 12px 0 16px; }
    .pb-guide__fits { padding-top: 14px; }
    .pb-guide__card .pb-card__num { display: none; }
    /* band: the shared ≤980 px vertical shade (site.css) applies; a lighter
       page override (.55 at the top) left the heading on the light wall. */
}

@media (prefers-reduced-motion: reduce) {
    .js .pb-rooms--catalog .pb-room.pb-rooms-pop { animation: none; }
    .pb-cmp__hint .pb-i { animation: none; }
}