<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ post.title }} | IG Radio</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap" rel="stylesheet">
</head>

<body>
    <nav class="top-nav">
        <a href="/" class="top-nav-logo">
            <img src="/static/images/logo.png" alt="IG Radio" style="height: 50px;">
        </a>
        <ul class="top-nav-links">
            <li><a href="/" class="nav-link">Início</a></li>
            <li><a href="/blog" class="nav-link active">Notícias</a></li>
        </ul>
        <button class="mobile-menu-btn">☰</button>
    </nav>

    <!-- ── Mobile Overlay ───────────────────────────────── -->
    <div class="mobile-overlay" id="mobileOverlay">
        <a href="/" class="nav-link" onclick="toggleMobileMenu()">Início</a>
        <a href="/blog" class="nav-link active" onclick="toggleMobileMenu()">Notícias</a>
    </div>

    <div class="container" style="padding: 60px 20px; max-width: 900px;">
        <article>
            {% if post.banner_filename %}
            <img src="/static/images/{{ post.banner_filename }}"
                style="width: 100%; height: auto; border-radius: 16px; margin-bottom: 40px; box-shadow: var(--shadow);"
                alt="{{ post.title }}">
            {% endif %}

            <div style="margin-bottom: 20px;">
                <span style="font-size: 0.9rem; color: var(--primary); font-weight: 800; text-transform: uppercase;">
                    {{ post.published_at.strftime('%d de %B, %Y') }}
                </span>
            </div>

            <h1 style="font-size: 3.5rem; font-weight: 900; color: #fff; margin-bottom: 30px; line-height: 1.1;">{{
                post.title }}</h1>

            <div style="font-size: 1.2rem; line-height: 1.8; color: var(--text-main); white-space: pre-wrap;">
                {{ post.description }}
            </div>

            {% if links %}
            <div class="card" style="margin-top: 50px; background: rgba(255,255,255,0.02);">
                <h3 style="margin-bottom: 20px; font-weight: 800;">Links Úteis</h3>
                <div style="display: flex; flex-wrap: wrap; gap: 15px;">
                    {% for link in links %}
                    <a href="{{ link.url }}" target="_blank" class="btn secondary small">
                        {{ link.label }}
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </article>

        <div style="margin-top: 60px; border-top: 1px solid var(--border); padding-top: 30px; text-align: center;">
            <a href="/blog" class="btn secondary">← Voltar às Notícias</a>
        </div>
    </div>

    <footer>
        <div class="container footer-content">
            <div>
                <span class="footer-logo">IG RADIO</span>
                <p style="color: rgba(255,255,255,0.4); font-size: 0.9rem;">A tua rádio digital de confiança.</p>
            </div>
            <div class="footer-links">
                <h4>Navegação</h4>
                <ul>
                    <li><a href="/">Início</a></li>
                    <li><a href="/blog">Notícias</a></li>
                </ul>
            </div>
            <div class="footer-links">
                <h4>Legal</h4>
                <ul>
                    <li><a href="/privacy">Privacidade</a></li>
                    <li><a href="/terms">Termos de Uso</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            &copy; 2026 IG Radio. Desenvolvido para amantes de música.
        </div>
    </footer>
    <script src="/static/js/script.js"></script>
</body>

</html>