<?php
/**
 * Main single event template
 */
if (!defined('ABSPATH'))
    exit;

// Get event data from global or passed variables
global $em_id;
$event_id = $em_id ?? $post_id ?? 0;

if (!$event_id) {
    echo '<p class="em-text-red-600 em-p-4 em-bg-red-50 em-rounded-md">Event ID not found.</p>';
    return;
}

// Get event post and settings
$event_post = get_post($event_id);
$event_settings = get_post_meta($event_id, 'awl_em_settings_' . $event_id, true);

// Set global variables for component access
$GLOBALS['event_id'] = $event_id;
$GLOBALS['event_post'] = $event_post;
$GLOBALS['event_settings'] = &$event_settings;

if (!$event_post || !is_array($event_settings)) {
    echo '<p class="em-text-red-600 em-p-4 em-bg-red-50 em-rounded-md">Event data not found.</p>';
    echo '<div style="background: #ffcccc; padding: 10px; margin: 10px 0; border: 1px solid #ff0000;">';
    echo '<strong>Debug Info:</strong><br>';
    echo 'Event ID: ' . $event_id . '<br>';
    echo 'Event Post: ' . ($event_post ? 'EXISTS' : 'NULL') . '<br>';
    echo 'Event Settings Type: ' . gettype($event_settings) . '<br>';
    echo 'Event Settings Is Array: ' . (is_array($event_settings) ? 'YES' : 'NO') . '<br>';
    echo '</div>';
    return;
}



// Set global variables right before using them
$GLOBALS['event_settings'] = $event_settings;
$GLOBALS['event_post'] = $event_post;
$GLOBALS['event_id'] = $event_id;

// Enqueue required assets
//wp_enqueue_style('em-bootstrap-css', EM_FREE_PLUGIN_URL . 'css/event-bootstrap.css');
//wp_enqueue_style('em-font-awesome-css', EM_FREE_PLUGIN_URL . 'css/font-awesome.css');
//wp_enqueue_style('em-style-event-monster-css', EM_FREE_PLUGIN_URL . 'css/style-event-monster.css');

// Add Tailwind CSS and Google Fonts


// Get common settings for currency
$em_common_settings = get_option('awl_em_common_settings');
$em_currency = isset($em_common_settings['em_currency_code']) ? $em_common_settings['em_currency_code'] : 'USD';

// Payment gateway SDKs (PayPal, Stripe, Razorpay, Square) removed from free version.
// Upgrade to Event Monster Pro for payment gateway support.
?>

<?php
// Get custom colors for inline CSS
$em_primary_color_css = isset($event_settings['em_primary_color']) ? $event_settings['em_primary_color'] : '';
$em_secondary_color_css = isset($event_settings['em_secondary_color']) ? $event_settings['em_secondary_color'] : '';
$em_text_color_css = isset($event_settings['em_text_color']) ? $event_settings['em_text_color'] : '';

// Only output custom CSS if colors are set
if ($em_primary_color_css || $em_secondary_color_css || $em_text_color_css):
?>
<style>
    /* Custom Event Color Scheme */
    #event-<?php echo esc_attr($event_id); ?> {
        <?php if ($em_primary_color_css): ?>
        --em-primary-600: <?php echo esc_attr($em_primary_color_css); ?> !important;
        --em-primary-700: <?php echo esc_attr($em_primary_color_css); ?> !important;
        --em-primary-500: <?php echo esc_attr($em_primary_color_css); ?> !important;
        --em-primary-400: <?php echo esc_attr($em_primary_color_css); ?>CC !important;
        --em-primary-300: <?php echo esc_attr($em_primary_color_css); ?>99 !important;
        --em-primary-200: <?php echo esc_attr($em_primary_color_css); ?>66 !important;
        --em-primary-100: <?php echo esc_attr($em_primary_color_css); ?>33 !important;
        --em-primary-50: <?php echo esc_attr($em_primary_color_css); ?>1A !important;
        <?php endif; ?>

        <?php if ($em_secondary_color_css): ?>
        --em-secondary-600: <?php echo esc_attr($em_secondary_color_css); ?> !important;
        --em-secondary-500: <?php echo esc_attr($em_secondary_color_css); ?> !important;
        <?php endif; ?>

        <?php if ($em_text_color_css): ?>
        --em-text-color: <?php echo esc_attr($em_text_color_css); ?> !important;
        color: <?php echo esc_attr($em_text_color_css); ?> !important;
        <?php endif; ?>
    }

    /* Apply primary color to buttons */
    <?php if ($em_primary_color_css): ?>
    #event-<?php echo esc_attr($event_id); ?> .em-btn-primary,
    #event-<?php echo esc_attr($event_id); ?> .em-bg-indigo-600,
    #event-<?php echo esc_attr($event_id); ?> .em-bg-indigo-500,
    #event-<?php echo esc_attr($event_id); ?> .em-bg-primary-600 {
        background-color: <?php echo esc_attr($em_primary_color_css); ?> !important;
    }

    #event-<?php echo esc_attr($event_id); ?> .em-text-indigo-600,
    #event-<?php echo esc_attr($event_id); ?> .em-text-indigo-500,
    #event-<?php echo esc_attr($event_id); ?> .em-text-primary-600 {
        color: <?php echo esc_attr($em_primary_color_css); ?> !important;
    }

    #event-<?php echo esc_attr($event_id); ?> .em-border-indigo-600,
    #event-<?php echo esc_attr($event_id); ?> .em-border-primary-600 {
        border-color: <?php echo esc_attr($em_primary_color_css); ?> !important;
    }
    <?php endif; ?>

    /* Apply secondary color */
    <?php if ($em_secondary_color_css): ?>
    #event-<?php echo esc_attr($event_id); ?> .em-bg-secondary-600 {
        background-color: <?php echo esc_attr($em_secondary_color_css); ?> !important;
    }

    #event-<?php echo esc_attr($event_id); ?> .em-text-secondary-600 {
        color: <?php echo esc_attr($em_secondary_color_css); ?> !important;
    }
    <?php endif; ?>
</style>
<?php endif; ?>

<!-- Main Event Container - New Design -->
<?php
$em_color_scheme = isset($event_settings['em_color_scheme']) ? $event_settings['em_color_scheme'] : 'light';
$color_scheme_class = 'em-color-scheme-' . $em_color_scheme;

// Get custom colors from settings
$em_primary_color = isset($event_settings['em_primary_color']) ? $event_settings['em_primary_color'] : '#8B5CF6';
$em_secondary_color = isset($event_settings['em_secondary_color']) ? $event_settings['em_secondary_color'] : '#10B981';
$em_text_color = isset($event_settings['em_text_color']) ? $event_settings['em_text_color'] : '#374151';

