/* ---- map v3 sizing: fixed box so viewBox zoom actually zooms ---- */
.imap-visual{padding:24px!important}
#map2 .imap-visual svg,
.imap-visual svg{width:100%!important;max-width:560px!important;height:auto!important;
  aspect-ratio:500/620;overflow:hidden!important;display:block;
  border-radius:14px;background:radial-gradient(120% 90% at 50% 30%,rgba(30,82,64,.35),rgba(8,26,19,.2))}
#map2 svg{will-change:auto}

/* ============================================================
   Siddiq Akbar Foundation — interactive map v2
   Per-project pins, category filter, search, richer panel.
   Layered on top of the existing .imap-* styles.
   ============================================================ */

/* toolbar above the map */
.map2-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;padding:20px clamp(16px,4vw,40px);
  background:var(--green-900);border-bottom:1px solid rgba(198,161,79,.25)}
.map2-search{position:relative;flex:1;min-width:200px;max-width:340px}
.map2-search input{width:100%;background:rgba(6,22,16,.55);
  border:1px solid rgba(198,161,79,.3);border-radius:99px;
  padding:11px 16px 11px 40px;color:var(--ivory);font-family:var(--sans);font-size:14.5px}
.map2-search input::placeholder{color:#7fa693}
.map2-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--gold-soft)}
.map2-filters{display:flex;flex-wrap:wrap;gap:7px}
.map2-chip{background:rgba(6,22,16,.5);border:1px solid rgba(198,161,79,.28);
  color:#C7D8CC;font-family:var(--sans);font-size:13px;font-weight:600;
  padding:7px 14px;border-radius:99px;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px;transition:all .2s ease}
.map2-chip i{width:9px;height:9px;border-radius:50%;flex:none}
.map2-chip:hover{border-color:var(--gold)}
.map2-chip.active{background:var(--gold);color:var(--green-950);border-color:var(--gold)}
.map2-chip.active i{box-shadow:0 0 0 2px rgba(12,38,30,.35)}

