/* ============================================================================
   pd2-location.css — W5, "Where you'll live"
   OWNER: W5. Only W5 may edit this file and
          resources/views/front/property/detailPartials/v2/location.blade.php

   Every selector in this file starts with .pd2-loc- (plan section 0, rule 2).
   Values are the prototype's, via the pd2-tokens.css variables:
   website html/index/property-detail-v3.html  →  .sec / .sec-h / .sec-sub /
   .map-card / .map-canvas / .map-radius / .map-note / .map-open / .locality-strip

   Not ported on purpose: .map-pin (privacy — no exact marker) and
   .nearby/.nb (Places API, cut from this build). See the Blade header.
   ========================================================================== */

/* ------------------------------------------------------------- section -- */
/* Mirrors .sec / .sec:last-child. This partial is the last child of <main>,
   so the rule resolves to "no border" exactly as it does in the prototype —
   no dangling rule above Similar properties. */
.pd2-loc-sec{
  padding:28px 0;
  border-bottom:1px solid var(--pd2-line);
}
.pd2-loc-sec:last-child{border-bottom:0}

/* Written as a descendant pair on purpose: pd2-tokens.css resets
   `.pd2-root h1,.pd2-root h2,.pd2-root h3{margin:0}` at specificity (0,1,1),
   which beats a bare `.pd2-loc-h` (0,1,0) and silently ate the prototype's
   4px gap under the heading. `.pd2-loc-sec .pd2-loc-h` is (0,2,0) and still
   starts with the stream's own prefix. */
.pd2-loc-sec .pd2-loc-h{
  font-family:var(--pd2-font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.55;
  letter-spacing:-.01em;
  color:var(--pd2-ink);
  margin:0 0 4px;
}
.pd2-loc-sec .pd2-loc-sub{
  font-family:var(--pd2-font-body);
  font-size:13.5px;
  font-weight:400;
  line-height:1.55;
  color:var(--pd2-ink-3);
  margin:0 0 18px;
}

/* ---------------------------------------------------------------- card -- */
/* No background declaration — the prototype's .map-card has none either, and
   adding one shows up as a computed-style delta in the parity diff. */
.pd2-loc-card{
  border:1px solid var(--pd2-line);
  border-radius:var(--pd2-r-lg);
  overflow:hidden;
}

/* The prototype's .map-canvas background, kept verbatim. These are literal
   map-paper colours from the mock, not brand values — there is no token for
   them, and inventing one would be worse. They are what shows before the
   first tile paints and behind a Maps load that never arrives. */
.pd2-loc-canvas{
  position:relative;
  height:280px;
  background:
    radial-gradient(circle at 22% 30%, #E7F0E4 0 90px, transparent 91px),
    radial-gradient(circle at 78% 72%, #E3EDF4 0 110px, transparent 111px),
    repeating-linear-gradient(90deg,#EFEBE6 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,#EFEBE6 0 1px,transparent 1px 64px),
    #F7F4F1;
}

/* The live Google Map. z-index:0 makes this a stacking context so Maps'
   own six-digit internal z-indices stay inside it and cannot paint over
   the note / Open in Maps overlays below. */
.pd2-loc-map{
  position:absolute;
  inset:0;
  z-index:0;
  background:transparent;
}

/* ------------------------------------------------------ degraded state -- */
/* The prototype's roads + radius ring, kept as the fallback for a blocked or
   failed Maps load (the paper texture itself lives on .pd2-loc-canvas above).
   Removed the moment a real map is drawn — .pd2-loc-live is set by init(). */
.pd2-loc-fallback{
  position:absolute;
  inset:0;
}
.pd2-loc-canvas.pd2-loc-live .pd2-loc-fallback{display:none}

.pd2-loc-road{position:absolute;background:var(--pd2-bg);box-shadow:0 0 0 1px var(--pd2-line)}
.pd2-loc-road-h1{left:0;right:0;top:42%;height:12px}
.pd2-loc-road-v1{top:0;bottom:0;left:64%;width:9px}
.pd2-loc-road-h2{left:0;right:0;top:76%;height:6px}

.pd2-loc-ring{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:190px;height:190px;
  border-radius:50%;
  background:rgba(255,84,3,.10);
  border:2px dashed rgba(255,84,3,.45);
}

/* ------------------------------------------------------------ overlays -- */
.pd2-loc-note{
  position:absolute;
  left:14px;bottom:14px;
  z-index:1;
  background:var(--pd2-bg);
  border-radius:9px;
  padding:7px 12px;
  font-family:var(--pd2-font-body);
  font-size:12px;
  font-weight:400;
  line-height:1.55;
  color:var(--pd2-ink-2);
  box-shadow:var(--pd2-shadow-sm);
  display:flex;
  align-items:center;
  gap:7px;
}

/* An <a> rather than the prototype's <button> — it is a real navigation to
   Google Maps, so it should be a link (middle-click, open in new tab, no JS).
   The box is pinned to the button's computed geometry.

   Written as a descendant pair for the same reason as the heading above:
   pd2-tokens.css resets `.pd2-root a{color:inherit;text-decoration:none}` and
   `.pd2-root button{font:inherit}` at (0,1,1), which beats a bare single-class
   rule. line-height is restated explicitly because `font:inherit` bakes in an
   absolute 23.25px and the prototype's box is 20.15px. */
.pd2-loc-canvas .pd2-loc-open{
  position:absolute;
  right:14px;bottom:14px;
  z-index:1;
  display:inline-block;
  text-align:center;
  background:var(--pd2-bg);
  border-radius:9px;
  padding:8px 13px;
  font-family:var(--pd2-font-body);
  font-size:13px;
  font-weight:600;
  line-height:1.55;
  color:var(--pd2-ink);
  text-decoration:none;
  box-shadow:var(--pd2-shadow-sm);
}
.pd2-loc-canvas .pd2-loc-open:hover,
.pd2-loc-canvas .pd2-loc-open:focus{color:var(--pd2-ink);text-decoration:none}

/* ------------------------------------------------------ locality strip -- */
/* Only rendered when $localityGuideUrl exists (the Locality table is sparsely
   seeded). When it is absent the card ends at the canvas — the border-top
   lives on the strip itself, so nothing is left dangling. */
.pd2-loc-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-top:1px solid var(--pd2-line);
  background:var(--pd2-bg-soft);
  font-family:var(--pd2-font-body);
  font-size:13.5px;
  font-weight:400;
  line-height:1.55;
  color:var(--pd2-ink);
}
.pd2-loc-card .pd2-loc-strip a{
  color:var(--pd2-accent);
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
}
.pd2-loc-card .pd2-loc-strip a:hover{color:var(--pd2-accent-ink);text-decoration:none}

/* ---------------------------------------------------------- responsive -- */
/* Own breakpoints only. Matches the prototype's max-width:720px block, which
   restyles .sec and .sec-h and leaves the map card itself alone. */
@media (max-width:720px){
  .pd2-loc-sec{padding:22px 0}
  .pd2-loc-sec .pd2-loc-h{font-size:17px}
}