{% extends "public/base.html" %}
{% block title %}About — {{ gallery.public_name or gallery.name }}{% endblock %}

{% block extra_css %}
<style>
  @media (max-width: 768px) {
    .about-wrap { padding: 40px 20px !important; }
    .about-info-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .about-artists-cols { columns: 1 !important; }
  }
</style>
{% endblock %}
{% block content %}
<div class="about-wrap" style="padding:80px 40px;max-width:900px;margin:0 auto;">
  <div class="page-heading">{{ gallery.public_name or gallery.name }}</div>
  {% set tagline, _tl = get_trans(gallery, "tagline") %}
  {% if tagline %}
  <div class="page-subheading" style="font-family:var(--font-serif);font-size:1.1rem;font-style:italic;">{{ tagline }}</div>
  {% endif %}

  {% set about, ab_lang = get_trans(gallery, "about_text") %}
  {% if about %}
  <div style="max-width:640px;margin-top:8px;font-size:0.95rem;line-height:1.9;color:#333;">
    {{ about|nl2br }}
  </div>
  {% endif %}

  <div class="about-info-grid" style="margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:640px;">
    <div>
      <div class="section-label">{{ _("Visit") }}</div>
      {% if gallery.address %}<p style="font-size:0.9rem;line-height:1.8;margin-top:8px;">{{ gallery.address }}<br>{% if gallery.zip_code %}{{ gallery.zip_code }} {% endif %}{{ gallery.city or "" }}<br>{{ gallery.country or "" }}</p>{% endif %}
      {% if gallery.phone %}<p style="font-size:0.85rem;color:var(--muted);margin-top:8px;">{{ gallery.phone }}</p>{% endif %}
    </div>
    <div>
      <div class="section-label">{{ _("Contact") }}</div>
      {% if gallery.contact_email %}
      <p style="margin-top:8px;"><a href="mailto:{{ gallery.contact_email }}" style="font-size:0.9rem;color:var(--text);">{{ gallery.contact_email }}</a></p>
      {% endif %}
      {% if gallery.website %}
      <p style="margin-top:8px;"><a href="{{ gallery.website }}" target="_blank" style="font-size:0.85rem;color:var(--muted);">{{ gallery.website }}</a></p>
      {% endif %}
      {% if gallery.instagram_url %}
      <p style="margin-top:8px;"><a href="{{ gallery.instagram_url }}" target="_blank" style="font-size:0.85rem;color:var(--muted);">Instagram</a></p>
      {% endif %}
    </div>
  </div>

  {% if artists %}
  <div style="margin-top:80px;">
    <div class="section-label">Represented Artists</div>
    <div class="about-artists-cols" style="margin-top:24px;columns:2;gap:32px;">
      {% for a in artists %}
      <p style="margin-bottom:8px;">
        <a href="{{ url_for('public.artist_detail', id=a.id) }}" style="font-family:var(--font-serif);font-size:1rem;font-weight:300;color:var(--text);text-decoration:none;">
          {{ a.first_name }} {{ a.last_name }}
        </a>
      </p>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}