{% extends "public/base.html" %}
{% load static %}

{% block title %}{{ brand.name }} — {{ site.site_name }}{% endblock %}
{% block meta_description %}{% firstof brand.meta_description brand.intro brand.tagline site.meta_description %}{% endblock %}

{% block content %}
<div class="section-first-inner">

    <div class="section compact-bottom">
        <div class="hero-container">
            <div class="banner-inner">
                <div class="banner-inner-content">
                    {% if brand.logo %}
                    <img src="{{ brand.logo.url }}" alt="{{ brand.name }}"
                         style="height:52px;width:auto;margin-bottom:1rem">
                    {% endif %}
                    <h1>{{ brand.name }}</h1>
                    {% if brand.tagline %}
                    <p style="font-size:1.15rem;font-weight:600;color:{% firstof brand.accent_colour tenant.accent_colour '#033152' %}">{{ brand.tagline }}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% if brand.hero %}
    <div class="section compact-bottom">
        <div class="hero-container">
            <img src="{{ brand.hero.url }}" alt="{{ brand.name }}"
                 style="width:100%;height:auto;border-radius:12px">
        </div>
    </div>
    {% endif %}

    <div class="section">
        <div class="hero-container">
            {% if brand.intro %}
            <p style="font-size:1.05rem;opacity:.9;margin-bottom:1.5rem">{{ brand.intro }}</p>
            {% endif %}
            {% if brand.body %}
            <div>{{ brand.body|safe }}</div>
            {% endif %}
        </div>
    </div>

    {% if siblings %}
    <div class="section">
        <div class="hero-container">
            <h3 style="margin-bottom:1.25rem">More from {{ site.site_name }}</h3>
            <div style="display:flex;flex-wrap:wrap;gap:.75rem">
                {% for other in siblings %}
                <a href="{{ other.get_absolute_url }}"
                   style="padding:.5rem 1rem;border:1px solid rgba(0,0,0,.12);border-radius:999px;text-decoration:none;color:inherit;font-size:.9rem">
                    {{ other.name }}
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}