From 51ba46c734ce28e7609ee81fddad4ed19f80ab5b Mon Sep 17 00:00:00 2001
From: Tudor <tudor@Tudors-MacBook-Pro.local>
Date: Wed, 1 Jul 2026 06:38:21 +0100
Subject: [PATCH] fix(school-detail): hide desktop nav controls on mobile (CSS
 order)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mobile breakpoint's display:none for .sectionNavAll / .sectionNavCompare was
declared before their base display rules, so equal-specificity cascade let the
base win and "All ▾" showed on mobile alongside the section menu. Move the
breakpoint swap block after the base declarations so the hide rules win.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lh7Js5xSetKNzLVr9ArXLF
---
 .../components/SchoolDetailView.module.css    | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 4413aae..89b71dc 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -390,24 +390,6 @@
     color: var(--accent-teal, #2d7d7d);
 }
 
-/* Swap which controls show at the mobile breakpoint. */
-@media (max-width: 640px) {
-    .sectionNavLinks,
-    .sectionNavCompare,
-    .sectionNavAll,
-    .sectionNavBackLabel {
-        display: none;
-    }
-
-    .sectionNavMenu {
-        display: flex;
-    }
-
-    .sectionNavCompareIcon {
-        display: inline-flex;
-    }
-}
-
 /* Compare CTA carried into the bar once the hero's button scrolls away. */
 .sectionNavCompare {
     flex: none;
@@ -554,6 +536,25 @@
     }
 }
 
+/* Swap which controls show at the mobile breakpoint. Declared last so these
+   display rules win over the base (equal-specificity) declarations above. */
+@media (max-width: 640px) {
+    .sectionNavLinks,
+    .sectionNavCompare,
+    .sectionNavAll,
+    .sectionNavBackLabel {
+        display: none;
+    }
+
+    .sectionNavMenu {
+        display: flex;
+    }
+
+    .sectionNavCompareIcon {
+        display: inline-flex;
+    }
+}
+
 /* Unified card for all content sections */
 .card {
     background: var(--bg-card, white);