{% extends "base.html" %}

{% block title %}{{ site_name() }}{% endblock %}

{% block head %}
<style>
    .sk-hero {
        max-width: 760px;
        margin: 4rem auto 2rem;
        text-align: center;
    }
    .sk-hero h1 {
        font-size: clamp(2rem, 5vw, 3.25rem);
        line-height: 1.1;
        margin: 0 0 1rem;
    }
    .sk-hero p {
        font-size: 1.15rem;
        color: var(--sk-color-text-secondary, rgba(255, 255, 255, 0.7));
        margin: 0 auto 1.75rem;
        max-width: 38rem;
    }
    .sk-hero .sk-cta {
        display: inline-block;
        padding: 0.75rem 1.75rem;
        border-radius: 999px;
        background: var(--sk-color-accent, #34D399);
        color: #06251a;
        font-weight: 600;
        text-decoration: none;
    }
    .sk-sections {
        max-width: 960px;
        margin: 2rem auto 4rem;
        display: grid;
        gap: 1.5rem;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        padding: 0 1rem;
    }
    .sk-section-card {
        padding: 1.5rem 1.75rem;
        border-radius: 1rem;
        border: 1px solid var(--sk-color-border, rgba(255, 255, 255, 0.08));
        background: var(--sk-color-surface, rgba(255, 255, 255, 0.04));
    }
    .sk-section-card h2 {
        margin: 0 0 0.5rem;
        font-size: 1.25rem;
    }
    .sk-section-card p {
        margin: 0;
        color: var(--sk-color-text-secondary, rgba(255, 255, 255, 0.7));
        white-space: pre-line;
    }
</style>
{% endblock %}

{% block content %}
{% if content %}
<section class="sk-hero">
    <h1>{{ content.hero_title }}</h1>
    {% if content.hero_subtitle %}<p>{{ content.hero_subtitle }}</p>{% endif %}
    {% if content.cta.label %}
    <a class="sk-cta" href="{{ content.cta.url }}">{{ content.cta.label }}</a>
    {% endif %}
</section>

{% if content.sections %}
<div class="sk-sections">
    {% for section in content.sections %}
    <article class="sk-section-card">
        {% if section.heading %}<h2>{{ section.heading }}</h2>{% endif %}
        {% if section.body %}<p>{{ section.body }}</p>{% endif %}
    </article>
    {% endfor %}
</div>
{% endif %}
{% else %}
<hgroup>
    <h1>{{ site_tagline() }}</h1>
</hgroup>
{% endif %}
{% endblock %}