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

{% block content %}

{% if hero.heading_line1 or hero.heading_accent or hero.description %}
<section style="padding:24px 0 8px">
  {% if hero.heading_line1 or hero.heading_accent %}
  <h1 style="margin:0 0 12px;font-size:2.1rem;line-height:1.25;font-weight:700">
    {{ hero.heading_line1 }}{% if hero.heading_accent %} <span style="color:var(--accent)">{{ hero.heading_accent }}</span>{% endif %}{% if hero.heading_line2 %} {{ hero.heading_line2 }}{% endif %}
  </h1>
  {% endif %}
  {% if hero.description %}<p style="margin:0;max-width:62ch;color:var(--muted)">{{ hero.description }}</p>{% endif %}
</section>
{% endif %}

{% if about.heading or about.body %}
<section style="padding:24px 0;border-top:1px solid var(--line)">
  {% if about.section_tag %}<p style="margin:0 0 8px;color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase">{{ about.section_tag }}</p>{% endif %}
  {% if about.heading %}<h2 style="margin:0 0 12px;font-size:1.4rem;font-weight:700">{{ about.heading }}{% if about.heading_em %} <span style="color:var(--accent)">{{ about.heading_em }}</span>{% endif %}</h2>{% endif %}
  {% if about.body %}<div style="max-width:70ch">{{ about.body|safe }}</div>{% endif %}
</section>
{% endif %}

{% if services %}
<section style="padding:24px 0;border-top:1px solid var(--line)">
  {% if services_header.section_tag %}<p style="margin:0 0 8px;color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase">{{ services_header.section_tag }}</p>{% endif %}
  {% if services_header.heading %}<h2 style="margin:0 0 16px;font-size:1.4rem;font-weight:700">{{ services_header.heading }}{% if services_header.heading_em %} <span style="color:var(--accent)">{{ services_header.heading_em }}</span>{% endif %}</h2>{% endif %}
  <ul style="margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px">
    {% for service in services %}
    <li style="border:1px solid var(--line);border-radius:10px;padding:16px">
      <p style="margin:0 0 6px;font-weight:700">{% if service.service_page_active and service.slug %}<a href="/services/{{ service.slug }}/" style="text-decoration:none">{{ service.title }}</a>{% else %}{{ service.title }}{% endif %}</p>
      {% if service.description %}<p style="margin:0;color:var(--muted);font-size:.92rem">{{ service.description|truncatewords:24 }}</p>{% endif %}
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}

{% if portfolio %}
<section style="padding:24px 0;border-top:1px solid var(--line)">
  <h2 style="margin:0 0 16px;font-size:1.4rem;font-weight:700">Portfolio</h2>
  <ul style="margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px">
    {% for item in portfolio %}
    <li style="border:1px solid var(--line);border-radius:10px;padding:16px">
      <p style="margin:0;font-weight:700"><a href="/portfolio/{{ item.slug }}/" style="text-decoration:none">{{ item.title }}</a></p>
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}

{% if insights %}
<section style="padding:24px 0;border-top:1px solid var(--line)">
  <h2 style="margin:0 0 16px;font-size:1.4rem;font-weight:700">Insights</h2>
  <ul style="margin:0;padding:0;list-style:none;display:grid;gap:12px">
    {% for post in insights %}
    <li><a href="/insights/{{ post.slug }}/" style="text-decoration:none">{{ post.title }}</a></li>
    {% endfor %}
  </ul>
</section>
{% endif %}

{% endblock %}