/**
 * Front-end event listing for [valletta_events] and the event archive.
 *
 * Colours follow the palazzorosaria.com palette: charcoal ground, warm gold
 * accent, cream headings.
 *
 * @package VallettaEventsAgent
 */

.vea-events,
.vea-heading,
.vea-empty,
.vea-tickets,
.vea-source {
	--vea-gold: #c8974e;
	--vea-gold-bright: #dcae6b;
	--vea-cream: #f4f0e8;
	--vea-text: #b6b9bd;
	--vea-muted: #8b8e93;
	--vea-surface: #232326;
	--vea-surface-hover: #2a2a2e;
	--vea-line: #3a3a40;
	--vea-radius: 3px;
}

/* Heading
   ------------------------------------------------------------------------ */

.vea-heading {
	color: var(--vea-cream);
	font-size: clamp( 1.6rem, 1.15rem + 1.5vw, 2.2rem );
	letter-spacing: 0.01em;
	line-height: 1.2;
	margin: 0 0 1.6rem;
	padding-bottom: 0.75rem;
	position: relative;
}

.vea-heading::after {
	background: var(--vea-gold);
	bottom: 0;
	content: "";
	display: block;
	height: 2px;
	left: 0;
	position: absolute;
	width: 56px;
}

/* Grid
   ------------------------------------------------------------------------ */

.vea-events {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.vea-cols-1 {
	grid-template-columns: minmax( 0, 1fr );
}

.vea-cols-2 {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.vea-cols-3 {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.vea-cols-4 {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

@media ( max-width: 1100px ) {

	.vea-cols-3,
	.vea-cols-4 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 680px ) {

	.vea-events,
	.vea-cols-2,
	.vea-cols-3,
	.vea-cols-4 {
		gap: 1.25rem;
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Card
   ------------------------------------------------------------------------ */

.vea-event {
	background: var(--vea-surface);
	border: 1px solid var(--vea-line);
	border-radius: var(--vea-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.vea-event:hover,
.vea-event:focus-within {
	background: var(--vea-surface-hover);
	border-color: var(--vea-gold);
	transform: translateY( -3px );
}

.vea-event-image {
	display: block;
	line-height: 0;
	overflow: hidden;
}

.vea-event-image img {
	aspect-ratio: 16 / 10;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 0.5s ease;
	width: 100%;
}

.vea-event:hover .vea-event-image img {
	transform: scale( 1.04 );
}

/* Date badge, shown when an event has no featured image.
   ------------------------------------------------------------------------ */

.vea-event-badge {
	align-items: center;
	background: linear-gradient( 160deg, rgba( 200, 151, 78, 0.16 ), rgba( 200, 151, 78, 0.04 ) );
	border-bottom: 1px solid var(--vea-line);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 118px;
	padding: 1.25rem 1rem;
}

.vea-badge-day {
	color: var(--vea-gold-bright);
	font-size: 2.6rem;
	font-weight: 400;
	line-height: 1;
}

.vea-badge-month {
	color: var(--vea-gold);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	margin-top: 0.35rem;
	text-transform: uppercase;
}

/* Card body
   ------------------------------------------------------------------------ */

.vea-event-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.65rem 1.6rem 1.45rem;
}

.vea-event-title {
	font-size: 1.5rem;
	line-height: 1.26;
	margin: 0 0 0.65rem;
}

.vea-event-title a {
	border: 0;
	box-shadow: none;
	color: var(--vea-cream);
	text-decoration: none;
	transition: color 0.2s ease;
}

.vea-event-title a:hover,
.vea-event-title a:focus {
	color: var(--vea-gold-bright);
}

.vea-event-meta {
	color: var(--vea-gold);
	font-size: 0.84rem;
	letter-spacing: 0.1em;
	line-height: 1.5;
	margin: 0 0 0.9rem;
	text-transform: uppercase;
}

.vea-event-excerpt {
	color: var(--vea-text);
	flex: 1 1 auto;
	font-size: 1.12rem;
	line-height: 1.6;
	margin: 0 0 1.35rem;
}

.vea-event-link {
	align-self: flex-start;
	border: 0;
	box-shadow: none;
	color: var(--vea-gold);
	font-size: 0.86rem;
	letter-spacing: 0.13em;
	margin-top: auto;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.vea-event-link::after {
	content: " \2192";
	display: inline-block;
	transition: transform 0.2s ease;
}

.vea-event-link:hover,
.vea-event-link:focus {
	color: var(--vea-gold-bright);
}

.vea-event-link:hover::after {
	transform: translateX( 3px );
}

/* One- and two-column layouts give the card more room, so the title grows
   with it. */

.vea-cols-1 .vea-event-title,
.vea-cols-2 .vea-event-title {
	font-size: 1.7rem;
}

.vea-cols-1 .vea-event-excerpt,
.vea-cols-2 .vea-event-excerpt {
	font-size: 1.18rem;
}

@media ( max-width: 680px ) {

	.vea-cols-1 .vea-event-title,
	.vea-cols-2 .vea-event-title {
		font-size: 1.45rem;
	}

	.vea-cols-1 .vea-event-excerpt,
	.vea-cols-2 .vea-event-excerpt {
		font-size: 1.08rem;
	}
}

/* Empty state
   ------------------------------------------------------------------------ */

.vea-empty {
	border-left: 2px solid var(--vea-gold);
	color: var(--vea-muted);
	font-style: italic;
	margin: 1.5rem 0;
	padding: 0.35rem 0 0.35rem 1rem;
}

/* Accessibility
   ------------------------------------------------------------------------ */

.vea-event a:focus-visible {
	outline: 2px solid var(--vea-gold-bright);
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {

	.vea-event,
	.vea-event-image img,
	.vea-event-link::after,
	.vea-event-title a {
		transition: none;
	}

	.vea-event:hover,
	.vea-event:focus-within {
		transform: none;
	}

	.vea-event:hover .vea-event-image img {
		transform: none;
	}
}

/* Single event page — markup produced by the generator inside post content.
   ------------------------------------------------------------------------ */

.vea-tickets {
	background: var(--vea-gold);
	border-radius: 2px;
	color: #1c1c1e;
	display: inline-block;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.vea-tickets:hover,
.vea-tickets:focus {
	background: var(--vea-gold-bright);
	color: #1c1c1e;
}

.vea-source {
	color: var(--vea-muted);
	font-size: 0.85rem;
}

.vea-source a {
	color: var(--vea-gold);
}