`**). |\n| `link` | object | Optional CTA; see [Link object](#link-object). |\n\n### Link object\n\n| Field | Required | Description |\n|-------|----------|-------------|\n| `label` | Yes (for a visible button) | Button label. A Bulma **`button is-primary`** is rendered only when `label` is set. |\n| `key` | No | Logical key forwarded in **`elClick`** when the button is activated (see [Events](#events)). |\n| `src` | No | Reserved in the type definition for host apps; **this component does not navigate** or open URLs from `src` automatically. |\n| `bgColor` | No | When set, applied inline as **background** and **border** color on the CTA. |\n| `textColor` | No | When set, applied inline as **text** color on the CTA. |\n\n## Events\n\nListen with `addEventListener` or your framework’s event binding.\n\n| Event | `detail` | When it fires |\n|-------|----------|----------------|\n| `elClick` | `{ key: string }` | When the user activates the CTA **and** `text.link.key` is defined. The `detail.key` matches `text.link.key`. |\n\nIf the user clicks the CTA but **`text.link.key`** is missing, the handler logs a console warning (**`\"no key\"`**) and **does not** dispatch `elClick`. To receive clicks, always set a **`key`** on `text.link` when you rely on this event.\n\n## Styling (Bulma CSS variables)\n\nThe shadow tree uses **Bulma 1.x** and shared host baseline styles. Theme the block from the light DOM by setting **`--bulma-*`** variables so they inherit onto the custom element. Documented overrides (from component metadata):\n\n| Variable | Role |\n|----------|------|\n| `--bulma-section-padding` | Feeds internal **`--hb-spiw-pad`** for host padding and text column insets (see `styles/webcomponent.scss`). |\n| `--bulma-primary` | Primary CTA styling for **`button is-primary`** when a link is present. |\n| `--bulma-text` | Title and body copy color. |\n| `--bulma-text-strong` | Strong heading / emphasis tone where Bulma maps it. |\n\nThe host also uses **`min-height: 21.875rem`** and **`display: block`** so the section keeps a stable footprint in page layouts.\n\n## CSS `::part`\n\nUse these part names to style inner surfaces without piercing the shadow root arbitrarily.\n\n| Part | Description |\n|------|-------------|\n| `mobile_text_content` | Mobile column wrapping title, body, and CTA. |\n| `mobile_title` | Mobile headline (`h1`). |\n| `mobile_text_body` | Mobile body paragraph. |\n| `mobile_link_button` | Mobile primary CTA button. |\n| `mobile_image_content` | Mobile figure wrapper around the image. |\n| `image_content` | Wide-layout image column surface. |\n| `text_content` | Wide-layout text column wrapper (title, body, CTA). |\n| `link_button` | Wide-layout primary CTA button. |\n| `title` | Wide-layout section headline (`h1`). |\n| `text_body` | Wide-layout body paragraph. |\n\n## Slots\n\nNone. All structure and copy come from the **`img`** and **`text`** attributes (JSON).\n\n## Minimal HTML example\n\n```html\n