/* Hallmark · component: model showcase band · genre: atmospheric · theme: Midnight (tokens.css)
 * Owner reference (e): accent uppercase model name + one line, mosaic of real clips playing. */
.showcase { margin: var(--space-2xl) 0; }
.showcase-band + .showcase-band { margin-top: var(--space-2xl); }
.showcase-band h2 { margin: 0; font: 700 clamp(28px, 4vw, 44px)/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: var(--color-accent); font-style: normal; }
.showcase-band > p { margin: var(--space-xs) 0 var(--space-md); color: var(--color-ink-dim); }
.showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(160px, 22vw); gap: var(--space-sm); }
.showcase-tile { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.showcase-tile:first-child { grid-row: span 2; grid-column: span 2; }
.showcase-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-lg) var(--space-md) var(--space-sm); background: linear-gradient(transparent, var(--color-scrim)); color: var(--color-ink); font-size: var(--text-sm); }
.showcase-tile figcaption strong { display: block; font: 600 var(--text-md)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.showcase-tile.pending { display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(135deg, transparent 0 14px, var(--color-paper-3) 14px 15px), var(--color-paper-2); }
.showcase-tile.pending span { font: 500 var(--text-sm)/1.6 var(--font-mono); letter-spacing: .08em; color: var(--color-ink-faint); }
@media (max-width: 760px) { .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(120px, 34vw); } }
@media (max-width: 480px) { .showcase-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 56vw; } .showcase-tile:first-child { grid-column: auto; grid-row: auto; } }
