/* aieo/event-details: an event's state, then when, where and the date to register by, as a description list on
   the theme's tokens (contract C2). The same sheet styles the state an events list prints beside a card's date
   (AIEO_Event_CPT::event_date_block()), which enqueues it. */
.aieo-event-details {
	margin-block: var(--wp--preset--spacing--4, 16px);
}
.aieo-event-details__state,
.aieo-event-date__state {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--wp--custom--rooster--shape--chip, 999px);
	background: color-mix(in srgb, var(--wp--preset--color--accent, #111) 14%, transparent);
	color: var(--wp--preset--color--fg, #111);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}
.aieo-event-details--ended .aieo-event-details__state,
.aieo-event-date--ended .aieo-event-date__state {
	background: color-mix(in srgb, var(--wp--preset--color--muted, #6b6b6b) 18%, transparent);
	color: var(--wp--preset--color--muted, #6b6b6b);
}
.aieo-event-date__state {
	margin-inline-start: var(--wp--preset--spacing--2, 8px);
}
.aieo-event-details__list {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--wp--preset--spacing--1, 4px) var(--wp--preset--spacing--3, 12px);
	margin: var(--wp--preset--spacing--3, 12px) 0 0;
}
.aieo-event-details__list dt {
	color: var(--wp--preset--color--muted, #6b6b6b);
	font-weight: 600;
}
.aieo-event-details__list dd {
	margin: 0;
	overflow-wrap: anywhere;
}