fix: stack Date & Location venue cards on mobile and tablet

[ashton-arinze]

Problem

On phones the Date & Location section was broken. .venue-showcase-container is a two-column grid (1fr 1.25fr) with no responsive rule, so it stayed two columns at every width. On a 390px screen:

• The dark campus card was squeezed into a strip about 60px wide, and its title, description, facilities and map button were cut off.
• The address/transit card was squeezed too: transit text wrapped one or two words per line and the action buttons wrapped awkwardly.

Before (live site, 390px):

Fix

CSS only, in src/assets/css/custom.css:

• Below 900px: the two cards stack in one column (max 640px wide). This matches the breakpoint the site already uses for the organizers grid.
• 600px and below:
  • Card padding is smaller.
  • The location and date pills wrap cleanly, and the building icon sits next to the campus name.
  • The address icon and Copy button stay on the same line as the address.
  • Each transit label (S-Bahn / Bus M41 / Car & Bike) sits above its description, so the text uses the full card width.
  • The Google Maps, BVG and Calendar buttons are full width and centered.
• Desktop (900px and up): unchanged, still the two-column showcase.

After (local, 390px):

After (local, 768px tablet):

Desktop (1280px), unchanged:

Testing

• Ran npm run dev locally and checked the section at 360, 390, 768 and 1280px.
• No horizontal overflow at any width tested (scrollWidth equals the viewport width).
• npm run build succeeds.

[ashton-arinze]

Superseded: reopening from the LogicalOgbonna account.