/* per-project pins on the SVG */
.pin{cursor:pointer;transition:opacity .25s ease}
.pin .pin-dot{stroke:#0C261E;stroke-width:1.1;transition:transform .25s cubic-bezier(.2,1.6,.5,1)}
.pin .pin-hit{fill:transparent}
.pin:hover .pin-dot,.pin.active .pin-dot{transform:scale(1.9);transform-box:fill-box;transform-origin:center}
.pin.dim{opacity:.12;pointer-events:none}
.pin.active .pin-dot{stroke:#fff;stroke-width:1.6}
.district-hub{pointer-events:none}
.district-hub circle{fill:none;stroke:rgba(198,161,79,.35);stroke-dasharray:3 4}
.district-hub text{fill:var(--gold-soft);font-family:var(--serif);font-size:13px;
  text-anchor:middle;letter-spacing:.5px}

/* floating tooltip */
.map2-tip{position:absolute;pointer-events:none;z-index:20;
  background:var(--green-950);border:1px solid rgba(198,161,79,.45);
  border-radius:10px;padding:9px 13px;max-width:230px;opacity:0;
  transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7)}
.map2-tip.show{opacity:1;transform:translateY(0)}
.map2-tip .tt-type{font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:2px}
.map2-tip .tt-name{font-family:var(--serif);color:#fff;font-size:15px;line-height:1.25}
.map2-tip .tt-addr{font-size:12px;color:#9FC3AE;margin-top:2px}

/* summary stats strip under the toolbar */
.map2-stats{display:flex;gap:0;background:var(--green-950);
  border-bottom:1px solid rgba(198,161,79,.2)}
.map2-stats div{flex:1;text-align:center;padding:16px 8px;
  border-right:1px solid rgba(198,161,79,.14)}
.map2-stats div:last-child{border-right:none}
.map2-stats b{display:block;font-family:var(--serif);font-size:26px;color:var(--gold-soft);
  line-height:1}
.map2-stats span{font-size:11.5px;color:#9FC3AE;letter-spacing:.4px;text-transform:uppercase}

/* project cards in the side panel (enhanced) */
.ip-proj{cursor:default}
.ip-proj.clickable{cursor:pointer}
.ip-proj .ipp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ip-proj .ipp-go{flex:none;color:var(--gold-soft);font-size:13px;font-weight:700;
  opacity:0;transform:translateX(-4px);transition:all .2s ease;white-space:nowrap}
.ip-proj.clickable:hover .ipp-go{opacity:1;transform:none}
.ip-featured-flag{display:inline-block;background:var(--gold);color:var(--green-950);
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  border-radius:4px;padding:2px 7px;margin-left:6px}
.ip-empty{color:#9FC3AE;font-size:14.5px;padding:20px 4px;text-align:center}

/* "showing all" panel default */
.ip-all-hint{color:#9FC3AE;font-size:13px;margin-bottom:14px;
  display:flex;align-items:center;gap:8px}
.ip-all-hint b{color:var(--gold-soft)}

@media(max-width:820px){
  .map2-toolbar{flex-direction:column;align-items:stretch}
  .map2-search{max-width:none}
  .map2-stats b{font-size:22px}
}

/* ============================================================
   Map v3 — district zoom + project image cards
   ============================================================ */
.imap-visual svg{transition:none}
.bd-outline{transition:fill .4s ease}
.imap-visual.zoomed .bd-outline{fill:rgba(24,68,47,.35)}

/* district clickable regions (hub click targets) */
.district-hub{cursor:pointer;pointer-events:all}
.district-hub .hub-hit{fill:rgba(198,161,79,.001);transition:fill .25s ease}
.district-hub:hover .hub-hit{fill:rgba(198,161,79,.06)}
.district-hub.dimmed{opacity:.25;pointer-events:none}
.district-hub.hidden{opacity:0;pointer-events:none}
.district-hub .hub-dot{fill:var(--gold);stroke:#0C261E;stroke-width:1.4;
  transition:transform .3s cubic-bezier(.2,1.6,.5,1);transform-box:fill-box;transform-origin:center}
.district-hub:hover .hub-dot{transform:scale(1.25)}
.district-hub .hub-halo{fill:var(--gold);opacity:.3;transform-box:fill-box;transform-origin:center;
  animation:mpulse 2.8s ease-out infinite}
.district-hub .hub-count{fill:#0C261E;font-family:var(--sans);font-size:8px;font-weight:800;
  text-anchor:middle;dominant-baseline:central;pointer-events:none}
.district-hub .hub-name{fill:var(--ivory);font-family:var(--serif);font-size:11px;
  text-anchor:middle;pointer-events:none;transition:opacity .3s ease;opacity:.9;
  paint-order:stroke;stroke:rgba(6,22,16,.7);stroke-width:3px}

/* zoom controls */
.map2-zoomctl{position:absolute;top:16px;left:16px;z-index:15;display:flex;gap:8px}
.map2-zoomctl button{background:rgba(6,22,16,.8);border:1px solid rgba(198,161,79,.4);
  color:var(--gold-soft);font-family:var(--sans);font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  backdrop-filter:blur(6px);transition:all .2s ease}
.map2-zoomctl button:hover{border-color:var(--gold);color:#fff}
.map2-zoomctl .zc-back{opacity:0;transform:translateX(-8px);pointer-events:none;transition:all .3s ease}
.map2-visual.zoomed .zc-back,.imap-visual.zoomed .zc-back{opacity:1;transform:none;pointer-events:all}

/* project image card (shown on hover/click) */
.proj-card{position:absolute;z-index:25;width:230px;background:var(--green-950);
  border:1px solid rgba(198,161,79,.45);border-radius:14px;overflow:hidden;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.75);opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.proj-card.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.proj-card .pc-img{width:100%;height:130px;object-fit:cover;display:block;background:#0C261E}
.proj-card .pc-body{padding:13px 15px 15px}
.proj-card .pc-type{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:4px}
.proj-card .pc-name{font-family:var(--serif);color:#fff;font-size:16px;line-height:1.25;margin-bottom:4px}
.proj-card .pc-addr{font-size:12.5px;color:#9FC3AE;margin-bottom:10px}
.proj-card .pc-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:var(--gold-soft);text-decoration:none}
.proj-card .pc-link:hover{color:#fff}
.proj-card .pc-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:rgba(6,22,16,.7);border:1px solid rgba(198,161,79,.4);color:var(--ivory);
  cursor:pointer;font-size:14px;line-height:1;display:none}
.imap-visual.zoomed .proj-card .pc-close{display:block}

/* project pins visibility by zoom state */
.pin{opacity:1;pointer-events:all;transition:opacity .3s ease}
.pin .pin-dot{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.pin.dim{opacity:.14!important;pointer-events:none}
/* when zoomed into a district, points NOT in that district fade back */
.imap-visual.zoomed .pin.out-view{opacity:.16;pointer-events:none}
.imap-visual.zoomed .pin.in-view .pin-dot{filter:drop-shadow(0 2px 6px rgba(198,161,79,.5))}

/* hint chip */
.map2-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:15;
  background:rgba(6,22,16,.82);border:1px solid rgba(198,161,79,.35);color:#C7D8CC;
  font-size:12.5px;padding:7px 16px;border-radius:99px;backdrop-filter:blur(6px);
  display:inline-flex;align-items:center;gap:8px;transition:opacity .3s ease}
.map2-hint b{color:var(--gold-soft)}

/* ============================================================
   MAP v4 — polish: sticky map, no boxy focus, richer look
   ============================================================ */

/* 1) Kill the boxy focus outline on SVG groups; use a soft ring on
      the dot itself for keyboard users instead. */
.district-hub:focus,.district-hub:focus-visible,
.pin:focus,.pin:focus-visible,
#map2 svg g:focus,#map2 svg g:focus-visible{outline:none!important}
.district-hub:focus-visible .hub-dot,
.pin:focus-visible .pin-dot{stroke:var(--gold-soft);stroke-width:1.8px;
  filter:drop-shadow(0 0 7px rgba(227,206,154,.85))}

/* 2) Sticky map: the visual pane stays in view while the list scrolls.
      Grid becomes: sticky map column | scrolling list column. */
@media(min-width:981px){
  .imap-stage{overflow:visible!important}
  .imap-grid{align-items:start;overflow:visible}
  /* map is natural height and sticks to the top while the list scrolls */
  .imap-visual{position:-webkit-sticky;position:sticky;top:84px;
    align-self:start;height:auto}
  .imap-panel{max-height:none;overflow:visible}
}
/* The stage, map column and panel all share ONE cohesive background so
   there is never a raw "black shade" where a column runs short. */
.imap-stage{background:
  radial-gradient(70% 60% at 28% 22%,rgba(30,82,64,.5),transparent 60%),
  linear-gradient(180deg,#0E2A20,#0A2118)}
.imap-panel{background:transparent!important;border-left:1px solid rgba(198,161,79,.16)!important}
.imap-grid{background:linear-gradient(90deg,transparent 0 58%,rgba(10,33,24,.55) 58% 100%)}

/* 3) A more beautiful stage: layered radial glow, vignette, subtle grid */
.imap-stage{background:
  radial-gradient(90% 70% at 30% 20%,rgba(30,82,64,.55),transparent 60%),
  radial-gradient(80% 80% at 85% 90%,rgba(198,161,79,.10),transparent 55%),
  linear-gradient(180deg,#0C261E,#081A13)}
.imap-visual{padding:28px!important}
#map2Visual svg,.imap-visual svg{
  background:
    radial-gradient(120% 100% at 50% 25%,rgba(30,82,64,.5),rgba(8,26,19,.15) 70%)!important;
  border:1px solid rgba(198,161,79,.14);
  border-radius:18px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 60px -30px rgba(0,0,0,.8);
}

/* 4) Nicer country outline: soft gold with a faint inner glow */
.imap-visual .bd-outline{fill:rgba(20,60,44,.5);stroke:url(#mapStroke);stroke-width:1.3;
  filter:drop-shadow(0 0 10px rgba(198,161,79,.15))}

/* 5) District hub: refined dot with a ring, gentler halo */
.district-hub .hub-dot{fill:url(#hubGrad);stroke:#0C261E;stroke-width:1.6}
.district-hub .hub-halo{fill:var(--gold);opacity:.22}
.district-hub .hub-count{fill:#221a08;font-weight:800}
.district-hub .hub-name{font-size:11px;fill:#F2E6C6;opacity:.95;
  paint-order:stroke;stroke:rgba(6,22,16,.85);stroke-width:3.5px}
.district-hub:hover .hub-dot,.district-hub.active .hub-dot{transform:scale(1.18);
  transform-box:fill-box;transform-origin:center}

/* 6) Project points: crisp, with a subtle outer ring on hover */
.pin .pin-dot{stroke:rgba(8,26,19,.9);stroke-width:1.2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.pin:hover .pin-dot,.pin.active .pin-dot{transform:scale(2);
  transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 8px rgba(227,206,154,.8))}

/* 7) Prettier hint chip + back button */
.map2-hint{background:rgba(8,26,19,.85);border-color:rgba(198,161,79,.4);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.7)}
.map2-zoomctl .zc-back{background:rgba(8,26,19,.9);box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}

/* 8) Project image card: a touch more refined */
.proj-card{border-radius:16px;box-shadow:0 26px 60px -20px rgba(0,0,0,.8)}
.proj-card .pc-img{height:120px}

@media(max-width:980px){
  .imap-visual{position:static;height:auto}
}