<?php
if (!defined('ABSPATH')) {
    exit;
}

get_header();
the_post();

$data = fea_support_campaign_data(get_the_ID());
?>
<style>
.fea-support-page {
    --fea-support-burgundy: #8b1a2e;
    --fea-support-ink: #2a2320;
    --fea-support-warm: #f5efe7;
    --fea-support-line: #e6d8c5;
    --fea-support-card: #fffdf9;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4.5rem;
    color: var(--fea-support-ink);
}
.fea-support-hero {
    background: linear-gradient(180deg, #f3ece3 0%, #fbf7f1 100%);
    border: 1px solid var(--fea-support-line);
    border-radius: 24px;
    padding: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.8fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.fea-support-hero__eyebrow,
.fea-support-banner__eyebrow {
    display: inline-block;
    margin-bottom: 0.8rem;
    color: var(--fea-support-burgundy);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.fea-support-hero__title {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.05;
    margin: 0 0 1rem;
}
.fea-support-hero__intro {
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.7;
    max-width: 58ch;
}
.fea-support-card {
    background: var(--fea-support-card);
    border: 1px solid var(--fea-support-line);
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 18px 40px -34px rgba(42, 35, 32, 0.55);
}
.fea-support-card__title {
    font-size: 0.95rem;
    margin: 0 0 1rem;
    color: #6f655c;
}
.fea-support-progress {
    margin-bottom: 1rem;
}
.fea-support-progress__numbers {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.55rem;
}
.fea-support-progress__numbers strong {
    font-size: 1.35rem;
    line-height: 1.1;
}
.fea-support-progress__numbers span {
    font-size: 0.92rem;
    color: #6f655c;
    font-weight: 600;
}
.fea-support-progress__track {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: #eadfce;
    overflow: hidden;
}
.fea-support-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8b1a2e, #c4884b);
}
.fea-support-progress__note {
    margin: 0.65rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #6f655c;
}
.fea-support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.fea-support-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.94rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.fea-support-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px -20px rgba(42, 35, 32, 0.55);
}
.fea-support-button.is-primary {
    background: var(--fea-support-burgundy);
    color: #fff;
}
.fea-support-button.is-secondary {
    background: #fff;
    color: var(--fea-support-ink);
    border: 1px solid var(--fea-support-line);
}
.fea-support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2rem;
    align-items: start;
}
.fea-support-content {
    min-width: 0;
}
.fea-support-content > *:first-child {
    margin-top: 0;
}
.fea-support-content h2,
.fea-support-content h3 {
    font-family: "Fraunces", Georgia, serif;
    color: var(--fea-support-ink);
}
.fea-support-content h2 {
    margin-top: 2rem;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.fea-support-content h3 {
    font-size: 1.2rem;
}
.fea-support-content p,
.fea-support-content li {
    line-height: 1.75;
}
.fea-support-sidebar {
    position: sticky;
    top: 2rem;
}
.fea-support-sidebar__small {
    margin: 1rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #6f655c;
}
.fea-support-banner {
    max-width: 1180px;
    margin: 2rem auto 0;
    padding: 1.4rem 1.5rem;
    border-radius: 20px;
    border: 1px solid var(--fea-support-line);
    background: linear-gradient(180deg, #f8f3eb 0%, #fffdf9 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.85fr);
    gap: 1.5rem;
    align-items: center;
}
.fea-support-banner__title {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    margin: 0 0 0.45rem;
}
.fea-support-banner__text {
    margin: 0;
    line-height: 1.65;
}
.fea-support-banner__links {
    margin-top: 0.85rem;
}
@media (max-width: 920px) {
    .fea-support-hero,
    .fea-support-layout,
    .fea-support-banner {
        grid-template-columns: 1fr;
    }

    .fea-support-sidebar {
        position: static;
    }
}
</style>

<main id="wp--skip-link--target" class="fea-support-page">
    <section class="fea-support-hero">
        <div class="fea-support-hero__copy">
            <span class="fea-support-hero__eyebrow"><?php echo esc_html($data['eyebrow'] ?? 'Apoya Fe Adulta'); ?></span>
            <h1 class="fea-support-hero__title"><?php echo esc_html($data['hero_title'] ?? get_the_title()); ?></h1>
            <p class="fea-support-hero__intro"><?php echo esc_html($data['hero_intro'] ?? ''); ?></p>
        </div>

        <aside class="fea-support-card" aria-label="Estado de la campaña">
            <p class="fea-support-card__title">Objetivo de la campaña</p>
            <?php echo fea_support_progress_html($data, 'page'); ?>
            <?php echo fea_support_buttons_html($data, 'page'); ?>
        </aside>
    </section>

    <div class="fea-support-layout">
        <div class="fea-support-content">
            <?php the_content(); ?>
        </div>

        <aside class="fea-support-sidebar">
            <div class="fea-support-card">
                <p class="fea-support-card__title">Colaborar ahora</p>
                <?php echo fea_support_progress_html($data, 'sidebar'); ?>
                <?php echo fea_support_buttons_html($data, 'sidebar'); ?>
                <p class="fea-support-sidebar__small">
                    Si compartes esta página con otras personas de la comunidad, también nos ayudas a acercarnos al objetivo.
                </p>
            </div>
        </aside>
    </div>
</main>

<?php
get_footer();
