/* <div id="events-calendar-widget">
	<div id="controls"></div>
	<div class="months-list">
		<h3 class="month-header">January 2024</h3>
		<div class="events-list">
			<div class="event-item">
				<div class="event-date-panel">
					<div class="event-start-date">
						<div class="event-start-month">Jan</div>
						<div class="event-start-day">15</div>
						<div class="event-start-weekday">Mon</div>
					</div>
					<div class="event-end-date">
						<div class="event-end-month">Jan</div>
						<div class="event-end-day">15</div>
						<div class="event-end-weekday">Mon</div>
					</div>
				</div>
				<div class="event-details-panel">
					<div class="event-main-details">
						<div class="event-details-header">
							<div class="event-headings">
								<h5 class="event-category">paid program</h5>
								<h3 class="event-title">Strength Training + Yoga for Osteoporosis</h3>
							</div>
							<div class="event-meta">
								<div class="tag event-timespan">
									<i class="icon-clock"></i>
									<span class="event-time-range">10:00 AM - 11:00 AM</span>
								</div>
								<div class="tag event-location">
									<i class="icon-location-pin"></i>
									<span class="event-location-text">Online</span>
								</div>
								<div class="tag event-hosts">
									<img class="host-avatar" src="host-avatar-url.jpg" alt="Host Name" />
									<img class="host-avatar" src="host-avatar-url2.jpg" alt="Host Name 2" />
								</div>
							</div>
						</div>
						<div class="event-description">
							<p>Example description of the event.</p>
						</div>
						<a class="expand-details-link" href="#">
							<span>Show more</span>
							<i class="icon-chevron-down"></i>
						</a>
					</div>
					<div class="event-action-panel">
						<a href="#" class="event-action-button">
							Learn more
						</a>
						<span class="event-helper-text">Sold out</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div> */

html {
	background: var(--kaari_beige_50);
}

