feat(shows): add uploaded show images

frontend/src/app/pages/show-detail-placeholder-page.component.ts

@@ -45,9 +45,16 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
         </mat-card>
       } @else if (show()) {
         <header class="page-header">
-          <p class="eyebrow">Show detail</p>
-          <h1>{{ show()!.title }}</h1>
-          <p class="supporting">{{ show()!.description || show()!.summary }}</p>
+          <div class="hero-copy">
+            <p class="eyebrow">Show detail</p>
+            <h1>{{ show()!.title }}</h1>
+            <p class="supporting">{{ show()!.description || show()!.summary }}</p>
+          </div>
+          @if (show()!.image_url) {
+            <div class="hero-image-wrap">
+              <img class="hero-image" [src]="show()!.image_url" [alt]="show()!.title" />
+            </div>
+          }
         </header>
 
         <section class="section">
@@ -115,9 +122,17 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
     }
 
     .page-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 420px);
+      gap: 24px;
+      align-items: start;
       margin-bottom: 28px;
     }
 
+    .hero-copy {
+      min-width: 0;
+    }
+
     .eyebrow {
       margin: 0 0 10px;
       color: var(--azionelab-accent);
@@ -138,6 +153,24 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
       max-width: 64ch;
     }
 
+    .hero-image-wrap {
+      overflow: hidden;
+      border-radius: 12px;
+      border: 1px solid var(--azionelab-border);
+      background:
+        linear-gradient(135deg, rgba(207, 71, 51, 0.16), rgba(15, 22, 36, 0.08)),
+        #f8f1ea;
+      box-shadow: var(--azionelab-shadow);
+      aspect-ratio: 4 / 5;
+    }
+
+    .hero-image {
+      width: 100%;
+      height: 100%;
+      display: block;
+      object-fit: cover;
+    }
+
     .section {
       display: grid;
       gap: 20px;
@@ -231,6 +264,10 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
     }
 
     @media (max-width: 860px) {
+      .page-header {
+        grid-template-columns: 1fr;
+      }
+
       .section-heading {
         align-items: flex-start;
         flex-direction: column;

frontend/src/app/pages/show-list-page.component.ts

@@ -59,6 +59,11 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
         <div class="show-grid">
           @for (show of shows(); track show.slug) {
           <mat-card class="show-card">
+            @if (show.image_url) {
+              <div class="show-image-wrap">
+                <img class="show-image" [src]="show.image_url" [alt]="show.title" />
+              </div>
+            }
             <mat-card-title>{{ show.title }}</mat-card-title>
             <mat-card-content>
               <p>{{ show.summary }}</p>
@@ -157,6 +162,22 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
       box-shadow: var(--azionelab-shadow);
     }
 
+    .show-image-wrap {
+      aspect-ratio: 16 / 10;
+      overflow: hidden;
+      border-bottom: 1px solid var(--azionelab-border);
+      background:
+        linear-gradient(135deg, rgba(207, 71, 51, 0.14), rgba(15, 22, 36, 0.06)),
+        #f8f1ea;
+    }
+
+    .show-image {
+      width: 100%;
+      height: 100%;
+      display: block;
+      object-fit: cover;
+    }
+
     .show-card mat-card-content {
       flex: 1;
     }

frontend/src/app/services/shows-api.service.ts

@@ -9,6 +9,7 @@ export type ShowListItem = {
   title: string;
   slug: string;
   summary: string;
+  image_url: string;
   poster_image: string;
 };