Responsive requirements

Calendar surfaces are responsive-first. The date chip is the never-collapse element: it stays visible at every breakpoint, even when card width drops to 320px. Filter rails collapse to a sticky-bottom drawer on mobile. Hero text scales from 48px desktop to 28px mobile.

Breakpoints

Mobile (≤640px)

Single-column card grid. Date chip + title in one row (chip left, title right). Filters collapse to a bottom-sticky drawer triggered by a floating filter button. Landing rails: horizontal scroll-snap, 1.2-card peek so the user knows to scroll.

Tablet (641-1024px)

2-column card grid. Filter rail remains visible but compressed (chip-only, no panel). Landing rails show 2.5 cards per viewport.

Desktop (≥1025px)

3-column card grid (or 4 on ≥1440px). Filter rail full panel, sticky on scroll. Landing rails show 4 cards per viewport with chevron navigation.

Details page specifics

• Desktop: 2-column layout (main 2/3, sidebar 1/3). Sidebar is sticky on scroll until it hits the footer.
• Tablet: sidebar drops below main content; cross-module signals become a horizontal scroll rail.
• Mobile: single column. CTAs become full-width, stacked. Map collapses to a tap-to-expand thumbnail.