Refine hero: vector full-width, image top padding, content flush left

- styles/blocks/page-hero.css:
  - .page-hero__vector: width is now 100% (was clamp(28rem, 60vw, 56rem))
    so the orange linework spans the full width of the hero. The SVG
    scales proportionally (1920x489 viewBox).
  - .page-hero__media: added top: clamp(2rem, 4vw, 4rem) so the image
    has visible top padding inside the hero (in addition to overflowing
    the bottom). Reduced right offset to clamp(0.5rem, 2vw, 2rem) so
    the image sits closer to the right edge. Width is 'auto' with
    max-width: clamp(20rem, 30vw, 28rem) so the image's natural aspect
    ratio (490x613 portrait) is preserved.
- views/partials/page-hero.php: .page-hero__content is now 'container
  mx-auto px-0!' so the breadcrumbs, H1, and intro sit flush left at
  x=0, matching the logo's left edge (which is also at x=0 thanks to
  the header's px-0! override on its container).

Co-Authored-By: Claude <noreply@anthropic.com>

styles/blocks/page-hero.css

@@ -23,6 +23,7 @@
     line-height: 1.05;
     margin-block: clamp(1.5rem, 4vw, 3rem) 0;
     max-width: 36rem;
+    text-align: left;
 }
 
 .page-hero__intro {
@@ -31,17 +32,21 @@
     line-height: 1.5;
     max-width: 36rem;
     opacity: 0.95;
+    text-align: left;
 }
 
 .page-hero__media {
-    bottom: -10%;
+    bottom: -8%;
     height: auto;
     max-height: none;
     pointer-events: none;
     position: absolute;
-    right: clamp(1.5rem, 4vw, 4rem);
+    right: clamp(0.5rem, 2vw, 2rem);
-    width: clamp(18rem, 32vw, 28rem);
+    top: clamp(2rem, 4vw, 4rem);
+    width: auto;
     z-index: 1;
+    /* Set width via max-width so the image's natural aspect ratio is preserved. */
+    max-width: clamp(20rem, 30vw, 28rem);
 }
 
 .page-hero__vector {
@@ -50,7 +55,7 @@
     left: 0;
     pointer-events: none;
     position: absolute;
-    width: clamp(28rem, 60vw, 56rem);
+    width: 100%;
     z-index: 5;
 }
 
@@ -62,11 +67,12 @@
     .page-hero__media {
         bottom: -8%;
         right: 0;
-        width: 60vw;
+        top: auto;
+        max-width: 60vw;
     }
 
     .page-hero__vector {
         bottom: clamp(1rem, 3vw, 2rem);
-        width: 80vw;
+        width: 100%;
     }
 }

views/partials/page-hero.php

@@ -32,7 +32,7 @@ $wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '
 
 <div class="page-hero text-light <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
 
-    <div class="page-hero__content container mx-auto">
+    <div class="page-hero__content container mx-auto px-0!">
         <div id="breadcrumbs">
             <?php Breadcrumbs::render(); ?>
         </div>