{#
  Hero Card component.

  Full-width hero section with a background image, dark overlay, centered
  heading, description, and two CTA buttons (primary + secondary).

  Desktop: 640px tall, 64px side padding, 72px serif heading.
  Mobile:  auto height, 32px padding all sides, smaller heading.

  @prop heading (string) - Main heading text.
  @prop description (string) - Supporting body text.
  @prop media (object) - Background image media object.
  @prop primary_button_label (string) - Label for the primary CTA button.
  @prop primary_button_url (string) - href for the primary CTA button.
  @prop secondary_button_label (string) - Label for the secondary CTA button.
  @prop secondary_button_url (string) - href for the secondary CTA button.
  @prop heading_level (number) - HTML heading level (1–3). Defaults to 1.
#}

{% set level = heading_level|default(1) %}
{% set tag = 'h' ~ level %}

<div class="hero-card custom-container">
	<div
		class="hero-card__card">

		{# Background image + overlay (aria-hidden so screen readers skip it) #}
		{% if media.src %}
			<div class="hero-card__bg" aria-hidden="true">
				{% include 'canvas:image' ignore missing with {
          src: media.src,
          alt: media.alt|default(''),
          class: 'hero-card__image',
          width: media.width,
          height: media.height
        } only %}
				<div class="hero-card__overlay"></div>
			</div>
		{% endif %}

		<div class="hero-card__column">

			<div class="hero-card__content">
				{% if heading %}
					<{{tag}} class="hero-card__heading">{{ heading }}</{{tag}}>
				{% endif %}
				{% if description %}
					<p class="hero-card__description">{{ description }}</p>
				{% endif %}
			</div>

			{% if primary_button_label or secondary_button_label %}
				<div class="hero-card__actions">
					{% if primary_button_label %}
						{% if primary_button_url %}
							<a href="{{ primary_button_url }}" class="hero-card__btn hero-card__btn--primary">
								{{- primary_button_label -}}
							</a>
						{% else %}
							<button type="button" class="hero-card__btn hero-card__btn--primary">
								{{- primary_button_label -}}
							</button>
						{% endif %}
					{% endif %}

					{% if secondary_button_label %}
						{% if secondary_button_url %}
							<a href="{{ secondary_button_url }}" class="hero-card__btn hero-card__btn--secondary">
								{{- secondary_button_label -}}
							</a>
						{% else %}
							<button type="button" class="hero-card__btn hero-card__btn--secondary">
								{{- secondary_button_label -}}
							</button>
						{% endif %}
					{% endif %}
				</div>
			{% endif %}

		</div>
	</div>
</div>
