/* Casa Luna 2026 — Pass 11
   Real Insider Guide integration: the map now drives an editorial detail panel
   with photos, drive time, parking, booking links, and Casa Luna notes. */

/* Keep hero/readability improvements consistent across Explore */
body.explore-page .ph-title,
body.explore-page .ph-title em{ text-shadow:0 8px 34px rgba(0,0,0,.62); }
body.explore-page .ph-title{ color:#fff!important; }
body.explore-page .ph-title em{ color:var(--cl-gold-soft)!important; }
body.explore-page .ph-bg::after{ background:linear-gradient(90deg,rgba(0,0,0,.60),rgba(0,0,0,.38) 45%,rgba(0,0,0,.48))!important; }
body.explore-page .section-label,
body.explore-page .eyebrow{ color:var(--cl-gold-soft)!important; text-shadow:0 3px 14px rgba(0,0,0,.38); }

/* Interactive guide layout */
.guide-map-grid--experience{
  display:grid!important;
  grid-template-columns:minmax(330px,.44fr) minmax(520px,.56fr)!important;
  gap:28px!important;
  align-items:stretch!important;
}
.guide-detail{
  position:relative;
  background:linear-gradient(180deg,rgba(247,241,230,.98),rgba(232,223,207,.96));
  border:1px solid rgba(202,163,99,.28);
  box-shadow:0 28px 80px rgba(0,0,0,.22);
  color:var(--cl-ink);
  min-height:620px;
  overflow:hidden;
}
.guide-detail__kicker{
  position:absolute;
  z-index:2;
  top:18px;
  left:18px;
  background:rgba(17,25,20,.78);
  color:#fff;
  padding:8px 12px;
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.guide-detail__media{ height:245px; overflow:hidden; background:#111914; }
.guide-detail__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .22s ease,transform .7s ease; }
.guide-detail.is-changing .guide-detail__media img{ opacity:.42; transform:scale(1.025); }
.guide-detail__body{ padding:30px 32px 34px; }
.guide-detail__meta{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cl-gold);
  margin-bottom:14px;
}
.guide-detail h3{
  font-family:var(--font-display);
  font-size:clamp(34px,3.6vw,52px);
  line-height:.94;
  font-weight:400;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--cl-ink);
  margin:0 0 16px;
}
.guide-detail p{
  font-family:var(--font-ui);
  color:rgba(24,32,24,.76);
  line-height:1.78;
  font-size:14px;
  margin:0 0 20px;
}
.guide-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(202,163,99,.22);
  border:1px solid rgba(202,163,99,.25);
  margin:22px 0;
}
.guide-facts div{ background:rgba(247,241,230,.86); padding:15px 14px; }
.guide-facts dt{
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.16em;
  font-weight:800;
  text-transform:uppercase;
  color:var(--cl-gold);
  margin-bottom:6px;
}
.guide-facts dd{
  font-family:var(--font-ui);
  margin:0;
  color:var(--cl-ink);
  font-size:13px;
  line-height:1.38;
}
.guide-recs{ border-top:1px solid rgba(202,163,99,.28); padding-top:18px; }
.guide-recs h4{
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cl-ink);
  margin:0 0 10px;
}
.guide-recs ul{ margin:0; padding-left:18px; }
.guide-recs li{
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.62;
  color:rgba(24,32,24,.74);
  margin:0 0 8px;
}
.guide-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.guide-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:12px 17px;
  border:1px solid rgba(24,32,24,.28);
  color:var(--cl-ink);
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.guide-action:hover{ transform:translateY(-1px); border-color:var(--cl-gold); color:var(--cl-gold); }
.guide-action--primary{ background:var(--cl-gold); border-color:var(--cl-gold); color:#fff; }
.guide-action--primary:hover{ background:var(--cl-gold-soft); border-color:var(--cl-gold-soft); color:var(--cl-night); }
.map-instruction{
  font-family:var(--font-ui);
  font-size:12px;
  line-height:1.65;
  color:rgba(255,255,255,.64);
  padding:15px 2px 4px;
}
.vmap-chips--editorial{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:13px!important;
}
.vmap-chips--editorial .vmap-chip{
  border-radius:0!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(223,193,132,.24)!important;
  color:rgba(255,255,255,.88)!important;
  font-family:var(--font-ui)!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  padding:10px 12px!important;
}
.vmap-chips--editorial .vmap-chip:hover,
.vmap-chips--editorial .vmap-chip:focus{
  background:rgba(202,163,99,.20)!important;
  border-color:rgba(223,193,132,.58)!important;
  color:#fff!important;
}
.vmap-chips--editorial .vmap-chip-dot{ width:8px!important; height:8px!important; }
/* Make the Mapbox search and Valley View controls stop colliding */
.vmap-wrap .mapboxgl-ctrl-geocoder{
  width:min(330px,calc(100% - 128px))!important;
  max-width:min(330px,calc(100% - 128px))!important;
}
.vmap-reset{
  top:14px!important;
  left:auto!important;
  right:58px!important;
  height:36px!important;
  padding:0 14px!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
  font-weight:800!important;
}
.vmap-card{
  left:18px!important;
  right:auto!important;
  bottom:18px!important;
  max-width:360px!important;
}
.vmap-card h4{ font-family:var(--font-display)!important; font-size:30px!important; text-transform:uppercase!important; letter-spacing:.04em!important; }
.vmap-card p{ font-size:13px!important; line-height:1.6!important; }

@media(max-width:1100px){
  .guide-map-grid--experience{ grid-template-columns:1fr!important; }
  .guide-detail{ min-height:auto; }
}
@media(max-width:700px){
  .guide-detail__media{ height:220px; }
  .guide-detail__body{ padding:24px 22px 28px; }
  .guide-facts{ grid-template-columns:1fr; }
  .vmap-wrap .mapboxgl-ctrl-geocoder{ width:calc(100% - 24px)!important; max-width:calc(100% - 24px)!important; }
  .vmap-reset{ top:62px!important; right:auto!important; left:12px!important; }
  .vmap-card{ left:12px!important; right:12px!important; bottom:12px!important; max-width:none!important; }
}