/* Events Grid — three layouts: scroll (marquee strip), grid (cards), split (two-column cards). */

.eg-events {
	box-sizing: border-box;
}

.eg-events *,
.eg-events *::before,
.eg-events *::after {
	box-sizing: border-box;
}

/* Full width: break out of the theme/Elementor content container. */
.eg-events--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.eg-events__label {
	font-size: calc(var(--eg-title-size, 16px) * 1.1);
	font-weight: 700;
	line-height: 1.2;
}

/* Themes style bare p/ul/h3 inside post content (Astra adds 1.6em below every
   paragraph), which otherwise leaks in as phantom height and pushes the card
   layout around. Two-class selectors so a theme's `.entry-content p` can't win. */
.eg-events .eg-events__label,
.eg-events .eg-card__title,
.eg-events .eg-card__meta,
.eg-events .eg-card__meta-item,
.eg-events .eg-card__desc,
.eg-events .eg-event__title,
.eg-events .eg-event__meta,
.eg-events .eg-event__meta-item {
	margin: 0;
}

.eg-events .eg-card__meta,
.eg-events .eg-event__meta {
	padding: 0;
	list-style: none;
}

.eg-icon {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	fill: currentColor;
	opacity: 0.85;
	margin-top: 0.15em;
}

/* ---------------------------------------------------------------------------
   Scroll layout — the original horizontal strip.
   --------------------------------------------------------------------------- */

.eg-events--scroll {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	background: var(--eg-bg, #e30613);
	color: var(--eg-text, #ffffff);
	padding: 18px 24px;
}

.eg-events--scroll .eg-events__label {
	flex: 0 0 auto;
	padding-top: 2px;
}

.eg-events--scroll .eg-events__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.eg-events--scroll .eg-events__track {
	display: flex;
	width: max-content;
	animation: eg-marquee var(--eg-marquee-duration, 40s) linear infinite;
}

.eg-events--scroll .eg-events__group {
	display: flex;
	flex: 0 0 auto;
}

.eg-events--scroll:hover .eg-events__track {
	animation-play-state: paused;
}

@keyframes eg-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Respect reduced-motion: no animation, fall back to manual scrolling. */
@media (prefers-reduced-motion: reduce) {
	.eg-events--scroll .eg-events__track {
		animation: none;
	}

	.eg-events--scroll .eg-events__viewport {
		overflow-x: auto;
	}

	.eg-events--scroll .eg-events__group[aria-hidden="true"] {
		display: none;
	}
}

.eg-event {
	position: relative;
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
	min-width: 230px;
	max-width: 330px;
	padding: 0 22px;
}

/* Thin separator line between items. Every item carries one so the marquee
   loop seam looks the same as every other boundary. */
.eg-event::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: currentColor;
	opacity: 0.5;
}

.eg-event__icon {
	flex: 0 0 auto;
	line-height: 1;
}

.eg-event__icon .eg-icon {
	width: 22px;
	height: 22px;
	margin-top: 0;
	opacity: 1;
}

.eg-event__body {
	min-width: 0;
}

.eg-event__title {
	margin: 0 0 6px;
	font-size: var(--eg-title-size, 16px);
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}

.eg-event__meta {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--eg-content-size, 14px);
	line-height: 1.45;
}

.eg-event__meta-item {
	display: flex;
	gap: 6px;
	margin: 0;
}

