{#
/**
 * Sub Page Hero Component
 * 
 * Smaller hero section for sub-pages with background image and gradient overlay.
 * Perfect for page headers and section introductions.
 *
 * Available variables:
 * - title: (string) Page title or heading. Required.
 * - description: (string|markup) Optional description text.
 * - bg_image: (string) Background image URL. Use high-quality images (1920px width recommended).
 * - heading_level: (number) HTML heading level (1-6). Default: 1
 *
 * Accessibility:
 * - Uses semantic <section> element
 * - Proper heading hierarchy
 * - Sufficient text contrast with overlay
 * - Background image is decorative
 *
 * Theme Variables Used:
 * - bg-primary: Fallback background color
 * - text-body-bg: Text color on colored backgrounds
 *
 * Examples:
 * {% include 'tailpine:subpagehero' with {
 *   title: 'About Us',
 *   description: 'Learn more about our story',
 *   bg_image: 'https://cdn.pixabay.com/photo/...jpg',
 * } %}
 */
#}

{% set hero_heading = heading_level|default(1) %}
{% set bg_img = bg_image|default('') %}

<!-- Sub Page Hero Section -->
<section 
  class="relative bg-primary mx-auto max-w-[1920px] text-body-bg py-20 bg-center bg-no-repeat bg-cover"
  {% if bg_img %}
  style="background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, transparent 100%), url('{{ bg_img }}');"
  {% endif %}
  aria-label="Page header"
>
  <div class="container px-6 lg:px-20 md:w-1/2">
    <h{{ hero_heading }} class="text-5xl md:text-6xl font-extrabold mb-6">
      {% block title %}
        {{ title }}
      {% endblock %}
    </h{{ hero_heading }}>
    
    {% block description %}
      {% if description %}
      <div class="text-lg md:text-xl max-w-2xl animate-fade-in">
        {{ description }}
      </div>
      {% endif %}
    {% endblock %}
  </div>
</section>
