/* Hotel card component — BEM naming */

.hotel-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--wa-shadow-m);
}

/* Photo area with overlay badges */

.hotel-card__photo-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.hotel-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Branded placeholder when no photos are available */

.hotel-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-color-brand-90);
}

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

.hotel-card__distance {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Card body */

.hotel-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem;
  flex: 1;
}

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

.hotel-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.hotel-card__sponsored-badge,
.hotel-card__recommended-badge {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-brand-fill-normal);
  color: var(--wa-color-brand-on-normal);
}

.hotel-card__recommended-badge {
  background: var(--wa-color-success-fill-loud);
  color: var(--wa-color-success-on-loud);
}

/* Green Certified badge — a quiet success pill that sits beside the hotel name.
   margin-right:auto keeps it hugging the name while any sponsored badge is pushed
   to the far edge of the title row. Colours use the success quiet pair so it reads
   as a subtle marker, not a loud CTA. */
.hotel-card__green-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

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

.hotel-card__discount-code {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* Star rating */

.star-rating {
  display: flex;
  gap: 0.125rem;
  color: var(--wa-color-yellow);
  font-size: 0.875rem;
}

.star-rating .fa-regular {
  color: var(--wa-color-neutral-border-normal);
}

/* Tagline */

.hotel-card__tagline {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  line-height: 1.4;
}

/* The room types this event has at this hotel, middot-separated on one wrapping
   line. Quieter than the name and the price: it is orienting detail, not the
   thing being chosen between. Colours come from --wa-* tokens — a brand hex here
   would be a bug, and there is a test asserting it. */
.hotel-card__room-types {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Amenity chips row */

.hotel-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background: var(--wa-color-neutral-fill-quiet);
  border-radius: 999px;
  font-size: 0.6875rem;
  color: var(--wa-color-text-quiet);
  line-height: 1.4;
}

.hotel-card__amenity-more {
  font-size: 0.6875rem;
  color: var(--wa-color-text-quiet);
  font-weight: 600;
}

/* Footer — price and CTA */

/* WRAPS, and that is load-bearing rather than tidy-mindedness. This footer holds a
   price and a 157px View Details button in a 219px column, so with nowrap the button
   overflowed the card by 27px — measured on the real page: footer right edge 574,
   button right edge 601. It looked fine for a long time only because no hotel in the
   Playwright fixture had a rate, so the footer held the button alone and 157px fit.
   Any hotel with a price hits this, which in production is all of them. */
.hotel-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 0.5rem;
}

.hotel-card__price {
  font-size: 0.8125rem;
  color: var(--wa-color-text-normal);
  font-weight: 600;
}

/* The high half of a range never separates from its dash, so a wrapped price reads
   "$195.00" then "– $349.00/night" rather than leaving the dash hanging at the end
   of line one, which reads as a truncated price.
   Only this half is nowrap. Measured on the real page at 390px: the footer gives
   the price about 123px once the View Details button has taken 157px, so nowrap on
   the WHOLE range clipped it by 35px. Clipped text is worse than wrapped text.
   Both neighbours in this file already carry an explicit wrapping decision
   (.hotel-card__amenity-count nowrap, .hotel-card__room-types anywhere). */
.hotel-card__price-high {
  white-space: nowrap;
}

/* The PRD asks for a count beside the chips ("12 amenities" with the top 5
   icons). Figma 516:5528 shows the chips without one, so this is deliberately
   quiet — it reads as a total, not as another amenity. */
.hotel-card__amenity-count {
  align-self: center;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
}