Allinea PageHero, lista programmi e dettaglio programma al design Figma

- PageHero: banner scuro min-height 380px, titolo bianco uppercase ~44px,
  variante con foto di sfondo e overlay scuro
- /programs: card con foto (aspect 4/3, hover zoom), ombra, reveal stagger
- Dettaglio programma: hero con foto, immagine grande nel corpo, categorie
  corrette da Figma, sidebar con icone programmi, pricing con card colorate
  tan/taupe/dark e prezzo grande
- Nuove foto card program-*.jpg e modulo condiviso program-icons.ts

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

src/components/PageHero.astro

@@ -14,10 +14,12 @@ const bg = bgImage ? await getImage({ src: bgImage, width: 1920 }) : null;
 </section>
 
 <style>
-  .phero { background: var(--c-bg-alt); padding-block: 70px; }
-  .phero h1 { text-transform: lowercase; font-weight: 500; margin: 0; }
-  .phero--photo { position: relative; background-size: cover; background-position: center; padding-block: 110px; }
+  /* Banner scuro come nel Figma: ~460px, titolo bianco maiuscolo ~44px */
+  .phero { background: var(--c-dark); min-height: 380px; display: flex; align-items: center; }
+  .phero .container { width: 100%; }
+  .phero h1 { text-transform: uppercase; font-weight: 500; color: #fff; font-size: clamp(2.2rem, 4vw, 2.75rem); letter-spacing: .04em; margin: 0; }
+  .phero--photo { position: relative; background-size: cover; background-position: center; }
   .phero--photo::before { content: ''; position: absolute; inset: 0; background: rgba(46,32,24,.6); }
   .phero--photo .container { position: relative; }
-  .phero--photo h1 { color: #fff; }
+  @media (max-width: 767px) { .phero { min-height: 240px; } }
 </style>