/* ---------------------------------------------------------------------------
   Portfolio: property cards beside a map.
   Scoped under .wpg-portfolio so nothing here can reach Bridge's own styles.
   --------------------------------------------------------------------------- */

.wpg-portfolio {
  --wpg-gold: #8B7539;
  --wpg-gold-lift: #B8963F;
  --wpg-sky: #A3C4D9;
  --wpg-ink: #1F1D18;          /* near-black, warmed toward the gold */
  --wpg-muted: #6B6558;        /* neutral biased warm, not a dead grey */
  --wpg-rule: #E2DED4;
  --wpg-surface: #FBFAF7;

  margin: 2.5rem 0 0;
  padding-bottom: 3.5rem;   /* the tool sat flush against the footer without this */
}

.wpg-portfolio__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* SEO lead-in above the tool. */
.wpg-portfolio-intro {
  max-width: 62rem;
  margin: 0 0 2.5rem;
}
.wpg-portfolio-intro__heading {
  margin: 0 0 .75rem;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  color: #1F1D18;
}
.wpg-portfolio-intro__text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5B5548;
}

.wpg-portfolio__count {
  margin: 0 0 .85rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wpg-muted);
}

/* ---- list ---- */

.wpg-portfolio__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.wpg-card { margin: 0; padding: 0; list-style: none; }

.wpg-card__btn {
  display: flex;
  gap: 1rem;
  width: 100%;
  padding: .75rem;
  text-align: left;
  align-items: center;

  background: transparent;
  border: 1px solid var(--wpg-rule);
  border-left: 3px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  color: var(--wpg-ink);
  transition: background-color .15s ease, border-color .15s ease;
}

.wpg-card__btn:hover {
  background: var(--wpg-surface);
  border-color: var(--wpg-gold-lift);
}

.wpg-card__btn:focus-visible {
  outline: 2px solid var(--wpg-gold);
  outline-offset: 2px;
}

.wpg-card__btn.is-active {
  background: var(--wpg-surface);
  border-left-color: var(--wpg-gold);
}

.wpg-card__media {
  flex: 0 0 88px;
  width: 88px;
  height: 66px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--wpg-surface);
}

.wpg-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Missing photography degrades to a branded monogram, not a broken frame. */
.wpg-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--wpg-gold);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.wpg-card__body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;   /* lets long names ellipsize instead of forcing overflow */
}

.wpg-card__name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wpg-ink);
}

.wpg-card__addr {
  font-size: .84rem;
  color: var(--wpg-muted);
  line-height: 1.4;
}

.wpg-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .25rem;
}

.wpg-tag {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 100px;
  border: 1px solid var(--wpg-rule);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpg-muted);
  white-space: nowrap;
}

.wpg-tag--partner {
  border-color: var(--wpg-gold-lift);
  color: #6E5A22;          /* darkened gold: 5.4:1 on the surface */
  background: rgba(184, 150, 63, .10);
}

.wpg-tag--office {
  border-color: #6E8FA6;
  color: #33566B;
  background: rgba(163, 196, 217, .18);
}

/* ---- map ---- */

.wpg-portfolio__map {
  width: 100%;
  height: 380px;
  border: 1px solid var(--wpg-rule);
  border-radius: 3px;
  background: var(--wpg-surface);
}

.wpg-pin { background: none; border: 0; }

/* "View all" reset control. Leaflet's .leaflet-bar gives the box + shadow.
   The selector must outrank Leaflet's own `.leaflet-touch .leaflet-bar a`
   (specificity 0,2,1), which otherwise pins the anchor to a fixed 30px width
   and clips the text label. `.wpg-portfolio .leaflet-bar a.wpg-reset__btn`
   (0,3,1) wins in both touch and non-touch modes; max-content then shrink-wraps
   the white box to the label plus its padding. */
.wpg-portfolio .leaflet-bar a.wpg-reset__btn {
  width: max-content;
  height: 30px;
  line-height: 30px;
  padding: 0 .6rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  color: var(--wpg-gold);
  white-space: nowrap;
}

.wpg-portfolio .leaflet-bar a.wpg-reset__btn:hover {
  background: var(--wpg-surface);
  color: #6E5A22;   /* darkened gold for hover contrast */
}

.wpg-popup { width: 220px; }

.wpg-popup__img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  margin: 0 0 .5rem;
  border-radius: 2px;
}

.wpg-popup__name {
  margin: 0 0 .15rem;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--wpg-ink);
}

.wpg-popup__addr {
  margin: 0;
  font-size: .82rem;
  color: var(--wpg-muted);
  line-height: 1.4;
}

/* Leaflet's default popup chrome is rounded and shadowed; square it off to
   match the cards. */
.wpg-portfolio .leaflet-popup-content-wrapper { border-radius: 3px; }
.wpg-portfolio .leaflet-popup-content { margin: 10px; }

/* ---- desktop: list scrolls, map stays put ---- */

@media (min-width: 901px) {
  .wpg-portfolio__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2rem;
    align-items: start;
  }

  .wpg-portfolio__list {
    max-height: 640px;
    overflow-y: auto;
    padding-right: .5rem;
    /* Keeps the scrollbar from sitting flush against the cards. */
    scrollbar-gutter: stable;

    /* Fades the last card out at the boundary so the cut-off edge reads as
       "more below" rather than as a clipping bug. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent 100%);
  }

  /* Once the list is scrolled to the end there is nothing more to hint at. */
  .wpg-portfolio__list.is-scrolled-end {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .wpg-portfolio__mapwrap {
    position: sticky;
    top: 100px;   /* clears Bridge's fixed header */
  }

  .wpg-portfolio__map { height: 640px; }
}

@media (max-width: 900px) {
  /* Map first on small screens, so a tapped card has somewhere to fly to. */
  .wpg-portfolio__mapwrap { order: -1; }
  .wpg-portfolio__map { height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .wpg-card__btn { transition: none; }
}