VenueDetailStep redesign + detail-toggles independent scroll

WizardLayout:
- detail-toggles now viewport-locked with independent panel scroll
- Left 55% scrollable, right 45% scrollable with divider border
- Back link rendered inside left panel (same as list-map)

VenueDetailStep redesign:
- Left: hero image, description, features (2-col grid with check icons),
  location map placeholder, address
- Right: venue name, icon meta rows (location, type, capacity),
  price + offset note, full-width Add Venue CTA, address, religion
  chips, service toggles
- MetaRow helper for consistent icon + text metadata display

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/templates/WizardLayout/WizardLayout.tsx

@@ -257,24 +257,68 @@ const GridSidebarLayout: React.FC<{
   </Container>
 );
 
-/** Detail + Toggles: two-column hero (image left / info right), full-width section below */
+/** Detail + Toggles: scrollable left (image/desc) / sticky right (info/CTA) */
 const DetailTogglesLayout: React.FC<{
   children: React.ReactNode;
   secondaryPanel?: React.ReactNode;
-}> = ({ children, secondaryPanel }) => (
-  <Container maxWidth="lg" sx={{ flex: 1, py: 3 }}>
+  backLink?: React.ReactNode;
+}> = ({ children, secondaryPanel, backLink }) => (
+  <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+    {/* Left panel — scrollable content */}
     <Box
       sx={{
-        display: 'flex',
-        gap: { xs: 0, md: 4 },
-        flexDirection: { xs: 'column', md: 'row' },
-        mb: 4,
+        width: { xs: '100%', md: '55%' },
+        flexShrink: 0,
+        overflowY: 'auto',
+        px: { xs: 2, md: 4 },
+        pt: 0,
+        pb: 3,
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'transparent transparent',
+        '&:hover': {
+          scrollbarColor: 'rgba(0,0,0,0.25) transparent',
+        },
+        '&::-webkit-scrollbar': { width: 6 },
+        '&::-webkit-scrollbar-thumb': {
+          background: 'transparent',
+          borderRadius: 3,
+        },
+        '&:hover::-webkit-scrollbar-thumb': {
+          background: 'rgba(0,0,0,0.25)',
+        },
       }}
     >
-      <Box sx={{ width: { xs: '100%', md: '50%' } }}>{children}</Box>
-      <Box sx={{ width: { xs: '100%', md: '50%' } }}>{secondaryPanel}</Box>
+      {backLink && <Box sx={{ pt: 1.5 }}>{backLink}</Box>}
+      {children}
     </Box>
-  </Container>
+    {/* Right panel — sticky info */}
+    <Box
+      sx={{
+        display: { xs: 'none', md: 'block' },
+        width: { md: '45%' },
+        overflowY: 'auto',
+        px: 4,
+        py: 3,
+        borderLeft: '1px solid',
+        borderColor: 'divider',
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'transparent transparent',
+        '&:hover': {
+          scrollbarColor: 'rgba(0,0,0,0.25) transparent',
+        },
+        '&::-webkit-scrollbar': { width: 6 },
+        '&::-webkit-scrollbar-thumb': {
+          background: 'transparent',
+          borderRadius: 3,
+        },
+        '&:hover::-webkit-scrollbar-thumb': {
+          background: 'rgba(0,0,0,0.25)',
+        },
+      }}
+    >
+      {secondaryPanel}
+    </Box>
+  </Box>
 );
 
 // ─── Variant map ─────────────────────────────────────────────────────────────
@@ -343,8 +387,8 @@ export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
             flexDirection: 'column',
             minHeight: '100vh',
             bgcolor: 'background.default',
-            // list-map: lock to viewport so only the left panel scrolls
-            ...(variant === 'list-map' && {
+            // list-map + detail-toggles: lock to viewport so panels scroll independently
+            ...((variant === 'list-map' || variant === 'detail-toggles') && {
               height: '100vh',
               overflow: 'hidden',
             }),
@@ -358,8 +402,8 @@ export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
         {/* Stepper + running total bar (grid-sidebar, detail-toggles only) */}
         {showStepper && <StepperBar stepper={progressStepper} total={runningTotal} />}
 
-        {/* Back link — inside left panel for list-map, above content for others */}
-        {showBackLink && variant !== 'list-map' && (
+        {/* Back link — inside left panel for list-map/detail-toggles, above content for others */}
+        {showBackLink && variant !== 'list-map' && variant !== 'detail-toggles' && (
           <Container
             maxWidth={variant === 'centered-form' ? 'sm' : 'lg'}
             sx={{ pt: 2, px: { xs: 4, md: 3 } }}
@@ -376,7 +420,7 @@ export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
           <LayoutComponent
             secondaryPanel={secondaryPanel}
             backLink={
-              showBackLink && variant === 'list-map' ? (
+              showBackLink && (variant === 'list-map' || variant === 'detail-toggles') ? (
                 <Box sx={{ pt: 1.5 }}>
                   <BackLink label={backLabel} onClick={onBack} />
                 </Box>