// Generate inline styles for custom colors
$custom_color_styles = '';
if ($em_primary_color !== '#8B5CF6' || $em_secondary_color !== '#10B981' || $em_text_color !== '#374151') {
    $custom_color_styles = sprintf(
        'style="--em-primary-600: %s; --em-primary-700: %s; --em-primary-500: %s; --em-primary-100: %s; --em-primary-50: %s; --em-secondary-600: %s; --em-text-color: %s;"',
        esc_attr($em_primary_color),
        esc_attr($em_primary_color), // Use same for hover
        esc_attr($em_primary_color),
        esc_attr($em_primary_color) . '20', // 20% opacity for light backgrounds
        esc_attr($em_primary_color) . '10', // 10% opacity for lighter backgrounds
        esc_attr($em_secondary_color),
        esc_attr($em_text_color)
    );
}
?>
<div class="em-bg-slate-50 em-text-slate-800 em-min-h-screen <?php echo esc_attr($color_scheme_class); ?>" <?php echo $custom_color_styles; ?>>
    <div id="event-<?php echo esc_attr($event_id); ?>"
        class="awl_em_main_div_<?php echo esc_attr($event_id); ?> em-event-container"
        data-layout-mode="default" data-layout-style="modern" data-layout-density="comfortable">

        <!-- Container with dynamic max-width based on layout -->
        <?php
        // Determine container width based on layout preference
        $layout_preference = $event_settings['em_layout_preference'] ?? 'default';
        $container_width_class = ($layout_preference === 'magazine') ? 'em-max-w-7xl' : 'em-max-w-3xl';
        ?>
        <div class="em-container em-mx-auto <?php echo esc_attr($container_width_class); ?> em-p-4 sm:em-p-6">

          
 
                <!-- Layout Controls (if enabled) -->
                <?php
                $layout_controls_file = EM_FREE_PLUGIN_DIR . 'templates/frontend/components/layout-controls.php';
                if (file_exists($layout_controls_file)) {
                    include $layout_controls_file;
                }
                ?>

                <?php
                // Include layout configuration system
                include_once EM_FREE_PLUGIN_DIR . 'templates/frontend/layout-config.php';

                // Debug: Check what settings we have (only in WP_DEBUG mode)
                if (defined('WP_DEBUG') && WP_DEBUG) {
                    echo '<!-- Layout Debug: ';
                    echo 'Layout Preference: ' . ($event_settings['em_layout_preference'] ?? 'not set') . ' | ';
                    echo 'Custom Layout: ' . (isset($event_settings['em_custom_layout']) ? 'exists' : 'not set');
                    echo ' -->';
                }

                // Get layout configuration based on settings
                $layout_config = em_get_layout_configuration_free($event_settings);
                $component_files = em_get_component_files_free();

                // Check if using magazine layout
                $is_magazine_layout = isset($layout_config['magazine_layout']);
                $body_class = $is_magazine_layout ? 'em-magazine-layout' : '';

                // Get dynamic container class based on layout
                $container_class = $is_magazine_layout ? '' : em_get_container_class_free($layout_config);

                // Apply body class for magazine layout
                if ($is_magazine_layout) {
                    echo '<script>document.body.classList.add("em-magazine-layout");</script>';
                }
                ?>




                <!-- Layout Content Wrapper -->
                <!-- Debug: CSS Version 4.1.1 - <?php echo wp_date('Y-m-d H:i:s'); ?> -->
                <div class="em-layout-content em-w-full " style="border-top-left-radius: 1rem; border-top-right-radius: 1rem;">
                    <?php
                    // Render each section according to configuration
                    if (is_array($layout_config)) {
                        foreach ($layout_config as $section_type => $section_data) {



                            if (defined('WP_DEBUG') && WP_DEBUG) {
                                echo '<!-- Rendering section: ' . $section_type . ' with data: ' . print_r($section_data, true) . ' -->';
                            }

                            // Handle different section types correctly
                            if (in_array($section_type, ['single', 'single_header', 'single_content', 'single_details', 'single_gallery', 'single_schedule', 'single_sponsors', 'single_full', 'single_end'])) {
                                // For single sections, the data is already an array of component names
                                // But it might be nested, so flatten it
                                $components_to_render = array();
                                if (is_array($section_data)) {
                                    foreach ($section_data as $item) {
                                        if (is_array($item)) {
                                            $components_to_render = array_merge($components_to_render, $item);
                                        } else {
                                            $components_to_render[] = $item;
                                        }
                                    }
                                }
                                em_render_layout_section_free($section_type, $components_to_render, $component_files);
                            } else {
                                // For multi-column sections, pass the data as-is
                                em_render_layout_section_free($section_type, $section_data, $component_files);
                            }
                        }
                    ?>
                    <?php
                    } else {
                        // Fallback to default components if layout config fails
                        echo '<div style="background: #ffcccc; padding: 10px; margin: 10px 0; border: 2px solid #ff0000;">';
                        echo '<strong>FALLBACK TRIGGERED!</strong><br>';
                        echo 'This should not happen if layout_config is valid array.<br>';
                        echo 'Layout config type: ' . gettype($layout_config) . '<br>';
                        echo 'Layout config value: ' . var_export($layout_config, true);
                        echo '</div>';

                        echo '<div class="em-component-single">';
                        include EM_FREE_PLUGIN_DIR . 'templates/frontend/components/event-header.php';
                        echo '</div>';

                        echo '<div class="em-component-row em-grid em-grid-cols-1 md:em-grid-cols-2 em-gap-6">';
                        echo '<div class="em-component-col">';
                        include EM_FREE_PLUGIN_DIR . 'templates/frontend/components/event-details.php';
                        echo '</div>';
                        echo '<div class="em-component-col">';
                        if (file_exists(EM_FREE_PLUGIN_DIR . 'templates/frontend/components/event-map.php')) {
                            include EM_FREE_PLUGIN_DIR . 'templates/frontend/components/event-map.php';
                        }
                        echo '</div>';
                        echo '</div>';
                    }
                    ?>
                </div> <!-- End Layout Content Wrapper -->

           
        </div> <!-- End Container -->
    </div> <!-- End Event Container -->
</div> <!-- End Main Container -->

<!-- Footer -->
<footer class="em-bg-white em-border-t em-border-gray-200 em-mt-12">
    <div class="em-max-w-7xl em-mx-auto em-py-6 em-px-4 sm:em-px-6 lg:em-px-8 em-text-center em-text-sm em-text-gray-500">
        <p>Copyright &copy; 2025 April | Powered by Astra WordPress Theme</p>
    </div>
