/* ===== BASE RESET (optional if already global) ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== SECTION HEADER ===== */
.stay-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e60000;
  margin-bottom: 8px;
}

.stay-title {
  font-size: 34px;
  font-weight: 900;
  color: #111;
  line-height: 1.1;
  margin-bottom: 8px;
}

.stay-subtitle {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 36px;
}

/* ===== FILTER TABS ===== */
.stay-filters {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ececec;
  margin-bottom: 48px;
}

 .stay-filter-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 11px 18px;
      border: none;
      border-bottom: 3px solid transparent;
      background: none;
      font-family: inherit;
      font-size: 17px;
      font-weight: 700;
      color: #767676;
      cursor: pointer;
      transition: all 0.18s ease;
      white-space: nowrap;
      margin-bottom: -1px;
    }

.stay-filter-btn i {
  font-size: 13px;
}

.stay-filter-btn:hover {
  color: #e60000;
}

.stay-filter-btn.active {
  color: #e60000;
  border-bottom-color: #e60000;
}

/* ===== AREA GROUP ===== */
.stay-area-group {
  margin-bottom: 56px;
}

.stay-area-group.hidden {
  display: none;
}

.stay-area-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ececec;
}

.stay-area-name {
  font-size: 22px;
  font-weight: 900;
  color: #b1222a;
}

/* ===== GRID ===== */
.hotel-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

/* ===== CARD ===== */
.hotel-list-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #ececec;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* ===== IMAGE ===== */
.hotel-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a2e;
}

.hotel-img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.35s ease;
}

/* REMOVE ZOOM (important) */
.hotel-list-item:hover .hotel-img-bg {
  transform: none;
}

/* ===== OVERLAY ===== */
.hotel-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08),
    rgba(0,0,0,0.52)
  );
  z-index: 1;
}

/* REMOVE DARKEN ON HOVER */
.hotel-list-item:hover .hotel-img-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08),
    rgba(0,0,0,0.52)
  );
}

/* ===== IMAGE LABEL ===== */
.hotel-img-label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
}

.hotel-img-badges {
  display: flex;
  gap: 5px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}

.hotel-img-badge {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.95);
}

.hotel-img-badge.price-luxury {
  background: rgba(212,175,55,0.3);
  border-color: rgba(212,175,55,0.5);
  color: #fde68a;
}

.hotel-img-badge.price-mid {
  background: rgba(255,255,255,0.15);
}

.hotel-img-badge.price-budget {
  background: rgba(134,239,172,0.2);
  border-color: rgba(134,239,172,0.4);
  color: #bbf7d0;
}

.hotel-img-name {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}

/* ===== BODY ===== */
.hotel-list-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hotel-list-best-for {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
}

.hotel-list-best-for strong {
  color: #111;
}

.hotel-list-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.hotel-list-highlight {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  background: #f5f5f5;
  border-radius: 999px;
  padding: 5px 10px;
}

.hotel-list-highlight i {
  color: #e60000;
}

.hotel-list-note {
  font-size: 12.5px;
  color: #666;
  line-height: 1.7;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
  margin-bottom: 16px;
  flex: 1;
}

/* ===== BUTTONS ===== */
.hotel-list-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hotel-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.18s ease;
}

.hotel-view-btn.booking {
  background: #003580;
  color: #fff;
}

.hotel-view-btn.expedia {
  background: #fff;
  border: 1px solid #ddd;
}

/* ===== NO RESULTS ===== */
.stay-no-results {
  display: none;
  padding: 48px 0;
  text-align: center;
  color: #767676;
}

.stay-no-results.show {
  display: block;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 800px) {
  .hotel-list-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .hotel-img-wrap {
    aspect-ratio: 4 / 3;
  }
}

/* ════ KEEP TWO COLUMNS IN LANDSCAPE ════
   The grid collapses to one column at 800px and the image ratio widens to
   4/3 at 600 — both width-only, and a phone on its side is 667-932px WIDE,
   so a small phone in landscape got single-column cards with a ~600px-wide
   4/3 image on a ~375px-tall screen. Same trap as the highlight pages:
   landscape wants columns, to spend the width it has and save the height it
   has not. */
