/**
 * Events Calendar Shortcode - Widget Styles
 * 
 * Adapts The Events Calendar official widget styles to work with the shortcode/block plugin.
 * Based on widget-events-list-skeleton.css and widget-events-list-full.css
 */

/* Custom properties for event styling */
:root {
	--ecs-spacer-0: 0.125rem;
	--ecs-spacer-1: 0.25rem;
	--ecs-spacer-2: 0.5rem;
	--ecs-spacer-3: 0.75rem;
	--ecs-spacer-4: 1rem;
	--ecs-spacer-5: 1.25rem;
	--ecs-spacer-7: 1.75rem;
	--ecs-spacer-11: 3.5rem;
	--ecs-font-size-0: 0.625rem;
	--ecs-font-size-1: 0.6875rem;
	--ecs-font-size-2: 0.8125rem;
	--ecs-font-size-4: 1rem;
	--ecs-font-size-7: 1.125rem;
	--ecs-line-height-1: 1.25;
	--ecs-line-height-2: 1.375;
	--ecs-line-height-3: 1.5;
	--ecs-font-weight-regular: 400;
	--ecs-font-weight-bold: 700;
	--ecs-color-text-primary: #141827;
	--ecs-color-text-secondary: #5d5d5d;
	--ecs-color-text-events-title: #141827;
	--ecs-color-link-accent: #334aff;
	--ecs-color-accent-primary: #334aff;
	--ecs-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* List container */
.ecs-event-list {
	list-style: none;
	margin: 0 0 var(--ecs-spacer-7, 1.75rem);
	padding: 0;
}

/* Individual event row */
.ecs-event {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--ecs-spacer-3, 0.75rem);
	margin-bottom: var(--ecs-spacer-3, 0.75rem);
	align-items: start;
}

@media (min-width: 768px) {
	.ecs-event {
		column-gap: var(--ecs-spacer-4, 1rem);
		margin-bottom: var(--ecs-spacer-4, 1rem);
	}
}

.ecs-event:last-child {
	margin-bottom: 0;
}

/* Date badge/thumb */
.ecs-event .date_thumb {
	grid-column: 1;
	grid-row: 1 / 3;
	position: relative;
	width: var(--ecs-spacer-11, 3.5rem);
	display: flex;
	flex-direction: column;
	text-align: center;
	align-self: start;
}

@media (min-width: 768px) {
	.ecs-event .date_thumb {
		width: calc(var(--ecs-spacer-11, 3.5rem) + var(--ecs-spacer-1, 0.25rem));
	}
}

/* All other content stacks in column 2 */
.ecs-event > *:not(.date_thumb) {
	grid-column: 2;
	align-self: start;
}

.ecs-event .date_thumb .month {
	color: var(--ecs-color-text-secondary, #5d5d5d);
	font-family: var(--ecs-font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	font-size: var(--ecs-font-size-0, 0.625rem);
	font-weight: var(--ecs-font-weight-regular, 400);
	line-height: var(--ecs-line-height-2, 1.375);
	text-transform: uppercase;
	margin-bottom: -2px;
}

.ecs-event .date_thumb .day {
	color: var(--ecs-color-text-primary, #141827);
	font-size: var(--ecs-font-size-7, 1.75rem);
	font-weight: var(--ecs-font-weight-bold, 700);
	line-height: 1;
}

@media (max-width: 767px) {
	.ecs-event .date_thumb .month,
	.ecs-event .date_thumb .day {
		margin-bottom: -2px;
	}
}

/* Featured event indicator */
.ecs-event.ecs-featured-event .date_thumb:after {
	background-color: var(--ecs-color-accent-primary, #334aff);
	border-radius: 1.5px;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	width: 3px;
}

/* Time display */
.ecs-event .duration.time {
	display: block;
	margin: 0;
	color: var(--ecs-color-text-secondary, #5d5d5d);
	font-size: var(--ecs-font-size-1, 0.6875rem);
	line-height: var(--ecs-line-height-2, 1.375);
}

/* Title */
.ecs-event .entry-title.summary {
	margin: 0 0 0.5em 0;
	font-weight: var(--ecs-font-weight-bold, 700);
}

.ecs-event .entry-title.summary a {
	color: var(--ecs-color-text-events-title, #141827);
	text-decoration: none;
}

.ecs-event .entry-title.summary a:hover,
.ecs-event .entry-title.summary a:focus {
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 767px) {
	.ecs-event .entry-title.summary {
		font-size: var(--ecs-font-size-4, 1rem);
		line-height: var(--ecs-line-height-2, 1.375);
	}
}

@media (min-width: 768px) {
	.ecs-event .entry-title.summary {
		font-size: var(--ecs-font-size-7, 1.125rem);
		line-height: var(--ecs-line-height-1, 1.25);
	}
}

/* Excerpt */
.ecs-event .ecs-excerpt {
	margin: 0;
	color: var(--ecs-color-text-primary, #141827);
	font-size: var(--ecs-font-size-2, 0.8125rem);
	line-height: var(--ecs-line-height-3, 1.5);
}

.ecs-event .ecs-excerpt p {
	margin: 0;
}

.ecs-event .ecs-excerpt p:last-child {
	margin-bottom: 0;
}

/* Venue */
.ecs-event .duration.venue {
	display: block;
	margin: 0;
	color: var(--ecs-color-text-secondary, #5d5d5d);
	font-size: var(--ecs-font-size-1, 0.6875rem);
	line-height: var(--ecs-line-height-2, 1.375);
}

/* View all events link */
.ecs-view-all-events {
	margin-top: var(--ecs-spacer-4, 1rem);
}

.ecs-view-all-events a,
.ecs-view-all-events a:visited {
	color: var(--ecs-color-link-accent, #334aff);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-bottom-color 0.2s ease;
}

.ecs-view-all-events a:hover,
.ecs-view-all-events a:focus,
.ecs-view-all-events a:active {
	border-bottom-color: var(--ecs-color-link-accent, #334aff);
	color: var(--ecs-color-link-accent, #334aff);
}

/* No events message */
.ecs-no-events {
	color: var(--ecs-color-text-secondary, #5d5d5d);
	font-size: var(--ecs-font-size-2, 0.8125rem);
	line-height: var(--ecs-line-height-3, 1.5);
}