/* ============================================================
   MUWAN PALASSA — Location & Getting Here
   (page-templates/page-location.php).
   The instrument-voice page: the dark field chart (Leaflet on
   CARTO dark tiles, warm-graded like every photograph), the
   drive-time field notes, the ivory transfers interlude and the
   night-arrival passage. Shared chrome lives in main.css.
   ============================================================ */

/* ---------- hero (canopy dark — the tank country waits) ---------- */
.loc-hero{
  padding: calc(var(--header-h) + clamp(3.5rem, 9vw, 6.5rem)) 0 clamp(3.5rem, 9vw, 6rem);
  position:relative;
  background:
    radial-gradient(110% 60% at 74% 100%, rgba(192,137,78,.10), transparent 62%),
    linear-gradient(180deg, var(--night) 0%, var(--forest) 58%, var(--forest) 100%);
}
.loc-hero h1{ max-width:12em; }
.hero-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-line-inner{ display:block; will-change:transform; }
.loc-hero .hero-lede{ margin-top:var(--s-3); font-size:var(--fs-600); line-height:1.55; color:var(--khaki); max-width:34em; }
.loc-hero .hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:var(--s-4); }

/* ---------- the journey line: this page's material stops ---------- */
.journey path{ stroke: url(#locJourneyGrad); }

/* ============================================================
   THE FIELD CHART — Leaflet, dressed as one of our photographs
   ============================================================ */
.loc-map-sec{
  --sec-bg:
    radial-gradient(120% 55% at 22% 0%, rgba(192,137,78,.07), transparent 60%),
    linear-gradient(180deg, var(--forest) 0%, var(--forest) 100%);
}
.loc-map{
  position:relative;
  height:clamp(24rem, 58vh, 33rem);
  border-radius:var(--radius); /* soft documentary frame — no arch in the dark */
  overflow:hidden;
  background:var(--night);
  border:1px solid var(--line-dark);
  isolation:isolate; /* keep leaflet's z-indexes inside the frame */
}
.loc-map.leaflet-container{ font-family:var(--mono); background:var(--night); }

/* the map is a photograph: same warm cine grade over the dark tiles */
.loc-map .leaflet-tile-pane{
  filter: brightness(.92) sepia(.16) saturate(.82) contrast(1.05);
}

/* no-JS / pre-init fallback: a static chart card with an outbound link */
.loc-map-fallback{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; text-align:center; padding:2rem;
  background:
    radial-gradient(90% 70% at 50% 28%, rgba(192,137,78,.09), transparent 65%),
    var(--night);
}
.loc-map-fallback .stamp{ width:4.2rem; color:var(--bronze); opacity:.9; }
.loc-map-fallback .field-note{ color:var(--khaki); max-width:30em; }

/* zoom control, dressed for the dark register */
.loc-map .leaflet-bar{ border:1px solid rgba(243,235,219,.28); box-shadow:0 8px 24px rgba(18,22,15,.45); }
.loc-map .leaflet-bar a{
  background:rgba(18,22,15,.88); color:var(--ivory);
  border-bottom:1px solid var(--line-dark);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.loc-map .leaflet-bar a:hover, .loc-map .leaflet-bar a:focus{ background:rgba(36,64,44,.92); color:var(--bronze); }
.loc-map .leaflet-bar a.leaflet-disabled{ background:rgba(18,22,15,.6); color:var(--khaki); }

/* attribution stays legible but in the instrument voice */
.loc-map-sec .loc-map .leaflet-control-attribution{
  background:rgba(18,22,15,.78); color:var(--khaki);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.02em;
}
.loc-map-sec .loc-map .leaflet-control-attribution a{ color:var(--sand); }

/* the resort pin: bronze core + breathing halo (motion-gated) */
.loc-pin{ background:none; border:none; }
.loc-pin-core{
  position:absolute; left:50%; top:50%;
  width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:var(--bronze);
  box-shadow: 0 0 0 3px rgba(18,22,15,.55), 0 0 18px 5px rgba(192,137,78,.4);
}
.loc-pin-halo{
  position:absolute; left:50%; top:50%;
  width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  border:1.5px solid rgba(192,137,78,.6);
  opacity:.55;
}
@media (prefers-reduced-motion: no-preference){
  html.js:not(.rm) .loc-pin-halo{ animation: loc-halo 3.4s cubic-bezier(.22,1,.36,1) infinite; }
}
@keyframes loc-halo{
  0%{ transform:scale(.4); opacity:.9; }
  70%{ opacity:0; }
  100%{ transform:scale(1.12); opacity:0; }
}

/* park & city dots: fired clay, ivory-ringed */
.loc-poi{ background:none; border:none; }
.loc-poi-dot{
  position:absolute; left:50%; top:50%;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:var(--clay);
  box-shadow: 0 0 0 2px rgba(243,235,219,.35), 0 0 10px 2px rgba(18,22,15,.5);
}

/* labels & popups: the mono field voice
   (.loc-map-sec prefix out-specifies leaflet.css whatever the print order) */
.loc-map-sec .loc-tip{
  background:rgba(18,22,15,.9); color:rgba(243,235,219,.92);
  border:1px solid rgba(192,137,78,.45); border-radius:2px;
  font-family:var(--mono); font-size:.6rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .6rem; box-shadow:none; white-space:nowrap;
}
.loc-map-sec .leaflet-tooltip-top.loc-tip::before{ border-top-color:rgba(192,137,78,.45); }
.loc-map-sec .leaflet-tooltip-bottom.loc-tip::before{ border-bottom-color:rgba(192,137,78,.45); }
.loc-map-sec .loc-tip--resort{ color:var(--bronze); border-color:var(--bronze); font-weight:500; }
.loc-map .leaflet-popup-content-wrapper{
  background:rgba(18,22,15,.94); color:rgba(243,235,219,.92);
  border:1px solid rgba(192,137,78,.4); border-radius:.5rem; box-shadow:0 12px 32px rgba(18,22,15,.55);
}
.loc-map .leaflet-popup-content{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.7; margin:.8rem 1rem; }
.loc-map .leaflet-popup-content b{ color:var(--bronze); font-weight:500; display:block; }
.loc-map .leaflet-popup-tip{ background:rgba(18,22,15,.94); }
.loc-map a.leaflet-popup-close-button{ color:var(--khaki); }
.loc-map a.leaflet-popup-close-button:hover{ color:var(--ivory); }

/* pin metadata under the chart */
.loc-map-meta{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:.75rem 2rem; margin-top:1.1rem;
}
.loc-map-meta .field-note{ display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.7rem; }

/* ============================================================
   DRIVE-TIME FIELD NOTES (deeper forest)
   ============================================================ */
.loc-drives{
  --sec-bg:
    radial-gradient(120% 50% at 80% 0%, rgba(192,137,78,.06), transparent 60%),
    linear-gradient(180deg, var(--forest) 0%, #17211A 100%);
}
.drive-grid{ display:grid; gap:clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width:56em){ .drive-grid{ grid-template-columns:repeat(3, 1fr); } }
.drive-figure{
  border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3.1; background:var(--night);
}
.drive-figure img{ width:100%; height:112%; object-fit:cover; will-change:transform; }
.drive-card h3{ margin-top:1.25rem; color:var(--ivory); }
.drive-card p{ margin-top:.6rem; color:var(--khaki); font-size:.98rem; }
.drive-card .ph-slot{ white-space:normal; }

/* the smaller ledger — hand-ruled dashed rows */
.drive-ledger{
  margin-top:clamp(2.5rem, 6vw, 4rem);
  border-top:1.5px dashed var(--dash-clay);
  max-width:44rem;
}
.drive-ledger li{
  display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; align-items:baseline;
  padding:1.05rem 0; border-bottom:1.5px dashed var(--dash-clay);
}
.drive-ledger li strong{
  font-family:var(--serif); font-weight:400; font-size:1.1rem; color:var(--ivory);
  margin-right:auto;
}
.drive-ledger .ph-slot{ white-space:normal; }

/* ============================================================
   TRANSFERS (ivory interlude)
   ============================================================ */
.loc-transfers{ --sec-bg: var(--ivory); }
.transfer-list{ border-top:1.5px dashed var(--dash-light); max-width:52rem; }
.transfer-list li{
  padding:clamp(1.5rem, 3.5vw, 2.25rem) 0;
  border-bottom:1.5px dashed var(--dash-light);
  display:grid; gap:.5rem 2.5rem;
}
@media (min-width:56em){
  .transfer-list li{ grid-template-columns:15rem 1fr; align-items:start; }
  .transfer-list li .ph-slot{ grid-column:2; justify-self:start; }
}
.transfer-list h3{ font-family:var(--serif); color:var(--clay-deep); font-size:var(--fs-600); }
.transfer-list p{ color:var(--ink); }
.transfer-list .ph-slot{ white-space:normal; margin-top:.35rem; justify-self:start; }
.loc-transfers-note{ display:block; margin-top:var(--s-4); color:var(--clay-deep); }

/* ============================================================
   NIGHT ARRIVAL (night tank, one warm radial)
   ============================================================ */
.loc-arrival{
  --sec-bg:
    radial-gradient(110% 60% at 28% 100%, rgba(192,137,78,.08), transparent 62%),
    linear-gradient(180deg, #17211A 0%, var(--night) 40%, var(--night) 100%);
}
.loc-arrival-inner{ max-width:46rem; }
.loc-arrival .stamp{ margin-bottom:var(--s-3); }
.loc-arrival .field-note{ color:var(--bronze); }

/* ---------- small screens ---------- */
@media (max-width:44em){
  .loc-map{ height:clamp(20rem, 68vw, 26rem); }
  .drive-figure{ aspect-ratio:4/3; }
}