/* Single Event Styles */
.page-header {
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 959px) {
	.page-header .is-layout-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
	}
}

.wp-block-group.alignwide {
	padding-left: 20px;
	padding-right: 20px;
}

.program-description p:not(:first-child) {
	margin-top: 1em;
}

/**
 * Query Loop Button
 * See global.css for additional button styles
 */
a.vcs-event-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px; /* matches theme style */
	padding: 0.4em 1.25em;
	margin-top: 1em;
	font-size: var(--theme-button-font-size);
	font-weight: 600;
	color: var(--theme-palette-color-8);
	text-align: center;
	text-decoration: none;
	background-color: var(--theme-palette-color-1);
	border-radius: 4px;
	box-sizing: border-box;
}

.vcs-event-link:hover {
	color: var(--theme-palette-color-8);
	background-color: var(--theme-palette-color-2);
}

.vcs-event-meta {
	font-size: 1.1rem;
	color: var(--theme-palette-color-8);
}

.vcs-event-meta > .vcs-event-date {
	font-weight: 600;
}

.vcs-event-meta > .vcs-event-venues {
	font-weight: 300;
}

.vcs-event-meta--loop.vcs-event-meta {
	font-size: 1rem;
	color: var(--theme-palette-color-4);
}

/** Ex. /concerts page query loop **/
ul.events-vertical .vcs-event-date {
	font-weight: 600;
}
/** Ex. /home page horizontal concerts query loop **/
ul.events-auto-trim .vcs-event-date {
	margin-top: 10px;
	font-weight: 400;
}

ul.events-auto-trim .vcs-event-date,
ul.events-auto-trim .vcs-event-time,
ul.events-auto-trim .vcs-event-venues {
	font-size: 0.95rem;
}

ul.events-auto-trim .vcs-event-time,
ul.events-auto-trim .vcs-event-venues {
	font-weight: 300;
}

@media (min-width: 782px) {
	.events-vertical .vcs-event-link {
		width: auto;
		min-width: 200px;
	}
}

/* Eventbrite pop-up button */
.vcs-eventbrite-button a {
	display: inline-block;
	width: 50%;
	min-height: var(--theme-button-min-height);
	min-width: 200px;
	padding: 0.6em 1.2em;
	font-weight: 600;
	font-size: var(--theme-button-font-size);
	color: var(--theme-palette-color-8);
	text-align: center;
	text-decoration: none;
	background-color: var(--theme-palette-color-1);
	border-radius: 3px;
	box-sizing: border-box;
}

.vcs-eventbrite-button a:hover {
	background-color: var(--theme-palette-color-2);
}

.vcs-eventbrite-button a .ext-icon {
	margin-left: 0.4em;
	width: 1.2em;
	height: 1.2em;
	line-height: 1;
	vertical-align: -0.25em;
}

/* SR-only utility, scoped to this block to avoid global bleed */
.vcs-eventbrite-button .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 1px, 1px);
	white-space: nowrap;
	border: 0;
}

/* Block Scroll */
ul.events-auto-trim {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.events-auto-trim > li {
	flex: 1 1 262px;
	min-width: 240px;
	max-width: calc(100% / 4);
	box-sizing: border-box;
}

@media only screen and (max-width: 1244px) {
	ul.events-auto-trim > li {
		max-width: calc(100% / 3);
	}
}

@media only screen and (max-width: 926px) {
	ul.events-auto-trim > li {
		max-width: calc(100% / 2);
	}
}

@media only screen and (max-width: 622px) {
	ul.events-auto-trim > li {
		max-width: 100%;
	}
}

/* Make images on the Events page fill their container */
ul.events-vertical > li .wp-block-column:first-child {
	display: flex;
}

ul.events-vertical > li .wp-block-post-featured-image,
ul.events-vertical > li .wp-block-post-featured-image a,
ul.events-vertical > li .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	display: block;
}

ul.events-vertical > li .wp-block-post-featured-image img {
	object-fit: cover;
}

/* Spacing for Events page query loop */
ul.events-vertical li:not(:first-child) > div:first-child {
	margin-top: 4rem;
}

ul.events-vertical .wp-block-post-excerpt__excerpt {
	margin-bottom: 20px;
}

@media (max-width: 781px) {
	ul.events-vertical h3 {
		margin-top: 20px !important;
	}
}


/* Event Meta variants */
.vcs-event-meta.is-style-inline ul,
.vcs-event-meta.is-style-compact ul { list-style: none; margin: 0; padding: 0; }
.vcs-event-meta.is-style-inline li { display: inline; }
.vcs-event-meta.is-style-inline li + li::before { content: " • "; opacity: .6; margin-inline: .4em; }
.vcs-event-meta.is-style-compact li { margin-block: .15rem; }

/* Eventbrite button variants (assuming your shortcode outputs <a class="button">… ) */
.vcs-eventbrite-button.is-style-outline .button {
	background: transparent; border: 1px solid currentColor;
}
.vcs-eventbrite-button.is-style-primary .button {
	/* rely on your theme's primary button styles */
}

/* Editor fallbacks for Blocksy palette/size vars */
.editor-styles-wrapper {
	--theme-palette-color-1: var(--wp--preset--color--primary,#111);
	--theme-palette-color-2: var(--wp--preset--color--secondary,#333);
	--theme-button-font-size: 1rem;
	--theme-button-min-height: 40px;
}

/* Ensure editor uses the same button look */
.editor-styles-wrapper .vcs-event-button a.vcs-event-link,
.editor-styles-wrapper .vcs-eventbrite-button a {
	color: var(--theme-palette-color-8);
}


/* Query Loop – fixed image window (frontend + editor) */
.wp-block-post-template .wp-block-post-featured-image,
.editor-styles-wrapper .wp-block-post-template .wp-block-post-featured-image {
	/* pick a height that fits your grid; two good options: */
	/* max-height: 220px; */            /* explicit max-height */
	aspect-ratio: 4 / 3;                 /* or fixed ratio for consistency */
	overflow: hidden;
}

.wp-block-post-template .wp-block-post-featured-image img,
.editor-styles-wrapper .wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}