/* ==========================================================================
   components.css — self-contained component skins. Each block owns its own
   look and nothing else; arrangement and outer spacing belong to layout.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   Every variant clears the 44px target minimum, and the primary fill uses
   --red (#b21f2d → 6.7:1 under white), the live site's own button red, rather
   than the wordmark red it reserves for the logo.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease),
              color 180ms var(--ease), transform 180ms var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn--primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

.btn--ghost {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.5);
  color: #fff;
  backdrop-filter: blur(8px);
}

.btn--ghost:hover { background: rgb(255 255 255 / 0.22); border-color: #fff; }

.btn--sm { padding: var(--space-2) var(--space-5); font-size: var(--fs-xs); }

.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--tint-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--red   { background: var(--red);   color: #fff; }
.badge--dark  { background: var(--char);  color: #fff; }

/* --------------------------------------------------------------------------
   Image placeholders
   Structural stand-ins with the spec printed on them, so nothing ships
   pretending to be a photograph of a room that hasn't been shot yet.
   -------------------------------------------------------------------------- */

.ph {
  display: grid;
  place-items: center;
  padding: var(--space-5);
  border-radius: var(--radius);
  background-color: var(--tint-2);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 10px,
    rgb(28 25 23 / 0.045) 10px 20px
  );
  border: 1px dashed var(--rule);
  text-align: center;
}

.ph__spec {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Aspect ratios are declared so nothing shifts when real images drop in. */
.ph--hero {
  aspect-ratio: 16 / 9;
  position: relative;
  /* The hero placeholder sits behind the headline, so its spec label is
     pinned out of the way rather than centred under the copy. */
  place-items: end;
}

.ph--hero .ph__spec {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgb(12 20 26 / 0.55);
  color: rgb(255 255 255 / 0.75);
  font-size: 0.6875rem;
}
.ph--card { aspect-ratio: 4 / 3; }
.ph--room { aspect-ratio: 4 / 3; border-radius: var(--radius) var(--radius) 0 0; }

/* --------------------------------------------------------------------------
   Hotel cards
   -------------------------------------------------------------------------- */

.hotel-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 240ms var(--ease), transform 240ms var(--ease);
}

.hotel-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.hotel-card__media { position: relative; }
.hotel-card__media .ph { border-radius: 0; }

/* Real photography fills the same box the placeholder did. The ratio is
   declared here as well as on the <img> width/height attributes, so the space
   is reserved before the file arrives and nothing shifts. */
.hotel-card__media picture { display: block; height: 100%; }

.hotel-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* Each hotel's own logo, sitting on its photo where the badge used to.

   The plate is not decoration — it is what makes the marks legible. They were
   drawn for different grounds: Red Coconut, Boracay Sands and Serene are dark
   ink meant for white, while Hibiscus is white script and Reef is yellow coral
   on a dark green tile. Dropped straight onto a bright beach photo, the last
   two vanish and the first three go muddy. So the chip carries the ground each
   mark was drawn for, and --dark switches it.

   Heights are per-logo rather than shared: these range from a 5:1 wordmark to
   two square marks, so one common height would leave the squares unreadably
   small next to the wordmarks. They are tuned to look equal, not measure it. */
.hotel-card__logo {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: rgb(255 255 255 / 0.94);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(4px);
}

.hotel-card__logo--dark { background: rgb(31 26 27 / 0.94); }

.hotel-card__logo img {
  /* The chip lives inside .hotel-card__media, so the 4/3 ratio and the cover
     crop set for the card photo above also match this <img> at equal
     specificity. Both have to be undone or every logo renders at 4:3. */
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  height: 34px;
  display: block;
}

/* Wordmarks are wide and short; square marks need the height to stay legible. */
.hotel-card__logo img[src*="red-coconut"] { height: 20px; }
.hotel-card__logo img[src*="serene"]      { height: 28px; }
.hotel-card__logo img[src*="hibiscus"]    { height: 30px; }

/* In the track every hotel is the same card — the same shape .room-card takes.
   A full-width flagship would also have desynced the paging: carousel.js reads
   its step from the first child's width, so an odd-sized first card makes every
   page after it land short. */
.hotel-track .hotel-card {
  flex: 0 0 var(--carousel-card);
  scroll-snap-align: start;
}

.hotel-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

