/* A map-led fourth scene. Geographic paths are shared with the original map. */
.v4-body .v4-home .v4-home-impact {
  --v4-map-gutter:clamp(20px,3vw,64px); --v4-map-title-inset:24px;
  display:grid!important; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto; align-items:stretch; gap:12px;
  width:100%; max-width:none; margin:0; overflow:clip; position:relative;
  padding:calc(var(--v4-header-height,72px) + 18px) var(--v4-map-gutter) 24px;
  background:radial-gradient(ellipse at 8% 18%,#fce3dbb3,transparent 55%),radial-gradient(ellipse at 92% 80%,#fff0cca6,transparent 52%),linear-gradient(150deg,#fffaf7,#fff 54%,#fff8f2);
}
.v4-body .v4-home-impact>.v4-home-map {
  flex:1; display:flex; flex-direction:column; gap:10px; position:relative;
  width:100%; max-width:none; min-height:0; margin:0; grid-column:1/-1;
}
.v4-body .v4-home-impact>.v4-impact-side { flex:none; width:100%; max-width:none; margin:0; padding:0; display:block; grid-column:1/-1; }
.v4-body .v4-home-impact .v4-impact-metrics { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 32px; margin:0; font-family:var(--v4-ui-font); }
.v4-body .v4-home-impact .v4-impact-metrics p { font-size:var(--module-body-size,13px); color:#88706f; }
.v4-body .v4-home-impact .v4-impact-metrics strong { font-size:23px; font-weight:600; margin-left:5px; }
/* Share the map's rows so totals sit at the viewport's lower-left edge,
   immediately above the legend, while retaining editable module wrappers. */
.v4-body .v4-home .v4-home-impact>.v4-home-map { display:grid; grid-template-rows:subgrid; grid-row:1/-1; }
.v4-body .v4-home .v4-home-impact .v4-map-viewport { grid-row:1; height:auto; }
.v4-body .v4-home-impact .v4-map-toolbar { grid-row:2; }
.v4-body .v4-home-impact .v4-map-detail { grid-row:3; }
.v4-body .v4-home .v4-home-impact>.v4-impact-side { grid-row:1; align-self:end; z-index:2; width:max-content; max-width:280px; margin:0 0 12px 4px; }
.v4-body .v4-home .v4-home-impact .v4-impact-metrics { flex-direction:column; align-items:flex-start; justify-content:flex-end; flex-wrap:nowrap; gap:8px; margin:0; }
.v4-body .v4-home .v4-home-impact .v4-impact-metrics p { line-height:1.5; text-align:left; }
.v4-map-heading { position:absolute; z-index:2; top:0; left:calc(-1 * var(--v4-map-gutter)); max-width:calc(45% + var(--v4-map-gutter)); pointer-events:none; }
.v4-body .v4-map-heading h2 { position:relative; display:inline-block; padding:12px var(--v4-map-title-inset); padding-left:calc(var(--v4-map-gutter) + var(--v4-map-title-inset)); border-radius:0 48px 48px 0; background:var(--red); color:#fff; font:400 var(--module-title-size,clamp(20px,1.8vw,30px))/1.4 var(--v4-font-family); letter-spacing:1px; text-wrap:balance; }
.v4-map-heading h2::before { content:""; position:absolute; inset:0 100% 0 auto; width:24px; background:inherit; }
.v4-map-heading p { margin:12px 0 0 calc(var(--v4-map-gutter) + 4px); color:#ab7977; font-size:13px; letter-spacing:1px; }
.v4-map-viewport { flex:1; min-height:0; height:72svh; overflow:auto; overscroll-behavior:auto; scrollbar-width:thin; scrollbar-color:#e4aca5 transparent; }
.is-zoomed>.v4-map-viewport { overscroll-behavior:contain; }
.v4-map-canvas { width:calc(100% * var(--v4-map-zoom,1)); height:calc(100% * var(--v4-map-zoom,1)); }
.v4-body .v4-home-impact .v4-map-canvas>.v4-china-map { display:block; width:100%; height:100%; max-width:none; }
.v4-map-toolbar { flex:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 4px; }
.v4-map-legend { display:flex; gap:8px; align-items:center; color:#a17b78; font-size:12px; }
.v4-map-legend i { flex-shrink:0; width:80px; height:8px; border-radius:4px; background:linear-gradient(90deg,#fce7df,#f6c8b8 33%,#eda790 67%,#e68e7e); }
.v4-map-controls { display:flex; gap:6px; align-items:center; }
.v4-map-controls button { font:13px/1.4 var(--v4-ui-font); min-height:36px; border:1px solid #eedad7; background:#fffaf8; color:#a73945; border-radius:7px; }
.v4-map-controls button { min-width:36px; padding:6px 10px; }
.v4-map-controls button:hover:not(:disabled) { background:#fce6e1; }
.v4-map-controls button:disabled { opacity:.35; cursor:default; }
.v4-body .v4-home-impact .v4-map-detail { flex:none; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; padding:12px 20px; border:1px solid #efd8ce; border-radius:16px; background:linear-gradient(115deg,#fffdfbf2,#ffede1d9); text-align:left; font:13px/1.5 var(--v4-ui-font); color:#9c7165; overflow-wrap:anywhere; }
.v4-map-detail-region { display:grid; gap:4px; min-width:0; }
.v4-map-detail-region>strong { color:#733c38; font-size:20px; font-weight:600; }
.v4-map-detail-value { display:flex; flex:none; align-items:baseline; gap:6px; color:#b64e43; }
.v4-map-detail-value>strong { font-size:32px; line-height:1.1; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.v4-body .v4-home-impact .v4-map-detail.is-selected { border-color:#e7b9a7; background:linear-gradient(115deg,#fffdfb,#fce2d3); }

/* Sequential beneficiary count bands; unknown regions remain neutral. */
.v4-body .v4-home-map .v4-china-map>path[data-province] { fill:#f4c5bf; stroke:#df8c84; stroke-width:.85; vector-effect:non-scaling-stroke; transition:fill .2s,stroke .2s; }
.v4-body .v4-home-map .v4-china-map>path[data-support-level="unknown"] { fill:#f4efed; }
.v4-body .v4-home-map .v4-china-map>path[data-support-level="0"] { fill:#fff2ed; }
.v4-body .v4-home-map .v4-china-map>path[data-support-level="1"] { fill:#fce7df; }
.v4-body .v4-home-map .v4-china-map>path[data-support-level="2"] { fill:#f6c8b8; }
.v4-body .v4-home-map .v4-china-map>path[data-support-level="3"] { fill:#eda790; }
.v4-body .v4-home-map .v4-china-map>path[data-support-level="4"] { fill:#e68e7e; }
.v4-body .v4-home-map .v4-china-map>path[data-province]:is(:hover,:focus-visible,.active) { stroke:var(--red); stroke-width:1.3; }
.v4-body .v4-home-map .v4-china-map>.v4-map-active-outline { fill:none; stroke:var(--red); stroke-width:1.3; stroke-linejoin:round; vector-effect:non-scaling-stroke; pointer-events:none; }
.v4-body .v4-home-map .v4-map-province-name { font-family:var(--v4-ui-font); font-size:12px; font-weight:500; fill:#702631; stroke:#fff; stroke-width:1.2; stroke-linejoin:round; paint-order:stroke fill; }
.v4-map-province-count { font-size:10px; font-weight:400; }
.v4-body .v4-home-map .v4-map-label-leader { fill:none; stroke:#d9928c; stroke-width:.8; vector-effect:non-scaling-stroke; }
.v4-body .v4-home-map .v4-map-inset-frame { fill:#fff8f5; stroke:#df8c84; stroke-width:1.5; }
.v4-body .v4-home-map .v4-map-inset path { fill:#e2948d; stroke:#e2948d; stroke-width:.7; }
.v4-body .v4-home-map .v4-map-inset-label { fill:#c96b67; stroke:none; font:20px var(--v4-ui-font); letter-spacing:0; }
.v4-body .v4-home-map .v4-map-city { visibility:hidden; }
.v4-body .v4-home-map .v4-map-city.is-in-selected-province { visibility:visible; }
.v4-body .v4-home-map .v4-map-city-ring { display:none; animation:none; }
.v4-body .v4-home-map .v4-map-city-dot { fill:#e50036; stroke:#fff; stroke-width:1; filter:none; }
.v4-body .v4-home-map .v4-map-city.is-in-selected-province .v4-map-city-dot { r:3; fill:#e50036; stroke:#fff; stroke-width:1; }
.v4-body .v4-home-map .v4-map-city-label { font-family:var(--v4-ui-font); font-size:11px; font-weight:400; fill:#a8213a; stroke-width:1.2; }

@media (max-width:1199px), (pointer:coarse) {
  .v4-body .v4-home .v4-home-impact { grid-template-rows:auto auto auto auto auto; }
  .v4-body .v4-home-impact .v4-map-heading { grid-row:1; }
  .v4-body .v4-home .v4-home-impact .v4-map-viewport { grid-row:3; }
  .v4-body .v4-home .v4-home-impact>.v4-impact-side { grid-row:4; margin:0; }
  .v4-body .v4-home-impact .v4-map-toolbar { grid-row:5; }
  .v4-body .v4-home-impact .v4-map-detail { grid-row:2; }
  .v4-body .v4-home .v4-home-impact { --v4-map-gutter:clamp(16px,4vw,40px); --v4-map-title-inset:20px; padding:calc(var(--v4-header-height,72px) + 24px) var(--v4-map-gutter) calc(80px + env(safe-area-inset-bottom,0px)); justify-content:center; gap:20px; }
  .v4-body .v4-home-impact>.v4-home-map { flex:none; gap:18px; }
  .v4-map-heading { position:static; max-width:none; margin-left:calc(-1 * var(--v4-map-gutter)); }
  .v4-body .v4-map-heading h2 { font-size:var(--module-title-size,22px); padding-block:11px; }
  .v4-map-heading p { font-size:12px; margin-top:12px; }
  .v4-map-viewport { flex:none; height:auto; aspect-ratio:850/600; }
  .v4-map-toolbar { flex-wrap:wrap; gap:16px; padding:0; }
  .v4-map-controls { margin-left:auto; }
  .v4-body .v4-home-impact .v4-map-detail { padding:14px 18px; }
  .v4-body .v4-home-impact .v4-impact-metrics { padding:0; border:0; }
}
@media (max-width:600px) {
  .v4-body .v4-home .v4-home-impact { --v4-map-title-inset:16px; }
  .v4-body .v4-map-heading h2 { font-size:var(--module-title-size,20px); padding-block:10px; }
  .v4-map-legend { font-size:11px; }
  .v4-map-toolbar { gap:12px; }
  .v4-map-controls { width:100%; margin:0; }
  .v4-map-controls button { min-height:40px; }
  .v4-body .v4-home-impact .v4-impact-metrics p { font-size:12px; }
  .v4-body .v4-home-impact .v4-impact-metrics strong { font-size:20px; }
}
@media (max-width:600px) and (max-height:740px) {
  .v4-body .v4-home .v4-home-impact { --v4-map-title-inset:16px; padding-top:calc(var(--v4-header-height,72px) + 20px); padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); gap:12px; }
  .v4-body .v4-home-impact>.v4-home-map { gap:10px; }
  .v4-body .v4-map-heading h2 { font-size:var(--module-title-size,20px); padding-block:8px; }
  .v4-map-heading p { margin-top:8px; }
}

/* Replay on scene entry using the existing scene observer. Keep the wrapper
   still so its old vertical reveal does not move the title's left edge. */
@media (prefers-reduced-motion:no-preference) {
  .v4-motion-ready .v4-home-impact>.v4-home-map.v4-reveal { opacity:1; transform:none; transition:none; }
  .v4-motion-ready .v4-home-impact:not(.is-in-view) .v4-map-heading { opacity:0; transform:translateX(calc(-100% - 32px)); }
  .v4-motion-ready .v4-home-impact.is-in-view .v4-map-heading { animation:v4-map-title-enter .85s cubic-bezier(.22,.8,.3,1) both; }
  .v4-motion-ready .v4-home-impact:not(.is-in-view) :is(.v4-map-viewport,.v4-map-toolbar,.v4-map-detail) { opacity:0; }
  .v4-motion-ready .v4-home-impact.is-in-view .v4-map-viewport { animation:v4-map-enter .75s cubic-bezier(.16,1,.3,1) .12s both; }
  .v4-motion-ready .v4-home-impact.is-in-view :is(.v4-map-toolbar,.v4-map-detail) { animation:v4-map-caption-enter .5s ease-out .3s both; }
}
@keyframes v4-map-title-enter {
  0% { opacity:0; transform:translateX(calc(-100% - 32px)); }
  68% { opacity:1; transform:translateX(10px); }
  84% { opacity:1; transform:translateX(-3px); }
  100% { opacity:1; transform:translateX(0); }
}
@keyframes v4-map-enter {
  from { opacity:0; transform:translateY(12px) scale(.985); }
  to { opacity:1; transform:none; }
}
@keyframes v4-map-caption-enter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}
