/**
 * Grouped Event Schedule — frontend styles.
 * CSS custom properties are set inline by the widget render() method.
 */

.egs-widget {
	background-color: var(--egs-container-bg, transparent);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.egs-widget *,
.egs-widget *::before,
.egs-widget *::after {
	box-sizing: border-box;
}

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

.egs-grid {
	display: grid;
	grid-template-columns: repeat(var(--egs-columns, 2), minmax(0, 1fr));
	column-gap: var(--egs-column-gap, 24px);
	row-gap: var(--egs-year-gap, 24px);
	width: 100%;
	max-width: 100%;
}

@media (max-width: 1024px) {
	.egs-grid {
		grid-template-columns: repeat(var(--egs-columns-tablet, 1), minmax(0, 1fr));
		column-gap: var(--egs-column-gap-tablet, var(--egs-column-gap, 24px));
		row-gap: var(--egs-year-gap-tablet, var(--egs-year-gap, 24px));
	}
}

@media (max-width: 767px) {
	.egs-grid {
		grid-template-columns: repeat(var(--egs-columns-mobile, 1), minmax(0, 1fr));
		column-gap: var(--egs-column-gap-mobile, var(--egs-column-gap-tablet, var(--egs-column-gap, 24px)));
		row-gap: var(--egs-year-gap-mobile, var(--egs-year-gap-tablet, var(--egs-year-gap, 24px)));
	}
}

/* -------------------------------------------------------------------------
   Year group & header
   ------------------------------------------------------------------------- */

.egs-year-group {
	min-width: 0;
	width: 100%;
}

.egs-year-header {
	background-color: var(--egs-header-bg, #b833e0);
	color: var(--egs-header-color, #ffffff);
	border-radius: var(--egs-header-radius, 0);
	padding: var(--egs-header-padding-top, 12px) var(--egs-header-padding-right, 16px)
		var(--egs-header-padding-bottom, 12px) var(--egs-header-padding-left, 16px);
	line-height: 1.3;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.egs-year-label {
	display: block;
	font-weight: 700;
}

.egs-year-subtitle {
	display: block;
	font-size: 0.85em;
	opacity: 0.92;
	margin-top: 0.15em;
}

/* -------------------------------------------------------------------------
   Event rows
   ------------------------------------------------------------------------- */

.egs-events {
	width: 100%;
	padding: 5px;
}

.egs-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--egs-buy-row-gap, 12px);
	row-gap: var(--egs-row-gap-inner, 8px);
	padding: var(--egs-row-padding-y, 10px) 0;
	border-bottom-style: var(--egs-row-divider-style, none);
	border-bottom-width: var(--egs-row-divider-width, 0);
	border-bottom-color: var(--egs-row-divider-color, transparent);
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.egs-row:last-child {
	border-bottom: none;
}

.egs-date {
	color: var(--egs-date-color, inherit);
	flex: 0 1 auto;
	min-width: 30%;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	white-space: normal;
}

.egs-venue {
	color: var(--egs-venue-color, inherit);
	flex: 1 1 160px;
	min-width: 0;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	white-space: normal;
}

.egs-venue a {
	color: var(--egs-venue-link-color, var(--egs-venue-color, inherit));
	text-decoration: none;
	transition: color 0.2s ease;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.egs-venue a:hover,
.egs-venue a:focus {
	color: var(--egs-venue-link-hover-color, var(--egs-venue-link-color, inherit));
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Buy button group
   ------------------------------------------------------------------------- */

.egs-buy-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--egs-buy-price-gap, 8px);
	margin-inline-start: auto;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}

.egs-price {
	color: var(--egs-price-color, inherit);
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.egs-buy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	cursor: pointer;
	min-height: 44px;
	padding: var(--egs-buy-padding-top, 8px) var(--egs-buy-padding-right, 16px)
		var(--egs-buy-padding-bottom, 8px) var(--egs-buy-padding-left, 16px);
	background-color: var(--egs-buy-bg, #111111);
	color: var(--egs-buy-color, #ffffff);
	border-radius: var(--egs-buy-radius, 4px);
	border-style: var(--egs-buy-border-style, solid);
	border-width: var(--egs-buy-border-width, 0);
	border-color: var(--egs-buy-border-color, transparent);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	line-height: 1.3;
}

.egs-buy-button:hover,
.egs-buy-button:focus {
	background-color: var(--egs-buy-bg-hover, var(--egs-buy-bg, #111111));
	color: var(--egs-buy-color-hover, var(--egs-buy-color, #ffffff));
	border-color: var(--egs-buy-border-color-hover, var(--egs-buy-border-color, transparent));
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Responsive row stacking
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.egs-row {
		column-gap: var(--egs-buy-row-gap-tablet, var(--egs-buy-row-gap, 12px));
	}
}

@media (max-width: 767px) {
	.egs-row {
		flex-direction: column;
		align-items: flex-start;
		row-gap: var(--egs-buy-row-gap-mobile, var(--egs-buy-row-gap-tablet, var(--egs-buy-row-gap, 12px)));
		column-gap: 0;
	}

	.egs-date,
	.egs-venue {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	.egs-buy-wrap {
		margin-inline-start: 0;
		width: 100%;
		flex-direction: row;
		align-items: stretch;
	}

	.egs-buy-button {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}
}