.hotel-card__station {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--red-text);
}

.hotel-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.hotel-card__name a {
  text-decoration: none;
  background-image: linear-gradient(var(--red), var(--red));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 240ms var(--ease), color 180ms var(--ease);
}

.hotel-card__name a:hover { color: var(--red); background-size: 100% 2px; }

.hotel-card__desc { color: var(--muted); font-size: var(--fs-sm); }

/* Only the Red Coconut card carries this. It sat on one row when that card was
   a full-width grid feature; in a 22rem track cell the three stats wrapped to
   two rows, which — because the track stretches every card to the tallest —
   pushed 60-odd px of dead space into the bottom of the other four. The figures
   step down from --fs-lg so all three fit across again. */
.stat-row {
  /* Three fixed columns rather than a wrapping flex row. The row exists to be
     compared across the five cards, and only a grid makes column 2 on one card
     line up with column 2 on the next. It also stops a long value dropping the
     third stat onto a second line and stretching every card in the track. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block: 1px solid var(--rule-soft);
  width: 100%;
}

/* "Guest rating" wraps onto two lines in a 22rem card while "Room types" and
   "Location" don't, which pushed its figure below the other two. Pinning each
   figure to the foot of its cell keeps all three values on one line whatever
   their labels do. */
.stat-row > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-1);
}

.stat-row dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-row dd {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--red);
}

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.taglist li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Tabs
   Without JS the tablist is hidden and every panel shows, stacked and
   captioned — the content is never gated behind a control that isn't wired up.
   -------------------------------------------------------------------------- */

.tabs { display: flex; flex-direction: column; gap: var(--space-5); }

.tabs__list { display: none; }

/* One row, always. Five hotels don't fit across a phone, and letting them wrap
   inside a pill turned the strip into a blob — at 375px the Rooms strip was
   five rows of one tab each, a 260px beige circle before any content. So it
   never wraps: where the tabs don't fit it scrolls sideways, and the next tab
   peeking at the edge is the cue that there is more. Where they do fit, as on
   desktop, nothing scrolls and nothing changes. Arrow keys still move between
   tabs, and focusing a tab scrolls it into view. */
.js .tabs__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--tint-2);
  border-radius: var(--radius-pill);
  align-self: flex-start;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Matches the padding above, so tabs.js revealing an end tab stops at the
     pill's inner edge instead of scrolling the padding out of sight and
     leaving the tab flush against the rim. */
  scroll-padding-inline: var(--space-1);
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  /* No scroll-snap. At tablet widths the strip overflows by only a few dozen
     pixels, and snapping pulled a keyboard-focused end tab straight back out
     of view. Free scrolling costs nothing on a five-tab strip. */
}

.js .tabs__list [role="tab"] {
  flex: none;
  white-space: nowrap;
}

/* Touch users swipe; a scrollbar under a pill is only clutter there. Mouse
   users keep the thin one, since they have no other way to reach an
   off-screen tab without the keyboard. */
@media (hover: none) {
  .js .tabs__list { scrollbar-width: none; }
  .js .tabs__list::-webkit-scrollbar { display: none; }
}

.section--tint .tabs__list { background: var(--surface); }

.tabs__list [role="tab"] {
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-5);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.tabs__list [role="tab"] span { font-weight: 400; color: var(--muted); }

.tabs__list [role="tab"]:hover { background: rgb(178 31 45 / 0.08); }

.tabs__list [role="tab"][aria-selected="true"] {
  background: var(--red);
  color: #fff;
}

.tabs__list [role="tab"][aria-selected="true"] span { color: rgb(255 255 255 / 0.75); }

.tabs__panel { outline-offset: 6px; }

/* Stacked panels need separating when JS is off. */
.tabs__panel + .tabs__panel { margin-top: var(--space-7); }
.js .tabs__panel + .tabs__panel { margin-top: 0; }

.tabs__caption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}

/* --------------------------------------------------------------------------
   Amenity tiles
   -------------------------------------------------------------------------- */

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface);
}

.tile h4 { font-size: var(--fs-base); font-weight: 600; }
.tile p  { font-size: var(--fs-sm); color: var(--muted); }

