/* site.css - base styles for Auctions site */
:root {
  --color-bg: #0c0d0f;
  --color-surface: #121417;
  --color-raised: #17191d;
  --color-accent: #e8eaed;
  --color-accent-alt: #b6bcc4;
  --color-text: #e8eaed;
  --color-text-muted: #878d95;
  --color-border: #24272c;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --font-stack: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --transition: 120ms ease;
  --max-width: 1100px;
}

/* CSS Reset (succinct) */
*,*::before,*::after { box-sizing: border-box; }
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd { margin: 0; }
ul[role='list'],ol[role='list'] { list-style: none; margin:0; padding:0; }
html:focus-within { scroll-behavior: smooth; }
body { min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img,picture { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

body { font-family: var(--font-stack); background: var(--color-bg); color: var(--color-text); line-height: 1.5; }
a { color: var(--color-accent); text-decoration: none; }
a:hover,a:focus { color: var(--color-accent-alt); }

/* Layout */
.wrapper { width:100%; margin-inline:auto; max-width: var(--max-width); padding: clamp(0.75rem,2vw,1.5rem); }
.flex { display:flex; gap:1rem; }
.flex.center { align-items:center; }
.flex.between { justify-content:space-between; }
.grid { display:grid; gap:1.25rem; }

header.site-header { position:sticky; top:0; background:rgba(12,13,15,0.88); backdrop-filter: blur(12px); border-bottom:1px solid var(--color-border); z-index:50; }
.site-header .wrapper {
  max-width:none;
  padding:.55rem clamp(.75rem, 1.5vw, 1.25rem);
}
.brand {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight:600;
  font-size:.95rem;
  color:var(--color-text);
}
.site-header__inner {
  min-width: 0;
}
.site-credit {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: .78rem;
  white-space: nowrap;
}
.site-credit a {
  color: var(--color-text);
  font-weight: 500;
}

.hero { padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; border-bottom:1px solid var(--color-border); }
.hero h1 { font-size:clamp(1.6rem,3.5vw,2.25rem); line-height:1.15; font-weight:600; letter-spacing:-.02em; }
.hero p { margin-top:.75rem; max-width:55ch; color:var(--color-text-muted); font-size:.95rem; }

.section { padding:3rem 0; }
.section h2 { font-size:1.5rem; margin-bottom:.75rem; letter-spacing:.5px; }
.card-grid { 
  display:grid; 
  gap:1rem; 
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
}
.card { background: var(--color-surface); padding:1rem clamp(1rem,2vw,1.25rem); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap:.65rem; }
.card h3 { font-size:1rem; margin:0; }
.badge { background:transparent; border:1px solid var(--color-border); color:var(--color-text-muted); font-size:.65rem; font-weight:600; padding:.2rem .45rem; border-radius:var(--radius-sm); letter-spacing:.05em; text-transform:uppercase; }
.price { font-weight:600; color: var(--color-text); }

footer.site-footer { padding:2.5rem 0 3rem; background:var(--color-bg); border-top:1px solid var(--color-border); margin-top:2rem; font-size:.85rem; }
footer.site-footer a { color: var(--color-text-muted); }
footer.site-footer a:hover { color: var(--color-accent); }

/* Utilities */
.muted { color: var(--color-text-muted); }
.flow > * + * { margin-top: var(--flow-space,1rem); }
.inline { display:inline; }
.hidden { display:none !important; }

/* Scroll to top button */
#scrollTopBtn { position:fixed; bottom:1.25rem; right:1.25rem; background:var(--color-surface); color:var(--color-text); padding:.5rem .7rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); cursor:pointer; font-weight:500; font-size:.8rem; opacity:0; transform:translateY(8px); transition:var(--transition); }
#scrollTopBtn.visible { opacity:1; transform:translateY(0); }
#scrollTopBtn:hover { border-color:#4a4f57; }

::selection { background:#e8eaed; color:#0c0d0f; }

/* Explorer layout — map-first, fills the viewport below the header */
body {
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}

main { flex:1; }

body.page-explorer {
  height:100dvh;
  overflow:hidden;
}

main.explorer {
  display:flex;
  flex-direction:column;
  min-height:0;
}

.explorer-topbar {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  align-items:end;
  padding:.65rem clamp(.75rem, 1.5vw, 1.25rem);
  border-bottom:1px solid var(--color-border);
  background:var(--color-bg);
}

.explorer-topbar__heading { flex:0 1 auto; }

.explorer-topbar__heading h1 {
  font-size:.95rem;
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
}

.explorer-topbar__heading .muted { font-size:.75rem; max-width:52ch; }

.explorer-topbar .filters { flex:1 1 480px; }

.explorer-actions {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .42rem .7rem;
  cursor: pointer;
  font-weight: 500;
  font-size: .8rem;
  transition: border-color var(--transition);
}

.btn-secondary:hover,
.btn-secondary:focus {
  border-color: #4a4f57;
}

.freshness {
  font-size: .85rem;
  color: var(--color-text-muted);
}

.freshness.is-stale {
  color: #c9974a;
}

.explorer-layout {
  flex:1;
  display:grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

.list-panel {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display:flex;
  flex-direction:column;
  min-height: 0;
  overflow: hidden;
}

.list-panel__header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.list-panel__header h3 {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.list-panel__header label { display:flex; align-items:center; gap:.4rem; }
.list-panel__header label .muted { font-size:.72rem; }

.list-panel__header select {
  background:transparent;
  color:var(--color-text);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:.25rem .4rem;
  font-size:.75rem;
}

.property-list {
  overflow:auto;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap:0;
  scrollbar-width: thin;
  scrollbar-color: #2c2f35 transparent;
}

.property-list::-webkit-scrollbar { width:6px; }
.property-list::-webkit-scrollbar-thumb { background:#2c2f35; border-radius:3px; }

.list-item {
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--color-border);
  border-radius:0;
  padding:.65rem 1rem;
  color:var(--color-text);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}

.list-item:hover,
.list-item:focus {
  background: var(--color-raised);
  outline: none;
}

.list-item.is-selected {
  background: var(--color-raised);
  box-shadow: inset 2px 0 0 var(--color-text);
}

.list-item__title {
  font-weight:600;
  font-size:.82rem;
  line-height:1.35;
}

.list-item__meta {
  font-size:.75rem;
  font-weight:500;
  color: var(--color-text);
}

.list-item__sub {
  font-size:.72rem;
  line-height:1.4;
}

.list-empty {
  padding: 1rem;
}

.map-panel {
  position: relative;
  min-height: 480px;
  background: #0e1114;
}

.map-panel #map {
  position: absolute;
  inset: 0;
}

.map-panel .leaflet-tile-pane {
  filter: brightness(1.18) contrast(.98);
}

/* Listing detail popup */
.map-panel .leaflet-popup-content-wrapper {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.map-panel .leaflet-popup-tip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.map-panel .leaflet-popup-content {
  margin: 0;
  width: min(340px, calc(100vw - 2rem)) !important;
  font-family: var(--font-stack);
  line-height: 1.4;
}

.map-panel .leaflet-popup-close-button {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.popup-card__photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  background: #12151a;
}

.popup-card__body {
  padding: .7rem .8rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.popup-card__title {
  font-size: .92rem;
  line-height: 1.3;
  padding-right: .75rem;
}

.popup-card__facts {
  font-size: .75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.popup-rows {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  max-height: 245px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c2f35 transparent;
}

.popup-rows::-webkit-scrollbar { width:6px; }
.popup-rows::-webkit-scrollbar-thumb { background:#2c2f35; border-radius:3px; }

.popup-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .78rem;
}

.popup-row span { color: var(--color-text-muted); white-space: nowrap; }
.popup-row strong { font-weight: 500; text-align: right; min-width: 0; }

.popup-card__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .25rem;
  padding-top: .2rem;
  border-top: 1px solid var(--color-border);
}

.map-panel .popup-card__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2rem;
  box-sizing: border-box;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-text);
  text-align: center;
  padding: .26rem .2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}

.map-panel .popup-card__links a:hover,
.map-panel .popup-card__links a:focus {
  border-color: #4a4f57;
  color: var(--color-text);
}

.map-legend {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  z-index: 800;
  background: rgba(12,13,15,.88);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .35rem .6rem;
  backdrop-filter: blur(6px);
}

.filters label { color: var(--color-text-muted); }

footer.site-footer--compact {
  padding: .5rem 0;
  margin-top: 0;
  font-size: .78rem;
}

@media (max-width: 900px) {
  body.page-explorer {
    height:auto;
    overflow:auto;
  }

  .explorer-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 60dvh auto;
  }

  .map-panel {
    order: -1;
    min-height: 55dvh;
  }

  .list-panel {
    border-right: none;
    border-top: 1px solid var(--color-border);
    max-height: 320px;
  }
}