feat(school-detail): map-blended hero, remove at-a-glance stats

Replace the header's at-a-glance stats row with a location map that sits
atop the hero and blends into the school title. The map is a static,
non-interactive preview (never traps page scroll) with a coral pin; the
whole band — or the inline "View on map ↗" link by the address — opens a
fullscreen, interactive map. Compare floats glassy over the band.

The separate "Location" section (and its nav item) is removed; the map now
lives only in the hero. Schools without lat/long render the header with no
map band, as before.

New: SchoolHeroMap (fullscreen wrapper, forwardRef open handle) +
LeafletHeroMapInner (minimal single-school map with interaction toggle).
Applied to both primary and secondary detail views; dead heroStats/tone/
mapContainer CSS removed (shared .heroStat* card classes kept).

Also drops the orphaned "Latest data" note and does not reintroduce an
Ofsted strip in the hero (it would duplicate the Ofsted section directly
below). Mockup kept at mockups/header-map-hero.html.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

nextjs-app/components/SchoolHeroMap.module.css

@@ -0,0 +1,115 @@
+/* Preview band that blends into the hero title; expands to fullscreen. */
+.wrapper {
+    position: relative;
+    width: 100%;
+    height: 210px;
+    background: #dfe6e2;
+}
+
+@media (max-width: 640px) {
+    .wrapper {
+        height: 150px;
+    }
+}
+
+/* Fullscreen: the Fullscreen API promotes this element to fill the viewport. */
+.wrapper[data-fullscreen] {
+    height: 100vh;
+    height: 100dvh;
+    background: #fff;
+}
+
+.skeleton {
+    width: 100%;
+    height: 100%;
+    background:
+        linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) #e7e2da;
+    background-size: 200% 100%;
+    animation: shimmer 1.4s infinite;
+}
+
+@keyframes shimmer {
+    to { background-position: -200% 0; }
+}
+
+/* Full-band click target. Transparent so the map shows through; reveals a
+   hint pill on hover/focus. Sits above the map but below the header's fade
+   and Compare button (which carry higher stacking in the header). */
+.openBtn {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.openHint {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    margin-bottom: 16px;
+    padding: 8px 14px;
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary, #1a1612);
+    background: rgba(255, 255, 255, .85);
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity .16s ease, transform .16s ease;
+}
+
+.openBtn:hover .openHint,
+.openBtn:focus-visible .openHint {
+    opacity: 1;
+    transform: none;
+}
+
+/* Diffuse fade: map dissolves to the card background before the title. */
+.fade {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 33%;
+    z-index: 2;
+    pointer-events: none;
+    background: linear-gradient(to bottom,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, .35) 35%,
+            rgba(255, 255, 255, .75) 62%,
+            rgba(255, 255, 255, .95) 82%,
+            var(--bg-card, #fff) 100%);
+}
+
+.closeBtn {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, .92);
+    color: var(--text-primary, #1a1612);
+    cursor: pointer;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
+}
+
+.closeBtn:hover {
+    background: #fff;
+}