/* Hotel detail screen — BEM naming */

/* ── Root container ─────────────────────────────────────── */

.hotel-detail {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

/* ── Back link ──────────────────────────────────────────── */

.hotel-detail__back {
  padding: 1rem 0;
}

.hotel-detail__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.hotel-detail__back a:hover {
  color: var(--wa-color-text-normal);
}

.hotel-detail__back i {
  font-size: 0.75rem;
}

/* ── Two-column layout ─────────────────────────────────── */

.hotel-detail__layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hotel-detail__main {
  min-width: 0;
}

/* ── Photo gallery ─────────────────────────────────────── */

.photo-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Hero image */

.photo-gallery__hero-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.photo-gallery__hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thumbnails — vertical stack on mobile */

.photo-gallery__thumbnails {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.photo-gallery__thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.5rem;
}

.photo-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-gallery__more-count {
  position: absolute;
  bottom: 0.375rem;
  right: 0.375rem;
  background: var(--ek-color-scrim);
  color: var(--ek-color-on-scrim);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Empty state — branded initials placeholder */

.photo-gallery--empty {
  aspect-ratio: 16 / 9;
  background: var(--wa-color-brand-90);
}

.photo-gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.photo-gallery__initials {
  font-size: 3rem;
  font-weight: 700;
  color: var(--wa-color-brand);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Hotel header ──────────────────────────────────────── */

.hotel-detail__header {
  margin-top: 1.5rem;
}

.hotel-detail__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hotel-detail__name {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
  line-height: 1.2;
}

/* Distance badge — inline with name on desktop */

.hotel-detail__distance {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  font-weight: 500;
}

/* Tagline */

.hotel-detail__tagline {
  margin: 0;
  font-size: 1rem;
  color: var(--wa-color-text-quiet);
  line-height: 1.5;
}

/* Check-in / check-out times */

.hotel-detail__times {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.hotel-detail__time-box {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: var(--wa-color-neutral-fill-quiet);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.hotel-detail__time-box i {
  color: var(--wa-color-brand);
}

.hotel-detail__time-box strong {
  color: var(--wa-color-text-normal);
  font-weight: 600;
}

/* ── Section titles ─────────────────────────────────────── */

.hotel-detail__section-title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* ── Amenities ─────────────────────────────────────────── */

.hotel-detail__amenities {
  margin-top: 1.5rem;
}

.amenity-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.amenity-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.amenity-group__heading {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.amenity-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* ── Room type cards ───────────────────────────────────── */

.hotel-detail__rooms {
  margin-top: 1.5rem;
  padding-bottom: 2rem;
}

.hotel-detail__room-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.room-type-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* The room the price summary is describing. Border only — no transform — because
   the card must not move when a guest picks it and the page re-renders. */
.room-type-card--selected {
  border-color: var(--wa-color-brand-fill-loud);
  box-shadow: 0 0 0 1px var(--wa-color-brand-fill-loud);
}

.room-type-card__select {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wa-color-brand-fill-loud);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  white-space: nowrap;
}

.room-type-card__selected-note {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wa-color-text-quiet);
}

.room-type-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Thumbnail */

.room-type-card__thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.room-type-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-type-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-quiet);
  font-size: 2rem;
}

/* Inline beside the room name, per Figma 560:9856 — it was absolutely positioned over
   the thumbnail, which put it on the photo rather than on the room, and left it
   floating over the bed icon when a hotel has no photo at all. */
.room-type-card__soldout {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  background: var(--wa-color-danger-fill-loud);
  color: var(--wa-color-danger-on-loud);
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Card body */

.room-type-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  flex: 1;
}

.room-type-card__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
  line-height: 1.3;
}

.room-type-card__capacity {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

/* Bed type sits with capacity and reads as the same kind of fact, so it takes the
   same treatment. Its icon is decorative and aria-hidden — the text beside it says
   the same thing, and a screen reader announcing "bed, 1 King" would say it twice.

   Both lines are absent entirely when the column is unset, so there is no empty
   state to style. */
.room-type-card__bed {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.room-type-card__availability {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  font-weight: 500;
}

/* Card footer — rate and CTA. The wrap is what stops the upgrade CTA from
   escaping the card: at 390px the sold-out footer (rate, select link, upgrade
   offer, button) is too wide for one row, so it reflows instead of clipping. */

.room-type-card__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* The upgrade offer fills the leftover space and wraps as a whole row when the
   card is narrow, so the button never gets squeezed off the card edge. */
.room-type-card__upgrade {
  flex: 1 1 10rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

/* Hugs the right edge whether it shares the row with the offer or wraps to its
   own. */
.room-type-card__footer wa-button {
  margin-inline-start: auto;
}

.room-type-card__rate {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.room-type-card__per-night {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--wa-color-text-quiet);
}

/* ── Sidebar — price summary ───────────────────────────── */

.price-summary {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: 0.75rem;
  background: var(--wa-color-surface-default);
}

/* Tier badge */

.price-summary__tier {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.price-summary__tier-heading {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wa-color-text-quiet);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.price-summary__badge {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  background: var(--wa-color-brand-90);
  color: var(--wa-color-brand);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  width: fit-content;
}

/* Price breakdown */

.price-summary__breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.price-summary__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.price-summary__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.price-summary__label {
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.price-summary__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
  text-align: right;
}

/* Total row — emphasised with rule */

.price-summary__line--total {
  padding-top: 0.75rem;
  border-top: 2px solid var(--wa-color-text-normal);
  margin-top: 0.25rem;
}

.price-summary__value--total {
  font-size: 1.125rem;
  font-weight: 700;
}

/* Book button */

.price-summary__book-btn {
  width: 100%;
}

/* Cancellation policy */

.price-summary__cancellation {
  padding-top: 0.75rem;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}

.price-summary__cancellation-heading {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.price-summary__cancellation-text {
  margin: 0;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
  line-height: 1.5;
}

/* ── Tablet (≥ 640px) ─────────────────────────────────── */

@media (min-width: 640px) {
  .hotel-detail {
    padding: 0 1.5rem;
  }

  /* Thumbnails side-by-side */
  .photo-gallery__thumbnails {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Amenity groups — two across */
  .hotel-detail__amenities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .amenity-group {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Room cards — horizontal row */
  .room-type-card {
    flex-direction: row;
  }

  .room-type-card__thumbnail {
    width: 12rem;
    min-width: 12rem;
    aspect-ratio: unset;
    height: auto;
  }

  .room-type-card__thumbnail img {
    height: 100%;
  }

  .room-type-card__body {
    flex-direction: column;
    justify-content: center;
  }
}

/* ── Desktop (≥ 1024px) — two columns ─────────────────── */

@media (min-width: 1024px) {
  .hotel-detail {
    padding: 0 2rem;
  }

  /* Two-column layout */
  .hotel-detail__layout {
    flex-direction: row;
  }

  .hotel-detail__main {
    flex: 2;
    min-width: 0;
  }

  /* Sticky sidebar */
  .price-summary {
    flex: 1;
    min-width: 18rem;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
  }

  /* Photo gallery — hero left, thumbnails right */
  .photo-gallery {
    grid-template-columns: 3fr 1fr;
  }

  .photo-gallery__hero-wrapper {
    aspect-ratio: unset;
    height: auto;
    min-height: 20rem;
  }

  .photo-gallery__thumbnails {
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: 1fr;
  }

  .photo-gallery__thumbnail {
    aspect-ratio: unset;
    border-radius: 0.25rem;
  }

  /* Amenity groups — four across */
  .hotel-detail__amenities {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* The sold-out counterpart of .price-summary__book-btn, which occupies this slot
   when the room CAN be booked. It had no rule at all, so the sidebar's primary
   position rendered as bare body text. Same block geometry as the button so the
   card does not change shape between the two states — a layout that jumps when a
   room sells out reads as a bug. */
.price-summary__unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--wa-color-neutral-border-normal);
  border-radius: 0.375rem;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-quiet);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
}

/* The waitlist action, in both its forms: the POST button a signed-in guest gets
   and the sign-in link everyone else gets. It had no rule at all and computed
   rgb(47, 50, 63) — the dark default this repo has shipped twice — on the slot the
   design gives the card's primary action. Same block geometry as .price-summary__
   unavailable so the card does not change shape when a room sells out. Loud brand,
   matching .waitlist-offer__accept: joining is the one positive action left. */
.room-type-card__waitlist {
  display: inline-block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* NO .room-type-card__waitlist-note RULE. The plain-text stand-in it styled was
   removed: it repeated the Sold Out pill beside the room name, and Figma 560:9856
   states that once. The slot stays empty until HMS-43 gives it a real Join Waitlist
   button, which will need its own rule rather than this one. */