{% load media %}
{% comment %}Baner strony glownej, styl klasyczny
   (Tresc > Strona glowna > Styl). Zdjecie stoi w kolumnie tresci, napis na
   nim - bez kreski nad naglowkiem i bez nadtytulu wersalikami, bo nazwa
   serwisu jest juz w logo nad banerem. Wysokosc i promien ustawia panel,
   wiec ida atrybutem `style` i szablon ich nie dotyka.{% endcomment %}
<section class="{{ banner.banner_visibility_class }} mx-auto w-full max-w-6xl px-6 pt-10">
  {% if banner.banner_url %}<a href="{{ banner.banner_url }}" class="group block">{% endif %}
    <div class="relative overflow-hidden bg-slate-900"
         style="min-height: {{ banner.banner_min_height }}px; border-radius: {{ banner.banner_radius }}px;">
      {% picture banner.banner_image alt=banner.banner_title css="absolute inset-0 h-full w-full object-cover" sizes="100vw" loading="eager" fetchpriority="high" %}
      {% if banner.banner_title or banner.banner_text or banner.banner_button_label %}
        {% comment %}Przyciemnienie od dolu - napis ma sie czytac na kazdym
           kadrze, a gora zdjecia zostaje widoczna.{% endcomment %}
        <div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/30 to-transparent"></div>
        <div class="relative flex min-h-full flex-col justify-end p-8 sm:p-12"
             style="min-height: {{ banner.banner_min_height }}px;">
          <div class="max-w-2xl text-white">
            {% if banner.banner_title %}
              <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ banner.banner_title }}</h2>
            {% endif %}
            {% if banner.banner_text %}
              <p class="mt-4 max-w-xl text-lg leading-relaxed text-white/85">{{ banner.banner_text }}</p>
            {% endif %}
            {% if banner.banner_button_label and banner.banner_url %}
              <span class="btn-primary mt-8 px-5 py-2.5">
                {{ banner.banner_button_label }}
                <span aria-hidden="true">&rarr;</span>
              </span>
            {% endif %}
          </div>
        </div>
      {% endif %}
    </div>
  {% if banner.banner_url %}</a>{% endif %}
</section>