# XWUIPodcastHeroBanner

A large featured-episode hero: an illustration/artwork slot beside a copy column holding an uppercase accent eyebrow ("New Episode"), a fluid-scale headline, a host byline (`hostName · hostLocation` when both are given), and a prominent CTA. `conf_comp.imagePosition` puts the artwork on either edge on wide viewports; below 720px the layout stacks copy-first regardless. `gradientWash` (on by default) paints a soft `color-mix` accent wash behind the copy.

Composes **XWUIButton** for the "Listen Now" CTA (`size: 'lg'`, `icon: 'play'`, variant from `conf_comp.ctaVariant`) so the hero inherits every button token - fills, press feedback, focus ring - instead of hand-rolling a CTA. The CTA fires `data.onCtaClick(id)`, `onCtaClick()` handlers, and the bubbling `xwui-podcast-hero-banner:cta-click` DOM event; `data.onClick` (optional) fires for clicks on the banner body and deliberately ignores clicks inside the CTA slot so the two never double-fire.

## Basic Usage

```ts
import { XWUIPodcastHeroBanner } from '@exonware/xwui/industry/podcast';

new XWUIPodcastHeroBanner(document.getElementById('app')!, {
    id: 'ep-142',
    eyebrowLabel: 'New Episode',
    title: 'Shipping design systems at scale',
    hostName: 'Mara Whitfield',
    hostLocation: 'Recorded in Lisbon',
    ctaLabel: 'Listen Now',
    imageUrl: '/covers/ep-142-wide.jpg',
    onCtaClick: (id) => player.play(id),
});
```

## Artwork On The Leading Edge

```ts
new XWUIPodcastHeroBanner(host, {
    eyebrowLabel: 'Season 4 Premiere',
    title: 'The people who keep the internet awake',
    hostName: 'Dev Raman',
    ctaLabel: 'Start listening',
}, { imagePosition: 'start', gradientWash: false, ctaVariant: 'outline' });
```

## Declarative

```html
<xwui-podcast-hero-banner
    eyebrowLabel="Just Published"
    title="Field recording on a budget"
    hostName="Ines Duarte"
    ctaLabel="Listen Now"></xwui-podcast-hero-banner>
```