/* --------------------------------------------------------------------------
   Carousel
   The original hid its scrollbar, gave the track tabindex -1, and put no
   focusable element inside it, so the last cards were mouse-only. Here the
   viewport is focusable and labelled, the cards contain real links, and there
   are visible arrow controls.
   -------------------------------------------------------------------------- */

/* --carousel-card is the single width every card in a track takes. On phones it is a fixed width — room tracks use the default, the
   hotel track overrides it — and the container queries below take over once
   the track has room for two cards. The carousel is a size container so those
   queries, and the cqi units in them, measure the track rather than the
   window. */
.carousel {
  --carousel-card: min(19rem, 78vw);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  container-type: inline-size;
}

.carousel--hotels { --carousel-card: min(22rem, 80vw); }

/* Whole cards only. A fixed width left a sliver of the next card at the right
   edge — at 1280px, 64px of the fourth hotel with the next arrow sitting on
   it. From two cards up the width is worked out so that exactly two, then
   three, fill the track, and the arrows straddle clean card edges. Phones keep
   the fixed width and its peek, which is the swipe cue there. Set on the
   carousel's children because a container query only styles inside the
   container; the gap is .carousel__track's. */
@container (min-width: 40rem) {
  .carousel > * { --carousel-card: calc((100cqi - var(--space-5)) / 2); }
}

@container (min-width: 60rem) {
  .carousel > * { --carousel-card: calc((100cqi - 2 * var(--space-5)) / 3); }
}

.carousel__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  padding-bottom: var(--space-3);
}

.carousel__viewport::-webkit-scrollbar { height: 8px; }
.carousel__viewport::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: var(--radius-pill);
}

.carousel__track {
  display: flex;
  gap: var(--space-5);
  padding-block: var(--space-1);
}

/* The arrows sit on the sides of the track, centred on the cards' full
   height, in a layer across the carousel that ignores the pointer so only the
   buttons take it. The layer spans the viewport minus what sits below the
   track — the viewport's bottom padding and its 8px scrollbar — and the
   track's own padding is the same top and bottom, so the middle of the layer
   is the middle of the cards. On phones the arrows sit just inside the edges;
   see the media query below for where they straddle them. */
.carousel__controls {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(var(--space-3) + 8px);
  padding-inline: var(--space-2);
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: var(--fs-md);
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}

.carousel__btn:hover:not(:disabled) { background: var(--tint); border-color: var(--red); }

.carousel__btn {
  pointer-events: auto;
  box-shadow: var(--shadow-lift);
  transition: background 180ms var(--ease), border-color 180ms var(--ease),
              opacity 180ms var(--ease);
}

/* Nothing to go back to at the start, nothing further at the end: an arrow
   that can't move the track fades out rather than sitting greyed over a
   photo. Disabled buttons are already out of the tab order. The prev buttons
   ship `disabled` in the markup, so the back arrow is hidden from the first
   frame instead of fading out as carousel.js wakes up; the script owns the
   state from then on. */
.carousel__btn:disabled { opacity: 0; pointer-events: none; }

/* Straddle the track's edges once the page margin can hold half a button:
   the margin is 4vw, which passes the larger button's 28px half at 44rem. */
@media (min-width: 44rem) {
  .carousel__controls { padding-inline: 0; }

  .carousel__btn {
    width: 3.5rem;
    height: 3.5rem;
    font-size: var(--fs-lg);
  }

  .carousel__btn[data-carousel-prev] { transform: translateX(-50%); }
  .carousel__btn[data-carousel-next] { transform: translateX(50%); }
}

/* Controls are JS-driven; without JS the viewport still scrolls natively, so
   hide the buttons rather than leave dead controls on the page. */
.carousel__controls { display: none; }
.js .carousel__controls { display: flex; }

.room-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--carousel-card);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.room-card picture { display: block; }

.room-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius) var(--radius) 0 0;
}

.room-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

.room-card__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; }

.room-card__name a { text-decoration: none; }
.room-card__name a:hover { color: var(--red); text-decoration: underline; }

.room-card__body > p { font-size: var(--fs-sm); color: var(--muted); }

/* Card rows line up across a track.
   The track stretches its cards to one height, but each card stacked its
   contents from the top, so a description one line longer than its
   neighbours' pushed that card's stats and tags lower than theirs, and the
   shorter cards ended in uneven gaps. With subgrid every card in a track
   shares one set of row heights: names, stats and tags sit on the same lines
   all the way along, and the spare height collects under the shorter
   descriptions. Browsers without subgrid keep the flex layout above. */
