/* --- map + pins ---
     Two-layer structure: .eqr-track__map-bg is the ONLY element
     that clips (so the map graphic keeps its rounded corners);
     .eqr-track__map-pins sits on top with no clipping, so a
     tooltip near the map's edge can extend past it without being
     cut off. */
  .eqr-track__map-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    min-width: 0;
  }

  .eqr-track__map-bg {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #E4E1D8;
    background-image:
      linear-gradient(#D0CCC0 1px, transparent 1px),
      linear-gradient(90deg, #D0CCC0 1px, transparent 1px);
    background-size: 14% 14%;
  }

  .eqr-track__map-pins {
    position: absolute;
    inset: 0;
  }

  /* .eqr-track__pin is the positioning wrapper only — it holds the
     small trigger button (the visible dot, and the click/hover
     target) and the tooltip as SIBLINGS, not the tooltip nested
     inside the button, since a <button> can't validly contain a
     link. The wrapper's own `transform` makes it a containing
     block for the absolutely-positioned tooltip, so this still
     positions correctly without an extra position:relative. */
  .eqr-track__pin {
    position: absolute;
    top: var(--pin-top);
    left: var(--pin-left);
    transform: translate(-50%, -50%);
  }

  .eqr-track__pin-trigger {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .eqr-track__pin-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #A9834F;
    border: 2px solid #FFFFFF;
    transition: transform .2s ease;
  }

  .eqr-track__pin-trigger:hover .eqr-track__pin-dot,
  .eqr-track__pin-trigger[aria-expanded="true"] .eqr-track__pin-dot {
    transform: scale(1.25);
  }

  .eqr-track__pin-trigger:focus-visible {
    outline: 2px solid #1C1B19;
    outline-offset: 2px;
    border-radius: 50%;
  }

  /* Tooltip: thumbnail + a two-line text column (price/year, then
     the Zillow link). The 55px square image sets the height; the
     text column is what grows the width — kept deliberately compact
     so the size increase over the old text-only tooltip is mostly
     horizontal, per your note. */
  .eqr-track__tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #1C1B19;
    padding: .4rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
    pointer-events: none; /* re-enabled below, only once visible */
    z-index: 1;
  }

  .eqr-track__pin-trigger[aria-expanded="true"] + .eqr-track__tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* lets the Zillow link inside be clicked/tapped */
  }

  .eqr-track__tooltip-thumb {
    width: 55px;
    height: 55px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #3A3835; /* shows while the thumbnail loads */
  }

  .eqr-track__tooltip-text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
  }

  .eqr-track__tooltip-price {
    font-size: .75rem;
    color: #F2F0EB;
  }

  .eqr-track__tooltip-link {
    font-size: .68rem;
    color: #C9A66B;
    text-decoration: none;
  }
  .eqr-track__tooltip-link:hover,
  .eqr-track__tooltip-link:focus-visible {
    text-decoration: underline;
  }

  @media (prefers-reduced-motion: reduce) {
    .eqr-track__pin-dot, .eqr-track__tooltip { transition: none; }
  }