<!-- ================================================================= -->
            <!-- 1. HERO COVER                                                     -->
            <!-- ================================================================= -->
            <?php 
                $heroQuote = $sectionMap['hero']['hero_quote'] ?? '';
                
                // Get Hero media from media config
                $heroMedia = $mediaConfig['hero'] ?? null;
                $heroDesktopUrl = '';
                $heroMobileUrl = '';
                
                if (is_array($heroMedia)) {
                    $heroDesktopUrl = !empty($heroMedia['desktop']) ? url('/i/media/serve') . '?path=' . urlencode($heroMedia['desktop']) : '';
                    $heroMobileUrl = !empty($heroMedia['mobile']) ? url('/i/media/serve') . '?path=' . urlencode($heroMedia['mobile']) : '';
                } elseif (is_string($heroMedia) && $heroMedia !== '') {
                    $heroDesktopUrl = url('/i/media/serve') . '?path=' . urlencode($heroMedia);
                }

                // Fallback to old hero config if media manager doesn't have it
                if ($heroDesktopUrl === '') {
                    $legacyCover = $sectionMap['hero']['cover_image'] ?? '';
                    if ($legacyCover !== '') {
                        $heroDesktopUrl = url('/i/media/serve') . '?path=' . urlencode($legacyCover);
                    }
                }
                
                // Fallback for mobile
                if ($heroMobileUrl === '') {
                    $heroMobileUrl = $heroDesktopUrl;
                }
            ?>
            <section class="relative min-h-[100dvh] md:min-h-[85vh] flex flex-col justify-end text-center p-8 bg-zinc-900 overflow-hidden">
                <?php if ($heroDesktopUrl !== ''): ?>
                    <picture class="absolute inset-0 w-full h-full z-0 pointer-events-none opacity-60">
                        <source media="(max-width: 767px)" srcset="<?= escape_html($heroMobileUrl) ?>">
                        <img src="<?= escape_html($heroDesktopUrl) ?>" alt="Hero Cover" class="w-full h-full object-cover object-center">
                    </picture>
                <?php else: ?>
                    <div class="absolute inset-0 bg-gradient-to-tr from-zinc-800 to-zinc-900 opacity-80 z-0 pointer-events-none"></div>
                <?php endif; ?>

                <div class="absolute inset-0 cover-gradient z-0 pointer-events-none"></div>

                <div class="relative z-10 text-white space-y-5 mb-6">
                    <p class="text-xs uppercase tracking-[0.25em] text-amber-200 font-bold">You are Cordially Invited to</p>
                    
                    <h1 class="text-4xl sm:text-5xl <?= $style['fontSerif'] ?> font-bold tracking-wide leading-tight">
                        <?= escape_html($groomName) ?> <br><span class="text-amber-300 font-light">&amp;</span><br> <?= escape_html($brideName) ?>
                    </h1>

                    <div class="pt-4 border-t border-white/20 max-w-[280px] mx-auto">
                        <p class="text-[10px] uppercase tracking-wider text-slate-300">Dear Valued Guest,</p>
                        <p class="text-lg font-bold font-serif-fancy text-white mt-1"><?= escape_html($guestName) ?></p>
                    </div>

                    <?php if ($heroQuote !== ''): ?>
                        <p class="text-xs italic text-slate-300 font-serif-fancy max-w-[320px] mx-auto pt-2 opacity-80">
                            "<?= escape_html($heroQuote) ?>"
                        </p>
                    <?php endif; ?>
                </div>
            </section>
