{% extends "public_base.html" %}

{% block title %}About — {{ SPLENT_APP }}{% endblock %}

{% block head %}
<style>
    /* A reading column, not a full-width wall of text. */
    .about-wrap {
        max-width: 46rem;
        margin-inline: auto;
    }

    .about-nav {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-bottom: 2.5rem;
    }

    .about-nav a {
        padding: .35rem .9rem;
        border: 1px solid var(--brand-border);
        border-radius: 999px;
        background: var(--brand-surface);
        color: var(--brand-heading);
        font-size: .9rem;
        font-weight: 600;
        text-decoration: none;
    }

    .about-nav a:hover {
        border-color: var(--brand-primary);
        color: var(--brand-primary);
    }

    .about-section + .about-section {
        margin-top: 3.5rem;
    }

    /* Anchor jumps land below the sticky header. */
    .about-section {
        scroll-margin-top: var(--site-header-offset, 6rem);
    }

    /* Photos inside a section render as an even two-up gallery, one column
       on narrow screens. Same height for every photo, whatever its size. */
    .about-gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .about-gallery img {
        width: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: var(--brand-radius);
        margin: 0;
    }

    @media (max-width: 36rem) {
        .about-gallery {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block hero %}
    {{ render_block('hero', eyebrow=_('The lab'), title=_('About'),
                    subtitle=_('Who we are and what we stand for.')) }}
{% endblock %}

{% block content %}
<div class="container section">
    <div class="about-wrap">
        {% if sections | length > 1 %}
        <nav class="about-nav" aria-label="{{ _('On this page') }}">
            {% for s in sections %}<a href="#{{ s.slug }}">{{ s.title }}</a>{% endfor %}
        </nav>
        {% endif %}
        {% for s in sections %}
        <section class="about-section" id="{{ s.slug }}">
            <h2 class="section-title">{{ s.title }}</h2>
            <div class="prose">{{ s.content | safe }}</div>
        </section>
        {% else %}
        <p class="card__text">{{ _('No sections yet.') }}</p>
        {% endfor %}
    </div>
</div>
{% endblock %}