feat(home): widen photographic hero (#49)

resources/views/components/home/hero.blade.php

@@ -7,17 +7,17 @@
     @class([
         'home-chapter border-b border-amare-border bg-amare-bg',
         'min-h-[100dvh]' => blank($settings->hero_image_path),
-        'md:h-[calc(100dvh-5rem)]' => filled($settings->hero_image_path),
+        'lg:h-[calc(100dvh-5rem)]' => filled($settings->hero_image_path),
     ])
     data-chapter="hero"
     data-motion="page-open"
 >
     @if (filled($settings->hero_image_path))
-        <div class="grid md:h-full md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+        <div class="grid lg:h-full lg:grid-cols-2">
             <div
                 data-hero-content
                 data-reveal-group
-                class="flex flex-col justify-center space-y-8 px-6 py-20 md:py-12 md:pr-[clamp(3rem,6vw,7rem)] md:pl-[max(var(--amare-container-padding),calc((100vw-var(--amare-container-max))/2+var(--amare-container-padding)))]"
+                class="flex flex-col justify-center space-y-8 px-6 py-20 lg:py-12 lg:pr-[clamp(3rem,6vw,7rem)] lg:pl-[max(var(--amare-container-padding),calc((100vw-var(--amare-container-max))/2+var(--amare-container-padding)))]"
             >
                 <div data-motion-beat="seal" class="flex items-center gap-4">
                     <x-brand.logo mark variant="on-light" class="h-8 w-auto" alt="" />
@@ -51,8 +51,8 @@
                 @endif
             </div>
 
-            <div data-split-hero data-motion-beat="media" class="max-md:aspect-[4/5] overflow-hidden bg-amare-bg-deep md:h-full" data-reveal-media>
+            <div data-split-hero data-motion-beat="media" class="max-lg:aspect-[4/5] overflow-hidden bg-amare-bg-deep lg:h-full" data-reveal-media>
-                <x-media.image :path="$settings->hero_image_path" :alt="$settings->hero_image_alt ?: $settings->brand_name" loading="eager" fetchpriority="high" sizes="(max-width: 767px) 100vw, 55vw" class="img-editorial h-full w-full object-cover" />
+                <x-media.image :path="$settings->hero_image_path" :alt="$settings->hero_image_alt ?: $settings->brand_name" loading="eager" fetchpriority="high" sizes="(max-width: 1023px) 100vw, 50vw" class="img-editorial h-full w-full object-cover" />
             </div>
         </div>
     @else

tests/Browser/HomeEditorialCadenceTest.php

@@ -12,7 +12,7 @@ beforeEach(function (): void {
     Artisan::call('db:seed', ['--class' => VisualContentSeeder::class, '--force' => true]);
 });
 
-it('fills the desktop opening from below the header while keeping the media full bleed', function (): void {
+it('uses equal desktop columns while filling the opening below the header with full-bleed media', function (): void {
     $page = $this->visit('/', [
         'reducedMotion' => 'reduce',
     ])->resize(1440, 1000);
@@ -53,7 +53,41 @@ it('fills the desktop opening from below the header while keeping the media full
         'mediaTouchesHeroBottom' => true,
         'mediaTouchesViewportRight' => true,
         'splitImageObjectFit' => 'cover',
-        'columnRatio' => 0.818,
+        'columnRatio' => 1,
+        'horizontalOverflow' => false,
+    ]);
+});
+
+it('keeps the home hero linear through tablet with a full-width four-by-five crop', function (): void {
+    $page = $this->visit('/', [
+        'reducedMotion' => 'reduce',
+    ])->resize(1023, 1000);
+
+    $page->script('() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))');
+
+    $layout = $page->script(<<<'JS'
+        () => {
+            const hero = document.querySelector('[data-chapter="hero"]');
+            const content = hero?.querySelector('[data-hero-content]');
+            const media = hero?.querySelector('[data-split-hero]');
+            const contentRect = content?.getBoundingClientRect();
+            const mediaRect = media?.getBoundingClientRect();
+
+            return {
+                hasContentColumn: Boolean(content),
+                mediaFollowsContent: (mediaRect?.top ?? 0) >= (contentRect?.bottom ?? Number.POSITIVE_INFINITY) - 1,
+                mediaFillsViewportWidth: Math.abs((mediaRect?.width ?? 0) - window.innerWidth) <= 1,
+                mediaAspectRatio: Number(((mediaRect?.width ?? 0) / (mediaRect?.height ?? 1)).toFixed(3)),
+                horizontalOverflow: document.documentElement.scrollWidth > window.innerWidth,
+            };
+        }
+    JS);
+
+    expect($layout)->toBe([
+        'hasContentColumn' => true,
+        'mediaFollowsContent' => true,
+        'mediaFillsViewportWidth' => true,
+        'mediaAspectRatio' => 0.8,
         'horizontalOverflow' => false,
     ]);
 });

tests/Feature/PublicSite/ImmersivePhotoHeroTest.php

@@ -37,14 +37,16 @@ class ImmersivePhotoHeroTest extends TestCase
             ->assertOk()
             ->assertSee('data-chapter="hero"', false)
             ->assertSee('data-motion="page-open"', false)
-            ->assertSee('h-[calc(100dvh-5rem)]', false)
+            ->assertSee('lg:h-[calc(100dvh-5rem)]', false)
             ->assertSee('data-hero-content', false)
             ->assertSee('data-split-hero', false)
             ->assertSee('data-motion-beat="media"', false)
+            ->assertSee('lg:grid-cols-2', false)
+            ->assertSee('max-lg:aspect-[4/5]', false)
             ->assertSee('content/heroes/home.jpg', false)
             ->assertSee('loading="eager"', false)
             ->assertSee('fetchpriority="high"', false)
-            ->assertSee('sizes="(max-width: 767px) 100vw, 55vw"', false)
+            ->assertSee('sizes="(max-width: 1023px) 100vw, 50vw"', false)
             ->assertSee('content="http://localhost/storage/content/og/social.jpg"', false);
     }