#events-calendar-widget {
	background: var(--kaari_beige_50);
	display: flex;
	flex-direction: column;
	max-width: 820px;
	padding: min(4vw, 20px);
	margin: 0 auto;
	gap: min(4vw, 20px);
	.months-list {
		display: flex;
		flex-direction: column;
		gap: min(4vw, 20px);
		.month-header {
			color: var(--kaari_on_beige_50);
		}
		.events-list {
			display: flex;
			flex-direction: column;
			gap: min(4vw, 20px);
			.event-item {
				display: grid;
				grid-template-columns: min(18vw, 90px) 1fr;
				border-radius: var(--kaari_radius_medium);
				overflow: hidden;
				box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
				transition:
					transform 0.15s ease,
					box-shadow 0.15s ease;
				cursor: pointer;

				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 1em 36px rgba(2, 6, 23, 0.12);
				}

				.event-date-panel {
					padding: min(4vw, 20px);
					text-align: center;
					background: var(--theme);
					border: 1px solid color-mix(in oklab, var(--kaari_beige_700) 10%, transparent);
					border-right: none;
					border-top-left-radius: var(--kaari_radius_medium);
					border-bottom-left-radius: var(--kaari_radius_medium);
					* {
						color: var(--on_theme) !important;
						text-transform: uppercase;
						font-variant-numeric: tabular-nums;
						margin: 0 !important;
						line-height: 1;
						font-family: Montserrat, Helvetica, Arial;
					}
					.event-start-date,
					.event-end-date {
						display: flex;
						flex-direction: column;
						gap: 2px;
						.event-start-month,
						.event-end-month {
							--fs: 1.7rem;
							font-size: var(--fs);
							@media (max-width: 960px) {
								font-size: calc(var(--kaari_laptop_scale) * var(--fs));
							}
							@media (max-width: 768px) {
								font-size: calc(var(--kaari_tablet_scale) * var(--fs));
							}
							@media (max-width: 480px) {
								font-size: calc(var(--kaari_phone_scale) * var(--fs));
							}
						}
						.event-start-day,
						.event-end-day {
							font-weight: 700;
							--fs: 3rem;
							font-size: var(--fs);
							@media (max-width: 960px) {
								font-size: calc(var(--kaari_laptop_scale) * var(--fs));
							}
							@media (max-width: 768px) {
								font-size: calc(var(--kaari_tablet_scale) * var(--fs));
							}
							@media (max-width: 480px) {
								font-size: calc(var(--kaari_phone_scale) * var(--fs));
							}
						}
					}
					.event-end-date {
						display: none;
					}
				}
				.event-details-panel {
					padding: min(4vw, 20px);
					display: flex;
					grid-template-columns: 1fr 250px;
					background: white;
					border: 1px solid color-mix(in oklab, var(--kaari_beige_700) 15%, transparent);
					border-left: none;
					border-top-right-radius: var(--kaari_radius_medium);
					border-bottom-right-radius: var(--kaari_radius_medium);
					p,
					li,
					span {
						color: var(--on_light_theme);
					}
					gap: min(4vw, 20px);
					.event-main-details {
						display: flex;
						flex-direction: column;
						gap: min(2.4vw, 12px);

						.event-details-header {
							display: flex;
							flex-direction: row;
							gap: min(4vw, 20px);
							.event-header-info {
								display: flex;
								flex-direction: column;
								gap: min(1.6vw, 8px);
								flex: 1;
								.event-headings {
									display: flex;
									flex-direction: column;
									gap: min(0.8vw, 4px);
									.event-category {
										text-transform: uppercase;
										color: var(--theme) !important;
										--fs: 1.6rem;
										font-size: var(--fs);
										@media (max-width: 960px) {
											font-size: calc(var(--kaari_laptop_scale) * var(--fs));
										}
										@media (max-width: 768px) {
											font-size: calc(var(--kaari_tablet_scale) * var(--fs));
										}
										@media (max-width: 480px) {
											font-size: calc(var(--kaari_phone_scale) * var(--fs));
										}
									}
									.event-title {
										margin-top: 0;
										color: var(--on_light_theme);
										--fs: 2.2rem;
										font-size: var(--fs);
										@media (max-width: 960px) {
											font-size: calc(var(--kaari_laptop_scale) * var(--fs));
										}
										@media (max-width: 768px) {
											font-size: calc(var(--kaari_tablet_scale) * var(--fs));
										}
										@media (max-width: 480px) {
											font-size: calc(var(--kaari_phone_scale) * var(--fs));
										}
									}
								}
								.event-meta {
									display: flex;
									align-items: center;
									gap: min(1.6vw, 8px);
									flex-wrap: wrap;
									.tag {
										padding: 0 1em 0 0.5em;
										border-radius: 100px;
										display: flex;
										gap: min(0.8vw, 4px);
										align-items: center;
										justify-content: center;
										background: var(--theme_100);
										white-space: nowrap;
										border: 1px solid color-mix(in oklab, var(--theme) 15%, transparent);
										svg {
											width: 18px;
											color: var(--theme_600);
										}
										span {
											color: var(--on_theme_100);
											margin: 0;
											--fs: 1.4rem;
											font-size: var(--fs);
											@media (max-width: 960px) {
												font-size: calc(var(--kaari_laptop_scale) * var(--fs));
											}
											@media (max-width: 768px) {
												font-size: calc(var(--kaari_tablet_scale) * var(--fs));
											}
											@media (max-width: 480px) {
												font-size: calc(var(--kaari_phone_scale) * var(--fs));
											}
										}
									}
									.event-hosts {
										display: flex;
										.host-avatar {
											width: 26px !important;
											height: 26px !important;
											border: 1.5px solid white;
											aspect-ratio: 1 !important;
											object-fit: cover;
											border-radius: 100%;
											margin-right: -6px;
											box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
										}
									}
								}
							}
							.event-header-actions {
								display: flex;
								flex-direction: column;
								align-items: center;
								.event-action-button {
									display: inline-block;
									white-space: nowrap;
									background: var(--theme);
									color: var(--on_theme);
									transition: all 0.2s;
									font-size: 1.7rem;
									padding: 0.5em 1.2em !important;
									border: 1px solid color-mix(in oklab, var(--theme_600) 15%, transparent);
									text-shadow: 0px 0 0.4em color-mix(in oklab, var(--theme_600) 20%, transparent);

									&:hover {
										filter: brightness(0.975);
									}
								}
								.event-helper-text {
									font-style: italic;
									--fs: 1.4rem;
								}
								@media (max-width: 768px) {
									display: none;
								}
							}
						}
						.event-description {
							/* clamp to 4 lines */
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 6;
							line-clamp: 6;
							overflow: hidden;

							/* helps avoid weird spacing if markdown outputs multiple <p> */
							p {
								margin: 0;
							}
							p + p {
								margin-top: 0.6em; /* optional: keep paragraphs readable */
							}
						}
						.expand-details-link {
							font-weight: 600;
							display: flex;
							align-items: center;
							* {
								color: var(--theme) !important;
							}
							svg {
								height: 20px;
								transition: transform 180ms ease;
							}
							&:hover {
								cursor: pointer;
							}
						}
					}
				}
				&.paid-program {
					--theme: var(--kaari_blue);
					--theme_50: var(--kaari_blue_50);
					--theme_100: var(--kaari_blue_100);
					--theme_200: var(--kaari_blue_200);
					--theme_600: var(--kaari_blue_600);
					--on_theme: var(--kaari_on_blue);
					--on_light_theme: var(--kaari_on_light_blue);
					--on_theme_100: var(--kaari_on_blue_100);
				}
				&.seminar {
					--theme: var(--kaari_teal);
					--theme_50: var(--kaari_teal_50);
					--theme_100: var(--kaari_teal_100);
					--theme_200: var(--kaari_teal_200);
					--theme_600: var(--kaari_teal_600);
					--on_theme: var(--kaari_on_teal);
					--on_light_theme: var(--kaari_on_light_teal);
					--on_theme_100: var(--kaari_on_teal_100);
				}
				&.info-session {
					--theme: var(--kaari_pink);
					--theme_50: var(--kaari_pink_50);
					--theme_100: var(--kaari_pink_100);
					--theme_200: var(--kaari_pink_200);
					--theme_600: var(--kaari_pink_600);
					--on_theme: var(--kaari_on_pink);
					--on_light_theme: var(--kaari_on_light_pink);
					--on_theme_100: var(--kaari_on_pink_100);
				}
			}
		}
	}
}