<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equip Empower Encouraged Widget</title>
<style>
    .story-card-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        padding: 0;
    }

    .story-card {
        position: relative;
        transition: transform 0.4s;
        cursor: pointer;
        background-color: #f9f9f9;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .story-card img {
        width: 100%;
        height: auto;
        display: block;
    }

    .story-card:hover {
        transform: translateY(-10px);
    }

    .modal-overlay {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .modal-content {
        background-color: #fefefe;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 600px;
        max-height: 90vh;
        border-radius: 10px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow-y: auto;
    }

    .modal-header {
        font-size: 24px;
        font-weight: bold;
        margin: 50px 0 20px 0;
        text-align: center;
        color: #000;
    }

    .modal-body {
        font-size: 16px;
        line-height: 1.6;
        max-height: 60vh;
        overflow-y: auto;
        position: relative;
    }

    .close {
        color: #000;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
    }

    .back-button {
        color: #000;
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        display: none;
    }

    .back-button:hover,
    .back-button:focus {
        color: #000;
        text-decoration: none;
    }

    .story-structure-button {
        display: block;
        margin: 20px auto 0;
        padding: 10px 20px;
        font-size: 16px;
        background-color: #000;
        color: #fff;
        border: none;
        border-radius: 0;
        cursor: pointer;
        text-align: center;
    }

    .story-structure-button:hover {
        background-color: #333;
    }

    .no-scroll {
        overflow: hidden;
        height: 100%;
    }
</style>

<div class="story-card-widget" id="widget7">
    <div class="story-card-container">
        <div class="story-card" data-widget-id="widget7" data-title="Equip. Empower. Encouraged" data-description="<p>Disney+ features many Star Wars series, including The Mandalorian, Clone Wars: The Final Season, The Bad Batch, Star Wars Visions, The Book of Boba Fett, Obi-Wan Kenobi, Tales of the Jedi, Andor, Tales of the Empire, Young Jedi Adventures, Ahsoka, The Acolyte, Skeleton Crew, and more.</p>">
            <img src="https://storycaptain.co.uk/wp-content/uploads/2024/11/Asset-890@2x.png" alt="Equip. Empower. Encouraged" draggable="false">
        </div>
    </div>
    <div class="modal-overlay" id="modal-widget7" onclick="closeModal('widget7')">
        <div class="modal-content" onclick="event.stopPropagation();">
            <span class="close" onclick="closeModal('widget7')">×</span>
            <span class="back-button" id="back-button-widget7" onclick="goBack('widget7')">‹</span>
            <div class="modal-header" id="modalTitle-widget7"></div>
            <div class="modal-body" id="modalDescription-widget7"></div>
            <button class="story-structure-button" id="storyStructureButton-widget7" onclick="showStoryStructureContent('widget7')">Story Structure</button>
            <div class="story-structure-content" id="storyStructureContent-widget7" style="display: none;">
                <p>"Picking my favorite experience from an event was tough, as I’ve been attending science fiction conventions since the early ‘80s. But if I had to choose, my favorite moment was actually quite recent -- the surprise John Williams Star Wars concert hosted at Star Wars Celebration Orlando in 2017, which closed out the 40th anniversary panel.</p>
                <p>I’d seen Williams in concert before, but not one dedicated exclusively to Star Wars, and certainly not one that was totally unexpected. When the lights came up following the Carrie Fisher tribute, I was absolutely floored to discover that Williams was actually on stage to lead the symphony (my in-the-know Lucasfilm colleagues had held the secret very close).</p>
                <p>His opening with his classic “Princess Leia’s Theme” (my favorite of the entire saga) made this a home run of a Celebration experience, and one of the most emotionally poignant for me." - Pete Vilmur (Senior Writer, Lucasfilm Publicity)</p>
            </div>
        </div>
    </div>
</div>
<script>
    document.querySelectorAll('.story-card').forEach(card => {
        card.addEventListener('click', () => {
            const widgetId = card.getAttribute('data-widget-id');
            const modal = document.getElementById(`modal-${widgetId}`);
            const modalTitle = document.getElementById(`modalTitle-${widgetId}`);
            const modalDescription = document.getElementById(`modalDescription-${widgetId}`);
            const storyStructureButton = document.getElementById(`storyStructureButton-${widgetId}`);
            const storyStructureContent = document.getElementById(`storyStructureContent-${widgetId}`);
            const backButton = document.getElementById(`back-button-${widgetId}`);

            storyStructureContent.style.display = 'none';
            storyStructureButton.style.display = 'block';
            modalDescription.style.display = 'block';
            modalTitle.textContent = card.getAttribute('data-title');
            modalDescription.innerHTML = card.getAttribute('data-description');
            modal.style.display = 'block';
            document.body.classList.add('no-scroll');
            backButton.style.display = 'none';
        });
    });

    function closeModal(widgetId) {
        const modal = document.getElementById(`modal-${widgetId}`);
        modal.style.display = 'none';
        document.body.classList.remove('no-scroll');
    }

    function showStoryStructureContent(widgetId) {
        const storyStructureContent = document.getElementById(`storyStructureContent-${widgetId}`);
        const modalDescription = document.getElementById(`modalDescription-${widgetId}`);
        const storyStructureButton = document.getElementById(`storyStructureButton-${widgetId}`);
        const backButton = document.getElementById(`back-button-${widgetId}`);

        storyStructureContent.style.display = 'block';
        modalDescription.style.display = 'none';
        storyStructureButton.style.display = 'none';
        backButton.style.display = 'block';
    }

    function goBack(widgetId) {
        const modalDescription = document.getElementById(`modalDescription-${widgetId}`);
        const storyStructureContent = document.getElementById(`storyStructureContent-${widgetId}`);
        const storyStructureButton = document.getElementById(`storyStructureButton-${widgetId}`);
        const backButton = document.getElementById(`back-button-${widgetId}`);

        modalDescription.style.display = 'block';
        storyStructureContent.style.display = 'none';
        storyStructureButton.style.display = 'block';
        backButton.style.display = 'none';
    }
</script>