/**
 * Next Event Component
 */

.se-next-event {
	color: var(--color-text-primary);
	background: var(--color-white);
}

.se-next-event__inner {
	display: grid;
	gap: var(--space-0);
	padding-block: var(--space-0);
	border-block: var(--border-width-accent) solid var(--color-divider-soft);
}

.se-next-event__visual {
	display: grid;
	justify-items: center;
	gap: var(--space-24);
	padding: var(--space-64) var(--space-24);
	background: var(--color-white);
}

.se-next-event__poster {
	width: min(24rem, 100%);
	aspect-ratio: 2 / 3;
	margin: var(--space-0);
	overflow: hidden;
	border-radius: var(--radius-medium);
	background: color-mix(in srgb, var(--color-black) 5%, var(--color-white));
}

.se-next-event__poster-image {
	width: var(--size-full);
	height: var(--size-full);
	object-fit: cover;
}

.se-next-event__countdown {
	width: min(28rem, 100%);
	margin-block-start: var(--space-24);
}

.se-next-event__countdown-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-12);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
	text-align: center;
}

.se-next-event__countdown-list li {
	padding-block: var(--space-12);
	border-block-start: var(--border-width-accent) solid var(--color-primary);
}

.se-next-event__countdown-list strong {
	display: block;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--display-title-font-size, var(--font-size-h3));
	font-style: italic;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--display-title-letter-spacing, var(--letter-spacing-default));
	line-height: var(--line-height-tight);
	text-transform: uppercase;
}

.se-next-event__countdown-list span {
	display: block;
	margin-block-start: var(--space-4);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-small);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.se-next-event__countdown-finished {
	margin: var(--space-0);
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--display-title-font-size, var(--font-size-h3));
	font-style: italic;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--display-title-letter-spacing, var(--letter-spacing-default));
	text-align: center;
	text-transform: uppercase;
}

.se-next-event__content {
	max-width: var(--measure-readable);
	padding-block: var(--space-64);
}

.se-next-event__title {
	margin: var(--space-0);
	color: var(--color-black);
	font-size: var(--display-title-font-size, var(--font-size-h2));
}

.se-next-event__title::after {
	content: "";
	display: block;
	width: var(--space-48);
	height: var(--space-4);
	margin-block-start: var(--space-16);
	background: var(--color-primary);
}

.se-next-event__description {
	margin: var(--space-20) var(--space-0) var(--space-0);
	color: var(--color-text-secondary);
	font-size: var(--font-size-body-large);
	line-height: var(--line-height-body);
}

.se-next-event__meta {
	display: grid;
	gap: var(--space-8);
	margin-block-start: var(--space-24);
}

.se-next-event__location,
.se-next-event__date {
	margin: var(--space-0);
	text-transform: uppercase;
}

.se-next-event__location {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
}

.se-next-event__date {
	color: var(--color-primary);
	font-family: var(--font-display);
	font-size: var(--display-title-font-size, var(--font-size-h3));
	font-style: italic;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--display-title-letter-spacing, var(--letter-spacing-default));
	line-height: var(--line-height-tight);
}

.se-next-event__button {
	margin-top: var(--space-24);
}

@media (min-width: 48rem) {
	.se-next-event__visual {
		padding-block: var(--space-80);
	}
}

@media (min-width: 64rem) {
	.se-next-event__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.se-next-event__visual {
		align-content: center;
		min-height: 32rem;
		padding: var(--space-80);
	}

	.se-next-event__content {
		align-self: center;
		padding: var(--space-80);
	}
}

@media (prefers-reduced-motion: reduce) {
	.se-next-event,
	.se-next-event * {
		transition: none;
	}
}