<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="keywords" content="Upcoming,events," />
<meta name="title" content="Upcoming events - Chabad of Greater Laurel" />
<meta property="og:type" content="website" />
<meta name="scope-aids" content="4445780-4445788-7294564" />
<meta name="article-keywords" content="6760-2170-2898" />
<meta name="scope-aid" content="4445780" />
<meta name="scope-aid" content="4445788" />
<meta name="scope-aid" content="7294564" />
<meta name="article-keyword" content="6760" />
<meta name="article-keyword" content="2170" />
<meta name="article-keyword" content="2898" />
<meta property="og:url" content="https://www.chabadlaurel.org/templates/articlecco_cdo/aid/7294564/jewish/Upcoming-events.htm" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@chabad" />
<meta property="og:title" content="Upcoming events - Chabad of Greater Laurel" /><link rel="canonical" href="https://www.chabadlaurel.org/templates/articlecco_cdo/aid/7294564/jewish/Upcoming-events.htm" />
<link rel="Stylesheet" href="/css/fonts/font-awesome/font-awesome-5.css?g=10&v=98662BF4" id="kfont-awesome" type="text/css"/>
<link rel="Stylesheet" href="/css/DefaultGrid.css?g=10&v=44B79007" id="kgrid" type="text/css"/>
<link rel="Stylesheet" href="/css/Elements.css?g=10&v=E669C926" id="k6" type="text/css"/>
<link rel="Stylesheet" href="/css/vendor/ds/tokens/sites.css?g=10&v=A6ADC6CE" id="ksites-ds-css" type="text/css"/>
<link rel="Stylesheet" href="/css/new/main.css?g=10&v=2B7F734E" id="k7" type="text/css"/>
<link rel="Stylesheet" href="/css/global.css?g=10&v=D37C5613" id="k3" type="text/css"/>
<link rel="Stylesheet" href="/css/global-print.css?g=10&v=1FE80AC1" id="k5" type="text/css" media="print"/>
<link rel="Stylesheet" href="/css/cco/home/widget-styles.css?g=10&v=B14CEBA0" id="k6" type="text/css"/>
<link rel="Stylesheet" href="/css/sites6/default-theme.css?g=10&v=F68E803F" id="k" type="text/css"/>
<link rel="Stylesheet" href="/css/old/global.css?g=10&v=F7C22456" id="k2898" type="text/css"/>
<link rel="Stylesheet" href="/css/bootstrap/grid.css?g=10&v=B92FCAD8" id="kbootstrap4-grid" type="text/css"/>
<link rel="Stylesheet" href="/css/Library/reader-comments.css?g=10&v=5F31D0D8" id="kCommentsStylesheet" type="text/css"/>
<link rel="Stylesheet" href="/css/inline/BookInfo.css?g=10&v=14B88022" id="kBookInfoCss" type="text/css"/>
<!--[if lte IE 8]> <link rel="Stylesheet" href="/css/global-ie.css?g=10&v=E699B0F3" id="k4" type="text/css"/> <![endif]-->
<script>$q=[];$j=function(f){$q.push(f);}</script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/os/jquery-latest.min.js?g=10&v=0293E3EC"></script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/co/dist/CoLib.js?g=10&v=87098EA1"></script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/WebComponents/bundles/magen-cdo-global.js?g=10&v=F6438A68"></script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/templates/sites6.js?g=10&v=E04072E1"></script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/custom/primarynavigation.js?g=10&v=76ABCD73"></script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/custom/BetaFeedback.js?g=10&v=D421ABC8"></script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/custom/multimedia/infolayer.js?g=10&v=ED1B8531"></script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/custom/commentsloader.js?g=10&v=AD6AAB79"></script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/custom/subscribeprompt.js?g=10&v=86D84DC2"></script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/modules/pagetools.js?g=10&v=930B07AB"></script>
<script type="text/javascript" src="https://w2.chabad.org/scripts/js/custom/deprecated.js?v=D506A83E&g=10"></script><script>$j = $j.fn ? $j : jQuery;$j(()=>{$q.forEach(f=>{try{f.call(window);}catch(ex){console.error(ex);}});})</script><script  language="javascript" type="text/javascript"> Co.Settings      = {CacheClassName:'js-cache-default',MosadName:'Chabad of Greater Laurel'}; Co.ArticleId     = '7294564';Co.SectionId     = 7294564;Co.PartnerSiteId = 0;Co.SiteId        = 10035;Co.IsMobilePage  = false;Co.IsResponsive  = false;Co.DbDomain      = 'chabadlaurel.org';Co.LanguageCode  = '';Co.LoginStatus   = 'None';</script><script>
<!-- -->
</script>
	
<title>
	Upcoming events - Chabad of Greater Laurel
</title>
	



<script>
	window.dataLayer = window.dataLayer || [];
	dataLayer.push({"event":"datalayer-initialized","page":{"numberOfComments":0,"publicationDate":"2026-03-19","primaryArticleId":7294564,"title":"","author":"","authorId":0,"contentLevel1":"My Site","contentLevel2":"Upcoming events ","siteName":"Chabad of Greater Laurel"},"time":{"upcomingHoliday":"Shavuot","daysToUpcomingHoliday":16,"hebrewDate":"5786-02-19"}});
		dataLayer.push({ 'articleHierarchy': '-4445780-4445788-7294564-', 'keywords': '-k2898-k2170-k6760-', 'k': '-4445780-4445788-7294564--k2898-k2170-k6760-' });
	
</script>
<script>

(function(c,h,a,b,a,d){c[a]=c[a]||[];c[a].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=h.getElementsByTagName(b)[0],
j=h.createElement(b);j.async=true;
j.src='https://w6.chabad.org/mitzvah-tank.js';f.parentNode.insertBefore(j,f);
})(window,document,0,'script','dataLayer');</script>

	<!-- Start of StatCounter Code -->
	<script type="text/javascript">
	var sc_project = 12079321;var sc_partition = 78;var sc_invisible = 1;var sc_remove_link=1;var sc_security = "382bc1f1";var sc_https = 1;
	</script>
	<script type="text/javascript" src="https://secure.statcounter.com/counter/counter_xhtml.js" defer async></script>
	<noscript><img src="//c79.statcounter.com/counter.php?sc_project=12079321&amp;java=0&amp;security=382bc1f1&amp;invisible=1" border="0" /> </noscript>
	<!-- End of StatCounter Code -->


</head>
<body class="lang_en dir_ltr cco_body sites-article">

	


	
	<div id="PrintCreditHeader" class="show_for_print">
Printed from<b>chabadlaurel.org</b>
</div>
	<div id="header">
		<div class="wrapper header-wrapper">
			
<div id="feedback_bar" class="hide_for_print no_outline">
	<div class="wrapper">
		
	</div>
</div>

			


<div id="header_container" class="header_container">
	<div class="clearfix links">
		<img src="https://w2.chabad.org/images/global/spacer.gif" width="15" height="8" class="baruch_hashem" />
		<div class="float_right">
			
			
				<div class="topBarLink cco_topbar_link ask_the_rabbi_link">
					<a href="/asktherabbi/default_cdo/jewish/Ask-the-Rabbi.htm">Ask the Rabbi</a>
				</div>
				
			
			
				<div class="topBarLink cco_topbar_link contact_link">
					<a href="/tools/feedback.asp">Contact</a>
				</div>
			
			
		</div>
		<div class="float_left">
			
				<div class="topBarLink cco_topbar_link home_link">
					<a href="/">Home</a>
				</div>
				
			
				<div class="topBarLink cco_topbar_link about_link">
					<a href="/36226">About</a>
				</div>
				
			
			
			
		</div>
	</div>
	<div class="break_floats"></div>
</div>

			<div class="clearfix branding-search">
				<div id="header_branding" class="no_outline ">
					<div class="g260 no_margin cco_search_header float_right">
						

<div class="co_search_form margin05">
	<form name="MainSearchForm" id="MainSearchForm" method="get" action="/search/results.asp" class="clearfix" onsubmit="return Co.Forms.Validation.Validate(this, null, {markAsSubmitted:false});">
		<div class="co_global_submit"><button type="submit" class="button" value=" "><span> </span></button></div>
		

<div class="co_global_input_container clearfix">
	<input id="topAreaTopSearch_search" required="true" autocomplete="nope" placeholder="Search" value="" class="co_global_input co_search js-search-field active js-mirrored-input" onblur="this.form.className = this.form.className.replace(/\sactive/gi, &#39;&#39;);" name="searchWord" onfocus="this.form.className+=&#39; active&#39;;" type="text" display_name="Search Field" min_length="3"></input>
</div>

			
		
		
	
		<div id="topAreaTopSearch_search_wrapper" class="co_field_options" style="display:none;">
			<div class="co_absolute_wraper" id="co_absolute_wraper" style="">
				<div class="inner">
					<div id="topAreaTopSearch_search_container" class="co_field_options_suggestions"></div>
					<div class="break_floats"></div>
					
				</div>
			</div>
		</div>
	</form>
</div>
					</div>
					
					<a href="/default.asp" title="Chabad of Greater Laurel" class="site_title">Chabad of Greater Laurel<span class="site_subtitle clearfix"> </span></a>
				</div>
			</div>
			
			
			<button type='button' class='cs-mobile-menu-open js-mobile-menu-open'><i class='fa fa-bars'></i></button>
			<div class="site-nav-wrapper">
				<script>
