CrematoriumStep: stacked card layout (image top, details below)

Horizontal compact card was cramped with long addresses/distances.
Stacked layout gives full width to both image and text. Icons bumped
to 18px with flex-start alignment for proper baseline alignment.

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

src/components/pages/CrematoriumStep/CrematoriumStep.tsx

@@ -146,52 +146,37 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
         }}
       >
         {/* ─── Crematorium card ─── */}
-        <Card
+        <Card variant="outlined" padding="none" sx={{ overflow: 'hidden', mb: 4 }}>
-          variant="outlined"
-          padding="none"
-          sx={{
-            display: 'flex',
-            overflow: 'hidden',
-            mb: 4,
-          }}
-        >
           {crematorium.imageUrl && (
             <Box
               role="img"
               aria-label={`${crematorium.name} photo`}
               sx={{
-                width: { xs: 140, sm: 200 },
+                height: { xs: 160, sm: 180 },
-                flexShrink: 0,
                 backgroundImage: `url(${crematorium.imageUrl})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
               }}
             />
           )}
-          <Box
+          <Box sx={{ p: 2.5, display: 'flex', flexDirection: 'column', gap: 1 }}>
-            sx={{
+            <Typography variant="h6" component="span">
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              gap: 0.75,
-              p: 2.5,
-              minWidth: 0,
-            }}
-          >
-            <Typography variant="h6" component="span" maxLines={2}>
               {crematorium.name}
             </Typography>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-              <LocationOnOutlinedIcon sx={{ fontSize: 14, color: 'text.secondary' }} aria-hidden />
+              <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
+                <LocationOnOutlinedIcon
+                  sx={{ fontSize: 18, color: 'text.secondary', mt: 0.25 }}
+                  aria-hidden
+                />
                 <Typography variant="body2" color="text.secondary">
                   {crematorium.address}
                 </Typography>
               </Box>
               {crematorium.distance && (
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
                   <DirectionsCarOutlinedIcon
-                  sx={{ fontSize: 14, color: 'text.secondary' }}
+                    sx={{ fontSize: 18, color: 'text.secondary', mt: 0.25 }}
                     aria-hidden
                   />
                   <Typography variant="body2" color="text.secondary">
@@ -200,6 +185,7 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
                 </Box>
               )}
             </Box>
+          </Box>
         </Card>
 
         {isCremationOnly ? (