.eg-event__meta-item--day,
.eg-event__meta-item--hour {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Grid and split layouts — cards.
   --------------------------------------------------------------------------- */

.eg-events--grid,
.eg-events--split {
	display: block;
	color: inherit;
}

.eg-events--grid.eg-events--full,
.eg-events--split.eg-events--full {
	padding: 0 24px;
}

.eg-events--grid .eg-events__label,
.eg-events--split .eg-events__label {
	margin-bottom: 20px;
}

.eg-events--grid .eg-events__group,
.eg-events--split .eg-events__group {
	display: grid;
	gap: 24px;
	align-items: stretch;
}

.eg-events--grid .eg-events__group {
	grid-template-columns: repeat(var(--eg-columns, 3), minmax(0, 1fr));
}

/* Split cards are two columns inside the card, so they always sit one per row. */
.eg-events--split .eg-events__group {
	grid-template-columns: minmax(0, 1fr);
}

.eg-card {
	display: flex;
	flex-direction: column;
	background: var(--eg-bg, #e30613);
	color: var(--eg-text, #ffffff);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	height: 100%;
}

/* The image is taken out of flow so its natural size never drives the card
   height — the media box's own height rules do, and the image just fills it. */
.eg-card__media {
	position: relative;
	margin: 0;
	line-height: 0;
	overflow: hidden;
}

/* Two-class selector on purpose: Elementor's frontend.min.css sets
   `.elementor img { height: auto }` and themes set `img { height: auto }`, both
   of which outrank a single class and would leave the image overflowing its
   box instead of cover-filling it. */
.eg-events .eg-card__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.eg-card--grid .eg-card__media {
	height: var(--eg-image-height, 220px);
}

.eg-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 20px;
	flex: 1 1 auto;
}

.eg-card__title {
	margin: 0;
	font-size: var(--eg-title-size, 16px);
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
}

.eg-card__meta {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--eg-content-size, 14px);
	line-height: 1.45;
}

.eg-card__meta-item {
	display: flex;
	gap: 8px;
	margin: 0;
}

.eg-card__meta-item--day,
.eg-card__meta-item--hour {
	font-weight: 600;
}

.eg-card__desc {
	margin: 0;
	font-size: var(--eg-content-size, 14px);
	line-height: 1.5;
	white-space: pre-line;
}

/* Split card: details left, image + description right. */
.eg-card--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.eg-card__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.eg-card__col--info {
	padding: 24px;
	justify-content: center;
}

/* The image sits inset from the card edges as a rounded panel, matching the
   info column's padding. The media row is at least the chosen image height and
   takes every pixel the card has left over, so the panel stretches to the card
   rather than floating; the description keeps its natural height underneath and
   lines up with the image's edges. */
.eg-card--split .eg-card__col--media {
	display: grid;
	grid-template-rows: minmax(var(--eg-image-height, 220px), 1fr) auto;
	gap: 0;
	padding: 24px;
}

.eg-card--split .eg-card__media {
	height: auto;
	min-height: 0;
	border-radius: var(--eg-image-radius, 12px);
}

.eg-card--split .eg-card__desc {
	flex: 0 0 auto;
	padding: 14px 0 0;
}

/* An image-less split card has nothing to pad away from. */
.eg-card--split .eg-card__col--media > .eg-card__desc:first-child {
	padding-top: 0;
}

/* ---------------------------------------------------------------------------
   Pagination.
   --------------------------------------------------------------------------- */

.eg-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	font-size: var(--eg-content-size, 14px);
}

.eg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid currentColor;
	border-radius: 6px;
	text-decoration: none;
	line-height: 1;
	opacity: 0.75;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.eg-pagination .page-numbers:hover,
.eg-pagination .page-numbers:focus {
	opacity: 1;
}

.eg-pagination .page-numbers.current {
	background: var(--eg-bg, #e30613);
	color: var(--eg-text, #ffffff);
	border-color: var(--eg-bg, #e30613);
	opacity: 1;
	font-weight: 700;
}

.eg-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
	padding: 0 4px;
}

.eg-events__empty {
	margin: 0;
	font-size: var(--eg-content-size, 14px);
}

/* ---------------------------------------------------------------------------
   Responsive.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.eg-events--grid .eg-events__group {
		grid-template-columns: repeat(min(var(--eg-columns, 3), 2), minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.eg-card--split {
		grid-template-columns: minmax(0, 1fr);
	}

	.eg-card--split .eg-card__col--info {
		padding-bottom: 4px;
	}
}

@media (max-width: 600px) {
	.eg-events--scroll {
		flex-direction: column;
		gap: 14px;
	}

	.eg-events--grid .eg-events__group {
		grid-template-columns: minmax(0, 1fr);
	}

	.eg-events--grid.eg-events--full,
	.eg-events--split.eg-events--full {
		padding: 0 16px;
	}
}

/* A split card with no image: the description sits alone in the right column,
   so drop the reserved image row rather than leaving an empty band. */
.eg-card--split .eg-card__col--textonly {
	grid-template-rows: auto;
	align-content: center;
}