/* ============================================================
   CGC MAP — shared Leaflet map component styles
   One stylesheet for all three maps (listings / communities / schools).
   Pair with cgc-map.js. Modes are driven by JS config:
     labelMode:       'name' | 'price' | 'none'
     markerColorMode: 'zone' | 'curriculum' | 'listing' | 'single'
   Colours fall back gracefully when a page :root lacks the token.
============================================================ */

/* Contain Leaflet's z-index panes so site nav dropdowns render above the map. */
.leaflet-container { isolation: isolate; }

/* ── Always-visible NAME pills (Airbnb pattern) ── */
.cgc-name-marker { width: auto !important; height: auto !important; background: none !important; border: 0 !important; }
.cgc-name-pin {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(16,16,16,0.96);
  color: var(--mc-cream, #F5EDE0);
  padding: 5px 11px 5px 9px; border-radius: 999px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
  border: 1px solid rgba(245,237,224,0.20);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.7);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.cgc-name-pin .zdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pin-zone, var(--mc-red, #C41E3A)); flex: none;
  box-shadow: 0 0 0 2px rgba(15,15,15,0.6);
}
/* diamond dot variant (schools / any categorical marker) */
.cgc-name-pin.is-diamond .zdot { border-radius: 2px; transform: rotate(45deg); }
.cgc-name-pin:hover, .cgc-name-pin.is-hot {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: var(--pin-zone, var(--mc-red, #C41E3A)); color: #fff;
  box-shadow: 0 10px 26px -6px rgba(0,0,0,0.6);
  z-index: 1000;
}
.cgc-name-pin.is-active {
  background: var(--pin-zone, var(--mc-red, #C41E3A)); color: #fff; border-color: var(--pin-zone, var(--mc-red, #C41E3A));
  box-shadow: 0 12px 30px -6px rgba(0,0,0,0.6);
}
.cgc-name-pin.is-active .zdot { background: #fff; box-shadow: none; }

/* zone colour keys (communities) — values come from the page :root */
.cgc-name-pin.zone-prime    { --pin-zone: var(--zone-prime, #C41E3A); }
.cgc-name-pin.zone-downtown { --pin-zone: var(--zone-downtown, #DD6F7C); }
.cgc-name-pin.zone-family   { --pin-zone: var(--zone-family, #7FA89E); }
.cgc-name-pin.zone-mid      { --pin-zone: var(--zone-mid, #8493A8); }
.cgc-name-pin.zone-emerging { --pin-zone: var(--zone-emerging, #C2BAAD); }
.cgc-name-pin.school        { --pin-zone: var(--zone-school, var(--gold, #C8A45A)); }

/* curriculum colour keys (schools) — British gold · American red · IB blue */
.cgc-name-pin.cur-british   { --pin-zone: #C8A45A; }
.cgc-name-pin.cur-american  { --pin-zone: #C41E3A; }
.cgc-name-pin.cur-ib        { --pin-zone: #5BA3C2; }

/* ── Price pills (listings) ── */
.cgc-price-marker { width: auto !important; height: auto !important; background: none !important; border: 0 !important; }
.cgc-pin {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(16,16,16,0.96);
  color: var(--mc-cream, #F5EDE0);
  padding: 6px 11px; border-radius: 999px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  border: 1px solid rgba(245,237,224,0.22);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.7);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.cgc-pin::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mc-red, #C41E3A); flex: none;
  box-shadow: 0 0 0 2px rgba(15,15,15,0.6);
}
.cgc-pin.rent::before { background: var(--mc-gold, #C8A45A); }
.cgc-pin:hover, .cgc-pin.is-hot {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: var(--mc-red, #C41E3A); color: #fff;
  box-shadow: 0 10px 26px -6px rgba(196,30,58,0.5);
  z-index: 1000;
}
.cgc-pin.is-active {
  background: var(--mc-red, #C41E3A); color: #fff; border-color: var(--mc-red, #C41E3A);
  box-shadow: 0 12px 30px -6px rgba(196,30,58,0.6);
}
.cgc-pin.is-active::before { background: #fff; box-shadow: none; }
.cgc-pin.rent.is-active { background: var(--mc-gold, #C8A45A); border-color: var(--mc-gold, #C8A45A); box-shadow: 0 12px 30px -6px rgba(200,164,90,0.55); }
.cgc-pin.visited { opacity: 0.6; }
.cgc-pin.visited:hover, .cgc-pin.visited.is-active { opacity: 1; }

/* ── Cluster bubbles (brand accent + count) ── */
.cgc-cluster { background: none; }
.cgc-cluster > div {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mc-red, #C41E3A); color: #fff;
  font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 14px;
  border: 2px solid rgba(245,237,224,0.85);
  box-shadow: 0 6px 20px -4px rgba(196,30,58,0.55), 0 0 0 6px rgba(196,30,58,0.16);
  transition: transform 0.18s ease;
}
.cgc-cluster.lg > div { font-size: 16px; }
.cgc-cluster:hover > div { transform: scale(1.08); }

/* ── Gesture hint ("Use ctrl + scroll", "Use two fingers") ── */
.cgc-map-hint {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 1100; pointer-events: none;
  background: rgba(15,15,15,0.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--mc-cream, #F5EDE0); border: 1px solid rgba(245,237,224,0.18);
  padding: 10px 18px; border-radius: 999px;
  font-family: 'Instrument Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  white-space: nowrap; opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.6);
}
.cgc-map-hint.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ── Brief popup: dark frosted card (shared across all three maps) ── */
.leaflet-popup.cgc-pop .leaflet-popup-content-wrapper {
  background: rgba(15,15,15,0.96) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  color: var(--mc-cream, #F5EDE0) !important;
  border: 1px solid rgba(245,237,224,0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 28px 60px -18px rgba(0,0,0,0.78) !important;
  padding: 0 !important; overflow: hidden;
}
.leaflet-popup.cgc-pop .leaflet-popup-content { margin: 0 !important; width: 240px !important; }
.leaflet-popup.cgc-pop .leaflet-popup-tip { background: rgba(15,15,15,0.96) !important; box-shadow: none !important; }
.leaflet-popup.cgc-pop a.leaflet-popup-close-button {
  color: #fff !important; top: 9px !important; right: 9px !important;
  width: 26px !important; height: 26px !important;
  font: 700 16px/24px 'Instrument Sans', sans-serif !important; text-align: center;
  background: rgba(0,0,0,0.45); border-radius: 50%;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.2s ease;
}
.leaflet-popup.cgc-pop a.leaflet-popup-close-button:hover { background: var(--mc-red, #C41E3A) !important; }
.cgc-brief { padding: 0; }
.cgc-brief-img { width: 100%; height: 130px; object-fit: cover; display: block; background: #1a1714; }
.cgc-brief-text { padding: 13px 15px 15px; }
.cgc-map-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 9500; }
.cgc-map-backdrop.show { opacity: 1; pointer-events: auto; }
.cgc-brief-eyebrow {
  font-family: 'Instrument Sans', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--pin-zone, var(--mc-red, #C41E3A)); margin-bottom: 6px;
}
.cgc-brief-eyebrow.zone-prime{--pin-zone:var(--zone-prime,#C41E3A)} .cgc-brief-eyebrow.zone-downtown{--pin-zone:var(--zone-downtown,#DD6F7C)}
.cgc-brief-eyebrow.zone-family{--pin-zone:var(--zone-family,#7FA89E)} .cgc-brief-eyebrow.zone-mid{--pin-zone:var(--zone-mid,#8493A8)}
.cgc-brief-eyebrow.zone-emerging{--pin-zone:var(--zone-emerging,#C2BAAD)} .cgc-brief-eyebrow.school{--pin-zone:var(--zone-school,var(--gold,#C8A45A))}
.cgc-brief-eyebrow.cur-british{--pin-zone:#C8A45A} .cgc-brief-eyebrow.cur-american{--pin-zone:#C41E3A} .cgc-brief-eyebrow.cur-ib{--pin-zone:#5BA3C2}
.cgc-brief-title { font-family: 'Instrument Sans', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--mc-cream, #F5EDE0); margin: 0 0 7px; line-height: 1.2; }
.cgc-brief-body { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 13px; line-height: 1.5; color: rgba(245,237,224,0.7); margin: 0 0 12px; }
.leaflet-popup.cgc-pop .cgc-brief-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mc-red, #C41E3A); color: #fff !important; text-decoration: none;
  padding: 10px 16px; border: 0; border-bottom: 0; border-radius: 999px;
  font-family: 'Instrument Sans', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.leaflet-popup.cgc-pop .cgc-brief-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
@media (max-width: 767px) {
  .leaflet-popup.cgc-pop {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    margin: 0 !important; transform: none !important; width: 100% !important; z-index: 9600;
  }
  .leaflet-popup.cgc-pop .leaflet-popup-content-wrapper { border-radius: 22px 22px 0 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box; }
  .leaflet-popup.cgc-pop .leaflet-popup-content { width: 100% !important; box-sizing: border-box; }
  .leaflet-popup.cgc-pop .leaflet-popup-tip-container { display: none !important; }
  .cgc-brief-img { height: 160px; }
}

/* GDPR map consent gate (EU/UK only) — shown over the map until the visitor
   clicks "Show map". Loaded by cgc-tiles.js. */
.map-consent { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0a0a0a; color: #e8e2d6; text-align: center; padding: 24px; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 18px 18px; z-index: 500; }
.map-consent-inner { max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.map-consent svg { color: #C41E3A; opacity: 0.9; }
.map-consent-btn { font-family: 'Instrument Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #0a0a0a; background: #e8e2d6; border: 0; border-radius: 999px; padding: 10px 26px; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease; }
.map-consent-btn:hover { background: #fff; transform: translateY(-1px); }
.map-consent-btn:focus-visible { outline: 2px solid #C41E3A; outline-offset: 2px; }
.map-consent-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: rgba(232,226,214,0.6); }