/* ==========================================================================
   GoWayanadStay — Property Listing (/stays) — Phase 7
   Built on the design-system tokens. Loaded only on listing pages.
   ========================================================================== */

.listing__breadcrumb { margin-bottom: var(--ds-space-4); }

/* Toolbar: heading + count + sort + mobile filter button */
.listing__toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-3); flex-wrap: wrap; margin-bottom: var(--ds-space-4); }
.listing__toolbar h1 { margin: 0; }
.listing__count { color: var(--ds-muted); font-size: var(--ds-fs-sm); margin: 4px 0 0; }
.listing__tools { display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap; }
.listing__sort { display: flex; align-items: center; gap: 6px; }
.listing__sort label { font-size: var(--ds-fs-sm); color: var(--ds-muted); white-space: nowrap; }
.listing__sort .ds-select { min-width: 170px; }

/* Active filter chips */
.listing__active { margin-bottom: var(--ds-space-4); }

/* Layout: sidebar + results */
.listing__layout { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-5); align-items: start; }

/* Filters panel */
.listing__filters { background: var(--ds-surface); border: var(--ds-border-style); border-radius: var(--ds-r-lg); padding: var(--ds-space-4); }
.listing__filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ds-space-3); }
.listing__filters-close { display: none; background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ds-ink); }
.listing__amenities { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }

/* Results grid */
.listing__grid { display: grid; gap: var(--ds-grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Card overlay availability badge */
.pc-avail { position: absolute; bottom: var(--ds-space-3); left: var(--ds-space-3); }

/* Mobile filter button hidden on desktop */
.filters-toggle { display: inline-flex; }
.listing__overlay { display: none; }

/* ---- Desktop layout (>=992) : sticky sidebar ---- */
@media (min-width: 992px) {
    .listing__layout { grid-template-columns: 300px 1fr; }
    .listing__filters { position: sticky; top: calc(var(--header-h, 68px) + 16px); max-height: calc(100vh - var(--header-h, 68px) - 32px); overflow: auto; }
    .filters-toggle { display: none; }
    .listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .listing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Mobile/tablet (<992) : off-canvas filter drawer ---- */
@media (max-width: 991.98px) {
    .listing__filters {
        position: fixed; top: 0; left: 0; z-index: 1200;
        height: 100dvh; width: min(88%, 360px);
        border-radius: 0; border: 0; box-shadow: var(--ds-shadow-lg);
        transform: translateX(-100%); transition: transform 0.28s var(--ds-ease);
        overflow: auto;
    }
    .listing__filters.is-open { transform: none; }
    .listing__filters-close { display: inline-flex; }
    .listing__overlay {
        display: block; position: fixed; inset: 0; z-index: 1150;
        background: rgba(15, 46, 33, 0.45);
        opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ds-ease);
    }
    .listing__overlay.is-open { opacity: 1; visibility: visible; }
}