improve: redesign mobile card layout for usability

Replace the cramped 7-column day grid with a clean open-days list.
Each card now shows:
- Park name + "Open today" / "Closed today" badge in the header
- One row per open day (Today, Monday, Friday...) with full hours
- Today row highlighted in amber; passholder days labeled inline
- Whole card is a tap target linking to the park detail page

Also:
- Hide the legend below sm breakpoint (not needed on phones)
- Reduce horizontal padding to 16px on mobile (was 24px)
- Tighten MobileCardList vertical spacing

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

app/page.tsx

@@ -72,7 +72,7 @@ export default async function HomePage({ searchParams }: PageProps) {
       }}>
         {/* Row 1: Title + park count */}
         <div style={{
-          padding: "12px 24px 10px",
+          padding: "12px 16px 10px",
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
@@ -100,9 +100,9 @@ export default async function HomePage({ searchParams }: PageProps) {
           </span>
         </div>
 
-        {/* Row 2: Week nav + legend */}
+        {/* Row 2: Week nav + legend (legend hidden on mobile) */}
         <div style={{
-          padding: "8px 24px 10px",
+          padding: "8px 16px 10px",
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
@@ -114,12 +114,14 @@ export default async function HomePage({ searchParams }: PageProps) {
             weekDates={weekDates}
             isCurrentWeek={isCurrentWeek}
           />
-          <Legend />
+          <div className="hidden sm:flex">
+            <Legend />
+          </div>
         </div>
       </header>
 
       {/* ── Main content ───────────────────────────────────────────────────── */}
-      <main style={{ padding: "0 24px 48px" }}>
+      <main className="px-4 sm:px-6 pb-12">
         {scrapedCount === 0 ? (
           <EmptyState />
         ) : (