[R-06] CSS media query order bug in Hero

[vmorps]

[R-06] CSS Media Query Order Bug in Hero

Severity: P1
Sprint: 2 (implement first in sprint 2 — R-04 depends on this)
Component: Hero
Spec: design/specs/responsive-layout-fixes.md § R-06

---

Current Behavior

In Hero.module.css, the media queries are ordered incorrectly:

/* Line 186 */ @media (min-width: 1024px) { ... }
/* Line 205 */ @media (min-width: 640px) { ... }

Because CSS applies rules in source order for equal specificity, the 640px rules override the 1024px rules at viewports ≥ 1024px. This means:

• .heading renders at 3rem instead of 3.75rem on desktop
• .inner padding is 1.5rem instead of 2rem on desktop

Expected Behavior

Mobile-first media queries must be ordered smallest to largest:

@media (min-width: 640px) { ... }   /* First */
@media (min-width: 1024px) { ... }  /* Second — overrides 640px rules */

File(s) Impacted

• src/components/landing/Hero.module.css

Implementation Approach

Swap the order of the two media query blocks in Hero.module.css. The 640px block (lines 205–213) should come before the 1024px block (lines 186–203).

Acceptance Criteria

• At 1024px+, heading renders at 3.75rem
• At 1024px+, .inner padding is 0 2rem
• At 640px–1023px, heading renders at 3rem (with R-04 adjustments: 2.5rem)
• At 640px–1023px, .inner padding is 0 1.5rem

Dependencies

⚠️ R-04 depends on this issue. This must be completed before R-04 font-size changes are applied, otherwise the 640px values will incorrectly override the 1024px values.

---

Branch strategy: All responsive fixes will land on a single branch (fix/responsive-layout) with one PR against main. Commits grouped by sprint.