/*
 * Events saved before this plugin was installed can still hold an end
 * timestamp earlier than their start, and VS Event List renders
 * "Error: please reset time." for them (vsel-template.php:141). Re-saving such
 * an event fixes it for good; until then, do not show the error to visitors.
 */
.vsel-meta-time.vsel-meta-error {
	display: none;
}

/*
 * Single event page layout.
 *
 * Everything below is scoped to .single-event so the upcoming list, the
 * archive and the shortcode keep VS Event List's own layout.
 *
 * VS Event List floats .vsel-meta and .vsel-info against each other and writes
 * the widths inline (vsel-variables-single.php:105), so the width overrides
 * have to be !important to win. The float declarations do not.
 */
.single-event .vsel-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

/* The clearfix has no job once the floats are gone, and as a grid child it
   would open a phantom row. */
.single-event .vsel-content::after {
	content: none;
}

.single-event .vsel-meta,
.single-event .vsel-info {
	float: none;
	width: auto !important;
}

/* Date, time and location read as one band rather than four stacked rows.
   VS Event List gives each a block-level div with a bottom margin. */
.single-event .vsel-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	align-content: start;
}

.single-event .vsel-meta > div {
	margin: 0;
}

/*
 * No measure cap on .vsel-text.
 *
 * An earlier version capped it at 55ch to keep the line length readable. That
 * was a mistake: .vsel-info spans both grid columns, but the text inside it
 * then stopped at 540px -- 90px short of even the details column's right edge
 * -- so the layout read as though the content had never spanned at all. It
 * squeezed the block's galleries to 540px too.
 *
 * The content block is meant to run the full width, so it does. Body copy at
 * 920px works out around 115 characters a line, which is long; if that matters
 * more than the full-bleed look, cap the paragraphs alone and leave figures
 * and headings full width:
 *
 *     .single-event .vsel-text > p { max-width: 62ch; }
 *
 * That gives about 76 characters -- but it puts the paragraph edge back near
 * the details column, which is the appearance the cap caused in the first
 * place.
 */

.single-event .tmcs-event-image {
	margin: 0;
}

.single-event .tmcs-event-image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * With a featured image: details and image share the top row, content spans
 * beneath. The class is added by tmcs_vsel_insert_event_image() in the same
 * edit that inserts the figure, so an event with no image falls back to the
 * single column above instead of leaving an empty 30% gap.
 *
 * Named areas rather than grid-column: the figure is inserted first in source
 * order, and column-only placement lets auto-placement push items onto rows of
 * their own.
 */
.single-event .vsel-content.tmcs-has-image {
	grid-template-columns: 70fr 30fr;
	grid-template-areas:
		"meta  image"
		"info  info";
}

.single-event .tmcs-has-image .vsel-meta {
	grid-area: meta;
	/* Fill the row rather than leaving the image standing 130px taller. */
	align-self: stretch;
}

.single-event .tmcs-has-image .tmcs-event-image {
	grid-area: image;
}

.single-event .tmcs-has-image .vsel-info {
	grid-area: info;
}

@media (max-width: 700px) {
	.single-event .vsel-content.tmcs-has-image {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"meta"
			"image"
			"info";
	}
}