var primaryNavigationVersion = "639135842466592565";
</script>
<div id="co_menu_container_wrapper" class="co_menu_container_wrapper " data-list-name="primary navigation"> 
<div class="co_menu_container clearfix" id="co_menu_container">
<a class="menu_logo" href="/"></a>
<table cellpadding="0" cellspacing="0" border="0" class="main_menu_container first global">
<tr id="tabContentMain" tab="Main" style="display:table-row;">
<td class="co_menu_item home" data-menu-level="1"><a href="/default.asp"><img class="co_menu_home_image" src="https://w2.chabad.org/images/global/spacer.gif" width="28" height="60" border="0" onmouseover="this.className += ' hover';" onmouseout="this.className=this.className.replace(/\s?hover/gi, '');" /></a></td>
<td class="co_menu_item_divider"><img src="https://w2.chabad.org/images/global/spacer.gif" width="2" height="1" border="0" /></td>
<td class="co_menu_item arrow multi_level" aid="6057266" data-menu-level="1" onmouseover='Co.MainNavigation.Show(event, this);' onmouseout='Co.MainNavigation.Hide(event, this);' >
<div class="co_menu_content"><div class="co_submenu_container" style="width:auto;display:none;clip:rect(auto auto 0px auto);">
<div class="wrapper">
<div class="column_wrapper clearfix" style="height:100%;">
<div class="co_column">
<a href="/templates/articlecco_cdo/aid/4455085/jewish/Family-Shabbat-Dinner.htm" class="item empty" id="menu_item1-1" data-menu-level="2" data-aid="4455085">
<img src="https://w2.chabad.org/images/global/spacer.gif" width="5" height="10" alt="" border="0" class="arrow off" />
<span>Family Shabbat Dinner</span>
</a>
<a href="/templates/articlecco_cdo/aid/4455419/jewish/Jewish-Womens-Circle.htm" class="item empty" id="menu_item1-2" data-menu-level="2" data-aid="4455419">
<img src="https://w2.chabad.org/images/global/spacer.gif" width="5" height="10" alt="" border="0" class="arrow off" />
<span>Jewish Womens' Circle</span>
</a>
<a href="/templates/articlecco_cdo/aid/4455483/jewish/Adult-Education.htm" class="item empty" id="menu_item1-3" data-menu-level="2" data-aid="4455483">
<img src="https://w2.chabad.org/images/global/spacer.gif" width="5" height="10" alt="" border="0" class="arrow off" />
<span>Adult Education</span>
</a>
<a href="/templates/articlecco_cdo/aid/4462100/jewish/Hebrew-School.htm" class="item empty" id="menu_item1-4" data-menu-level="2" data-aid="4462100">
<img src="https://w2.chabad.org/images/global/spacer.gif" width="5" height="10" alt="" border="0" class="arrow off" />
<span>Hebrew School</span>
</a>
<a href="/templates/articlecco_cdo/aid/6875988/jewish/Social-Shabbat-First-Friday.htm" class="item empty" id="menu_item1-5" data-menu-level="2" data-aid="6875988">
<img src="https://w2.chabad.org/images/global/spacer.gif" width="5" height="10" alt="" border="0" class="arrow off" />
<span>Social Shabbat>>> First Friday</span>
</a>
</div>
<div id="menu_child1-1" class="menu_child empty selected" style="width:174px;">
<table cellpadding="0" cellspacing="0" border="0" style="height:100%;">
<tr class="wrapper clearfix">
<td class="co_column"><div class="column_left_wrapper">
<a href="" class="child_item default" data-menu-level="3" data-aid="0"><span></span></a>
</div></td>
</tr>
</table>
</div>
<div id="menu_child1-2" class="menu_child empty" style="width:174px;">
<table cellpadding="0" cellspacing="0" border="0" style="height:100%;">
<tr class="wrapper clearfix">
<td class="co_column"><div class="column_left_wrapper">
<a href="" class="child_item default" data-menu-level="3" data-aid="0"><span></span></a>
</div></td>
</tr>
</table>
</div>
<div id="menu_child1-3" class="menu_child empty" style="width:174px;">
<table cellpadding="0" cellspacing="0" border="0" style="height:100%;">
<tr class="wrapper clearfix">
<td class="co_column"><div class="column_left_wrapper">
<a href="" class="child_item default" data-menu-level="3" data-aid="0"><span></span></a>
</div></td>
</tr>
</table>
</div>
<div id="menu_child1-4" class="menu_child empty" style="width:174px;">
<table cellpadding="0" cellspacing="0" border="0" style="height:100%;">
<tr class="wrapper clearfix">
<td class="co_column"><div class="column_left_wrapper">
<a href="" class="child_item default" data-menu-level="3" data-aid="0"><span></span></a>
</div></td>
</tr>
</table>
</div>
<div id="menu_child1-5" class="menu_child empty" style="width:174px;">
<table cellpadding="0" cellspacing="0" border="0" style="height:100%;">
<tr class="wrapper clearfix">
<td class="co_column"><div class="column_left_wrapper">
<a href="" class="child_item default" data-menu-level="3" data-aid="0"><span></span></a>
</div></td>
</tr>
</table>
</div>
</div>
<div class="break_floats"></div></div></div></div><span class="parent"><img src="https://w2.chabad.org/images/global/spacer.gif" width="12" height="6" border="0" vspace="2" /><div><a href="/templates/articlecco_cdo/aid/6057266/jewish/Events.htm" class="parent">Events</a></div></span><a href="/templates/articlecco_cdo/aid/6057266/jewish/Events.htm" class="bg_extension js-parent-menu-link" data-aid="6057266"></a></td>
<td class="co_menu_item_divider"><img src="https://w2.chabad.org/images/global/spacer.gif" width="2" height="1" border="0" /></td>
<td class="co_menu_item arrow multi_level" aid="6040770" data-menu-level="1" onmouseover='Co.MainNavigation.Show(event, this);' onmouseout='Co.MainNavigation.Hide(event, this);' >
<div class="co_menu_content"><div class="co_submenu_container" style="width:auto;display:none;clip:rect(auto auto 0px auto);">
<div class="wrapper">
<div class="column_wrapper clearfix" style="height:100%;">
<div class="co_column">
<a href="https://www.facebook.com/chabadlaurel/photos_by" class="item empty" id="menu_item2-1" data-menu-level="2" data-aid="6896944">
<img src="https://w2.chabad.org/images/global/spacer.gif" width="5" height="10" alt="" border="0" class="arrow off" />
<span>Event Photos</span>
</a>
</div>
<div id="menu_child2-1" class="menu_child empty selected" style="width:174px;">
<table cellpadding="0" cellspacing="0" border="0" style="height:100%;">
<tr class="wrapper clearfix">
<td class="co_column"><div class="column_left_wrapper">
<a href="" class="child_item default" data-menu-level="3" data-aid="0"><span></span></a>
</div></td>
</tr>
</table>
</div>
</div>
<div class="break_floats"></div></div></div></div><span class="parent"><img src="https://w2.chabad.org/images/global/spacer.gif" width="12" height="6" border="0" vspace="2" /><div><a href="/templates/articlecco_cdo/aid/6040770/jewish/Photos.htm" class="parent">Photos</a></div></span><a href="/templates/articlecco_cdo/aid/6040770/jewish/Photos.htm" class="bg_extension js-parent-menu-link" data-aid="6040770"></a></td>
<td class="co_menu_item_divider"><img src="https://w2.chabad.org/images/global/spacer.gif" width="2" height="1" border="0" /></td>
<td class="co_menu_item" aid="7294564" data-menu-level="1" onmouseover="this.className += ' hover';" onmouseout="this.className = this.className.replace(/\shover/gi, '');" >
<div class="co_menu_content"><div class="co_submenu_container" style="width:auto;display:none;clip:rect(auto auto 0px auto);">
<div class="wrapper">
<div class="column_wrapper clearfix" style="height:100%;">
</div>
<div class="break_floats"></div></div></div></div><span class="parent"><div><a href="/templates/articlecco_cdo/aid/7294564/jewish/Upcoming-events.htm" class="parent">Upcoming<br />events</a></div></span><a href="/templates/articlecco_cdo/aid/7294564/jewish/Upcoming-events.htm" class="bg_extension js-parent-menu-link" data-aid="7294564"></a></td>
<td class="co_menu_item_divider"><img src="https://w2.chabad.org/images/global/spacer.gif" width="2" height="1" border="0" /></td>
<td class="co_menu_item donate_link" aid="0" data-menu-level="1" onmouseover="this.className += ' hover';" onmouseout="this.className = this.className.replace(/\shover/gi, '');" >
<div class="co_menu_content"><div class="co_submenu_container" style="width:auto;display:none;clip:rect(auto auto 0px auto);">
<div class="wrapper">
<div class="column_wrapper clearfix" style="height:100%;">
</div>
<div class="break_floats"></div></div></div></div><span class="parent"><div><a href="/4970020" class="parent">Donate</a></div></span><a href="/4970020" class="bg_extension js-parent-menu-link" data-aid="0"></a></td>
</tr>
</table>
</div>
</div>
<!-- END CACHE -->
				<div class="mobile-menu-bottom-links">
					
						<a href="/36226" class="site-menu-general__link">About</a>
					
					<a href="/search">Search</a>
					
						<a href="/tools/feedback.asp">Contact</a>
					
				</div>
			</div>
		</div>
	</div>
	<div id="content">
		<div id="BodyContainer" class="wrapper">
			<div class="body_wrapper  no-hero-image clearfix">
				
	<div class="co_content_container clearfix local_content" id="co_content_container">
		<div class="clearfix">
			
			
			
			<div class="clearfix bh mobile-only align_right">ב"ה</div>
			
				<div class="master-content-wrapper g960" >
					

<header class="article-header cf ">
	
	
			<h1 class="article-header__title js-article-title js-page-title">Upcoming events </h1>
		
			<div>
				
			</div>
		
