/* Redesign: listing pages, landings, owner page, favourites, search page (docs/migration/REDESIGN.md, slice 2).
   Shared tokens and components (chips, cards, page head) come from app.css. */

/* Page head of a listing */
.listing-head { padding: 1.25rem 0 1.1rem; }
.listing-head h1 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
.listing-head-count { color: var(--iep-muted); margin-top: .3rem; }
.listing-head-count strong { color: var(--iep-navy-900); }

/* Compact search bar: place + category */
.listing-searchbar { background: #fff; border-bottom: 1px solid var(--iep-line); padding: .85rem 0; }
.searchbar-row { display: flex; gap: .5rem; align-items: stretch; }
.searchbar-place { flex: 1 1 auto; min-width: 0; }
.searchbar-place .form-control { min-height: 46px; border-radius: var(--iep-radius-sm); }
.searchbar-submit { min-height: 46px; white-space: nowrap; display: inline-flex; align-items: center; }
.searchbar-tabs { display: flex; gap: .4rem; margin: .7rem 0 0; padding: 0 0 .15rem; border: 0; overflow-x: auto; scrollbar-width: none; }
.searchbar-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 575.98px) { .searchbar-submit span { display: none; } .searchbar-submit { padding-inline: .95rem; } }
@media (min-width: 992px) {
    .listing-searchbar .searchbar-form { display: flex; align-items: center; gap: 1rem; }
    .searchbar-row { flex: 0 1 520px; }
    .searchbar-tabs { margin: 0; flex: 1 1 auto; }
}

