From bfff24fa5f7b23c6ac970ed4fd81d46974133a66 Mon Sep 17 00:00:00 2001
From: Tudor Sitaru <tudor.sitaru@gmail.com>
Date: Tue, 14 Apr 2026 14:31:31 +0100
Subject: [PATCH] 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>
---
 .../components/SchoolDetailView.module.css    | 21 +++++----
 nextjs-app/components/SchoolDetailView.tsx    | 44 +++++++++----------
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index a45a3cb..addf1d6 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/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;
     }
 }
diff --git a/nextjs-app/components/SchoolDetailView.tsx b/nextjs-app/components/SchoolDetailView.tsx
index f28d583..497fefa 100644
--- a/nextjs-app/components/SchoolDetailView.tsx
+++ b/nextjs-app/components/SchoolDetailView.tsx
@@ -515,14 +515,14 @@ export function SchoolDetailView({
           {/* ── Primary / KS2 content ── */}
           {hasKS2Results && (
             <>
-              <div className={styles.rwmHeroGrid}>
+              <div className={styles.heroStatGrid}>
                 {latestResults.rwm_expected_pct !== null && (
-                  <div className={styles.rwmHeroCard}>
-                    <div className={styles.rwmHeroLabel}>
+                  <div className={styles.heroStatCard}>
+                    <div className={styles.heroStatLabel}>
                       Reading, Writing &amp; Maths combined
                       <MetricTooltip metricKey="rwm_expected_pct" />
                     </div>
-                    <div className={styles.rwmHeroValue}>
+                    <div className={styles.heroStatValue}>
                       {formatPercentage(latestResults.rwm_expected_pct)}
                       {primaryAvg.rwm_expected_pct != null && (
                         <DeltaChip
@@ -534,17 +534,17 @@ export function SchoolDetailView({
                       )}
                     </div>
                     {primaryAvg.rwm_expected_pct != null && (
-                      <div className={styles.rwmHeroHint}>National avg: {primaryAvg.rwm_expected_pct.toFixed(0)}%</div>
+                      <div className={styles.heroStatHint}>National avg: {primaryAvg.rwm_expected_pct.toFixed(0)}%</div>
                     )}
                   </div>
                 )}
                 {latestResults.rwm_high_pct !== null && (
-                  <div className={styles.rwmHeroCard}>
-                    <div className={styles.rwmHeroLabel}>
+                  <div className={styles.heroStatCard}>
+                    <div className={styles.heroStatLabel}>
                       Exceeding expected level (Reading, Writing &amp; Maths)
                       <MetricTooltip metricKey="rwm_high_pct" />
                     </div>
-                    <div className={styles.rwmHeroValue}>
+                    <div className={styles.heroStatValue}>
                       {formatPercentage(latestResults.rwm_high_pct)}
                       {primaryAvg.rwm_high_pct != null && (
                         <DeltaChip
@@ -556,7 +556,7 @@ export function SchoolDetailView({
                       )}
                     </div>
                     {primaryAvg.rwm_high_pct != null && (
-                      <div className={styles.rwmHeroHint}>National avg: {primaryAvg.rwm_high_pct.toFixed(0)}%</div>
+                      <div className={styles.heroStatHint}>National avg: {primaryAvg.rwm_high_pct.toFixed(0)}%</div>
                     )}
                   </div>
                 )}
@@ -871,50 +871,50 @@ export function SchoolDetailView({
       {hasInclusionData && (
         <section id="inclusion" className={styles.card}>
           <h2 className={styles.sectionTitle}>Pupils &amp; Inclusion</h2>
-          <div className={styles.metricsGrid}>
+          <div className={styles.heroStatGrid}>
             {latestResults?.disadvantaged_pct != null && (
-              <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>Eligible for pupil premium</div>
-                <div className={styles.metricValue}>
+              <div className={styles.heroStatCard}>
+                <div className={styles.heroStatLabel}>Eligible for pupil premium</div>
+                <div className={styles.heroStatValue}>
                   {formatPercentage(latestResults.disadvantaged_pct)}
                   {primaryAvg.disadvantaged_pct != null && (
                     <DeltaChip value={latestResults.disadvantaged_pct} baseline={primaryAvg.disadvantaged_pct} unit="pts" size="sm" />
                   )}
                 </div>
-                <div className={styles.metricHint}>Pupils from disadvantaged backgrounds{primaryAvg.disadvantaged_pct != null ? ` · national avg: ${primaryAvg.disadvantaged_pct.toFixed(0)}%` : ''}</div>
+                <div className={styles.heroStatHint}>Pupils from disadvantaged backgrounds{primaryAvg.disadvantaged_pct != null ? ` · national avg: ${primaryAvg.disadvantaged_pct.toFixed(0)}%` : ''}</div>
               </div>
             )}
             {latestResults?.eal_pct != null && (
-              <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>
+              <div className={styles.heroStatCard}>
+                <div className={styles.heroStatLabel}>
                   English as an additional language
                   <MetricTooltip metricKey="eal_pct" />
                 </div>
-                <div className={styles.metricValue}>
+                <div className={styles.heroStatValue}>
                   {formatPercentage(latestResults.eal_pct)}
                   {primaryAvg.eal_pct != null && (
                     <DeltaChip value={latestResults.eal_pct} baseline={primaryAvg.eal_pct} unit="pts" size="sm" />
                   )}
                 </div>
                 {primaryAvg.eal_pct != null && (
-                  <div className={styles.metricHint}>National avg: {primaryAvg.eal_pct.toFixed(0)}%</div>
+                  <div className={styles.heroStatHint}>National avg: {primaryAvg.eal_pct.toFixed(0)}%</div>
                 )}
               </div>
             )}
             {latestResults?.sen_support_pct != null && (
-              <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>
+              <div className={styles.heroStatCard}>
+                <div className={styles.heroStatLabel}>
                   Pupils receiving SEN support
                   <MetricTooltip metricKey="sen_support_pct" />
                 </div>
-                <div className={styles.metricValue}>
+                <div className={styles.heroStatValue}>
                   {formatPercentage(latestResults.sen_support_pct)}
                   {primaryAvg.sen_support_pct != null && (
                     <DeltaChip value={latestResults.sen_support_pct} baseline={primaryAvg.sen_support_pct} unit="pts" size="sm" />
                   )}
                 </div>
                 {primaryAvg.sen_support_pct != null && (
-                  <div className={styles.metricHint}>National avg: {primaryAvg.sen_support_pct.toFixed(0)}%</div>
+                  <div className={styles.heroStatHint}>National avg: {primaryAvg.sen_support_pct.toFixed(0)}%</div>
                 )}
               </div>
             )}