</header>
				</div>
			
			<div class="body_wrapper clearfix co_body">
				<div class="g960" id="co_body_container">
					
					<div id="ContentBody">
						
						
							<div class="content-area-parent no_margin">
								
	<div id="cco_body">
		<div class="content g960 no_margin no_overflow" id="co_content_container">
			
			
	

	<article class="content js-content" itemscope itemtype="http://schema.org/Article">
	



<meta itemprop="mainEntityOfPage headline name" content="" />

<meta itemprop="image" content="" />


<meta itemprop="uploadDate" content="2026-03-19T09:25:21" />
<span itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
	<meta itemprop="name" content="Chabad of Greater Laurel" />
	<meta itemprop="brand" content="Chabad of Greater Laurel" />
	<span itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
		<meta itemprop="url" content="https://w2.chabad.org/images/logos/chabad.org.amp.60_330.png" />
		<meta itemprop="height" content="60" />
		<meta itemprop="width" content="330" />
	</span>
</span>
<meta itemprop="datePublished" content="2026-03-19T09:25:21" />
			<div itemprop="articleBody">
				<co:body xmlns:co="www1.chabadonline.com/alpha1" xmlns:ext="urn:xslt-extensions">
  <div class="co_body article-body cf">
<p>
<img alt="" height="924" src="https://w2.chabad.org/media/images/1364/qarM13643934.png" width="1640"></p>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&amp;display=swap" rel="stylesheet">
<style type="text/css">

