/* ==========================================================================
   Section head — eyebrow, serif title, optional decor and action button.
   Shared by every content section, sized from the template at 1920px.
   ========================================================================== */

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.25rem, 2vw, 2.5rem);
}

.section-head__eyebrow {
    color: var(--bb-gold-500);
    font-size: clamp(0.8125rem, 0.94vw, 1.125rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.section-head__eyebrow-lead {
    color: var(--bb-red-300);
}

.section-head__titlerow {
    display: flex;
    align-items: center;
    margin-top: clamp(0.6rem, 1.3vw, 1.5625rem);
}

.section-head__title {
    color: var(--bb-text);
    font-family: var(--bb-font-serif);
    font-size: clamp(1.75rem, 2.5vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
}

/* Negative block margins let the illustration bleed past the title line
   without stretching the row, exactly as it does in the template. They are
   asymmetric so the overhang sits above the heading rather than dipping into
   the cards below — the template places it high too. */
.section-head__decor {
    flex: none;
    width: auto;
    height: clamp(4.25rem, 7vw, 8.375rem);
    margin-top: -4.75rem;
    margin-bottom: -1.25rem;
    margin-left: clamp(0.5rem, 1vw, 1.125rem);
}

.section-head__action {
    flex: none;
    padding-block: 1.15em;
    padding-inline: clamp(1.1rem, 1.5vw, 1.75rem);
}

@media (max-width: 760px) {
    .section-head__decor {
        display: none;
    }
}

/* ==========================================================================
   Rooms & Suites
   ========================================================================== */

.rooms {
    background-color: var(--bb-black);
}

.rooms__inner {
    width: 100%;
    /* The token is the content width, so the gutters sit outside it — otherwise
       the grid ends up narrower than the template's 1640px. */
    max-width: calc(var(--bb-container) + var(--bb-gutter) * 2);
    margin-inline: auto;
    padding: clamp(2.25rem, 2.6vw, 3.125rem) var(--bb-gutter) clamp(2.75rem, 3.4vw, 4rem);
}

.rooms__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.9rem, 1vw, 1.1875rem);
    margin-top: clamp(1.5rem, 2.1vw, 2.5rem);
}

@media (min-width: 620px) {
    .rooms__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .rooms__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Home strip and the /rooms listing: three across (six types, two even
   rows) in a narrower centred column, with a shorter photo and tighter
   copy than the card's defaults below. */
:is(.rooms, .rooms-page) .rooms__grid {
    max-width: 80rem;
    margin-inline: auto;
}

:is(.rooms, .rooms-page) :is(.room-card__media img, .room-card__media--empty) {
    aspect-ratio: 3 / 2;
}

:is(.rooms, .rooms-page) .room-card__body {
    padding: clamp(0.95rem, 1vw, 1.25rem);
}

:is(.rooms, .rooms-page) .room-card__title {
    font-size: clamp(1rem, 1vw, 1.2rem);
}

:is(.rooms, .rooms-page) .room-card__text {
    margin-top: clamp(0.45rem, 0.6vw, 0.75rem);
    font-size: clamp(0.8125rem, 0.78vw, 0.9375rem);
    line-height: 1.65;
}

:is(.rooms, .rooms-page) .room-card__price {
    padding-top: clamp(0.85rem, 1.2vw, 1.4rem);
    font-size: clamp(0.9375rem, 0.95vw, 1.0625rem);
}

:is(.rooms, .rooms-page) .room-card__cta {
    padding-block: 1.1em;
}

/* --- Card ---------------------------------------------------------------- */

.room-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bb-rule-faint);
    border-radius: var(--bb-radius);
    background-color: var(--bb-surface);
}

.room-card__media {
    display: block;
    overflow: hidden;
}

.room-card__media img {
    width: 100%;
    aspect-ratio: 7 / 5;
    object-fit: cover;
    transition: transform 500ms var(--bb-ease);
}

.room-card:hover .room-card__media img {
    transform: scale(1.04);
}

/* Stand-in for a room type that has no photograph yet. It holds the same
   7:5 box as a real image so the card grid does not go ragged. */
.room-card__media--empty {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.6rem;
    aspect-ratio: 7 / 5;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(192, 141, 48, 0.05) 0 10px,
            transparent 10px 20px
        ),
        var(--bb-surface-raised);
    color: var(--bb-gold-700);
    font-size: 0.75rem;
    letter-spacing: var(--bb-tracking-wide);
    text-transform: uppercase;
}

.room-card__placeholder-icon {
    width: 2rem;
    height: 2rem;
}

.room-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1.1rem, 1.35vw, 1.625rem);
}

