Fix layout variants for VenueStep, CoffinsStep, CoffinDetailsStep

- VenueStep: centered-form → list-map (venue cards left, map slot right)
  Matches ProvidersStep pattern with vertical card stack + map placeholder
- CoffinsStep: centered-form → grid-sidebar (filter sidebar left, card grid right)
  Filters now in dedicated sidebar, cards fill the wider main area
- CoffinDetailsStep: centered-form → detail-toggles (profile left, options right)
  Coffin image + specs on left, option RadioGroups on right

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

src/components/pages/VenueStep/VenueStep.tsx

@@ -13,7 +13,6 @@ import { Collapse } from '../../atoms/Collapse';
 import { Chip } from '../../atoms/Chip';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
-import { Divider } from '../../atoms/Divider';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -86,6 +85,8 @@ export interface VenueStepProps {
   locationName?: string;
   /** Whether this is a pre-planning flow */
   isPrePlanning?: boolean;
+  /** Map panel content — slot for map integration */
+  mapPanel?: React.ReactNode;
   /** Navigation bar — passed through to WizardLayout */
   navigation?: React.ReactNode;
   /** Progress stepper — passed through to WizardLayout */
@@ -131,6 +132,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
   ],
   locationName,
   isPrePlanning = false,
+  mapPanel,
   navigation,
   progressStepper,
   runningTotal,
@@ -162,7 +164,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
 
   return (
     <WizardLayout
-      variant="centered-form"
+      variant="list-map"
       navigation={navigation}
       progressStepper={progressStepper}
       runningTotal={runningTotal}
@@ -171,13 +173,32 @@ export const VenueStep: React.FC<VenueStepProps> = ({
       onBack={onBack}
       hideHelpBar={hideHelpBar}
       sx={sx}
+      secondaryPanel={
+        mapPanel || (
+          <Box
+            sx={{
+              bgcolor: 'var(--fa-color-sage-50)',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderLeft: '1px solid',
+              borderColor: 'divider',
+            }}
+          >
+            <Typography variant="body1" color="text.secondary">
+              Map coming soon
+            </Typography>
+          </Box>
+        )
+      }
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
         Where would you like the service?
       </Typography>
 
-      <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
         {isPrePlanning
           ? 'Browse available venues. Your choice can be changed later.'
           : 'Choose a venue for the funeral service. You can filter by location, features, and religion.'}
@@ -230,15 +251,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
         <Box
           role="radiogroup"
           aria-label="Available venues"
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: {
-              xs: '1fr',
-              sm: 'repeat(2, 1fr)',
-            },
-            gap: 2,
-            mb: 3,
-          }}
+          sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}
         >
           {venues.map((venue, index) => (
             <VenueCard
@@ -377,24 +390,12 @@ export const VenueStep: React.FC<VenueStepProps> = ({
           </Box>
         </Collapse>
 
-        <Divider sx={{ my: 3 }} />
-
         {/* CTAs */}
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            flexDirection: { xs: 'column-reverse', sm: 'row' },
-            gap: 2,
-          }}
-        >
-          {onSaveAndExit ? (
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, pb: 2 }}>
+          {onSaveAndExit && (
             <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
-              Save and continue later
+              Save and exit
             </Button>
-          ) : (
-            <Box />
           )}
           <Button type="submit" variant="contained" size="large" loading={loading}>
             Continue