/* General Styles */
    #directory-upcoming-events {
        font-family: "Inter", sans-serif;
        color: rgb(47, 60, 77);
        background-color: #f8f9fa; /* Background Light */
        padding: 40px 20px;
        box-sizing: border-box;
    }

    #directory-upcoming-events * { box-sizing: border-box; }

    #directory-upcoming-events h3 {
        font-family: "Inter", sans-serif;
        color: #212459; /* Primary Navy */
    }

    /* Scroll Animation Styles */
    .fade-up-element {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
        transition-delay: var(--stagger-delay, 0s);
    }
    .fade-up-element.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Header Section */
    .dir-events-header { text-align: center; margin-bottom: 30px; max-width: 800px; margin-left: auto; margin-right: auto; }
    .dir-events-header h2 { 
        font-size: 42px; font-weight: 800; color: #212459; /* Primary Navy */
        letter-spacing: -1px; margin-bottom: 10px; position: relative; display: inline-block;
    }
    .dir-events-header h2:after {
        content: ''; display: block; width: 60px; height: 4px;
        background: #afc78b; /* Accent Green */ margin: 15px auto 0; border-radius: 2px;
    }
    .page-tools-sidebar {
        display: none !important;
    }

    .body_wrapper.co_body{ width: 100% !important;}
    .dir-events-subtitle { font-size: 15px; color: #666; line-height: 140%; margin: 0 auto; }

    /* Dropdown Filters */
    .dir-filter-container {
        max-width: 1400px; margin: 0 auto 30px; display: flex; flex-wrap: wrap; gap: 12px;
        justify-content: center; background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    }
    .dir-filter-group { display: flex; flex-direction: column; min-width: 140px; flex: 1; }
    .dir-filter-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #666; margin-bottom: 4px; letter-spacing: 0.5px; }
    .dir-dropdown { padding: 8px 10px; border: 1px solid #ddd; border-radius: 5px; font-family: "Inter", sans-serif; font-size: 13px; color: #2F3C4D; cursor: pointer; width: 100%; transition: border-color 0.2s; }
    .dir-dropdown:focus { outline: none; border-color: #212459; /* Primary Navy */ }

    /* Clear Filter Button */
    .clear-btn-group { display: none; flex: 0 1 auto; justify-content: flex-end; }
    .dir-btn-clear {
        padding: 8px 15px; background: #fff; color: #212459; border: 1px solid #ddd;
        border-radius: 5px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600;
        cursor: pointer; transition: all 0.2s; height: 35px; white-space: nowrap; margin-top: auto;
    }
    .dir-btn-clear:hover { background: #212459; color: #fff; border-color: #212459; }

    /* Events Grid */
    .dir-events-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px; max-width: 1400px; margin: 0 auto;
    }
    
    /* UNIFIED CARD STYLES */
    .unified-event-card { 
        background: #ffffff; border-radius: 16px; overflow: hidden; 
        box-shadow: 0 10px 40px -10px rgba(33, 36, 89, 0.1); 
        display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,0.05);
        height: 100%;
        /* Animation properties combined with fade-up-element */
        transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
        transition-delay: var(--stagger-delay, 0s);
    }
    .unified-event-card.is-visible:hover { 
        transform: translateY(-8px); 
        box-shadow: 0 20px 50px -10px rgba(33, 36, 89, 0.2); 
    }
    
    .uec-image { position: relative; height: 200px; overflow: hidden; background-color: #eee; flex-shrink: 0; }
    .uec-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
    .unified-event-card:hover .uec-image img { transform: scale(1.05); }
    
    .uec-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
    
    .uec-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 10px; }
    
    /* PILL TAG STYLES */
    .uec-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .uec-category { 
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 10px; font-weight: 700; text-transform: uppercase; 
        padding: 4px 12px; border-radius: 50px; /* Perfect pill shape */
        color: white; 
        white-space: nowrap; 
    }
    .uec-pulse-tag {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
        transform: scale(1);
        animation: pulse-tag 2s infinite;
    }
    @keyframes pulse-tag {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }
        70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(0, 0, 0, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    }
    
    .uec-inst-logo { max-height: 28px; max-width: 90px; object-fit: contain; }
    
    .uec-date { font-family: "Inter", sans-serif; color: #212459; /* Updated Color */ font-weight: 800; font-size: 13px; letter-spacing: 0.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
    .uec-location { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; color: #555; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
    
    .uec-title { font-family: "Inter", sans-serif; color: #212459; margin: 0 0 10px; line-height: 1.3; }
    .uec-title a { font-size: 20px !important; font-weight: 800 !important; color: #212459 !important; /* Primary Navy */ text-decoration: none; transition: color 0.2s; }
    .uec-title a:hover { color: #6b1457; /* Accent Plum */ }
    
    .uec-desc { font-size: 13px; color: #666; line-height: 1.5; margin: 0 0 20px; flex-grow: 1; max-height: 60px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
    
    .uec-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
    
    /* MORE INFO BUTTON STYLE */
    .uec-main-action-row { display: flex; gap: 8px; width: 100%; align-items: stretch; margin-bottom: 8px; }
    .uec-btn-main { 
        flex-grow: 1; display: flex; align-items: center; justify-content: center;
        background-color: #212459; color: #ffffff !important; 
        padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 700; text-align: center; 
        border: 2px solid #212459; transition: all 0.2s; font-size: 14px; margin: 0;
    }
    .uec-btn-main:hover { background-color: #6b1457; border-color: #6b1457; color: #ffffff !important; }

    .uec-btn-icon { width: 42px; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0; color: #555; border-radius: 8px; text-decoration: none; transition: all 0.2s; flex-shrink: 0; font-size: 16px; border: 1px solid #ddd; }
    .uec-btn-icon:hover { background-color: #212459; color: white; border-color: #212459; }
    
    .uec-cal-col { display: flex; flex-direction: column; gap: 8px; }
    .uec-btn-cal { 
        display: block; width: 100%; text-align: center; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 600; 
        color: #555 !important; background: #f0f0f0; text-decoration: none; transition: all 0.2s; box-sizing: border-box;
    }
    .uec-btn-cal:hover { background: #e0e0e0; color: #222 !important; }
    .uec-btn-cal i { margin-right: 4px; }

    /* Responsive Grid Adjustments */
    @media (max-width: 600px) {
        .dir-events-grid { grid-template-columns: 1fr; gap: 20px; }
        .dir-filter-group { min-width: 45%; }
        .dir-events-header h2 { font-size: 32px; }
        .clear-btn-group { min-width: 100%; margin-top: 10px; }
    }
</style>
<div id="directory-upcoming-events">
<div class="dir-events-header fade-up-element"> 
<div class="dir-events-subtitle">Join us for inspiring, joyful, and meaningful programs for the whole family</div>
</div>

<div class="dir-filter-container fade-up-element">
<div class="dir-filter-group">
<div class="dir-filter-label">Month</div>
<select class="dir-dropdown" id="filter-month">
<option value="all">All Months</option></select></div>

<div class="dir-filter-group">
<div class="dir-filter-label">Demographics</div>
<select class="dir-dropdown" id="filter-demo">
<option value="all">All Demographics</option></select></div>

<div class="dir-filter-group">
<div class="dir-filter-label">Event Type</div>
<select class="dir-dropdown" id="filter-type">
<option value="all">All Event Types</option></select></div>

<div class="dir-filter-group">
<div class="dir-filter-label">Location</div>
<select class="dir-dropdown" id="filter-location">
<option value="all">All Locations</option></select></div>

<div class="dir-filter-group clear-btn-group" id="clear-filters-group">
<button class="dir-btn-clear" id="clear-filters-btn">Clear Filters</button></div>
</div>

<div class="dir-events-grid" id="events-grid">
<p style="text-align:center; grid-column: 1/-1; padding: 40px; color: #666;"><br>
Loading events...</p>
</div>
</div>
<script>
//
document.addEventListener('DOMContentLoaded', async function() {
    
    // Intersection Observer for scroll animations with stagger effect
    const scrollObserver = new IntersectionObserver((entries, observer) => {
        let delay = 0;
        // Filter out entries that aren't visible yet
        const intersectingEntries = entries.filter(entry => entry.isIntersecting);

        intersectingEntries.forEach(entry => {
            // Apply a progressively increasing delay to this batch of elements
            entry.target.style.setProperty('--stagger-delay', `${delay}s`);
            entry.target.classList.add('is-visible');
            observer.unobserve(entry.target); // Stop observing once it's shown
            
            // Clean up the delay after the animation so hovers are instant
            setTimeout(() => {
                entry.target.style.removeProperty('--stagger-delay');
            }, (delay * 1000) + 600); // Wait for the delay plus the 600ms transition duration

            delay += 0.15; // 150ms stagger per item
        });
    }, {
        root: null,
        threshold: 0.1, // Trigger when 10% is visible
        rootMargin: "0px 0px -30px 0px" // Trigger slightly before it hits the bottom
    });

    // Observe initial static elements
    document.querySelectorAll('.fade-up-element').forEach(el => {
        scrollObserver.observe(el);
    });

    document.addEventListener('error', function(e) {
        if (e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'img') {
            if (!e.target.dataset.fallbackApplied) {
                e.target.dataset.fallbackApplied = 'true';
                e.target.src = 'https://placehold.co/400x300/eee/ccc?text=Image+Not+Found';
            }
        }
    }, true);

    const SHEET_ID = '1EPGntfwESm5hdd-RPpR7kmNARdvi9dpDT3YrJnO0ens'; 

    const EVENTS_URL = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json\u0026sheet=Events`;
    const SETTINGS_URL = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json\u0026sheet=Settings`;
    
    let allEvents = [];
    let categoryColors = {}; 
    let institutionLogos = {};
    let demoColors = {}; 
    let capacityColors = {}; // New: Store capacity tag colors

    const dayOfWeekMap = { 'sunday':0, 'monday':1, 'tuesday':2, 'wednesday':3, 'thursday':4, 'friday':5, 'saturday':6 };

    function parseGoogleJson(text) {
        return JSON.parse(text.substring(text.indexOf('{'), text.lastIndexOf('}') + 1));
    }

    // Helper to safely get data from Google Sheets array (prevents missing column errors)
    const getSafeVal = (row, index) => {
        return (row.c && row.c.length > index && row.c[index] && row.c[index].v !== null) ? String(row.c[index].v).trim() : '';
    };

    function createCalendarLinks(title, desc, loc, dateObj, timeStr) {
        let hours = 0, mins = 0;
        if (timeStr) {
            const match = timeStr.match(/(\d+):(\d+)\s*(AM|PM)/i);
            if (match) {
                hours = parseInt(match[1]); mins = parseInt(match[2]);
                if (match[3].toUpperCase() === 'PM' && hours < 12) hours += 12;
                if (match[3].toUpperCase() === 'AM' && hours === 12) hours = 0;
            }
        }
        
        const start = new Date(dateObj);
        start.setHours(hours, mins, 0);
        const end = new Date(start.getTime() + 60 * 60 * 1000);
        
        const formatICSDate = (d) => {
            return d.getUTCFullYear() +
                String(d.getUTCMonth() + 1).padStart(2, '0') +
                String(d.getUTCDate()).padStart(2, '0') + 'T' +
                String(d.getUTCHours()).padStart(2, '0') +
                String(d.getUTCMinutes()).padStart(2, '0') +
                String(d.getUTCSeconds()).padStart(2, '0') + 'Z';
        };

        const startStr = formatICSDate(start);
        const endStr = formatICSDate(end);
        
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = desc || '';
        const cleanDesc = tempDiv.textContent || tempDiv.innerText || '';

        const gCalUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE\u0026text=${encodeURIComponent(title)}\u0026dates=${startStr}/${endStr}\u0026details=${encodeURIComponent(cleanDesc)}\u0026location=${encodeURIComponent(loc)}`;
        
        const icsContent = `BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nDTSTART:${startStr}\nDTEND:${endStr}\nSUMMARY:${title}\nDESCRIPTION:${cleanDesc}\nLOCATION:${loc}\nEND:VEVENT\nEND:VCALENDAR`;
        
        const blob = new Blob([icsContent], { type: 'text/calendar;charset=utf-8' });
        const icsUrl = URL.createObjectURL(blob);

        return { gCalUrl, icsUrl };
    }

    // Generate Pre-filled Email Body
    function generateEmailBody(ev, dateTimeStr) {
        const instName = ev.institution || 'Chabad Ellicott City';
        let body = `Dear ${instName} Events Team,\n\n`;
        body += `I would like to sign up for the following event:\n\n`;
        body += `Event Name: ${ev.title}\n`;
        body += `Event Date: ${dateTimeStr}\n\n`;
        body += `Number of Attendees: [# of people]\n`;
        body += `Names of Attendees: [List names]\n\n`;
        body += `* For new attendees, please provide your contact information below. Returning members may leave this section blank if we already have your details on file. *\n`;
        body += `Home Address: [Put Home Address Here]\n`;
        body += `Phone Number: [Put Phone Number Here]\n\n`;

        // Add payment section ONLY if price text exists
        if (ev.priceText) {
            body += `Pricing Info: ${ev.priceText}\n\n`;
            body += `Payment Commitment:\n`;
            if (ev.donateLink) {
                body += `[ ] I will pay in advance online (${ev.donateLink})\n`;
            } else {
                body += `[ ] I will pay in advance online\n`;
            }
            body += `[ ] I will pay at the door\n`;
            body += `[ ] I will make an additional donation in the amount of: $______\n`;
            body += `[ ] Please send me payment instructions\n\n`;
            body += `Total Amount Committing to Pay: $[Amount]\n\n`;
        }

        body += `Additional Notes (optional):\n`;
        body += `[Any dietary restrictions, seating requests, etc.]\n\n`;
        body += `Please confirm my registration at your earliest convenience.\n\n`;
        body += `Thank you,\n`;
        body += `[Your Name]\n`;
        body += `[Your Email]\n`;
        body += `[Your Phone Number]`;

        return encodeURIComponent(body);
    }

    async function fetchSheetData() {
        try {
            // Fetch Settings with Safe Getters
            try {
                const setRes = await fetch(SETTINGS_URL);
                const setData = parseGoogleJson(await setRes.text());
                if (setData && setData.table && setData.table.rows) {
                    setData.table.rows.forEach(row => {
                        // Category (Column A/0) & Color (Column B/1)
                        const catName = getSafeVal(row, 0).toLowerCase();
                        const catColor = getSafeVal(row, 1);
                        if(catName && catColor) categoryColors[catName] = catColor;

                        // Institution (Column C/2) & Logo (Column D/3)
                        const instName = getSafeVal(row, 2).toLowerCase();
                        const instLogo = getSafeVal(row, 3);
                        if(instName && instLogo) institutionLogos[instName] = instLogo;

                        // Demographics (Column E/4) & Color (Column F/5)
                        const demoName = getSafeVal(row, 4).toLowerCase();
                        const demoColor = getSafeVal(row, 5);
                        if(demoName && demoColor) demoColors[demoName] = demoColor;

                        // Capacity Updates (Column I/8) & Color (Column J/9)
                        const capName = getSafeVal(row, 8).toLowerCase();
                        const capColor = getSafeVal(row, 9);
                        if(capName && capColor) capacityColors[capName] = capColor;
                    });
                }
            } catch (err) { console.warn("Could not load Settings.", err); }

            // Fetch Events
            const evRes = await fetch(EVENTS_URL);
            const evText = await evRes.text();
            if (evText.toLowerCase().includes('<!doctype html>')) throw new Error("Restricted");
            const evData = parseGoogleJson(evText);
            
            const rows = evData.table.rows;
            let processedEvents = [];
            const today = new Date();
            today.setHours(0,0,0,0);

            rows.forEach(row => {
                const title = getSafeVal(row, 0);
                if(!title) return; 

                const description = getSafeVal(row, 1);
                const imageSrc = getSafeVal(row, 2) || 'https://placehold.co/600x400/eee/ccc?text=Event';
                const demographics = getSafeVal(row, 3);
                const eventType = getSafeVal(row, 4);
                const location = getSafeVal(row, 5);
                
                let dateObj = null;
                let dateVal = row.c && row.c[6] ? row.c[6].v : null;
                if (typeof dateVal === 'string' && dateVal.startsWith('Date(')) {
                    const parts = dateVal.match(/Date\((\d+),(\d+),(\d+)\)/);
                    if (parts) dateObj = new Date(parts[1], parts[2], parts[3]);
                } else if (typeof dateVal === 'number') {
                    dateObj = new Date(Math.round((dateVal - 25569) * 86400 * 1000));
                } else if (dateVal) {
                    dateObj = new Date(dateVal);
                }

                let time = (row.c && row.c[7] && row.c[7].f) ? row.c[7].f : String(getSafeVal(row, 7));
                if (time.startsWith('Date(')) {
                    const tParts = time.match(/Date\((\d+),(\d+),(\d+),(\d+),(\d+),(\d+)\)/);
                    if (tParts) {
                        let h = parseInt(tParts[4], 10);
                        let m = parseInt(tParts[5], 10);
                        let ampm = h >= 12 ? 'PM' : 'AM';
                        h = h % 12 || 12; m = m < 10 ? '0' + m : m;
                        time = `${h}:${m} ${ampm}`;
                    }
                }

                const isRecurring = getSafeVal(row, 8).toLowerCase() === 'true' || getSafeVal(row, 8).toLowerCase() === 'yes';
                const dayOfWeekStr = getSafeVal(row, 9).toLowerCase();
                const untilDateRaw = row.c && row.c.length > 10 && row.c[10] ? row.c[10].v : null;
                let moreInfoLink = getSafeVal(row, 11) || '#';
                
                const institution = getSafeVal(row, 12);

                // Extract new columns for features
                const contactPhone = getSafeVal(row, 13); // Column N
                const contactEmail = getSafeVal(row, 14); // Column O
                const smsMessage = getSafeVal(row, 15);   // Column P
                const capacityUpdate = getSafeVal(row, 16); // Column Q
                const donateLink = getSafeVal(row, 17);     // Column R
                const priceText = getSafeVal(row, 18);      // Column S

                const displayTitle = title.replace('[E]', '').trim();

                if (isRecurring && dayOfWeekMap[dayOfWeekStr] !== undefined && untilDateRaw) {
                    let currentDate = new Date();
                    currentDate.setHours(0,0,0,0);
                    
                    let untilDate = null;
                    if(typeof untilDateRaw === 'string' && untilDateRaw.startsWith('Date(')){
                        const parts = untilDateRaw.match(/Date\((\d+),(\d+),(\d+)\)/);
                        if(parts) untilDate = new Date(parts[1], parts[2], parts[3]);
                    } else { untilDate = new Date(untilDateRaw); }

                    const targetDay = dayOfWeekMap[dayOfWeekStr];

                    if (untilDate) {
                        let loopCount = 0; 
                        while (currentDate <= untilDate && loopCount < 365) {
                            if (currentDate.getDay() === targetDay && currentDate >= today) {
                                const calLinks = createCalendarLinks(displayTitle, description, location, currentDate, time);
                                processedEvents.push({ 
                                    title: displayTitle, description, imageSrc, demographics, eventType, location, institution, time, moreInfoLink,
                                    contactPhone, contactEmail, smsMessage, capacityUpdate, donateLink, priceText,
                                    dateObj: new Date(currentDate), calLinks,
                                    monthFilter: currentDate.toLocaleString('default', { month: 'long', year: 'numeric' })
                                });
                            }
                            currentDate.setDate(currentDate.getDate() + 1);
                            loopCount++;
                        }
                    }
                } else if (dateObj && dateObj >= today) {
                    const calLinks = createCalendarLinks(displayTitle, description, location, dateObj, time);
                    processedEvents.push({ 
                        title: displayTitle, description, imageSrc, demographics, eventType, location, institution, time, moreInfoLink,
                        contactPhone, contactEmail, smsMessage, capacityUpdate, donateLink, priceText,
                        dateObj: dateObj, calLinks,
                        monthFilter: dateObj.toLocaleString('default', { month: 'long', year: 'numeric' })
                    });
                }
            });

            allEvents = processedEvents.sort((a, b) => a.dateObj - b.dateObj);
            populateDropdowns();
            renderGrid(allEvents);

        } catch (error) {
            console.error('Error fetching data:', error);
            document.getElementById('events-grid').innerHTML = '<p style="text-align:center; grid-column: 1/-1;">Error loading events.</p>';
        }
    }

    function populateDropdowns() {
        const getUnique = (key) => [...new Set(allEvents.map(e => e[key]).filter(v => v))].sort();
        const populate = (id, options) => {
            const select = document.getElementById(id);
            select.innerHTML = `<option value="all">${select.options[0].text}</option>`;
            options.forEach(opt => {
                const el = document.createElement('option');
                el.value = opt; el.textContent = opt; select.appendChild(el);
            });
            select.addEventListener('change', handleFilter);
        };

        populate('filter-month', [...new Set(allEvents.map(e => e.monthFilter))]);
        populate('filter-demo', getUnique('demographics'));
        populate('filter-type', getUnique('eventType'));
        populate('filter-location', getUnique('location'));
    }

    // New Clear Filters Logic
    const clearBtn = document.getElementById('clear-filters-btn');
    if (clearBtn) {
        clearBtn.addEventListener('click', () => {
            document.getElementById('filter-month').value = 'all';
            document.getElementById('filter-demo').value = 'all';
            document.getElementById('filter-type').value = 'all';
            document.getElementById('filter-location').value = 'all';
            handleFilter(); // Re-run filter logic to update view and hide button
        });
    }

    function handleFilter() {
        const fMonth = document.getElementById('filter-month').value;
        const fDemo = document.getElementById('filter-demo').value;
        const fType = document.getElementById('filter-type').value;
        const fLoc = document.getElementById('filter-location').value;

        // Toggle clear filter button visibility based on selection
        const clearBtnGroup = document.getElementById('clear-filters-group');
        if (fMonth !== 'all' || fDemo !== 'all' || fType !== 'all' || fLoc !== 'all') {
            clearBtnGroup.style.display = 'flex';
        } else {
            clearBtnGroup.style.display = 'none';
        }

        const filtered = allEvents.filter(e => {
            return (fMonth === 'all' || e.monthFilter === fMonth) &&
                   (fDemo === 'all' || e.demographics === fDemo) &&
                   (fType === 'all' || e.eventType === fType) &&
                   (fLoc === 'all' || e.location === fLoc);
        });
        renderGrid(filtered);
    }

    function renderGrid(eventsToRender) {
        const grid = document.getElementById('events-grid');
        grid.innerHTML = '';

        if (eventsToRender.length === 0) {
            grid.innerHTML = '<p style="grid-column: 1/-1; text-align:center; padding: 40px; color:#666;">No events found.</p>';
            return;
        }

        eventsToRender.forEach(ev => {
            const card = document.createElement('div');
            // Adding fade-up-element to give the card the scroll animation
            card.className = 'unified-event-card fade-up-element';

            // Safe match for Category Color
            let tagColor = '#212459'; // Default Navy
            if (ev.eventType && categoryColors[ev.eventType.toLowerCase()]) {
                tagColor = categoryColors[ev.eventType.toLowerCase()];
            }
            
            // Safe match for Demographic Color
            let dColor = '#888888'; // Default Grey
            if (ev.demographics && demoColors[ev.demographics.toLowerCase()]) {
                dColor = demoColors[ev.demographics.toLowerCase()];
            }

            // Safe match for Capacity Color
            let capColor = '#ff6b6b'; // Default attention red
            if (ev.capacityUpdate && capacityColors[ev.capacityUpdate.toLowerCase()]) {
                capColor = capacityColors[ev.capacityUpdate.toLowerCase()];
            }

            let logoHtml = '';
            if (ev.institution && institutionLogos[ev.institution.toLowerCase()]) {
                logoHtml = `<img src="${institutionLogos[ev.institution.toLowerCase()]}" class="uec-inst-logo" alt="Logo" />`;
            }

            const dateStr = ev.dateObj.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }).toUpperCase();
            let timeText = ev.time ? ev.time.trim().toUpperCase() : '';
            if (timeText) timeText = timeText.replace(/(\d)([AP]M)$/, '$1 $2');
            const dateTimeString = timeText ? `${dateStr} | ${timeText}` : dateStr;

            // Updated Contact Buttons logic based on new columns
            let smsHref = '';
            if (ev.contactPhone) {
                const cleanPhone = ev.contactPhone.replace(/[^\d+]/g, '');
                const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
                const separator = isIOS ? '&' : '?';
                smsHref = `sms:${cleanPhone}${ev.smsMessage ? separator + 'body=' + encodeURIComponent(ev.smsMessage) : ''}`;
            }
            let phoneBtn = smsHref ? `<a href="${smsHref}" class="uec-btn-icon" title="Text Us"><i class="fas fa-sms"></i></a>` : '';
            let emailBodyEncoded = generateEmailBody(ev, dateTimeString);
            let emailBtn = ev.contactEmail ? `<a href="mailto:${ev.contactEmail}?subject=${encodeURIComponent(ev.title)}&body=${emailBodyEncoded}" class="uec-btn-icon" title="Email to Register"><i class="fas fa-envelope"></i></a>` : '';

            card.innerHTML = `
                <div class="uec-image">
                    <a href="${ev.moreInfoLink}">
                        <img src="${ev.imageSrc}" alt="${ev.title}" />
                    </a>
                </div>
                <div class="uec-body">
                    <div class="uec-header-row">
                        <div class="uec-tags">
                            ${ev.capacityUpdate ? `<span class="uec-category uec-pulse-tag" style="background-color: ${capColor}">${ev.capacityUpdate}</span>` : ''}
                            ${ev.eventType ? `<span class="uec-category" style="background-color: ${tagColor}">${ev.eventType}</span>` : ''}
                            ${ev.demographics ? `<span class="uec-category" style="background-color: ${dColor}">${ev.demographics}</span>` : ''}
                        </div>
                        ${logoHtml}
                    </div>
                    
                    <div class="uec-date"><i class="far fa-clock"></i> ${dateTimeString}</div>
                    ${ev.location ? `<div class="uec-location"><i class="fas fa-map-marker-alt"></i> ${ev.location}</div>` : ''}
                    
                    <h3 class="uec-title"><a href="${ev.moreInfoLink}">${ev.title}</a></h3>
                    <div class="uec-desc" title="${ev.description.replace(/"/g, '\u0026quot;')}">${ev.description}</div>
                    
                    <div class="uec-actions">
                        <div class="uec-main-action-row">
                            <a href="${ev.moreInfoLink}" class="uec-btn-main">MORE INFO</a>
                            ${phoneBtn}
                            ${emailBtn}
                        </div>
                        <div class="uec-cal-col">
                            <a href="${ev.calLinks.gCalUrl}" target="_blank" class="uec-btn-cal" title="Add to Google Calendar">
                                <i class="fab fa-google"></i> Add to Google Calendar
                            </a>
                            <a href="${ev.calLinks.icsUrl}" download="event.ics" class="uec-btn-cal" title="Add to Apple/Outlook Calendar">
                                <i class="fab fa-apple"></i> Add to Apple / Outlook
                            </a>
                        </div>
                    </div>
                </div>
            `;
            grid.appendChild(card);
            
            // Add the new card to the IntersectionObserver
            scrollObserver.observe(card);
        });
    }

    fetchSheetData();
});
//
</script>
</div>
</co:body>
			</div>
			

			<div class="break_floats"></div>
			
	<div class="break_floats"></div>
	

<div class="content-footer">
	<!-- END CACHE -->
	
	
	
	
	
</div>
	</article>

		</div>
	</div>
</div>
						
						<div class="break_floats"></div>
						
					</div>
				</div>
				
				
				
			</div>
			
			
		</div>
		
		<aside class="page-tools-sidebar js-page-tools-sidebar hide_for_print">
<div class="page-tools js-page-tools-menu">
<div class="page-tools__section page-tools__section--share">
<a class="page-tools__tool js-share-popup page-tools__tool--facebook" data-share-url="https://www.facebook.com/dialog/share?app_id=188669250943&amp;display=popup&amp;href=https%3a%2f%2fwww.chabadlaurel.org%2ftemplates%2farticlecco_cdo%2faid%2f7294564%2fjewish%2fUpcoming-events.htm%23utm_medium%3dpage_tools%26utm_content%3ddesktop%26utm_source%3dFB">
				<i class="fa fa-facebook"></i>
			</a>
<a class="page-tools__tool js-share-popup page-tools__tool--twitter" data-share-url="https://twitter.com/intent/tweet?text=Upcoming+events+-+Chabad+of+Greater+Laurel&amp;url=https%3a%2f%2fwww.chabadlaurel.org%2ftemplates%2farticlecco_cdo%2faid%2f7294564%2fjewish%2fUpcoming-events.htm%23utm_medium%3dpage_tools%26utm_content%3ddesktop%26utm_source%3dtwitter&amp;via=Chabad">
				<i class="fa fa-twitter"></i>
			</a>
<a class="page-tools__tool js-share-popup page-tools__tool--whatsapp d-lg-none js-share-whatsapp" data-share-url="whatsapp://send?text=Upcoming+events+-+Chabad+of+Greater+Laurel https%3a%2f%2fwww.chabadlaurel.org%2ftemplates%2farticlecco_cdo%2faid%2f7294564%2fjewish%2fUpcoming-events.htm%23utm_medium%3dpage_tools%26utm_content%3ddesktop%26utm_source%3dwhatsapp">
				<i class="fa fa-whatsapp">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="#128c7e" width="1em" height="1em"><path d="M25 2C12.318 2 2 12.318 2 25c0 3.96 1.023 7.854 2.963 11.29L2.037 46.73c-.096.343-.003.711.245.966.191.197.451.304.718.304.08 0 .161-.01.24-.029l10.896-2.699C17.463 47.058 21.21 48 25 48c12.682 0 23-10.318 23-23S37.682 2 25 2zm11.57 31.116c-.492 1.362-2.852 2.605-3.986 2.772-1.018.149-2.306.213-3.72-.231-.857-.27-1.957-.628-3.366-1.229-5.923-2.526-9.791-8.415-10.087-8.804-.295-.389-2.411-3.161-2.411-6.03s1.525-4.28 2.067-4.864c.542-.584 1.181-.73 1.575-.73s.787.005 1.132.021c.363.018.85-.137 1.329 1.001.492 1.168 1.673 4.037 1.819 4.33.148.292.246.633.05 1.022s-.294.632-.59.973-.62.76-.886 1.022c-.296.291-.603.606-.259 1.19s1.529 2.493 3.285 4.039c2.255 1.986 4.158 2.602 4.748 2.894.59.292.935.243 1.279-.146.344-.39 1.476-1.703 1.869-2.286s.787-.487 1.329-.292c.542.194 3.445 1.604 4.035 1.896.59.292.984.438 1.132.681.148.242.148 1.41-.344 2.771z"/></svg>
				</i>
			</a>
<a class="page-tools__tool js-share-popup page-tools__tool--pinterest d-none d-lg-block" data-share-url="http://pinterest.com/pin/create/button/?url=https%3a%2f%2fwww.chabadlaurel.org%2ftemplates%2farticlecco_cdo%2faid%2f7294564%2fjewish%2fUpcoming-events.htm%23utm_medium%3dpage_tools%26utm_content%3ddesktop%26utm_source%3dpinterest&amp;description=Upcoming+events+-+Chabad+of+Greater+Laurel">
				<i class="fa fa-pinterest"></i>
			</a>
<a class="page-tools__tool" onclick="showEmailLayer(this);">
<i class="fa fa-envelope"></i>
</a>
</div>
<div class="page-tools__section page-tools__section--other js-page-tool-other">
<div class="page-tools__tool popover-parent d-lg-block">
<div class="popover popover--right align_left nowrap">
<div class="popover__content">
<label class="bold bottom_margin block">
Print Options:
</label>
<form class="vcenter" name="print-form" onsubmit="coPrint(event, 4445788);return false;">
<div>
<label><input type="checkbox" name="print-green"><span title="Save paper and ink">Print without images <i class="fa fa-leaf text-green"></i></span></label>
</div>
<br/>
<div class="center">
<button class="co-button page-tools__print-button">Print</button>
</div>
</form>
</div>
</div>
<i class="fa fa-print"></i>
</div>
</div>
</div>
<div class="js-fab-wrapper fab-wrapper">
<div class="fab">
<i class="fab-icon"></i>
</div>
</div>
</aside>
<!-- END CACHE -->
	</div>

				<div class="break_floats"></div>
			</div>
		</div>
	</div>
	<div id="footer">
		
	

		<div class="wrapper body_container">
			
				<div class="g960 footer_family_text bottom_padding">
					
		<div class="footer_container footer_text copyright_text">
			<div class="bottom_padding clear_float">
				<img class="footer_hr" src="https://w2.chabad.org/images/global/spacer.gif" vspace="12" width="100%" height="1" /><br />
				
				<div class="footer_inner_container clearfix">
					

					


	<div class="footer3"><b>Chabad of Greater Laurel | Historic Main Street District in Laurel, Maryland | 240-242-7770</b></div>
	<img src="https://w2.chabad.org/images/global/spacer.gif" width="1" height="6" border="0" /><br />




Powered by <a href="https://www.chabad.org/" target="_new" class="">Chabad.org</a> &copy; 1993-2026 <a href="/4026210" target="_blank" class="privacy-link">Privacy Policy</a>




					
				</div>
			</div>
		</div>
	


<div class="cs-f-social-icons">
	
			<a href="https://www.facebook.com/chabadlaurel" class="fa fa-facebook facebook_homepage" title="Facebook"></a>
		
</div>
	

				</div>
			
		</div>
	</div>

	
	



    


<script>
//<![CDATA[
    /* <-----------Upcoming Events Carousel (Google Sheets) ---------> */
    if (window.location.pathname === '/' || window.location.pathname === '/default.aspx' || window.location.pathname === '') {

        (async function() {

            // Global Error listener to catch broken images safely without triggering Cloudflare WAF via inline onerror attributes
            document.addEventListener('error', function(e) {
                if (e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'img') {
                    if (!e.target.dataset.fallbackApplied) {
                        e.target.dataset.fallbackApplied = 'true';
                        e.target.src = 'https://placehold.co/400x300/eee/ccc?text=Image+Not+Found';
                    }
                }
            }, true);

            // =========================================================
            // CONFIGURATION
            // =========================================================
            const SHEET_ID = '1EPGntfwESm5hdd-RPpR7kmNARdvi9dpDT3YrJnO0ens'; 
            const TARGET_LOCATION = 'Chabad of Greater Laurel'; 
            const MAX_EVENTS = 10; 
            // =========================================================

            // Using \u0026 to guarantee XML/WAF parsers don't break on the ampersand
            const EVENTS_URL = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json\u0026sheet=Events`;
            const SETTINGS_URL = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json\u0026sheet=Settings`;
            
            let categoryColors = {}; 
            let locationLogos = {};
            let demoColors = {}; // Added for Demographics
            const dayOfWeekMap = { 'sunday':0, 'monday':1, 'tuesday':2, 'wednesday':3, 'thursday':4, 'friday':5, 'saturday':6 };

            function parseGoogleJson(text) {
                return JSON.parse(text.substring(text.indexOf('{'), text.lastIndexOf('}') + 1));
            }

            // Generate Calendar Links (Using Blob and DOM parsing to bypass WAF)
            function createCalendarLinks(title, desc, loc, dateObj, timeStr) {
                let hours = 0, mins = 0;
                if (timeStr) {
                    const match = timeStr.match(/(\d+):(\d+)\s*(AM|PM)/i);
                    if (match) {
                        hours = parseInt(match[1]); mins = parseInt(match[2]);
                        if (match[3].toUpperCase() === 'PM' && hours < 12) hours += 12;
                        if (match[3].toUpperCase() === 'AM' && hours === 12) hours = 0;
                    }
                }
                
                const start = new Date(dateObj);
                start.setHours(hours, mins, 0);
                const end = new Date(start.getTime() + 60 * 60 * 1000); 
                
                const formatICSDate = (d) => {
                    return d.getUTCFullYear() + String(d.getUTCMonth() + 1).padStart(2, '0') + String(d.getUTCDate()).padStart(2, '0') + 'T' + String(d.getUTCHours()).padStart(2, '0') + String(d.getUTCMinutes()).padStart(2, '0') + String(d.getUTCSeconds()).padStart(2, '0') + 'Z';
                };

                const startStr = formatICSDate(start);
                const endStr = formatICSDate(end);
                
                // Safely extract text without triggering WAF regex blocks
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = desc || '';
                const cleanDesc = tempDiv.textContent || tempDiv.innerText || '';

                const gCalUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE\u0026text=${encodeURIComponent(title)}\u0026dates=${startStr}/${endStr}\u0026details=${encodeURIComponent(cleanDesc)}\u0026location=${encodeURIComponent(loc)}`;
                
                const icsContent = `BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nDTSTART:${startStr}\nDTEND:${endStr}\nSUMMARY:${title}\nDESCRIPTION:${cleanDesc}\nLOCATION:${loc}\nEND:VEVENT\nEND:VCALENDAR`;
                
                // Use a Blob object to generate a secure internal URL instead of a "data:" URI payload that WAFs block
                const blob = new Blob([icsContent], { type: 'text/calendar;charset=utf-8' });
                const icsUrl = URL.createObjectURL(blob);

                return { gCalUrl, icsUrl };
            }

            const runTransformation = async () => {
                try {
                    // Fetch Settings for Colors and Logos
                    try {
                        const setRes = await fetch(SETTINGS_URL);
                        const setData = parseGoogleJson(await setRes.text());
                        if (setData && setData.table && setData.table.rows) {
                            setData.table.rows.forEach(row => {
                                const catName = row.c[0] ? String(row.c[0].v).trim() : null;
                                const catColor = row.c[1] ? String(row.c[1].v).trim() : null;
                                if(catName && catColor) categoryColors[catName.toLowerCase()] = catColor;

                                const locName = row.c[2] ? String(row.c[2].v).trim() : null;
                                const locLogo = row.c[3] ? String(row.c[3].v).trim() : null;
                                if(locName && locLogo) locationLogos[locName.toLowerCase()] = locLogo;
                                
                                // Added Demographic Colors fetch
                                const demoName = row.c[4] ? String(row.c[4].v).trim() : null;
                                const demoColor = row.c[5] ? String(row.c[5].v).trim() : null;
                                if(demoName && demoColor) demoColors[demoName.toLowerCase()] = demoColor;
                            });
                        }
                    } catch (err) { console.warn("Could not load Settings.", err); }

                    // Fetch Events
                    let processedEvents = [];
                    const today = new Date();
                    today.setHours(0,0,0,0);

                    const evRes = await fetch(EVENTS_URL);
                    const evText = await evRes.text();
                    if (evText.toLowerCase().includes('<!doctype html>')) return;

                    const evData = parseGoogleJson(evText);
                    const rows = evData.table.rows;

                    rows.forEach(row => {
                        const getVal = (idx) => (row.c && row.c[idx] && row.c[idx].v !== null) ? String(row.c[idx].v).trim() : '';
                        
                        const title = getVal(0);
                        if(!title) return; 

                        const location = getVal(12);
                        if (!location.toLowerCase().includes(TARGET_LOCATION.toLowerCase())) return; 

                        const description = getVal(1) || '';
                        const imageSrc = getVal(2) || 'https://placehold.co/600x400/eee/ccc?text=Event+Image';
                        const demographics = getVal(3); // Added demographics
                        const eventType = getVal(4);
                        
                        // ROBUST DATE PARSER
                        let dateObj = null;
                        let dateVal = row.c && row.c[6] ? row.c[6].v : null;
                        if (typeof dateVal === 'string' && dateVal.startsWith('Date(')) {
                            const parts = dateVal.match(/Date\((\d+),(\d+),(\d+)\)/);
                            if (parts) dateObj = new Date(parts[1], parts[2], parts[3]);
                        } else if (typeof dateVal === 'number') {
                            dateObj = new Date(Math.round((dateVal - 25569) * 86400 * 1000));
                        } else if (dateVal) {
                            dateObj = new Date(dateVal);
                        }

                        // TIME PARSER
                        let time = (row.c && row.c[7] && row.c[7].f) ? row.c[7].f : String(getVal(7));
                        if (time.startsWith('Date(')) {
                            const tParts = time.match(/Date\((\d+),(\d+),(\d+),(\d+),(\d+),(\d+)\)/);
                            if (tParts) {
                                let h = parseInt(tParts[4], 10);
                                let m = parseInt(tParts[5], 10);
                                let ampm = h >= 12 ? 'PM' : 'AM';
                                h = h % 12 || 12; m = m < 10 ? '0' + m : m;
                                time = `${h}:${m} ${ampm}`;
                            }
                        }

                        const isRecurring = String(getVal(8)).toLowerCase() === 'true' || String(getVal(8)).toLowerCase() === 'yes';
                        const dayOfWeekStr = String(getVal(9)).toLowerCase();
                        const untilDateRaw = row.c && row.c[10] ? row.c[10].v : null;
                        let moreInfoLink = getVal(11) || '#';
                        const institution = getVal(12);

                        const displayTitle = title.replace('[E]', '').trim();

                        if (isRecurring && dayOfWeekMap[dayOfWeekStr] !== undefined && untilDateRaw) {
                            let currentDate = new Date();
                            currentDate.setHours(0,0,0,0);
                            
                            let untilDate = null;
                            if(typeof untilDateRaw === 'string' && untilDateRaw.startsWith('Date(')){
                                const parts = untilDateRaw.match(/Date\((\d+),(\d+),(\d+)\)/);
                                if(parts) untilDate = new Date(parts[1], parts[2], parts[3]);
                            } else { untilDate = new Date(untilDateRaw); }

                            const targetDay = dayOfWeekMap[dayOfWeekStr];

                            if (untilDate) {
                                let loopCount = 0; 
                                while (currentDate <= untilDate && loopCount < 365) {
                                    if (currentDate.getDay() === targetDay && currentDate >= today) {
                                        const calLinks = createCalendarLinks(displayTitle, description, location, currentDate, time);
                                        processedEvents.push({ title: displayTitle, description, imageSrc, eventType, demographics, location, institution, time, moreInfoLink, dateObj: new Date(currentDate), calLinks });
                                    }
                                    currentDate.setDate(currentDate.getDate() + 1);
                                    loopCount++;
                                }
                            }
                        } 
                        else if (dateObj && dateObj >= today) {
                            const calLinks = createCalendarLinks(displayTitle, description, location, dateObj, time);
                            processedEvents.push({ title: displayTitle, description, imageSrc, eventType, demographics, location, institution, time, moreInfoLink, dateObj: dateObj, calLinks });
                        }
                    });

                    const featuredEvents = processedEvents.sort((a, b) => a.dateObj - b.dateObj).slice(0, MAX_EVENTS);

                    if (featuredEvents.length === 0) return;

                    // --- DOM Injection Logic ---
                    const eventsSection = document.createElement('div');
                    eventsSection.className = 'injected-featured-events-section';
                    eventsSection.id = 'injected-upcoming-events-section';

                    eventsSection.innerHTML = `
                      <div class="injected-featured-events-header"><h2>Upcoming Events</h2></div>
                    `;

                    const carouselContainer = document.createElement('div');
                    carouselContainer.className = 'injected-events-carousel-container';
                    const carouselWrapper = document.createElement('div');
                    carouselWrapper.className = 'injected-events-carousel-wrapper';

                    featuredEvents.forEach((ev) => {
                        let tagColor = 'var(--color-primary-navy)'; 
                        if (ev.eventType && categoryColors[ev.eventType.toLowerCase()]) tagColor = categoryColors[ev.eventType.toLowerCase()];
                        
                        let dColor = '#888888';
                        if (ev.demographics && demoColors[ev.demographics.toLowerCase()]) dColor = demoColors[ev.demographics.toLowerCase()];

                        let logoHtml = '';
                        if (ev.institution && locationLogos[ev.institution.toLowerCase()]) {
                            logoHtml = `<img src="${locationLogos[ev.institution.toLowerCase()]}" class="uec-inst-logo" alt="Logo" />`;
                        }

                        const dateStr = ev.dateObj.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }).toUpperCase();
                        let timeText = ev.time ? ev.time.trim().toUpperCase() : '';
                        if (timeText) timeText = timeText.replace(/(\d)([AP]M)$/, '$1 $2');
                        const dateTimeString = timeText ? `${dateStr} | ${timeText}` : dateStr;

                        const card = document.createElement('div');
                        card.className = 'unified-event-card';
                        card.innerHTML = `
                            <div class="uec-image">
                                <a href="${ev.moreInfoLink}">
                                    <img src="${ev.imageSrc}" alt="${ev.title}" />
                                </a>
                            </div>
                            <div class="uec-body">
                                <div class="uec-header-row">
                                    <div class="uec-tags">
                                        ${ev.eventType ? `<span class="uec-category" style="background-color: ${tagColor}">${ev.eventType}</span>` : ''}
                                        ${ev.demographics ? `<span class="uec-category" style="background-color: ${dColor}">${ev.demographics}</span>` : ''}
                                    </div>
                                    ${logoHtml}
                                </div>
                                
                                ${ev.location ? `<div class="uec-location"><i class="fas fa-map-marker-alt"></i> ${ev.location}</div>` : ''}
                                <div class="uec-date"><i class="far fa-clock"></i> ${dateTimeString}</div>
                                
                                <h3 class="uec-title"><a href="${ev.moreInfoLink}">${ev.title}</a></h3>
                                <div class="uec-desc" title="${ev.description.replace(/"/g, '\u0026quot;')}">${ev.description}</div>
                                
                                <div class="uec-actions">
                                    <a href="${ev.moreInfoLink}" class="uec-btn-main">MORE INFO</a>
                                    <div class="uec-cal-col">
                                        <a href="${ev.calLinks.gCalUrl}" target="_blank" class="uec-btn-cal" title="Add to Google Calendar">
                                            <i class="fab fa-google"></i> Add to Google Calendar
                                        </a>
                                        <a href="${ev.calLinks.icsUrl}" download="event.ics" class="uec-btn-cal" title="Add to Apple/Outlook Calendar">
                                            <i class="fab fa-apple"></i> Add to Apple / Outlook
                                        </a>
                                    </div>
                                </div>
                            </div>
                        `;
                        carouselWrapper.appendChild(card);
                    });

                    const viewAllCard = document.createElement('a');
                    viewAllCard.className = 'unified-event-card view-all-card';
                    viewAllCard.href = 'https://www.chabadlaurel.org/templates/articlecco_cdo/aid/7294564/jewish/Upcoming-events.htm';
                    viewAllCard.innerHTML = `
                      <div class="view-all-content">
                        <h3>View All</h3><p>Upcoming Events</p><span class="view-all-arrow">→</span>
                      </div>
                    `;
                    carouselWrapper.appendChild(viewAllCard);

                    carouselContainer.appendChild(carouselWrapper);
                    eventsSection.appendChild(carouselContainer);

                    const swipeHint = document.createElement('div');
                    swipeHint.className = 'mobile-swipe-hint';
                    swipeHint.innerHTML = '<span>Swipe for more events</span> <span class="arrow">→</span>';
                    eventsSection.appendChild(swipeHint);

                    if (featuredEvents.length > 3) {
                        const prevButton = document.createElement('button');
                        prevButton.className = 'events-carousel-arrow prev'; prevButton.innerHTML = '❮';
                        const nextButton = document.createElement('button');
                        nextButton.className = 'events-carousel-arrow next'; nextButton.innerHTML = '❯';
                        carouselContainer.appendChild(prevButton); carouselContainer.appendChild(nextButton);

                        let currentIndex = 0;
                        const itemsToShowDesktop = 3;
                        const totalItems = carouselWrapper.children.length;

                        const updateCarousel = () => {
                            if (carouselWrapper.children.length === 0) return;
                            const cardWidth = carouselWrapper.children[0].offsetWidth;
                            const gap = 30;
                            const totalMove = (cardWidth + gap) * currentIndex;
                            carouselWrapper.style.transform = `translateX(-${totalMove}px)`;
                            prevButton.disabled = currentIndex === 0;
                            nextButton.disabled = currentIndex >= totalItems - itemsToShowDesktop;
                        };

                        prevButton.addEventListener('click', () => { if (currentIndex > 0) { currentIndex--; updateCarousel(); } });
                        nextButton.addEventListener('click', () => { if (currentIndex < totalItems - itemsToShowDesktop) { currentIndex++; updateCarousel(); } });

                        updateCarousel();
                        window.addEventListener('resize', updateCarousel);
                    }

                    const insertionPoint = document.querySelector('#BodyContainer > div > div.g960 > div > div.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.g960.no_margin.g960.no_margin > div > div.hp-row.hp-row-first');

if (insertionPoint) {
    // This puts the eventsSection exactly after the insertionPoint
    insertionPoint.after(eventsSection);
} else {
    // If that giant selector fails, it adds it to the bottom of the page
    document.body.appendChild(eventsSection);
}

                } catch (error) { console.error('Error fetching data:', error); }
            };

            const injectCSS = () => {
                const style = document.createElement('style');
                style.textContent = `
                    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Raleway:wght@400;700;900&display=swap');
                    :root { --color-accent-green: #afc78b; --color-accent-plum: #6b1457; --color-primary-navy: #212459; --color-bg-light: #f8f9fa; }
                    .injected-featured-events-section { padding: 80px 20px; background-color: var(--color-bg-light); font-family: 'Poppins', sans-serif; box-sizing: border-box; }
                    .injected-featured-events-header { text-align: center; margin-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto; }
                    .injected-featured-events-header h2 { font-size: 42px; font-weight: 700; color: var(--color-primary-navy); letter-spacing: -1px; margin-bottom: 10px; position: relative; display: inline-block; }
                    .injected-featured-events-header h2:after { content: ''; display: block; width: 60px; height: 4px; background: var(--color-accent-green); margin: 15px auto 0; border-radius: 2px; }
                    .injected-events-carousel-container { position: relative; max-width: 1200px; margin: 0 auto; overflow: hidden; padding: 20px 0 40px 0; }
                    .injected-events-carousel-wrapper { display: flex; gap: 30px; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
                    
                    /* UNIFIED CARD STYLES FOR HOMEPAGE */
                    .unified-event-card { 
                        flex: 0 0 calc(33.333% - 20px); background: #ffffff; border-radius: 16px; overflow: hidden; 
                        box-shadow: 0 10px 40px -10px rgba(33, 36, 89, 0.1); display: flex; flex-direction: column; 
                        border: 1px solid rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;
                    }
                    .unified-event-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px -10px rgba(33, 36, 89, 0.2); }
                    
                    .uec-image { position: relative; height: 200px; overflow: hidden; background-color: #eee; flex-shrink: 0; }
                    .uec-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
                    .unified-event-card:hover .uec-image img { transform: scale(1.05); }
                    
                    .uec-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
                    
                    .uec-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 10px; }
                    .uec-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
                    .uec-category { 
                        display: inline-flex; align-items: center; justify-content: center;
                        font-size: 10px; font-weight: 700; text-transform: uppercase; 
                        padding: 4px 12px; border-radius: 50px; 
                        color: white; white-space: nowrap; 
                    }
                    
                    .uec-inst-logo { max-height: 28px; max-width: 90px; object-fit: contain; }
                    
                    .uec-location { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
                    .uec-date { font-family: 'Poppins', sans-serif; color: var(--color-accent-plum); font-weight: 700; font-size: 13px; letter-spacing: 0.5px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
                    
                    .uec-title { margin: 0 0 10px; line-height: 1.3; }
                    .uec-title a { font-size: 18px; font-weight: 700; color: var(--color-primary-navy); text-decoration: none; transition: color 0.2s; }
                    .uec-title a:hover { color: var(--color-accent-plum); }
                    
                    .uec-desc { font-size: 13px; color: #666; line-height: 1.5; margin: 0 0 20px; flex-grow: 1; max-height: 60px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
                    
                    .uec-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
                    .uec-btn-main { display: block; width: 100%; background-color: var(--color-primary-navy); color: white; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 600; text-align: center; border: 2px solid var(--color-primary-navy); transition: all 0.2s; font-size: 13px; }
                    .uec-btn-main:hover { background-color: var(--color-accent-plum); border-color: var(--color-accent-plum); color: white; }
                    
                    .uec-cal-col { display: flex; flex-direction: column; gap: 8px; }
                    .uec-btn-cal { display: block; width: 100%; text-align: center; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #555; background: #f0f0f0; text-decoration: none; transition: all 0.2s; box-sizing: border-box; }
                    .uec-btn-cal:hover { background: #e0e0e0; color: #222; }
                    .uec-btn-cal i { margin-right: 4px; }

                    .view-all-card { justify-content: center; align-items: center; text-align: center; background-color: #ffffff; border: 2px dashed var(--color-accent-green); text-decoration: none; }
                    .view-all-card:hover { background-color: #fcfcfc; border-color: var(--color-accent-plum); }
                    .view-all-card .view-all-content h3 { font-size: 22px; font-weight: 700; color: var(--color-accent-plum); margin: 0 0 5px; text-transform: uppercase; }
                    .view-all-card .view-all-content p { font-size: 15px; color: #888; margin: 0 0 15px; }
                    .view-all-card .view-all-arrow { font-size: 32px; font-weight: bold; color: var(--color-accent-green); transition: transform 0.3s; display: inline-block; }
                    .view-all-card:hover .view-all-arrow { transform: translateX(5px); color: var(--color-accent-plum); }

                    .events-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: #fff; border: 1px solid #eee; border-radius: 50%; width: 48px; height: 48px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--color-primary-navy); z-index: 10; transition: all 0.2s; }
                    .events-carousel-arrow:hover { background-color: var(--color-primary-navy); color: #fff; }
                    .events-carousel-arrow.prev { left: 0px; }
                    .events-carousel-arrow.next { right: 0px; }
                    .mobile-swipe-hint { display: none; text-align: center; margin-top: 10px; font-family: 'Poppins', sans-serif; color: #999; font-size: 13px; align-items: center; justify-content: center; gap: 8px; }
                    
                    @media (max-width: 1250px) { .events-carousel-arrow.prev { left: 10px; } .events-carousel-arrow.next { right: 10px; } }
                    @media (max-width: 900px) { .unified-event-card { flex-basis: calc(50% - 15px); } }
                    @media (max-width: 600px) {
                      .injected-featured-events-header h2 { font-size: 28px; }
                      .injected-events-carousel-container { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 0 20px 20px 20px; margin: 0 -20px; }
                      .injected-events-carousel-container::-webkit-scrollbar { display: none; }
                      .injected-events-carousel-wrapper { width: max-content; transform: none !important; padding-right: 20px; gap: 15px; }
                      .unified-event-card { flex-basis: 85vw; scroll-snap-align: start; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
                      .events-carousel-arrow { display: none; }
                      .mobile-swipe-hint { display: flex; }
                    }
                `;
                document.head.appendChild(style);
            };

            injectCSS();
            if (document.readyState === 'complete' || document.readyState === 'interactive') runTransformation();
            else window.addEventListener('DOMContentLoaded', runTransformation);

        })();
    }
//]]>
</script>
</body>
</html>