.room-card__title {
    color: var(--bb-gold-400);
    font-family: var(--bb-font-sans);
    font-size: clamp(1.15rem, 1.35vw, 1.625rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
}

.room-card__text {
    margin-top: clamp(0.6rem, 0.9vw, 1.125rem);
    color: var(--bb-text-muted);
    font-size: clamp(0.875rem, 0.94vw, 1.125rem);
    line-height: 1.85;
}

.room-card__price {
    /* Pushed to the bottom so cards with shorter copy still line up. */
    margin-top: auto;
    padding-top: clamp(1.1rem, 2vw, 2.375rem);
    font-size: clamp(1rem, 1.15vw, 1.375rem);
    line-height: 1.35;
}

.room-card__from {
    color: var(--bb-gold-400);
}

.room-card__unit {
    color: var(--bb-text);
}

.room-card__cta {
    justify-content: space-between;
    margin-top: clamp(0.9rem, 1.3vw, 1.5625rem);
    padding-block: 1.5em;
    border-color: var(--bb-rule);
    background-color: transparent;
}

.room-card__cta .btn__icon {
    color: var(--bb-gold-400);
}

/* ==========================================================================
   Room detail — /rooms/<slug>. Hero and section heads come from
   facilities.css; this is the photo-beside-copy block and the spacing.
   ========================================================================== */

.room-page {
    padding-bottom: clamp(4rem, 8vw, 7.5rem);
}

/* A compact band rather than the tall centred hero /amenities uses: the
   photo already sits full size in the section below, so this only has to
   say where you are. Content is bottom-left, over a fade to black that
   blends into the page. */
.room-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(13rem, 30vh, 19rem);
    overflow: hidden;
    border-bottom: 1px solid var(--bb-rule-faint);
    isolation: isolate;
}

.room-hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    /* The room photos are 786px wide; a touch of blur makes the upscale read
       as a deliberate backdrop rather than a soft photo. */
    filter: blur(3px) saturate(1.1);
    transform: scale(1.06);
}

.room-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.35) 100%),
        linear-gradient(to top, var(--bb-black) 0%, rgba(0, 0, 0, 0) 60%);
}

/* Same 72rem column as .room-detail below, so the title lines up with it. */
.room-hero__inner {
    width: 100%;
    max-width: calc(72rem + var(--bb-gutter) * 2);
    padding-block: clamp(1.75rem, 4vh, 2.75rem);
}

.room-hero__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    color: var(--bb-text-dim);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.room-hero__crumbs a {
    color: var(--bb-gold-400);
    transition: color var(--bb-dur) var(--bb-ease);
}

.room-hero__crumbs a:hover {
    color: var(--bb-text);
}

.room-hero__title {
    margin-top: 0.6rem;
    color: var(--bb-text);
    font-family: var(--bb-font-serif);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.05;
}

.room-hero__price {
    margin-top: 0.85rem;
    color: var(--bb-text-warm);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
}

.room-hero__from {
    color: var(--bb-gold-400);
}

.room-detail {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    max-width: 72rem;
    margin-inline: auto;
}

.room-detail__photo.photo-tile {
    aspect-ratio: 7 / 5;
}

/* --- Cover slider: every photo of the type, one at a time ---------------- */

.room-slider__track {
    display: flex;
    aspect-ratio: 7 / 5;
    border-radius: var(--bb-radius);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.room-slider__track::-webkit-scrollbar {
    display: none;
}

/* Doubled class: gallery.css, which sizes .photo-tile, loads after this file. */
.photo-tile.room-slider__slide {
    flex: 0 0 100%;
    height: 100%;
    aspect-ratio: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Arrows and counter sit under the photo, not over it, so they stay legible
   on any picture and there is room for them at every width. */
.room-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1rem;
}

.room-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--bb-gold-500);
    border-radius: 999px;
    background: transparent;
    color: var(--bb-gold-300);
    cursor: pointer;
    transition: background-color var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease),
        opacity var(--bb-dur) var(--bb-ease);
}

.room-slider__nav svg {
    width: 1.25rem;
    height: 1.25rem;
}

.room-slider__nav:hover,
.room-slider__nav:focus-visible {
    background-color: var(--bb-gold-500);
    color: var(--bb-surface);
}

.room-slider__nav--prev svg {
    transform: scaleX(-1);
}

/* At either end, the arrow that would go nowhere dims but stays in place. */
.room-slider__nav:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.room-slider__count {
    min-width: 4.5rem;
    color: var(--bb-gold-100);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .room-slider__track {
        scroll-behavior: auto;
    }
}

/* A type has only a handful of photos, so the auto-fill grid left a short
   last row (or the only row) hugging the left edge. Wrapping flex centres
   every row instead. Doubled class: gallery.css loads after this file. */
.photo-grid.photo-grid--centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.photo-grid.photo-grid--centered > li {
    flex: 0 1 min(100%, 22rem);
}

.room-detail__title {
    margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
    text-align: left;
}

.room-detail__price {
    margin-top: 0;
}

.room-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.room-detail__list {
    max-width: 60rem;
    margin: clamp(2.25rem, 4vw, 3.5rem) auto 0;
}

/* "Keep exploring": the other four types as a compact strip of smaller cards,
   so the section reads as a footer to the page rather than a second listing. */
/* Flex rather than a fixed column count: the number of types changes in the
   panel, and a short last row stays centred instead of hanging left. */
.room-page__others .rooms__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 80rem;
    margin-inline: auto;
}

.room-page__others .room-card {
    flex: 0 1 15rem;
}

.room-page__others .room-card__body {
    padding: clamp(0.9rem, 1vw, 1.15rem);
}

.room-page__others .room-card__title {
    font-size: clamp(1rem, 1vw, 1.125rem);
}

.room-page__others .room-card__text {
    margin-top: 0.5rem;
    font-size: clamp(0.8125rem, 0.8vw, 0.875rem);
    line-height: 1.6;
}

.room-page__others .room-card__price {
    padding-top: 0.9rem;
    font-size: clamp(0.9375rem, 0.9vw, 1rem);
}

.room-page__others .room-card__cta {
    margin-top: 0.75rem;
    padding-block: 1em;
    font-size: 0.75rem;
}

@media (max-width: 899px) {
    .room-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}