@media (max-height: 500px) {
  .hotel-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .hotel-img-wrap {
    aspect-ratio: 16 / 9;
  }
}


/* ========================================================================
   MOBILE  —  filter strip
   Tab strip scrolls sideways on mobile. It carried flex-wrap: wrap, so on
   a phone the tabs broke into ragged rows and the underline tab style
   stopped reading as tabs. One row that scrolls instead, with the next tab
   clipped at the right edge as the cue. Paired with the .tabstrip cue CSS
   and the strip script, both of which live in e-duplicate_destinations_main.
   ======================================================================== */
@media (max-width: 760px) {
  .stay-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 30px;
  }

  .stay-filters::-webkit-scrollbar {
    display: none;
  }

  .stay-filter-btn {
    flex: 0 0 auto;
    font-size: 15px;
    padding: 10px 15px;
  }

  .stay-filter-btn:first-child {
    padding-left: 0;
  }

  .stay-filter-btn:last-child {
    padding-right: 0;
  }

  .stay-subtitle {
    margin-bottom: 26px;
  }
}


/* ========================================================================
   MOBILE  —  hotel cards, tightened for phones
   ======================================================================== */
@media (max-width: 760px) {
    .hotel-list-grid {
        gap: 16px;
    }

    .hotel-list-item {
        border-radius: 14px;
    }

    /* the 600 block widens this to 4 / 3, which is the whole problem */
    .hotel-img-wrap {
        aspect-ratio: 16 / 9;
    }

    .hotel-img-label {
        left: 13px;
        right: 13px;
        bottom: 11px;
    }

    .hotel-img-badges {
        gap: 4px;
        margin-bottom: 5px;
    }

    .hotel-img-badge {
        font-size: 7.5px;
        padding: 3px 7px;
    }

    .hotel-img-name {
        font-size: 17px;
    }

    .hotel-list-body {
        padding: 14px 16px 16px;
    }

    .hotel-list-best-for {
        font-size: 12.5px;
        margin-bottom: 9px;
    }

    .hotel-list-highlights {
        gap: 5px;
        margin-bottom: 11px;
    }

    .hotel-list-highlight {
        font-size: 10.5px;
        padding: 4px 8px;
        gap: 4px;
    }

    .hotel-list-note {
        font-size: 12px;
        line-height: 1.6;
        padding-top: 11px;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .hotel-view-btn {
        padding: 8px 13px;
        font-size: 11px;
    }
}

/* the 600 block is width-only, so a landscape phone was getting the same
   oversized image on a screen with far less height to spend */
@media (max-height: 500px) {
    .hotel-img-wrap {
        aspect-ratio: 16 / 9;
    }
}


/* ========================================================================
   GOOGLE PHOTOS ON THE TILES
   A tile's photo comes from Google once it scrolls into view (see
   f-duplicate_destinations_hotels.js). Google asks for the photographer's
   credit on the photo itself, linked to their profile, and the words
   "Google Maps" near the content in Google's own text form (Roboto 400,
   12px, colour #5E5E5E). Do not restyle or reword the Google Maps line.
   ======================================================================== */
.hotel-img-bg.has-gphoto {
  animation: hotelPhotoIn 0.4s ease both;
}

@keyframes hotelPhotoIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hotel-photo-credit {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  max-width: calc(100% - 20px);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotel-photo-credit a {
  color: #fff;
  text-decoration: none;
}

.hotel-photo-credit a:hover,
.hotel-photo-credit a:focus-visible {
  text-decoration: underline;
}

.stay-gm-attr {
  display: flex;
  justify-content: flex-end;
  padding: 10px 2px 0;
}

.stay-gm-attr .gm-attr {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #5E5E5E;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hotel-img-bg.has-gphoto {
    animation: none;
  }
}