</footer>
 <style>
     /* Event Monster Premium - Enhanced Layout Styles */
     /* Version: 4.1.1 - Updated: <?php echo wp_date('Y-m-d H:i:s'); ?> */
     /* Flexbox Magazine Layout - More Reliable */
    .em-magazine-layout-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    @media (min-width: 1024px) {
        .em-magazine-layout-wrapper {
            flex-direction: row !important;
            align-items: flex-start !important;
        }

        .em-magazine-main {
            flex: 2 !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 2rem !important;
        }

        .em-magazine-sidebar {
            flex: 1 !important;
            min-width: 300px !important;
            max-width: 400px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 2rem !important;
        }
    }

    /* Override any theme constraints for magazine layout */
    .em-magazine-layout .em-layout-content {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

     .em-event-container h4 {
        font-size: var(--em-font-size-lg);
        font-weight: 500;
        color: var(--em-gray-700);
        margin-bottom: var(--em-space-3);
        line-height: 1.4;
    }

     /* Theme Override - Force smaller fonts and remove theme margins */
    .em-event-container h1,
    .em-event-container h2,
    .em-event-container h3,
    .em-event-container h4,
    .em-event-container h5,
    .em-event-container h6 {
        font-size: inherit !important;
        line-height: inherit !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: inherit !important;
        font-family: inherit !important;
    }

    /*.em-event-container p {
        margin: 0 !important;
        padding: 0 !important;
        line-height: inherit !important;
    }*/
    .em-event-container .em-text-xs {
    font-size: 0.75rem !important;
}
.em-event-container .em-text-lg {
    font-size: 1.125rem !important;
}
.em-event-container .em-mb-2 {
    margin-bottom: 0.5rem !important;
}

.em-event-container .em-mb-4 {
    margin-bottom: 1rem !important;
}

    </style> 
<!--
    STYLES MOVED TO COMPILED TAILWIND CSS
    All styles from this inline <style> block have been moved to:
    - src/css/tailwind.css (source file)
    - assets/css/tailwind.css (compiled output)

    The styles are now properly enqueued via WordPress and compiled with Tailwind.
    You can safely remove this entire <style> block.
-->

<!-- <style>
    /* Import Inter Font */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

    /* CSS Custom Properties - Tailwind-Inspired */
    :root {
        /* Primary Colors - Indigo Palette */
        --em-primary-50: #eef2ff;
        --em-primary-100: #e0e7ff;
        --em-primary-200: #c7d2fe;
        --em-primary-300: #a5b4fc;
        --em-primary-400: #818cf8;
        --em-primary-500: #6366f1;
        --em-primary-600: #4f46e5;
        --em-primary-700: #4338ca;
        --em-primary-800: #3730a3;
        --em-primary-900: #312e81;

        /* Gray Palette - Tailwind Gray */
        --em-gray-50: #f9fafb;
        --em-gray-100: #f3f4f6;
        --em-gray-200: #e5e7eb;
        --em-gray-300: #d1d5db;
        --em-gray-400: #9ca3af;
        --em-gray-500: #6b7280;
        --em-gray-600: #4b5563;
        --em-gray-700: #374151;
        --em-gray-800: #1f2937;
        --em-gray-900: #111827;

        /* Additional Colors */
        --em-white: #ffffff;
        --em-blue-100: #dbeafe;
        --em-blue-600: #2563eb;
        --em-green-100: #dcfce7;
        --em-green-600: #16a34a;
        --em-red-100: #fee2e2;
        --em-red-600: #dc2626;
        --em-yellow-100: #fef3c7;
        --em-yellow-600: #d97706;

        /* Typography - Inter Font */
        --em-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --em-font-size-xs: 0.75rem;
        /* 12px */
        --em-font-size-sm: 0.875rem;
        /* 14px */
        --em-font-size-base: 1rem;
        /* 16px */
        --em-font-size-lg: 1.125rem;
        /* 18px */
        --em-font-size-xl: 1.25rem;
        /* 20px */
        --em-font-size-2xl: 1.5rem;
        /* 24px */
        --em-font-size-3xl: 1.875rem;
        /* 30px */
        --em-font-size-4xl: 2.25rem;
        /* 36px */
        --em-font-size-5xl: 3rem;
        /* 48px */

        /* Spacing System - Tailwind 4px Grid */
        --em-space-1: 0.25rem;
        /* 4px */
        --em-space-2: 0.5rem;
        /* 8px */
        --em-space-3: 0.75rem;
        /* 12px */
        --em-space-4: 1rem;
        /* 16px */
        --em-space-5: 1.25rem;
        /* 20px */
        --em-space-6: 1.5rem;
        /* 24px */
        --em-space-8: 2rem;
        /* 32px */
        --em-space-10: 2.5rem;
        /* 40px */
        --em-space-12: 3rem;
        /* 48px */
        --em-space-16: 4rem;
        /* 64px */
        --em-space-20: 5rem;
        /* 80px */

        /* Border Radius - Tailwind Style */
        --em-radius-none: 0;
        --em-radius-sm: 0.125rem;
        /* 2px */
        --em-radius-md: 0.375rem;
        /* 6px */
        --em-radius-lg: 0.5rem;
        /* 8px */
        --em-radius-xl: 0.75rem;
        /* 12px */
        --em-radius-2xl: 1rem;
        /* 16px */
        --em-radius-3xl: 1.5rem;
        /* 24px */
        --em-radius-full: 9999px;

        /* Shadows - Tailwind Style */
        --em-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --em-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --em-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --em-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        --em-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        --em-shadow-indigo: 0 25px 50px -12px rgba(79, 70, 229, 0.25);

        /* Transitions - Tailwind Style */
        --em-transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        --em-transition-colors: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
        --em-transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Base Styles - Tailwind Inspired */
    body {
        font-family: 'Inter', sans-serif;
    }

    .em-event-container {
        font-family: 'Inter', sans-serif;
        line-height: 1.5;
    }

    /* Use Inter as the default font */
    .em-prose {
        color: #4B5563; /* text-gray-600 */
    }
    .em-prose p {
        margin-bottom: 1em;
    }

    /* Tailwind-like Utility Classes */
    .em-bg-gray-50 {
        background-color: var(--em-gray-50);
    }

    .em-bg-white {
        background-color: var(--em-white);
    }

    .em-bg-primary-600 {
        background-color: var(--em-primary-600);
    }

    .em-bg-primary-50 {
        background-color: var(--em-primary-50);
    }

    .em-bg-blue-50 {
        background-color: #eff6ff;
    }

    .em-bg-blue-100 {
        background-color: var(--em-blue-100);
    }

    .em-bg-green-100 {
        background-color: var(--em-green-100);
    }

    .em-text-blue-800 {
        color: #1e40af;
    }

    .em-text-red-600 {
        color: var(--em-red-600);
    }

    .em-bg-red-50 {
        background-color: #fef2f2;
    }

    .em-rounded-md {
        border-radius: var(--em-radius-md);
    }

    .em-text-gray-800 {
        color: var(--em-gray-800);
    }

    .em-text-gray-900 {
        color: var(--em-gray-900);
    }

    .em-text-gray-600 {
        color: var(--em-gray-600);
    }

    .em-text-gray-500 {
        color: var(--em-gray-500);
    }

    .em-text-white {
        color: var(--em-white);
    }

    .em-text-primary-600 {
        color: var(--em-primary-600);
    }

    .em-text-blue-600 {
        color: var(--em-blue-600);
    }

    .em-text-green-600 {
        color: var(--em-green-600);
    }

    .em-min-h-screen {
        min-height: 100vh;
    }

    .em-container {
        width: 100%;
    }

    .em-mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .em-w-full {
        width: 100%;
    }

    .em-max-w-3xl {
        max-width: 48rem;
    }

    .em-max-w-7xl {
        max-width: 80rem;
    }

    .em-max-w-7xl {
        max-width: 80rem;
    }

    /* New Design System Colors - Slate */
    .em-bg-slate-50 {
        background-color: #f8fafc;
    }

    .em-text-slate-800 {
        color: #1e293b;
    }

    .em-text-slate-900 {
        color: #0f172a;
    }

    .em-text-slate-600 {
        color: #475569;
    }

    .em-text-slate-500 {
        color: #64748b;
    }

    .em-border-slate-200 {
        border-color: #e2e8f0;
    }

    .em-bg-slate-100 {
        background-color: #f1f5f9;
    }

    .em-text-indigo-500 {
        color: #6366f1;
    }

    .em-bg-indigo-600 {
        background-color: #4f46e5;
    }

    .em-bg-indigo-700 {
        background-color: #4338ca;
    }

    .em-shadow-indigo-500\/20 {
        box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.2);
    }

    /* Fade-in animations */
    .em-animate-fade-in {
        animation: emFadeIn 0.7s ease-out forwards;
        opacity: 0;
    }

    @keyframes emFadeIn {
        to { opacity: 1; }
    }

    /* Animation delays */
    .em-animate-delay-100 { animation-delay: 100ms; }
    .em-animate-delay-200 { animation-delay: 200ms; }
    .em-animate-delay-300 { animation-delay: 300ms; }
    .em-animate-delay-400 { animation-delay: 400ms; }
    .em-animate-delay-500 { animation-delay: 500ms; }
    .em-animate-delay-600 { animation-delay: 600ms; }
    .em-animate-delay-700 { animation-delay: 700ms; }

    /* Timeline utilities */
    .em--left-\[33px\] {
        left: -33px;
    }

    .em-top-1 {
        top: 0.25rem;
    }

    .em-border-4 {
        border-width: 4px;
    }

    .em-border-white {
        border-color: #ffffff;
    }

    .em-px-4 {
        padding-left: var(--em-space-4);
        padding-right: var(--em-space-4);
    }

    .em-px-6 {
        padding-left: var(--em-space-6);
        padding-right: var(--em-space-6);
    }

    .em-px-8 {
        padding-left: var(--em-space-8);
        padding-right: var(--em-space-8);
    }

    .em-py-6 {
        padding-top: var(--em-space-6);
        padding-bottom: var(--em-space-6);
    }

    .em-py-12 {
        padding-top: var(--em-space-12);
        padding-bottom: var(--em-space-12);
    }

    .em-p-6 {
        padding: var(--em-space-6);
    }

    .em-p-8 {
        padding: var(--em-space-8);
    }

    .em-mt-1 {
        margin-top: var(--em-space-1);
    }

    .em-mt-12 {
        margin-top: var(--em-space-12);
    }

    .em-mb-1 {
        margin-bottom: var(--em-space-1);
    }

    .em-mb-5 {
        margin-bottom: var(--em-space-5);
    }

    .em-mb-6 {
        margin-bottom: var(--em-space-6);
    }

    .em-space-y-5>*+* {
        margin-top: var(--em-space-5);
    }

    .em-space-y-8>*+* {
        margin-top: var(--em-space-8);
    }

    .em-space-y-6>*+* {
        margin-top: var(--em-space-6);
    }

    .em-space-y-10>*+* {
        margin-top: var(--em-space-10);
    }

    .em-space-y-3>*+* {
        margin-top: var(--em-space-3);
    }

    .em-grid {
        display: grid;
    }

    .em-grid-cols-1 {
        grid-template-columns: 1fr;
    }

    .em-grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .em-grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .em-gap-4 {
        gap: var(--em-space-4);
    }

    .em-gap-3 {
        gap: var(--em-space-3);
    }

    .em-gap-6 {
        gap: var(--em-space-6);
    }

    .em-gap-8 {
        gap: var(--em-space-8);
    }

    .em-gap-x-6 {
        column-gap: var(--em-space-6);
    }

    .em-gap-x-12 {
        column-gap: var(--em-space-12);
    }

    .em-gap-y-4 {
        row-gap: var(--em-space-4);
    }

    /* Component Layout System */
    .em-layout-content {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        position: relative;
    }

    /* Overall container styling for clean appearance */
    .em-event-container {
        background: transparent;
        padding: var(--em-space-6) 0;
    }

    /* Ensure proper spacing at top and bottom */
    .em-layout-content {
        padding-top: var(--em-space-4);
        padding-bottom: var(--em-space-8);
    }

    /* Component wrapper for better visual separation */
    .em-component-single,
    .em-component-row {
        background: var(--em-white);
        border-radius: var(--em-radius-xl);
        padding: var(--em-space-8);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        border: 1px solid var(--em-gray-100);
        transition: var(--em-transition-normal);
        width: 100%;
        max-width: 100%;
    }

    .em-component-single:hover,
    .em-component-row:hover {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* Add spacing ONLY between visible sections using adjacent sibling selector */
    .em-component-single + .em-component-single,
    .em-component-single + .em-component-row,
    .em-component-row + .em-component-single,
    .em-component-row + .em-component-row {
        margin-top: var(--em-space-6);
    }

    /* Header section should not have wrapper padding since it has its own styling */
    .em-component-single:has(header) {
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .em-component-single:has(header):hover {
        box-shadow: none;
    }

    /* Remove extra spacing for nested components */
    .em-component-col > * {
        margin-bottom: 0;
    }

    .em-component-col {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        /* Individual column styling will be handled by components */
    }

    /* Column span utilities */
    .em-col-span-2 {
        grid-column: span 2 / span 2;
    }

    .em-col-span-3 {
        grid-column: span 3 / span 3;
    }

    /* Additional responsive grid utilities */
    @media (min-width: 640px) {
        .sm\:em-grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .sm\:em-grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .sm\:em-grid-cols-4 {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .em-flex { 
        display: flex;
    }

    .em-items-center {
        align-items: center;
    }

    .em-items-start {
        align-items: flex-start;
    }

    .em-self-start {
        align-self: flex-start;
    }

    .em-flex-shrink-0 {
        flex-shrink: 0;
    }

    .em-flex-wrap {
        flex-wrap: wrap;
    }

    .em-justify-center {
        justify-content: center;
    }

    .em-text-center {
        text-align: center;
    }

    .em-leading-relaxed {
        line-height: 1.625;
    }

    .em-tracking-tight {
        letter-spacing: -0.025em;
    }

    .em-h-24 {
        height: 6rem;
    }

    .em-h-7 {
        height: 1.75rem;
    }

    .em-w-5 {
        width: 1.25rem;
    }

    .em-h-5 {
        height: 1.25rem;
    }

    .em-w-10 {
        width: 2.5rem;
    }

    .em-h-10 {
        height: 2.5rem;
    }

    .em-text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .em-text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .em-text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .em-font-bold {
        font-weight: 700;
    }

    .em-font-semibold {
        font-weight: 600;
    }

    .em-object-contain {
        object-fit: contain;
    }

    .em-object-cover {
        object-fit: cover;
    }

    .em-rounded-lg {
        border-radius: 0.5rem;
    }

    .em-rounded-2xl {
        border-radius: 1rem;
    }

    .em-rounded-full {
        border-radius: 9999px;
    }

    .em-shadow-sm {
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }

    .em-shadow-lg {
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }

    .em-border {
        border-width: 1px;
    }

    .em-border-l-2 {
        border-left-width: 2px;
    }

    .em-pl-6 {
        padding-left: 1.5rem;
    }

    .em-py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .em-px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .em-px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .em-py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .em-text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .em-bg-indigo-50 {
        background-color: #eef2ff;
    }

    .em-text-indigo-600 {
        color: #4f46e5;
    }

    .em-h-full {
        height: 100%;
    }

    .em-flex-col {
        flex-direction: column;
    }

    .em-mt-auto {
        margin-top: auto;
    }

    .em-bg-gradient-to-t {
        background-image: linear-gradient(to top, var(--tw-gradient-stops));
    }

    .em-from-black\/60 {
        --tw-gradient-from: rgb(0 0 0 / 0.6);
        --tw-gradient-to: rgb(0 0 0 / 0);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .em-via-black\/20 {
        --tw-gradient-to: rgb(0 0 0 / 0);
        --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2), var(--tw-gradient-to);
    }

    .em-to-transparent {
        --tw-gradient-to: transparent;
    }

    /* Magazine Layout Styles */
    .em-lg\\:em-col-span-2 {
        grid-column: span 2 / span 2;
    }

    @media (min-width: 1024px) {
        .em-lg\\:em-col-span-2 {
            grid-column: span 2 / span 2;
        }
    }

    .em-space-y-8 > * + * {
        margin-top: 2rem;
    }

    .em-mt-8 {
        margin-top: 2rem;
    }

    /* Magazine layout - Full width background */
    body.em-magazine-layout {
        background-color: #f0f9ff; /* sky-50 */
        margin: 0;
        padding: 0;
    }

    /* Full width magazine wrapper */
    .em-magazine-full-width {
        background-color: #f0f9ff !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .em-magazine-container {
        max-width: 72rem !important;
        margin: 0 auto !important;
        padding: 1rem !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    @media (min-width: 640px) {
        .em-magazine-container {
            padding: 1.5rem !important;
        }
    }

    @media (min-width: 1024px) {
        .em-magazine-container {
            padding: 2rem !important;
        }
    }

    /* Flexbox Magazine Layout - More Reliable */
    .em-magazine-layout-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        margin-top: 2rem !important;
    }

    @media (min-width: 1024px) {
        .em-magazine-layout-wrapper {
            flex-direction: row !important;
            align-items: flex-start !important;
        }

        .em-magazine-main {
            flex: 2 !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 2rem !important;
        }

        .em-magazine-sidebar {
            flex: 1 !important;
            min-width: 300px !important;
            max-width: 400px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 2rem !important;
        }
    }

    /* Magazine layout component spacing */
    .em-magazine-main > *,
    .em-magazine-sidebar > * {
        background: var(--em-white);
        border-radius: var(--em-radius-xl);
        padding: var(--em-space-6);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        border: 1px solid var(--em-gray-100);
        transition: var(--em-transition-normal);
    }

    .em-magazine-main > *:hover,
    .em-magazine-sidebar > *:hover {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* Magazine header should not have wrapper padding */
    .em-magazine-main > header,
    .em-magazine-sidebar > header {
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .em-magazine-main > header:hover,
    .em-magazine-sidebar > header:hover {
        box-shadow: none;
    }

    /* Override any theme constraints for magazine layout */
    .em-magazine-layout .em-layout-content {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Dynamic container widths based on layout */
    .em-max-w-3xl {
        max-width: 48rem; /* 768px - Standard single column */
    }

    .em-max-w-5xl {
        max-width: 64rem; /* 1024px - Wide layouts with multiple columns */
    }

    .em-max-w-6xl {
        max-width: 72rem; /* 1152px - Magazine layout */
    }

    .em-p-4 {
        padding: 1rem;
    }

    .sm\\:em-p-6 {
        padding: 1rem;
    }

    @media (min-width: 640px) {
        .sm\\:em-p-6 {
            padding: 1.5rem;
        }
    }

    .lg\\:em-p-8 {
        padding: 1rem;
    }

    @media (min-width: 1024px) {
        .lg\\:em-p-8 {
            padding: 2rem;
        }
    }

    /* Grid system for magazine layout */
    .em-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\\:em-grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 1024px) {
        .lg\\:em-grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* Header height for magazine layout */
    .em-h-64 {
        height: 16rem;
    }

    /* Text positioning */
    .em-bottom-0 {
        bottom: 0;
    }

    .em-left-0 {
        left: 0;
    }

    .em-text-slate-300 {
        color: #cbd5e1;
    }

    /* Additional magazine layout fixes */
    .em-magazine-layout {
        overflow-x: hidden !important;
    }

    /* Ensure grid works on all browsers */
    .em-magazine-container > div {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        margin-top: 2rem !important;
    }

    @media (min-width: 1024px) {
        .em-magazine-container > div {
            grid-template-columns: 2fr 1fr !important;
        }
    }

    /* Ensure components have proper spacing */
    .em-magazine-container main,
    .em-magazine-container aside {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    /* Animation classes */
    .em-animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(20px);
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .em-mt-1 {
        margin-top: 0.25rem;
    }

    .em-mt-2 {
        margin-top: 0.5rem;
    }

    .em-mt-4 {
        margin-top: 1rem;
    }

    .em-mb-2 {
        margin-bottom: 0.5rem;
    }

    .em-mb-4 {
        margin-bottom: 1rem;
    }

    .em-transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .em-transition-transform {
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .em-duration-300 {
        transition-duration: 300ms;
    }

    .hover\:em-scale-105:hover {
        transform: scale(1.05);
    }

    .hover\:em-bg-indigo-700:hover {
        background-color: #4338ca;
    }

    /* Responsive utilities */
    @media (min-width: 640px) {
        .sm\:em-grid-cols-4 {
            grid-template-columns: repeat(4, 1fr);
        }

        .sm\:em-grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .sm\:em-p-6 {
            padding: 1.5rem;
        }
    }

    @media (min-width: 768px) {
        .md\:em-w-auto {
            width: auto;
        }

        .md\:em-grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .md\:em-p-12 {
            padding: 3rem;
        }

        .md\:em-text-4xl {
            font-size: 2.25rem;
            line-height: 2.5rem;
        }
    }

    .em-w-full {
        width: 100%;
    }

    .em-w-32 {
        width: 8rem;
    }

    .em-h-32 {
        height: 8rem;
    }

    .em-h-40 {
        height: 10rem;
    }

    .em-h-64 {
        height: 16rem;
    }

    .em-h-80 {
        height: 20rem;
    }

    .em-h-96 {
        height: 24rem;
    }

    .em-w-12 {
        width: var(--em-space-12);
    }

    .em-h-12 {
        height: var(--em-space-12);
    }

    .em-h-6 {
        height: var(--em-space-6);
    }

    .em-object-contain {
        object-fit: contain;
    }

    .em-object-cover {
        object-fit: cover;
    }

    .em-relative {
        position: relative;
    }

    .em-absolute {
        position: absolute;
    }

    .em-inset-0 {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .em-bottom-0 {
        bottom: 0;
    }

    .em-left-0 {
        left: 0;
    }

    .em-bg-gradient-to-t {
        background-image: linear-gradient(to top, var(--tw-gradient-stops));
    }

    .em-from-black\/60 {
        --tw-gradient-from: rgba(0, 0, 0, 0.6);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
    }

    .em-via-black\/20 {
        --tw-gradient-to: rgba(0, 0, 0, 0.2);
        --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, 0.2), var(--tw-gradient-to, rgba(0, 0, 0, 0));
    }

    .em-to-transparent {
        --tw-gradient-to: transparent;
    }

    .em-rounded-lg {
        border-radius: var(--em-radius-lg);
    }

    .em-rounded-xl {
        border-radius: var(--em-radius-xl);
    }

    .em-rounded-2xl {
        border-radius: var(--em-radius-2xl);
    }

    .em-rounded-full {
        border-radius: var(--em-radius-full);
    }

    .em-shadow-sm {
        box-shadow: var(--em-shadow-sm);
    }

    .em-shadow-lg {
        box-shadow: var(--em-shadow-lg);
    }

    .em-shadow-2xl {
        box-shadow: var(--em-shadow-2xl);
    }

    .em-shadow-indigo {
        box-shadow: var(--em-shadow-indigo);
    }

    .em-border {
        border-width: 1px;
        border-style: solid;
    }

    .em-border-t {
        border-top-width: 1px;
        border-top-style: solid;
    }

    .em-border-gray-200 {
        border-color: var(--em-gray-200);
    }

    .em-text-xs {
        font-size: var(--em-font-size-xs);
    }

    .em-text-sm {
        font-size: var(--em-font-size-sm);
    }

    .em-text-lg {
        font-size: var(--em-font-size-lg);
    }

    .em-text-xl {
        font-size: var(--em-font-size-xl);
    }

    .em-text-2xl {
        font-size: var(--em-font-size-2xl);
    }

    .em-font-bold {
        font-weight: 700;
    }

    .em-font-semibold {
        font-weight: 600;
    }

    .em-font-extrabold {
        font-weight: 800;
    }

    .em-tracking-tight {
        letter-spacing: -0.025em;
    }

    .em-text-3xl {
        font-size: var(--em-font-size-3xl);
    }

    .em-text-4xl {
        font-size: var(--em-font-size-4xl);
    }

    .em-text-5xl {
        font-size: var(--em-font-size-5xl);
    }

    .em-text-gray-200 {
        color: var(--em-gray-200);
    }

    .em-bg-indigo-600 {
        background-color: var(--em-primary-600);
    }

    .em-bg-indigo-100 {
        background-color: var(--em-primary-100);
    }

    .em-text-indigo-600 {
        color: var(--em-primary-600);
    }

    .em-border-gray-200\/50 {
        border-color: rgba(229, 231, 235, 0.5);
    }

    .em-shadow-indigo-500\/30 {
        box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.3);
    }

    .em-text-center {
        text-align: center;
    }

    .em-opacity-80 {
        opacity: 0.8;
    }

    .em-sticky {
        position: sticky;
    }

    .em-top-12 {
        top: var(--em-space-12);
    }

    .em-transition-colors {
        transition: var(--em-transition-colors);
    }

    .em-duration-300 {
        transition-duration: 300ms;
    }

    /* Responsive Classes */
    @media (min-width: 640px) {
        .sm\:em-px-6 {
            padding-left: var(--em-space-6);
            padding-right: var(--em-space-6);
        }

        .sm\:em-p-8 {
            padding: var(--em-space-8);
        }
    }

    @media (min-width: 768px) {
        .md\:em-py-16 {
            padding-top: var(--em-space-16);
            padding-bottom: var(--em-space-16);
        }

        .md\:em-grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .md\:em-grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .lg\:em-px-8 {
            padding-left: var(--em-space-8);
            padding-right: var(--em-space-8);
        }

        .lg\:em-grid {
            display: grid;
        }

        .lg\:em-grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .lg\:em-gap-x-12 {
            column-gap: var(--em-space-12);
        }

        .lg\:em-items-start {
            align-items: flex-start;
        }

        .lg\:em-col-span-2 {
            grid-column: span 2 / span 2;
        }

        .lg\:em-mt-0 {
            margin-top: 0;
        }

        .lg\:em-sticky {
            position: sticky;
        }

        .lg\:em-top-12 {
            top: var(--em-space-12);
        }
    }

    /* Hover Effects */
    .hover\:em-bg-primary-50:hover {
        background-color: var(--em-primary-50);
    }

    .hover\:em-bg-indigo-50:hover {
        background-color: var(--em-primary-50);
    }

    .hover\:em-scale-105:hover {
        transform: scale(1.05);
    }

    /* Responsive utilities */
    @media (min-width: 768px) {
        .md\:em-flex-row {
            flex-direction: row;
        }

        .md\:em-text-left {
            text-align: left;
        }

        .md\:em-text-4xl {
            font-size: var(--em-font-size-4xl);
        }

        .md\:em-p-8 {
            padding: var(--em-space-8);
        }

        .md\:em-h-96 {
            height: 24rem;
        }
    }

    @media (min-width: 1024px) {
        .lg\:em-text-5xl {
            font-size: var(--em-font-size-5xl);
        }
    }

    /* Component-Specific Styles */
    .em-banner-image {
        position: relative;
        box-shadow: var(--em-shadow-xl);
        border-radius: var(--em-radius-2xl);
        overflow: hidden;
    }

    .em-banner-image img {
        width: 100%;
        height: 16rem;
        object-fit: cover;
    }

    @media (min-width: 640px) {
        .em-banner-image img {
            height: 20rem;
        }
    }

    @media (min-width: 768px) {
        .em-banner-image img {
            height: 24rem;
        }
    }

    .em-banner-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
    }

    .em-banner-content {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: var(--em-space-6);
    }

    @media (min-width: 768px) {
        .em-banner-content {
            padding: var(--em-space-8);
        }
    }

    .em-banner-title {
        font-size: var(--em-font-size-3xl);
        font-weight: 800;
        color: var(--em-white);
        letter-spacing: -0.025em;
        line-height: 1.2;
    }

    @media (min-width: 768px) {
        .em-banner-title {
            font-size: var(--em-font-size-4xl);
        }
    }

    @media (min-width: 1024px) {
        .em-banner-title {
            font-size: var(--em-font-size-5xl);
        }
    }

    .em-banner-subtitle {
        margin-top: var(--em-space-1);
        font-size: var(--em-font-size-lg);
        color: var(--em-gray-200);
    }

    /* Event Details Section */
    .em-event-details-section {
        background: var(--em-white);
        padding: var(--em-space-6);
        border-radius: var(--em-radius-2xl);
        box-shadow: var(--em-shadow-lg);
        border: 1px solid rgba(229, 231, 235, 0.5);
    }

    @media (min-width: 640px) {
        .em-event-details-section {
            padding: var(--em-space-8);
        }
    }

    .em-detail-item {
        display: flex;
        align-items: center;
        gap: var(--em-space-4);
    }

    .em-detail-icon {
        flex-shrink: 0;
        background-color: var(--em-primary-100);
        color: var(--em-primary-600);
        padding: var(--em-space-3);
        border-radius: var(--em-radius-full);
    }

    .em-detail-icon svg {
        width: var(--em-space-6);
        height: var(--em-space-6);
    }

    .em-detail-content h3 {
        font-weight: 700;
        font-size: var(--em-font-size-lg);
        color: var(--em-gray-900);
        margin: 0;
    }

    .em-detail-content p {
        color: var(--em-gray-600);
        margin: 0;
    }

    .em-detail-content .em-text-sm {
        color: var(--em-gray-500);
        font-size: var(--em-font-size-sm);
    }

    /* Component Cards - Clean Google-Style Design */
    /* Removed global styling to prevent conflicts with new structure */

    /* Individual component column styling */
    .em-component-col {
        background: var(--em-white);
        border-radius: var(--em-radius-lg);
        padding: var(--em-space-6);
        border: 1px solid var(--em-gray-100);
        transition: var(--em-transition-normal);
        min-height: 100px;
        display: flex;
        flex-direction: column;
    }

    .em-component-col:hover {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    }

    /* Section Headers - Clean Typography */
    .em-event-container h1 {
        font-size: var(--em-font-size-3xl);
        font-weight: 400;
        /*color: var(--em-gray-900);*/
        margin-bottom: var(--em-space-2);
        line-height: 1.2;
    }

    .em-event-container h2 {
        font-size: var(--em-font-size-2xl);
        font-weight: 400;
        color: var(--em-gray-800);
        margin-bottom: var(--em-space-4);
        line-height: 1.3;
    }

    .em-event-container h3 {
        font-size: var(--em-font-size-xl);
        font-weight: 500;
        color: var(--em-gray-800);
       /* margin-bottom: var(--em-space-4);*/
        display: flex;
            justify-content: center;
        align-items: center;
        gap: var(--em-space-3);
        line-height: 1.4;
    }

    .em-event-container h4 {
        font-size: var(--em-font-size-lg);
        font-weight: 500;
        color: var(--em-gray-700);
        margin-bottom: var(--em-space-3);
        line-height: 1.4;
    }

    /* Clean Card Design */
    .em-card {
        background: var(--em-white);
        border-radius: var(--em-radius-lg);
        box-shadow: var(--em-shadow-sm);
        border: 1px solid var(--em-gray-200);
        transition: var(--em-transition-normal);
        overflow: hidden;
    }

    .em-card:hover {
        box-shadow: var(--em-shadow-md);
        transform: translateY(-2px);
    }

    /* Modern Button Styles */
    .em-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--em-space-2);
        padding: var(--em-space-3) var(--em-space-6);
        border-radius: var(--em-radius-md);
        font-family: var(--em-font-family);
        font-size: var(--em-font-size-sm);
        font-weight: 500;
        text-decoration: none;
        transition: var(--em-transition-normal);
        cursor: pointer;
        border: none;
        min-height: 40px;
    }

    .em-btn-primary {
        background: var(--em-primary-600);
        color: var(--em-white);
        box-shadow: var(--em-shadow-sm);
    }

    .em-btn-primary:hover {
        background: var(--em-primary-700);
        box-shadow: var(--em-shadow-md);
        transform: translateY(-1px);
    }

    .em-btn-secondary {
        background: var(--em-white);
        color: var(--em-gray-700);
        border: 1px solid var(--em-gray-300);
    }

    .em-btn-secondary:hover {
        background: var(--em-gray-50);
        border-color: var(--em-gray-400);
        box-shadow: var(--em-shadow-sm);
    }

    .em-btn-outline {
        background: transparent;
        color: var(--em-primary-600);
        border: 1px solid var(--em-primary-600);
    }

    .em-btn-outline:hover {
        background: var(--em-primary-50);
        border-color: var(--em-primary-700);
        color: var(--em-primary-700);
    }

    /* Clean Animations - Subtle & Professional */
    @keyframes em-fadeInUp {
        from {
            opacity: 0;
            transform: translateY(16px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes em-slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-16px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes em-scaleIn {
        from {
            opacity: 0;
            transform: scale(0.98);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes em-shimmer {
        0% {
            background-position: -200px 0;
        }

        100% {
            background-position: calc(200px + 100%) 0;
        }
    }

    /* Animation Classes */
    .em-animate-fade-in-up {
        animation: em-fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .em-animate-slide-in-left {
        animation: em-slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .em-animate-scale-in {
        animation: em-scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* Layout-Specific Styles - Clean & Organized */
    .em-event-container[data-layout-mode="list"]>* {
        margin-bottom: var(--em-space-4);
        border-left: 4px solid var(--em-primary-200);
        border-radius: var(--em-radius-md);
        transition: var(--em-transition-normal);
    }

    .em-event-container[data-layout-mode="list"]>*:hover {
        border-left-color: var(--em-primary-500);
        transform: translateX(4px);
    }

    .em-event-container[data-layout-mode="modal"] {
        position: relative;
        padding: var(--em-space-6);
    }

    .em-event-container[data-layout-mode="modal"]>* {
        margin-bottom: var(--em-space-4);
        box-shadow: var(--em-shadow-xs);
    }

    /* Grid System - Clean & Responsive */
    .em-grid {
        display: grid;
        gap: var(--em-space-4);
    }

    .em-grid-cols-1 {
        grid-template-columns: 1fr;
    }

    .em-grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .em-grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .em-grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Layout Mode Grid Adjustments */
    .em-event-container[data-layout-mode="compact"] .em-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .em-event-container[data-layout-mode="compact"] .em-grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .em-event-container[data-layout-mode="list"] .em-grid-cols-4,
    .em-event-container[data-layout-mode="list"] .em-grid-cols-3,
    .em-event-container[data-layout-mode="list"] .em-grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .em-event-container[data-layout-mode="modal"] .em-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Responsive Design - Mobile First */
    @media (max-width: 1024px) {
        .em-event-container {
            padding: var(--em-space-4) 0;
        }

        .em-grid-cols-4 {
            grid-template-columns: repeat(2, 1fr);
        }

        .em-component-single,
        .em-component-row {
            padding: var(--em-space-6);
        }
    }

    @media (max-width: 768px) {
        .em-event-container {
            padding: var(--em-space-3) 0;
        }

        .em-component-single,
        .em-component-row {
            padding: var(--em-space-5);
        }

        /* Adjust spacing between sections on mobile */
        .em-component-single + .em-component-single,
        .em-component-single + .em-component-row,
        .em-component-row + .em-component-single,
        .em-component-row + .em-component-row {
            margin-top: var(--em-space-4);
        }

        .em-grid-cols-4,
        .em-grid-cols-3 {
            grid-template-columns: repeat(2, 1fr);
        }

        .em-event-container h1 {
            font-size: var(--em-font-size-2xl);
        }

        .em-event-container h2 {
            font-size: var(--em-font-size-xl);
        }
    }

    @media (max-width: 480px) {
        .em-event-container {
            padding: var(--em-space-2);
        }

        .em-component-single,
        .em-component-row {
            padding: var(--em-space-3);
            border-radius: var(--em-radius-md);
        }

        /* Tighter spacing on very small screens */
        .em-component-single + .em-component-single,
        .em-component-single + .em-component-row,
        .em-component-row + .em-component-single,
        .em-component-row + .em-component-row {
            margin-top: var(--em-space-3);
        }

        .em-grid-cols-4,
        .em-grid-cols-3,
        .em-grid-cols-2 {
            grid-template-columns: 1fr;
        }

        .em-btn {
            width: 100%;
            justify-content: center;
        }

        .em-event-container h1 {
            font-size: var(--em-font-size-xl);
        }
    }

    /* Accessibility & Focus States */
    .em-focus-ring:focus,
    .em-btn:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--em-white), 0 0 0 4px var(--em-primary-300);
    }

    /* Loading States - Clean & Subtle */
    .em-loading {
        position: relative;
        pointer-events: none;
        opacity: 0.7;
    }

    .em-loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, 0.4),
                transparent);
        animation: em-shimmer 1.2s ease-in-out infinite;
    }

    /* Utility Classes */
    .em-text-center {
        text-align: center;
    }

    .em-text-left {
        text-align: left;
    }

    .em-text-right {
        text-align: right;
    }

    .em-flex {
        display: flex;
    }

    .em-flex-col {
        flex-direction: column;
    }

    .em-items-center {
        align-items: center;
    }

    .em-justify-center {
        justify-content: center;
    }

    .em-justify-between {
        justify-content: space-between;
    }

    .em-gap-2 {
        gap: var(--em-space-2);
    }

    .em-gap-3 {
        gap: var(--em-space-3);
    }

    .em-gap-4 {
        gap: var(--em-space-4);
    }

    .em-gap-6 {
        gap: var(--em-space-6);
    }

    .em-p-2 {
        padding: var(--em-space-2);
    }

    .em-p-3 {
        padding: var(--em-space-3);
    }

    .em-p-4 {
        padding: var(--em-space-4);
    }

    .em-p-6 {
        padding: var(--em-space-6);
    }

    .em-m-2 {
        margin: var(--em-space-2);
    }

    .em-m-3 {
        margin: var(--em-space-3);
    }

    .em-m-4 {
        margin: var(--em-space-4);
    }

    .em-m-6 {
        margin: var(--em-space-6);
    }

    .em-mb-2 {
        margin-bottom: var(--em-space-2);
    }

    .em-mb-3 {
        margin-bottom: var(--em-space-3);
    }

    .em-mb-4 {
        margin-bottom: var(--em-space-4);
    }

    .em-mb-6 {
        margin-bottom: var(--em-space-6);
    }

    .em-rounded {
        border-radius: var(--em-radius-md);
    }

    .em-rounded-lg {
        border-radius: var(--em-radius-lg);
    }

    .em-rounded-xl {
        border-radius: var(--em-radius-xl);
    }

    .em-rounded-full {
        border-radius: var(--em-radius-full);
    }

    .em-shadow {
        box-shadow: var(--em-shadow-sm);
    }

    .em-shadow-md {
        box-shadow: var(--em-shadow-md);
    }

    .em-shadow-lg {
        box-shadow: var(--em-shadow-lg);
    }

    /* Print Styles */
    @media print {
        .em-no-print {
            display: none !important;
        }

        .em-event-container {
            background: white !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
            max-width: none !important;
        }

        .em-event-container>* {
            box-shadow: none !important;
            border: 1px solid var(--em-gray-300) !important;
            page-break-inside: avoid;
            margin-bottom: var(--em-space-4) !important;
        }

        .em-btn {
            display: none !important;
        }
    }

    /* Color Scheme Implementation */
    .em-color-scheme-light {
        /* Light mode variables (default) */
    }

    .em-color-scheme-dark {
        --em-white: #1f2937;
        --em-gray-50: #111827;
        --em-gray-100: #1f2937;
        --em-gray-200: #374151;
        --em-gray-300: #4b5563;
        --em-gray-400: #6b7280;
        --em-gray-500: #9ca3af;
        --em-gray-600: #d1d5db;
        --em-gray-700: #e5e7eb;
        --em-gray-800: #f3f4f6;
        --em-gray-900: #f9fafb;
        --em-primary-50: #1e1b4b;
        --em-primary-100: #312e81;
        --em-primary-500: #6366f1;
        --em-primary-600: #4f46e5;
    }

    .em-color-scheme-auto {
        /* Auto mode - follows system preference */
    }

    @media (prefers-color-scheme: dark) {
        .em-color-scheme-auto {
            --em-white: #1f2937;
            --em-gray-50: #111827;
            --em-gray-100: #1f2937;
            --em-gray-200: #374151;
            --em-gray-300: #4b5563;
            --em-gray-400: #6b7280;
            --em-gray-500: #9ca3af;
            --em-gray-600: #d1d5db;
            --em-gray-700: #e5e7eb;
            --em-gray-800: #f3f4f6;
            --em-gray-900: #f9fafb;
            --em-primary-50: #1e1b4b;
            --em-primary-100: #312e81;
            --em-primary-500: #6366f1;
            --em-primary-600: #4f46e5;
        }
    }

    /* Modern Card Design */
    .em-card {
        background: white;
        border-radius: var(--em-radius-xl);
        box-shadow: var(--em-shadow-sm);
        border: 1px solid var(--em-gray-200);
        transition: all var(--em-transition-normal);
    }

    .em-card:hover {
        box-shadow: var(--em-shadow-lg);
        transform: translateY(-2px);
    }

    .em-card-elevated {
        box-shadow: var(--em-shadow-md);
    }

    .em-card-elevated:hover {
        box-shadow: var(--em-shadow-xl);
    }

    /* Modern Button Styles */
    .em-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--em-space-sm);
        padding: var(--em-space-md) var(--em-space-lg);
        border-radius: var(--em-radius-lg);
        font-family: var(--em-font-sans);
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1;
        text-decoration: none;
        transition: all var(--em-transition-fast);
        cursor: pointer;
        border: none;
    }

    .em-btn-primary {
        background: linear-gradient(135deg, var(--em-primary) 0%, var(--em-primary-dark) 100%);
        color: white;
        box-shadow: var(--em-shadow-sm);
    }

    .em-btn-primary:hover {
        box-shadow: var(--em-shadow-md);
        transform: translateY(-1px);
    }

    .em-btn-secondary {
        background: var(--em-gray-100);
        color: var(--em-gray-700);
        border: 1px solid var(--em-gray-300);
    }

    .em-btn-secondary:hover {
        background: var(--em-gray-200);
        border-color: var(--em-gray-400);
    }

    /* Glassmorphism Effect */
    .em-glass {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Modern Focus States */
    .em-focus-ring:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), 0 0 0 1px var(--em-primary);
    }

    /* Responsive Grid System */
    .em-grid-responsive {
        display: grid;
        gap: var(--em-space-lg);
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Custom Scrollbar */
    .em-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .em-scrollbar::-webkit-scrollbar-track {
        background: var(--em-gray-100);
        border-radius: var(--em-radius-sm);
    }

    .em-scrollbar::-webkit-scrollbar-thumb {
        background: var(--em-gray-300);
        border-radius: var(--em-radius-sm);
    }

    .em-scrollbar::-webkit-scrollbar-thumb:hover {
        background: var(--em-gray-400);
    }

    /* Loading States */
    .em-loading {
        position: relative;
        overflow: hidden;
    }

    .em-loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        animation: em-shimmer 1.5s infinite;
    }

    @keyframes em-shimmer {
        0% {
            left: -100%;
        }

        100% {
            left: 100%;
        }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        :root {
            --em-space-lg: 1rem;
            --em-space-xl: 1.5rem;
            --em-space-2xl: 2rem;
        }

        .em-mobile-stack {
            flex-direction: column !important;
        }

        .em-mobile-full {
            width: 100% !important;
        }

        .em-mobile-center {
            text-align: center !important;
        }
    }

    /* Theme Override - Force smaller fonts and remove theme margins */
    .em-event-container h1,
    .em-event-container h2,
    .em-event-container h3,
    .em-event-container h4,
    .em-event-container h5,
    .em-event-container h6 {
        font-size: inherit !important;
        line-height: inherit !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: inherit !important;
        font-family: inherit !important;
    }

    .em-event-container p {
        margin: 0 !important;
        margin-bottom: 0.5rem !important;
        /* padding: 0 !important; */ /* Commented out to allow utility classes to work */
        font-size: inherit !important;
        line-height: inherit !important;
    }

   

    /* Restore only our intended spacing */
    .em-event-container .em-mb-1 { margin-bottom: 0.25rem !important; }
    .em-event-container .em-mb-2 { margin-bottom: 0.5rem !important; }
    .em-event-container .em-mb-3 { margin-bottom: 0.75rem !important; }
    .em-event-container .em-mb-4 { margin-bottom: 1rem !important; }
    .em-event-container .em-mb-6 { margin-bottom: 1.5rem !important; }
    .em-event-container .em-mb-8 { margin-bottom: 2rem !important; }

    .em-event-container .em-p-2 { padding: 0.5rem !important; }
    .em-event-container .em-p-3 { padding: 0.75rem !important; }
    .em-event-container .em-p-4 { padding: 1rem !important; }
    .em-event-container .em-p-6 { padding: 1.5rem !important; }

    /* Padding utilities */
    .em-event-container .em-px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .em-event-container .em-px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .em-event-container .em-px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .em-event-container .em-px-12 { padding-left: 3rem !important; padding-right: 3rem !important; }

    .em-event-container .em-py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .em-event-container .em-py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    .em-event-container .em-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .em-event-container .em-py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

    /* Force smaller font sizes throughout */
    .em-event-container .em-text-xs { font-size: 0.75rem !important; }
    .em-event-container .em-text-sm { font-size: 0.875rem !important; }
    .em-event-container .em-text-base { font-size: 1rem !important; }
    .em-event-container .em-text-lg { font-size: 1.125rem !important; }
    .em-event-container .em-text-xl { font-size: 1.25rem !important; }

    /* Preview Template Style Classes */
    .card {
        background-color: white;
        border-radius: 1rem;
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    }

    .text-xl { font-size: 1.25rem; }
    .text-lg { font-size: 1.125rem; }
    .text-sm { font-size: 0.875rem; }
    .text-xs { font-size: 0.75rem; }
    .text-3xl { font-size: 1.875rem; }

    .font-bold { font-weight: 700; }
    .font-semibold { font-weight: 600; }

    .text-gray-900 { color: #111827; }
    .text-gray-800 { color: #1f2937; }
    .text-gray-600 { color: #4b5563; }
    .text-gray-500 { color: #6b7280; }
    .text-indigo-500 { color: #6366f1; }
    .text-indigo-600 { color: #4f46e5; }

    .bg-indigo-50 { background-color: #eef2ff; }
    .bg-gray-200 { background-color: #e5e7eb; }

    .grid { display: grid; }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gap-2 { gap: 0.5rem; }
    .gap-4 { gap: 1rem; }
    .gap-5 { gap: 1.25rem; }
    .gap-6 { gap: 1.5rem; }

    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .items-center { align-items: center; }
    .items-start { align-items: flex-start; }
    .text-center { text-align: center; }

    .w-6 { width: 1.5rem; }
    .h-6 { height: 1.5rem; }
    .w-16 { width: 4rem; }
    .h-16 { height: 4rem; }
    .w-20 { width: 5rem; }
    .h-20 { height: 5rem; }

    .rounded-full { border-radius: 9999px; }
    .rounded-lg { border-radius: 0.5rem; }

    .mb-1 { margin-bottom: 0.25rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    .mb-8 { margin-bottom: 2rem; }
    .mt-1 { margin-top: 0.25rem; }

    .p-5 { padding: 1.25rem; }
    .p-6 { padding: 1.5rem; }
    .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

    .object-cover { object-fit: cover; }
    .flex-shrink-0 { flex-shrink: 0; }

    @media (min-width: 640px) {
        .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* Print Styles */
    @media print {
        .em-no-print {
            display: none !important;
        }

        .em-card {
            box-shadow: none !important;
            border: 1px solid var(--em-gray-300) !important;
        }
    }
</style> -->

<script>
    jQuery(document).ready(function ($) {
        const $container = $(".awl_em_main_div_<?php echo esc_attr($event_id); ?>");

        // Initialize container with smooth fade-in
        $container.css('opacity', 1).addClass('em-animate-fade-in-up');

        // Layout Management System
        window.EventMonsterLayout = {
            container: $container,

            // Change layout mode dynamically
            setMode: function (mode) {
                this.container.attr('data-layout-mode', mode);
                this.triggerLayoutChange();
            },

            // Change layout style
            setStyle: function (style) {
                this.container.attr('data-layout-style', style);
                this.triggerLayoutChange();
            },

            // Change layout density
            setDensity: function (density) {
                this.container.attr('data-layout-density', density);
                this.triggerLayoutChange();
            },

            // Get current layout settings
            getSettings: function () {
                return {
                    mode: this.container.attr('data-layout-mode'),
                    style: this.container.attr('data-layout-style'),
                    density: this.container.attr('data-layout-density')
                };
            },

            // Trigger layout change event
            triggerLayoutChange: function () {
                $(document).trigger('em-layout-changed', this.getSettings());
            }
        };

        // Intersection Observer for scroll animations
        if ('IntersectionObserver' in window) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.classList.add('em-animate-fade-in-up');
                        }, index * 100);
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '0px 0px -100px 0px'
            });

            // Observe all sections
            $container.find('> *').each(function () {
                observer.observe(this);
            });
        }

        // Enhanced button interactions
        $(document).on('click', '.em-btn', function () {
            const $btn = $(this);

            // Add click animation
            $btn.addClass('em-animate-scale-in');
            setTimeout(() => {
                $btn.removeClass('em-animate-scale-in');
            }, 200);
        });

        // Form submission handling
        $(document).on('submit', 'form', function () {
            const $form = $(this);
            const $submitBtn = $form.find('button[type="submit"]');

            if ($submitBtn.length) {
                $submitBtn.addClass('em-loading').prop('disabled', true);

                // Re-enable after timeout as fallback
                setTimeout(() => {
                    $submitBtn.removeClass('em-loading').prop('disabled', false);
                }, 10000);
            }
        });

        // Responsive layout adjustments
        function handleResize() {
            const width = $(window).width();
            const currentMode = $container.attr('data-layout-mode');

            if (width < 768 && (currentMode === 'wide' || currentMode === 'default')) {
                // Auto-adjust to compact on mobile
                $container.addClass('em-mobile-adjusted');
            } else {
                $container.removeClass('em-mobile-adjusted');
            }
        }

        $(window).on('resize', handleResize);
        handleResize(); // Initial call

        // Accessibility enhancements
        $container.find('[tabindex]').on('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                $(this).click();
            }
        });

        console.log("Event Monster Layout System initialized for ID: <?php echo esc_js($event_id); ?>");
    });
</script>
