Fix CTA cards on mobile: always show 3, correct hrefs, fix overflow clipping

- ctaCards now merges Sanity data per-slot over defaults instead of all-or-nothing;
  a partially-filled CMS (e.g. 2 cards) no longer hides the third card, and an
  empty href in Sanity falls back to the correct default route
- Add overflow: visible to .cta-editorial on mobile so the third card isn't clipped
  by the desktop overflow: hidden that wasn't being overridden
- Add pointer-events: none to the gradient overlay div so it can't intercept taps

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

src/pages/index.astro

@@ -40,7 +40,21 @@ const videoHeading   = cms?.videoHeading   || DEFAULTS.videoHeading;
 const videoBody      = cms?.videoBody      || DEFAULTS.videoBody;
 const videoYoutubeId = cms?.videoYoutubeId || DEFAULTS.videoYoutubeId;
 const sponsorHeading = cms?.sponsorHeading || DEFAULTS.sponsorHeading;
-const ctaCards       = cms?.ctaCards?.length ? cms.ctaCards : DEFAULTS.ctaCards;
+// Always produce 3 cards; merge Sanity data per-slot over defaults so a
+// partially-filled CMS (e.g. only 2 cards) never hides the third card or
+// leaves a card with an empty href.
+const sanityCards = cms?.ctaCards ?? [];
+const ctaCards = DEFAULTS.ctaCards.map((def, i) => {
+    const s = sanityCards[i];
+    if (!s) return def;
+    return {
+        label:       s.label       || def.label,
+        title:       s.title       || def.title,
+        description: s.description || def.description,
+        image:       s.image       || def.image,
+        href:        s.href        || def.href,
+    };
+});
 const sponsors       = cms?.sponsors?.length  ? cms.sponsors  : DEFAULTS.sponsors;
 ---
 
@@ -103,7 +117,7 @@ const sponsors       = cms?.sponsors?.length  ? cms.sponsors  : DEFAULTS.sponsor
         .cta-card:hover .cta-more { opacity: 1; }
 
         @media (max-width: 767px) {
-            .cta-editorial { flex-direction: column; height: auto; }
+            .cta-editorial { flex-direction: column; height: auto; overflow: visible; }
             .cta-card { flex: none; height: 280px; }
             .cta-sub { opacity: 1 !important; }
             .cta-more { opacity: 1 !important; }
@@ -347,7 +361,7 @@ const sponsors       = cms?.sponsors?.length  ? cms.sponsors  : DEFAULTS.sponsor
                             loading="lazy"
                             decoding="async"
                         />
-                        <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 100%);" />
+                        <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 100%); pointer-events: none;" />
                         <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 32px; background: rgba(0,0,0,0.48); backdrop-filter: blur(4px);">
                             <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 8px;">
                                 {card.label}