/* Layout: filters + results */
.listing-container { padding-top: 1.5rem; padding-bottom: 3rem; }
.listing-layout { display: block; }
@media (min-width: 992px) {
    .listing-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
    .listing-sidebar { position: sticky; top: 84px; }
    .listing-filters { background: #fff; border: 1px solid var(--iep-line); border-radius: var(--iep-radius); max-height: calc(100vh - 100px); overflow: auto; overscroll-behavior: contain; }
    .listing-filters .offcanvas-body { display: block; padding: 1rem 1.1rem 0; }
}
.listing-filters-title { align-items: center; font-weight: 750; color: var(--iep-navy-900); font-size: 1.05rem; margin: 0 0 .25rem; }
@media (max-width: 991.98px) {
    .listing-filters { --bs-offcanvas-width: min(100vw, 420px); }
    .listing-filters .offcanvas-header { border-bottom: 1px solid var(--iep-line); }
    .listing-filters .offcanvas-body { padding-bottom: 0; }
}

/* Filter panel */
.filter-form { display: flex; flex-direction: column; }
.filter-group { border: 0; border-bottom: 1px solid var(--iep-line); margin: 0; padding: .95rem 0; min-width: 0; }
.filter-group:last-of-type { border-bottom: 0; }
.filter-legend { display: block; float: none; width: 100%; padding: 0; margin: 0 0 .55rem; font-weight: 700; font-size: .95rem; color: var(--iep-navy-900); }
.filter-hint { color: var(--iep-muted); font-weight: 500; font-size: .8rem; }
.filter-hint-box { background: var(--iep-sky); border-radius: var(--iep-radius-sm); padding: .75rem .85rem; font-size: .9rem; color: var(--iep-navy-900); margin: 1rem 0 .25rem; }
.filter-form .chip-group { gap: .35rem; }
.filter-form .btn-chip { --bs-btn-padding-x: .75rem; --bs-btn-font-size: .86rem; }
.btn-chip-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; --bs-btn-font-size: .82rem; min-height: 2.1rem; }
@media (pointer: coarse) { .btn-chip-sm { min-height: 2.75rem; } }
.filter-form .form-select { min-height: 44px; border-radius: var(--iep-radius-sm); }
.range-pair { display: flex; align-items: center; gap: .45rem; }
.range-sep { color: var(--iep-muted); }
.input-unit { position: relative; flex: 1 1 0; min-width: 0; }
.input-unit .form-control { min-height: 44px; padding-right: 2.4rem; border-radius: var(--iep-radius-sm); -moz-appearance: textfield; }
.input-unit .form-control::-webkit-outer-spin-button, .input-unit .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-unit .unit { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--iep-muted); font-size: .88rem; pointer-events: none; }
.filter-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; margin: 0; min-height: 32px; }
.filter-details > summary::-webkit-details-marker { display: none; }
.filter-details > summary::after { content: ""; margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid var(--iep-muted); border-bottom: 2px solid var(--iep-muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.filter-details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.filter-details[open] > summary { margin-bottom: .6rem; }
.filter-badge { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--iep-orange-600); color: #fff; font-size: .74rem; font-weight: 700; }
.filter-actions { position: sticky; bottom: 0; z-index: 2; background: #fff; border-top: 1px solid var(--iep-line); padding: .75rem 0 .85rem; margin-top: auto; }
.filter-actions .btn-primary { min-height: 46px; }
.filter-actions .btn-primary.is-pending { box-shadow: 0 0 0 4px rgba(255, 101, 1, .3); }
.filter-actions .btn-link { color: var(--iep-muted); text-decoration: none; }
.filter-actions .btn-link:hover { color: var(--iep-orange-600); }

/* Energy classes as chips: the legal colours of app.css (.dpe-*, .ges-*) on a letter tile */
.chip-energy { gap: .45rem; padding-left: .4rem !important; }
.chip-energy .energy-letter { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 6px; font-weight: 800; font-size: .82rem; color: #fff; }
.chip-energy .energy-range { font-size: .76rem; font-weight: 600; color: var(--iep-muted); }
.btn-check:checked + .chip-energy .energy-range { color: rgba(255, 255, 255, .85); }
.btn-check:checked + .chip-energy .energy-letter { box-shadow: 0 0 0 2px #fff; }

/* Toolbar, active criteria */
.listing-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.listing-toolbar .listing-count { margin-right: auto; color: var(--iep-muted); }
.listing-toolbar .listing-count strong { color: var(--iep-navy-900); font-size: 1.1rem; }
.listing-filters-toggle, .listing-sort .btn { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.listing-filters-toggle .filter-badge { margin-left: .4rem; }
.listing-sort .dropdown-menu { border: 1px solid var(--iep-line); border-radius: var(--iep-radius); box-shadow: var(--iep-shadow); padding: .4rem; }
.listing-sort .dropdown-item { border-radius: 8px; padding: .55rem .8rem; }
.listing-sort .dropdown-item.active, .listing-sort .dropdown-item:active { background: var(--iep-navy); color: #fff; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-bottom: 1.1rem; }
.chip-active { cursor: pointer; background: var(--iep-sky); border-color: #c7d7e8; font-size: .86rem; padding: .35rem .7rem; min-height: 36px; }
.chip-active .bi-x-lg { font-size: .7rem; color: var(--iep-muted); }
.chip-active:hover .bi-x-lg { color: var(--iep-orange-600); }
.chip-clear { color: var(--iep-orange-600); font-weight: 600; text-decoration: none; padding: .35rem .25rem; }
.chip-current { background: var(--iep-navy); color: #fff; border-color: var(--iep-navy); }
.chip-current:hover, .chip-current:focus-visible { background: var(--iep-navy-900); color: #fff; }
body.is-searching .property-grid { opacity: .55; transition: opacity .15s ease; }
body.is-searching { cursor: progress; }

/* Results */
.property-grid { margin-bottom: 0; }
.property-grid-ad { flex: 0 0 100%; max-width: 100%; }
.ad-slot-listing { margin: .5rem 0; min-height: 280px; background: var(--iep-sand); border-radius: var(--iep-radius); overflow: hidden; }
.listing-empty { text-align: center; background: #fff; border: 1px dashed #c7d7e8; border-radius: var(--iep-radius); padding: 2.5rem 1.25rem; max-width: 760px; margin: 0 auto; }
.listing-empty-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--iep-orange-050); color: var(--iep-orange-600); font-size: 1.8rem; margin-bottom: .75rem; }
.listing-empty-title { font-weight: 750; color: var(--iep-navy-900); font-size: 1.15rem; }

/* Pager */
.listing-pager { margin-top: 2rem; }
.listing-pager .pagination { --bs-pagination-color: var(--iep-navy-900); --bs-pagination-border-color: var(--iep-line); --bs-pagination-hover-bg: var(--iep-sky); --bs-pagination-hover-color: var(--iep-navy-900); --bs-pagination-hover-border-color: var(--iep-line);
    --bs-pagination-active-bg: var(--iep-navy); --bs-pagination-active-border-color: var(--iep-navy); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(255, 101, 1, .35); --bs-pagination-disabled-color: #9aa8b5; gap: .3rem; }
.listing-pager .page-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--iep-radius-sm) !important; font-weight: 600; }

/* SEO text */
.listing-seo { padding: 2.5rem 0; }
.listing-seo .lead-muted { max-width: 100ch; }

/* Compact hero (hubs, landings, subdomain home, search page) */
.hero-compact .hero-inner { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3.25rem); }
.hero-compact h1 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); max-width: 26ch; margin-top: .6rem; }
.hero-compact .hero-lead { max-width: 70ch; font-size: 1rem; }
.hero-card-title { color: rgba(255, 255, 255, .9); font-weight: 700; margin: 0 0 .5rem; }
.breadcrumb-light { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .6); --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .8); }
.breadcrumb-light a { color: #fff; }
.type-links { background: #fff; border: 1px solid var(--iep-line); border-radius: var(--iep-radius); padding: 1.15rem 1.2rem; height: 100%; }
.type-links h3 { display: flex; align-items: center; margin-bottom: .85rem; }
.type-links .bi { color: var(--iep-orange-600); }
.link-heading { color: var(--iep-navy-900); text-decoration: none; }
.link-heading:hover { color: var(--iep-orange-600); }

/* Owner page */
.owner-card { display: flex; align-items: center; gap: 1rem; margin-top: .75rem; }
.owner-card h1 { margin: 0; }
.owner-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--iep-navy); color: #fff; font-size: 1.7rem; font-weight: 800; }
.owner-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; color: var(--iep-muted); margin-top: .35rem; font-size: .93rem; }
.owner-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.owner-meta .bi { color: var(--iep-navy-700); }

/* Adjustments */
.hero-compact .hero-inner { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); }
.ad-slot-listing { position: relative; }
.ad-slot-listing::before { content: attr(data-label); position: absolute; top: .4rem; left: .75rem; font-size: .72rem; color: var(--iep-muted); text-transform: uppercase; letter-spacing: .06em; }
.listing-pager .page-item.disabled .page-link { background: #fff; }
.listing-filters-title { padding-bottom: .6rem; border-bottom: 1px solid var(--iep-line); }
@media (max-width: 575.98px) {
    .listing-toolbar .listing-sort { margin-left: auto; }
    .owner-avatar { width: 48px; height: 48px; font-size: 1.3rem; }
    .owner-card h1 { font-size: 1.35rem; }
}