style(detail): apply hero card style to Pupils & Inclusion

Renames the RWM-specific .rwmHero* classes to generic .heroStat*
and reuses them on the three Pupils & Inclusion headline cards
(disadvantaged, EAL, SEN support). Grid switches to auto-fit to
accommodate both 2- and 3-card layouts. SEN primary-need breakdown
stays on the dense .metricCard style.

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

nextjs-app/components/SchoolDetailView.module.css

@@ -323,15 +323,18 @@
     font-style: italic;
 }
 
-/* ── RWM hero cards (combined + exceeding) ── */
-.rwmHeroGrid {
+/* ── Hero stat cards (RWM combined, Pupils & Inclusion, etc.) ── */
+/* Larger teal-tinted cards with Playfair serif numbers — reserved for
+   the top-of-section headline metrics. Use .metricCard for denser
+   secondary metrics. */
+.heroStatGrid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 0.85rem;
     margin-bottom: 0.25rem;
 }
 
-.rwmHeroCard {
+.heroStatCard {
     background: var(--accent-teal-bg, rgba(45, 125, 125, 0.12));
     border: 1px solid rgba(45, 125, 125, 0.2);
     border-radius: 12px;
@@ -342,7 +345,7 @@
     text-align: left;
 }
 
-.rwmHeroLabel {
+.heroStatLabel {
     font-size: 0.6rem;
     font-weight: 700;
     text-transform: uppercase;
@@ -354,7 +357,7 @@
     line-height: 1.3;
 }
 
-.rwmHeroValue {
+.heroStatValue {
     font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
     font-size: 2.1rem;
     font-weight: 700;
@@ -367,7 +370,7 @@
     justify-content: flex-start;
 }
 
-.rwmHeroHint {
+.heroStatHint {
     font-size: 0.7rem;
     color: var(--text-muted, #6d685f);
     font-style: normal;
@@ -375,11 +378,11 @@
 }
 
 @media (max-width: 480px) {
-    .rwmHeroGrid {
+    .heroStatGrid {
         grid-template-columns: 1fr;
     }
 
-    .rwmHeroValue {
+    .heroStatValue {
         font-size: 1.85rem;
     }
 }