/* ============================================================
   stacked/listing-pick: one property in a listing roundup (24 Sep 2026).

   Loaded on the site AND inside the editor's iframe, which has none of the
   theme's tokens, so every colour and face carries its literal fallback. Values
   are the tokens.css ones: sand ground, Gascogne display, Whyte body, mango for
   the pick number (the design's red, matched to our palette), --structure for
   the dark listing card with the section accent as its label.
   ============================================================ */

.lp.listing-pick {
  --lp-ink:#1C1A16;
  --lp-body:#2B2822;
  --lp-text-2:#6E6456;
  --lp-faint:#8A8172;
  --lp-rule:#D8CDB6;
  --lp-hard:#2A2620;
  --lp-panel:#E9E2D2;
  --lp-mango:var(--hover, #F5731E);
  --lp-mango-text:#BC5411;
  --lp-accent:var(--accent, #F3C21A);
  --lp-display:var(--f-display, 'Gascogne', Georgia, 'Times New Roman', serif);
  --lp-sans:var(--f-body, 'Whyte', Arial, system-ui, sans-serif);

  margin-top:48px; margin-bottom:56px; /* vertical only: the editor centres blocks with auto side margins */
  font-family:var(--lp-sans);
  color:var(--lp-body);
}
.lp.listing-pick + .lp.listing-pick { margin-top:64px }
.lp.listing-pick *, .lp.listing-pick *::before, .lp.listing-pick *::after { box-sizing:border-box }

/* Small uppercase label, used for every eyebrow on the card. */
.lp.listing-pick .lp__k {
  font:700 10.5px/1.2 var(--lp-sans);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--lp-text-2);
}

/* ---- picked by / pick n of m ---- */
.lp.listing-pick .lp__top {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:12px;
  border-bottom:2px solid var(--lp-hard);
}
.lp.listing-pick .lp__by { display:flex; align-items:center; gap:12px; min-width:0 }
.lp.listing-pick .lp__face {
  flex:none; width:40px; height:40px; border-radius:50%;
  overflow:hidden; background:var(--lp-panel); display:block;
}
.lp.listing-pick .lp__face img { display:block; width:100%; height:100%; object-fit:cover; margin:0; background:none }
.lp.listing-pick .lp__by-t { display:flex; flex-direction:column; gap:3px; min-width:0 }
.lp.listing-pick .lp__by-n { font:400 14px/1.3 var(--lp-sans); color:var(--lp-body) }
.lp.listing-pick .lp__by-n b { font-weight:700; color:var(--lp-ink) }

/* ---- number + name ---- */
/* "No. 4" on its own line above the name, in the card's label type and mango. */
.lp.listing-pick .lp__no {
  margin:18px 0 0;
  font-size:12px; letter-spacing:.16em;
  color:var(--lp-mango-text);
}
.lp.listing-pick .lp__title {
  margin:6px 0 0; padding:0; border:0;
  font:400 clamp(28px, 4.4vw, 40px)/1.08 var(--lp-display);
  letter-spacing:-.015em; color:var(--lp-ink);
  text-wrap:balance;
}
.lp.listing-pick .lp__name a, .lp.listing-pick .lp__name a:hover { color:inherit; text-decoration:none }
.lp.listing-pick .lp__name a:hover { color:var(--lp-mango-text) }
.lp.listing-pick .lp__sub {
  margin:8px 0 0;
  font:400 14.5px/1.4 var(--lp-sans); color:var(--lp-text-2);
}

/* ---- photos: lead + three thumbnails on desktop, a swipe strip on phones ---- */
.lp.listing-pick .lp__photos {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px;
  margin-top:22px;
}
.lp.listing-pick .lp__ph {
  position:relative; display:block; padding:0; margin:0; border:0;
  background:var(--lp-panel); cursor:zoom-in; overflow:hidden;
  aspect-ratio:4 / 3;
}
.lp.listing-pick .lp__ph img {
  display:block; width:100%; height:100%; object-fit:cover; margin:0; max-width:none; background:none;
  transition:transform .4s ease;
}
.lp.listing-pick .lp__ph:hover img { transform:scale(1.02) }
.lp.listing-pick .lp__ph:focus-visible { outline:2px solid var(--lp-mango); outline-offset:2px }
.lp.listing-pick .lp__ph--lead { grid-column:1 / -1; aspect-ratio:16 / 10 }
.lp.listing-pick .lp__ph:nth-child(n+5) { display:none }
/* Fewer than four photos: no orphan thumbnail. Two sit side by side, three are
   a lead over a pair. */
.lp.listing-pick .lp__photos[data-count="2"], .lp.listing-pick .lp__photos[data-count="3"] { grid-template-columns:repeat(2, minmax(0,1fr)) }
.lp.listing-pick .lp__photos[data-count="2"] .lp__ph--lead { grid-column:auto; aspect-ratio:4 / 3 }
.lp.listing-pick .lp__more {
  position:absolute; right:8px; bottom:8px;
  padding:6px 10px; background:var(--lp-hard); color:#fff;
  font:700 10.5px/1 var(--lp-sans); letter-spacing:.12em; text-transform:uppercase;
}
.lp.listing-pick .lp__swipe { display:none }

/* ---- stats strip ---- */
.lp.listing-pick .lp__stats {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  margin:22px 0 0; padding:0;
  border-top:1px solid var(--lp-hard); border-bottom:1px solid var(--lp-rule);
}
.lp.listing-pick .lp__stat { padding:14px 16px 16px; border-left:1px solid var(--lp-rule); min-width:0 }
.lp.listing-pick .lp__stat:first-child { border-left:0; padding-left:0 }
.lp.listing-pick .lp__stat dt { margin:0 0 8px }
.lp.listing-pick .lp__stat dd {
  margin:0; font:400 19px/1.25 var(--lp-display); color:var(--lp-ink);
  font-variant-numeric:tabular-nums;
}
/* Layout: bed and bath icons with their counts, on one line. */
.lp.listing-pick .lp__layout { display:flex; align-items:center; gap:16px; white-space:nowrap }
.lp.listing-pick .lp__lay { display:inline-flex; align-items:center; gap:6px }
.lp.listing-pick .lp__ico { flex:none; color:var(--lp-text-2); margin:0 }
.lp.listing-pick .screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.lp.listing-pick .lp__stat--price dd { font-size:clamp(26px, 3.4vw, 32px); line-height:1.1; letter-spacing:-.01em }

.lp.listing-pick .lp__details {
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px 22px;
  font:400 14px/1.4 var(--lp-sans); color:var(--lp-body);
}
.lp.listing-pick .lp__details li { margin:0 }
.lp.listing-pick .lp__details .lp__k { margin-right:4px }

/* ---- map (tap to load) + address ---- */
.lp.listing-pick .lp__maprow {
  display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:22px;
  margin-top:22px;
}
.lp.listing-pick .lp__map {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:100%; aspect-ratio:16 / 8; padding:0; margin:0;
  border:1px solid var(--lp-rule); background:var(--lp-panel);
  color:var(--lp-text-2); cursor:pointer;
  font:400 13px/1.3 var(--lp-sans);
}
.lp.listing-pick .lp__map:hover { color:var(--lp-ink); border-color:var(--lp-text-2) }
.lp.listing-pick .lp__map iframe { display:block; width:100%; height:100%; border:0 }
.lp.listing-pick .lp__map.is-live { cursor:default; padding:0 }
.lp.listing-pick .lp__addr { display:flex; flex-direction:column; gap:6px; min-width:0 }
.lp.listing-pick .lp__addr-t { font:400 14.5px/1.45 var(--lp-sans); color:var(--lp-body) }
.lp.listing-pick a.lp__maplink, .lp.listing-pick span.lp__maplink {
  margin-top:auto; align-self:flex-start;
  font:700 10.5px/1.2 var(--lp-sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--lp-ink); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;
}
.lp.listing-pick a.lp__maplink:hover { color:var(--lp-mango-text) }

/* ---- why I like it ---- */
.lp.listing-pick .lp__why { margin-top:30px }
.lp.listing-pick .lp__why-h { margin:0 0 12px; color:var(--lp-mango-text) }
.lp.listing-pick .lp__why-body > *:first-child { margin-top:0 }
.lp.listing-pick .lp__why-body p {
  margin:0 0 16px;
  font:400 18px/1.6 var(--lp-display); color:var(--lp-body);
}
.lp.listing-pick .lp__why-body blockquote { margin:0; padding:0; border:0 }
/* Text pasted from elsewhere often carries inline fonts; inside the card it
   follows the card's type. Display only: the stored text is untouched. */
.lp.listing-pick .lp__why-body [style*="font-family"],
.lp.listing-pick .lp__why-body [style*="font-size"] { font-family:inherit !important; font-size:inherit !important; line-height:inherit !important }
.lp.listing-pick .lp__why-body a { color:var(--lp-mango-text); text-decoration:underline; text-underline-offset:2px }
.lp.listing-pick .lp__sign {
  display:flex; align-items:center; gap:12px; margin:6px 0 0;
  font:700 11px/1 var(--lp-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--lp-ink);
}
.lp.listing-pick .lp__sign::before { content:""; width:26px; height:1px; background:var(--lp-ink) }

/* ---- listing ---- */
.lp.listing-pick a.lp__cta, .lp.listing-pick div.lp__cta {
  position:relative; display:flex; flex-direction:column; gap:6px;
  margin-top:26px; padding:20px 64px 20px 24px;
  background:var(--lp-hard); color:#F2EBDC; text-decoration:none;
  transition:background .15s ease;
}
.lp.listing-pick a.lp__cta:hover { background:#16140F; text-decoration:none; color:#F2EBDC }
.lp.listing-pick .lp__cta-k { font:700 10.5px/1.2 var(--lp-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--lp-accent) }
.lp.listing-pick .lp__cta-t { font:400 20px/1.25 var(--lp-display); color:#fff }
.lp.listing-pick .lp__cta-u { font:400 12px/1.3 var(--lp-sans); color:#C9BFA8 }
.lp.listing-pick .lp__cta-arrow { position:absolute; right:24px; top:50%; margin-top:-11px; color:#fff; transition:transform .15s ease }
.lp.listing-pick a.lp__cta:hover .lp__cta-arrow { transform:translateX(3px) }
.lp.listing-pick .lp__old { margin:22px 0 0; font:400 13.5px/1.45 var(--lp-sans); color:var(--lp-faint) }
.lp.listing-pick .lp__old a { color:var(--lp-text-2); text-decoration:underline; text-underline-offset:2px }

/* ---- phones ---- */
@media (max-width:640px) {
  .lp.listing-pick { margin-top:36px; margin-bottom:44px }
  .lp.listing-pick + .lp.listing-pick { margin-top:48px }

  .lp.listing-pick .lp__photos {
    display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .lp.listing-pick .lp__photos::-webkit-scrollbar { display:none }
  .lp.listing-pick .lp__ph, .lp.listing-pick .lp__ph--lead, .lp.listing-pick .lp__ph:nth-child(n+5) {
    display:block; flex:0 0 86%; aspect-ratio:4 / 3; scroll-snap-align:start;
  }
  .lp.listing-pick .lp__more { display:none }
  .lp.listing-pick .lp__swipe { display:block; margin:8px 0 0; font:400 12px/1.3 var(--lp-sans); color:var(--lp-text-2) }

  .lp.listing-pick .lp__stats { grid-template-columns:repeat(3, minmax(0,1fr)) }
  .lp.listing-pick .lp__stat--price { grid-column:1 / -1; padding:14px 0; border-bottom:1px solid var(--lp-rule) }
  .lp.listing-pick .lp__stat { padding:12px 10px 14px }
  .lp.listing-pick .lp__stat--price + .lp__stat { border-left:0; padding-left:0 }
  .lp.listing-pick .lp__stat:not(.lp__stat--price) dd { font-size:16px }
  .lp.listing-pick .lp__stat--price dd { font-size:28px }

  .lp.listing-pick .lp__maprow { grid-template-columns:1fr; gap:10px }
  .lp.listing-pick .lp__map { aspect-ratio:16 / 10 }
  .lp.listing-pick .lp__addr { flex-direction:row; align-items:baseline; justify-content:space-between; gap:12px }
  .lp.listing-pick .lp__addr .lp__k { display:none }
  .lp.listing-pick a.lp__maplink, .lp.listing-pick span.lp__maplink { margin-top:0; flex:none }

  .lp.listing-pick .lp__why-body p { font-size:17px }
  .lp.listing-pick .lp__cta { padding:18px 56px 18px 18px }
  .lp.listing-pick .lp__cta-t { font-size:18px }
}

/* ---- editor-only bits (never printed on the site) ---- */
.lp.listing-pick .lp-ed__map { aspect-ratio:auto; min-height:88px; padding:16px 20px; text-align:center; cursor:default }
.lp-ed__help { margin:0; padding-left:18px; font-size:12.5px; line-height:1.5 }
.lp-ed__help li { margin:0 0 6px }
.lp.listing-pick .lp-ed__bar { margin-top:8px }
.lp.listing-pick .lp-ed__empty {
  margin-top:22px; padding:48px 16px; text-align:center;
  background:var(--lp-panel); color:var(--lp-text-2); font:400 13px/1.3 var(--lp-sans);
}
.lp-ed__note { font-size:12px; color:#757575; margin:8px 0 0 }
.lp-ed__detail { padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #e0e0e0 }

/* ---- lightbox (front end only) ---- */
.lp-box {
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(22,20,15,.94);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.lp-box.is-open { opacity:1; pointer-events:auto }
.lp-box img { max-width:92vw; max-height:84vh; object-fit:contain; display:block }
.lp-box button {
  position:absolute; border:0; background:none; color:#F2EBDC; cursor:pointer;
  font:400 34px/1 var(--f-body, Arial, sans-serif); padding:14px;
}
.lp-box .lp-box__x { top:10px; right:12px }
.lp-box .lp-box__p { left:8px; top:50% ; transform:translateY(-50%) }
.lp-box .lp-box__n { right:8px; top:50%; transform:translateY(-50%) }
.lp-box .lp-box__c {
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  font:400 13px/1 var(--f-body, Arial, sans-serif); color:#C9BFA8;
}
.lp-box button:focus-visible { outline:2px solid #F5731E }
@media (prefers-reduced-motion:reduce) { .lp.listing-pick .lp__ph img, .lp-box, .lp.listing-pick .lp__cta-arrow { transition:none } }