<!-- ================================================================= -->
            <!-- 8. STORY GALLERY (Cinematic 5-Image Horizontal Row)               -->
            <!-- ================================================================= -->
            <?php if (isset($sectionMap['story'])): 
                $storyConfig = $sectionMap['story'];
                $rawStoryImages = array_slice((array)($storyConfig['story_images'] ?? []), 0, 5);
                $storyUrls = array_filter(array_map(
                    fn($p) => $p ? url('/i/media/serve') . '?path=' . urlencode($p) : '',
                    $rawStoryImages
                ));
            ?>
                <?php if (!empty($storyUrls)): ?>
                    <section class="py-10 md:py-12 px-6 md:px-12 text-center space-y-6 border-b <?= $style['borderColor'] ?>">
                        <?php
    $headerEmoji = '✨';
    $headerTitle = 'Story Gallery';
    require __DIR__ . '/../partials/section_header.php';
    unset($headerClass, $headerEmoji, $headerEmojiClass, $headerTitle);
?>

                        <!-- Single horizontal row: up to 5 images remain visible -->
                        <div class="flex flex-row overflow-x-auto gap-2 md:gap-3 py-4 scrollbar-none justify-start md:justify-center items-center">
                            <?php foreach ($storyUrls as $sUrl): ?>
                                <div class="flex-shrink-0 w-44 md:w-52 aspect-[3/4] rounded-2xl overflow-hidden border border-slate-100 shadow-md bg-slate-100">
                                    <img src="<?= escape_html($sUrl) ?>" alt="Story Gallery" class="w-full h-full object-cover hover:scale-105 transition duration-500">
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </section>
                <?php endif; ?>
            <?php endif; ?>
