/* ── Price Map block (analytics.html) ────────────────────────────────────── */
/* Section background / padding / heading / eyebrow are handled by
   rem-section rem-section--gray / rem-section-intro / section-title
   from real-estate-market.css — no overrides needed here.               */

/* ── Section header (eyebrow + bracket title + subtitle) ─────────────────── */
/* These styles were previously supplied by market-timeline-horizontal.css
   (now deleted). Owned here so price-map has no external class dependency.  */

.pm-header {
  text-align: center;
  margin-bottom: 40px;
}

.pm-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-primary, #155945);
  background: rgba(21,89,69,.07);
  border: 1px solid rgba(21,89,69,.18);
  border-radius: 20px;
  padding: 5px 16px;
  margin-bottom: 12px;
}

.pm-header .section-head {
  margin-bottom: 8px;
}

.pm-subtitle {
  font-size: clamp(.875rem, .84rem + .18vw, 1rem);
  color: var(--color-text-light, #787878);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Section header (bracket title override) ──────────────────────────────── */

/* The global .section-title uses a CSS animation (titleReveal) that starts at
   opacity:0. Browsers throttle/skip animations for elements loaded far below
   the fold, so by the time the user scrolls here the animation has already
   "finished" while still invisible.  We cancel those animations and set the
   final visible state directly so the heading and its ( ) brackets always
   appear immediately when the section enters the viewport.

   Additionally, flex stretches the h2 to the full container width, pushing
   the absolutely-positioned brackets (left:-36px / right:-36px) outside the
   screen. Switching to block + inline-block ensures the h2 shrinks to its
   text width and the brackets stay within the visible container.           */

#price-map-section .section-head--bracket {
  display:    block;
  text-align: center;
  overflow:   visible;
}

#price-map-section .section-title {
  display:    inline-block;
  max-width:  calc(100% - 80px);
  text-align: center;

  /* override the global animation – show immediately */
  opacity:    1;
  transform:  none;
  animation:  none;
}

#price-map-section .section-title::before,
#price-map-section .section-title::after {
  /* same: override bracketReveal – show brackets immediately */
  opacity:    1;
  transform:  translateY(-50%) scaleY(1);
  animation:  none;
}

/* ── Filter pills ─────────────────────────────────────────────────────────── */
.price-map__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.price-map__filter-btn {
  padding: 7px 18px;
  border: 1.5px solid #d1dbe8;
  border-radius: 20px;
  background: #fff;
  color: #4a5568;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
  white-space: nowrap;
  line-height: 1;
}

.price-map__filter-btn:hover {
  border-color: var(--color-primary, #9c6f42);
  color: var(--color-primary, #9c6f42);
}

.price-map__filter-btn.is-active {
  background: var(--color-primary, #9c6f42);
  border-color: var(--color-primary, #9c6f42);
  color: #fff;
}

/* ── Map container ────────────────────────────────────────────────────────── */
.price-map__map-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
}

#price-map {
  width: 100%;
  height: 560px;
}

/* ── Legend ───────────────────────────────────────────────────────────────── */
.price-map__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.price-map__legend-label {
  font-size: 11px;
  color: #6b7a8d;
  white-space: nowrap;
}

.price-map__legend-bar {
  flex: 1;
  min-width: 80px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #3B82F6, #10B981, #F59E0B, #EF4444);
}

.price-map__legend-count {
  font-size: 12px;
  color: #8a94a2;
  margin-left: auto;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  #price-map { height: 460px; }
}

@media (max-width: 600px) {
  #price-map { height: 360px; }

  .price-map__filter-btn {
    padding: 6px 14px;
    font-size: 12px;
  }

  .price-map__legend-count { width: 100%; margin-left: 0; }
}

/* ── MapLibre popup override ──────────────────────────────────────────────── */
.pm-popup .maplibregl-popup-content {
  padding: 0;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.15);
  overflow: hidden;
}

.pm-popup-inner {
  padding: 14px 16px;
}

.pm-popup__type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-primary, #9c6f42);
  margin-bottom: 4px;
}

.pm-popup__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1a2332;
  line-height: 1.4;
  margin-bottom: 6px;
}

.pm-popup__price {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #1a2332;
  margin-bottom: 10px;
}

.pm-popup__link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary, #9c6f42);
  text-decoration: none;
}

.pm-popup__link:hover { text-decoration: underline; }