feat(detail): move religious character into header details + mobile reveal

Religious character now sits with the other labelled header details (near
County / Constituency) as "Religious character: <denomination>" ("None" for
Does not apply / None), instead of as an identity chip.

On mobile/tablet (≤768px) the header details block was hidden outright; it's
now collapsed behind a "Show all details" toggle that reveals the full block
(headteacher, website, pupils, trust, phone, religious character, county,
constituency). Applied to both the primary and secondary detail views for
parity. Extends the e2e journey with the mobile toggle behaviour.

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

nextjs-app/components/SchoolDetailView.tsx

@@ -99,6 +99,9 @@ export function SchoolDetailView({
   const heroMapRef = useRef<SchoolHeroMapHandle>(null);
   // "All ▾" jump menu listing every section.
   const [sectionsOpen, setSectionsOpen] = useState(false);
+  // Header details (headteacher, contact, trust, area) collapse behind a
+  // "Show all details" link on mobile/tablet, where they're below the fold.
+  const [detailsOpen, setDetailsOpen] = useState(false);
 
   // Back returns to wherever the user came from; deep-links (no in-app history)
   // fall back to search so the button never dead-ends or leaves the site.
@@ -354,13 +357,6 @@ export function SchoolDetailView({
               {schoolInfo.age_range && (
                 <span className={styles.metaItem}>{formatAgeRange(schoolInfo.age_range)}</span>
               )}
-              {schoolInfo.religious_denomination && (
-                <span className={styles.metaItem}>
-                  {['Does not apply', 'None'].includes(schoolInfo.religious_denomination)
-                    ? 'None'
-                    : schoolInfo.religious_denomination}
-                </span>
-              )}
               {schoolInfo.nursery_provision && (
                 <span className={styles.metaItem}>Nursery</span>
               )}
@@ -391,7 +387,20 @@ export function SchoolDetailView({
                 )}
               </p>
             )}
-            <div className={styles.headerDetails}>
+            <button
+              type="button"
+              className={styles.detailsToggle}
+              aria-expanded={detailsOpen}
+              aria-controls="school-header-details"
+              onClick={() => setDetailsOpen((o) => !o)}
+            >
+              {detailsOpen ? 'Hide details' : 'Show all details'}
+              <span aria-hidden="true">{detailsOpen ? '▴' : '▾'}</span>
+            </button>
+            <div
+              id="school-header-details"
+              className={`${styles.headerDetails}${detailsOpen ? ` ${styles.headerDetailsOpen}` : ''}`}
+            >
               {schoolInfo.headteacher_name && (
                 <span className={styles.headerDetail}>
                   <strong>Headteacher:</strong> {schoolInfo.headteacher_name}
@@ -433,6 +442,14 @@ export function SchoolDetailView({
                   </a>
                 </span>
               )}
+              {schoolInfo.religious_denomination && (
+                <span className={styles.headerDetail}>
+                  <strong>Religious character:</strong>{' '}
+                  {['Does not apply', 'None'].includes(schoolInfo.religious_denomination)
+                    ? 'None'
+                    : schoolInfo.religious_denomination}
+                </span>
+              )}
               {schoolInfo.county && (
                 <span className={styles.headerDetail}>
                   <strong>County:</strong> {schoolInfo.county}