@supports (grid-template-rows: subgrid) {
  .hotel-track,
  .room-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--carousel-card);
    row-gap: 0;
  }

  /* Hotel card: photo, then station, name, description, stats, tags. */
  .hotel-track { grid-template-rows: repeat(6, auto); }
  .hotel-track .hotel-card { grid-row: span 6; }
  .hotel-track .hotel-card__body { grid-row: span 5; }

  /* The station row is as tall as the longest station line, and Hibiscus's
     wraps to two lines where the others take one. Sitting at the foot of the
     row keeps each station against its hotel's name. Otherwise the spare line
     would open a gap between them on the other four cards. */
  .hotel-track .hotel-card__station { align-self: end; }

  /* Room card: photo, then badge, name, description, tags. */
  .room-track { grid-template-rows: repeat(5, auto); }
  .room-track .room-card { grid-row: span 5; }
  .room-track .room-card__body { grid-row: span 4; }

  .hotel-track .hotel-card,
  .room-track .room-card {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .hotel-track .hotel-card__body,
  .room-track .room-card__body {
    display: grid;
    grid-template-rows: subgrid;
    align-items: start;
    justify-items: start;
  }

  /* Only some rooms carry a badge, so each part is pinned to its own row: a
     card without one leaves the badge row empty and its name still lines up
     with a badged neighbour's. The spacing moves from the row gap to margins,
     because a gap would still open space around a badge row that no card in
     the track uses — Serene has none — and an empty row has no margins. */
  .room-track .room-card__body { row-gap: 0; }
  .room-track .room-card__body > .badge { grid-row: 1; margin-bottom: var(--space-3); }
  .room-track .room-card__name { grid-row: 2; }
  .room-track .room-card__name + p { grid-row: 3; margin-top: var(--space-3); }
  .room-track .room-card__body > .taglist { grid-row: 4; margin-top: var(--space-3); }
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.notice {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  border: 1px dashed rgb(255 255 255 / 0.4);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.06);
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.85);
  max-width: var(--measure);
}

.notice strong { color: var(--red-on-dark); }

.review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius);
}

.review-card--placeholder {
  border-style: dashed;
  background: rgb(255 255 255 / 0.03);
}

.review-card blockquote p {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.92);
}

.review-card__meta { font-weight: 600; color: #fff; font-size: var(--fs-sm); }

.review-card__src {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-on-dark);
}

.figure-row > div { display: flex; flex-direction: column; gap: var(--space-1); }

.figure-row dt {
  order: 2;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
}

.figure-row dd {
  order: 1;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--red-on-dark);
}

.figure-row p {
  order: 3;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}

.recognition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 0.16);
}

.recognition__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--red-on-dark);
}

.recognition ul { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.recognition li { font-size: var(--fs-sm); color: rgb(255 255 255 / 0.85); }

/* --------------------------------------------------------------------------
   Booking
   -------------------------------------------------------------------------- */

.booking__perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6);
  background: var(--red);
  color: #fff;
  border-radius: var(--radius-lg);
}

.booking__perks-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; }

.perklist { display: flex; flex-direction: column; gap: var(--space-3); }

.perklist li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.88);
}

.perklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--on-red);
  border-bottom: 2px solid var(--on-red);
  transform: rotate(-45deg);
}

.booking__call {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid rgb(255 255 255 / 0.28);
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.8);
}

.booking__call-label { margin-bottom: var(--space-2); }

/* One row per hotel. Hotel names are far longer than the island names this
   used to carry, so the column floor goes up to keep it at two columns rather
   than letting five narrow ones wrap mid-name. */
.booking__numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-3) var(--space-5);
}

/* Label stacked over number, so each cell is only as wide as the number and
   all three islands sit on one row inside the panel. */
.booking__numbers li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--space-2);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.booking__numbers span {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-red);
}

.booking__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--on-red);
  text-decoration: none;
}

.booking__tel:hover { text-decoration: underline; }

/* The two hotels with no direct line on file link to their own booking site.
   Same tone as .booking__tel — 5.5:1 on --red — but a lighter weight and a
   standing underline, so a URL never reads as a phone number at a glance. */
.booking__site {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--on-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}