Scroll the full-screen carousel down the page, as M3's does

Plan step 19, containment.md C-11. The full-screen layout was another
horizontal row with a 28px corner and a mask, where M3's "shows one
edge-to-edge large item at a time and scrolls vertically". It is now a
vertical scroll-snap column: items fill the row with no corner and no
mask, 16dp apart, no end padding, the previous/next buttons point up and
down and the arrow keys are Up and Down. The row is capped at the 840px
medium window, which with the portrait rule in the header comment is as
far as CSS can hold M3's "compact and medium, portrait only". The ported
FullScreenCarouselStrategy keylines go with it: nothing measures them
any more.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/carousel-item.blade.php

@@ -19,15 +19,28 @@
      the surface inside is clipped by `--material-carousel-inset` from both sides with M3's
      extra-large corner (28px, CarouselDefaults' item shape) and moved by
      `--material-carousel-shift`, both written by resources/js/carousel.js. Without script the
-     item shows unmasked, at its `item-width`. Only inside `<x-carousel>`. --}}
+     item shows unmasked, at its `item-width`. In a `full-screen` carousel it is none of that: the
+     item fills the row, edge to edge, with no corner and no mask. Only inside `<x-carousel>`. --}}
 
 @props([
     'label' => null,
 ])
 
+{{-- The layout of the `<x-carousel>` around it: the full-screen one is a vertical row of
+     edge-to-edge items, which M3 gives no corner and no mask. --}}
+@aware([
+    'layout' => 'multi-browse',
+])
+
+@php
+    $vertical = $layout === 'full-screen';
+@endphp
+
 <div {{ $attributes
     ->class([
-        'focus-ring relative h-full w-(--material-carousel-slot) max-w-full shrink-0 snap-start snap-always rounded-corner-xl focus-visible:-outline-offset-3',
+        'focus-ring relative h-full shrink-0 snap-start snap-always focus-visible:-outline-offset-3',
+        'w-full' => $vertical,
+        'w-(--material-carousel-slot) max-w-full rounded-corner-xl' => ! $vertical,
     ])
     ->merge([
         'role' => 'group',
@@ -38,7 +51,10 @@
     ]) }}>
     <div
         data-material-carousel-surface
-        class="relative size-full overflow-hidden rounded-corner-xl bg-surface-container-highest text-on-surface translate-x-(--material-carousel-shift) [clip-path:inset(0_var(--material-carousel-inset,0px)_round_var(--md-sys-shape-corner-xl))]"
+        @class([
+            'relative size-full overflow-hidden bg-surface-container-highest text-on-surface',
+            'rounded-corner-xl translate-x-(--material-carousel-shift) [clip-path:inset(0_var(--material-carousel-inset,0px)_round_var(--md-sys-shape-corner-xl))]' => ! $vertical,
+        ])
     >
         <div data-material-carousel-content class="size-full [&>img]:size-full [&>img]:object-cover">
             {{ $slot }}