/* ═══════════════════════════════════════════════════════
   Hotels listing / country pages — filter bar + hotel-card grid.
   Reuses filter-bar, hotel-card, pagination, page-hero from components.css.
   ═══════════════════════════════════════════════════════ */

/* Listing wrapper holds map + grid side-by-side on xl */
.listing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1280px) {
  .listing--with-map {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: var(--space-10);
    align-items: start;
  }
}

.listing__map {
  position: relative;
  min-height: 320px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* New stacking context so Leaflet's internal z-indexes (up to 700) can't
     bleed above the site header / sticky bars. */
  isolation: isolate;
  z-index: 0;
}

@media (min-width: 1280px) {
  .listing--with-map .listing__map {
    position: sticky;
    top: calc(var(--nav-height-lg) + var(--space-16));
    min-height: 560px;
  }
}

.listing__map iframe,
.listing__map > div {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

/* Grid of hotel cards */
.hotels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .hotels-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}

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

.listing--with-map .hotels-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .listing--with-map .hotels-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
  .listing--with-map .hotels-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1600px) {
  .listing--with-map .hotels-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile list/map tab-toggle — when map is open, hide list and let the map fill. */
.listing--map-open .listing__main { display: none; }
.listing--map-open .listing__map  { min-height: 70dvh; }

/* Search above listing (name filter) */
.listing-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  min-height: 52px;
  margin-bottom: var(--space-6);
}

.listing-search svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
}

.listing-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--text-body-m);
  padding-block: var(--space-3);
  color: var(--color-text);
}

.listing-search input::placeholder {
  color: var(--color-text-muted);
}

/* Empty state */
.listing-empty {
  padding: var(--space-16) var(--space-8);
  text-align: center;
  background: var(--color-bg-alt);
  border-radius: var(--radius-xl);
  color: var(--color-text-secondary);
}

.listing-empty__heading {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* Listing main column (left) — wraps hotels-grid + pagination */
.listing__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

/* Map toggle — floating FAB on mobile (top-right of listing area),
   hidden on desktop because the sticky map is always visible. */
.listing__map-toggle {
  position: fixed;
  z-index: calc(var(--z-sticky) + 1);
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-md);
}

@media (min-width: 1280px) {
  .listing--with-map .listing__map-toggle { display: none; }
  .listing--with-map .listing__map-container { display: block !important; }
}

.listing__map-container { display: none; min-height: 360px; }

/* Hotel card extras used on the listing */
.hotel-card__price-badge {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  flex-direction: column;
  padding: 6px 12px;
  background: rgba(28, 27, 25, 0.82);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
  line-height: 1.2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hotel-card__price-from  { color: rgba(255, 255, 255, 0.70); font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.hotel-card__price-value { color: var(--color-brand); font-weight: var(--weight-semibold); font-size: var(--text-body-m); }

.hotel-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hotel-card__amenity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  background: var(--color-bg-alt);
  border-radius: var(--radius-pill);
}

.hotel-card__amenity svg { color: var(--color-brand); flex-shrink: 0; }

.hotel-card__desc {
  font-size: var(--text-body-s);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  max-width: none;
}

/* Filter-bar: sticky-scrolled shadow (driven by ajax-sorting.js IntersectionObserver) */
.filter-bar.scrolled,
.hl-filter-bar.scrolled { box-shadow: var(--shadow-sm); }

/* When the filter-bar is itself a <form>, ensure wp_nonce_field hidden input doesn't
   push layout. */
.filter-bar > input[type="hidden"],
.filter-bar input[type="hidden"] { display: none; }

/* ─── Filter pill-toggle (mobile drawer) ─────────────── */
.filter-bar__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-pill);
  cursor: pointer;
  align-self: flex-start;
}

.filter-bar__toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--color-dark);
  color: var(--color-text-inverse);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.filter-bar__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.submit-button--fallback { display: none; }

@media (max-width: 767px) {
  /* Mobile: drawer is an anchored popover from the filter pill — doesn't push
     sticky content, doesn't eat vertical space when closed. */
  .filter-bar__fields {
    position: absolute;
    inset-inline: var(--space-4);
    top: calc(100% + var(--space-2));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    max-height: calc(100dvh - var(--nav-height) - 8rem);
    overflow-y: auto;
    z-index: calc(var(--z-sticky) + 1);
    display: none;
  }
  .filter-bar__fields.is-open {
    display: flex;
  }
  .submit-button--fallback { display: inline-flex; justify-content: center; }
  .filter-bar__inner { position: relative; }
}

@media (min-width: 768px) {
  .filter-bar__toggle { display: none; }
  .filter-bar__fields {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}

/* Filter-group — inline label + select on desktop, stacked only on mobile. */
.filter-group--field {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  overflow: visible;
  min-width: 0;
}

@media (min-width: 768px) {
  .filter-group--field {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 200px;
    min-width: 0;
    max-width: 340px;
  }
  .filter-group--field .filter-group__label {
    flex-shrink: 0;
  }
  .filter-group--field .select {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.filter-group--field .select {
  min-height: 40px;
  font-size: var(--text-body-s);
}

/* Leaflet override (inside listing__map) — ensure tiles + popup fit the design language */
.listing__map .leaflet-container {
  background: var(--color-bg-alt);
  font-family: var(--font-body);
}

.listing__map .leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.listing__map .leaflet-popup-content {
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  color: var(--color-text);
  line-height: var(--lh-body);
  margin: var(--space-3) var(--space-4);
}

.listing__map .leaflet-popup-tip {
  box-shadow: var(--shadow-sm);
}