/*
 * Trade show calendar — [xibit_showlist].
 * Colours and metrics mirror the Elementor design this replaced:
 * accent #FF4D4D, panel #2E2E2E26, hairline #2E2E2E80, Sora headings, Inter body.
 */

.xibit-showlist {
	--xibit-accent: #ff4d4d;
	--xibit-hairline: rgba(46, 46, 46, 0.5);
	--xibit-surface: rgba(46, 46, 46, 0.15);
	--xibit-panel: rgba(46, 46, 46, 0.19);
	--xibit-muted: #999;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Flex items default to min-width:auto, which lets a long show title push the
 * row past the viewport. Every level of the stack has to be allowed to shrink. */
.xibit-showlist *,
.xibit-showlist *::before,
.xibit-showlist *::after {
	min-width: 0;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- filters */
.xibit-showlist__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 41px;
	margin-bottom: 32px;
}

.xibit-showlist__tab {
	padding: 10px 30px;
	border: 1px solid var(--xibit-hairline);
	border-radius: 50px;
	background: #121212;
	color: #fff;
	font-family: Sora, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.xibit-showlist__tab:hover,
.xibit-showlist__tab:focus-visible {
	border-color: var(--xibit-accent);
	background: var(--xibit-accent);
}

.xibit-showlist__tab.is-active {
	border-color: var(--xibit-accent);
	background: var(--xibit-accent);
}

/* ------------------------------------------------------------------ items */
.xibit-showlist__items {
	display: flex;
	flex-direction: column;
	max-width: 100%;
}

.xibit-show {
	max-width: 100%;
}

.xibit-show[hidden] {
	display: none;
}

.xibit-show__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.xibit-show__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 29px;
	border: 1px solid var(--xibit-hairline);
	border-radius: 4px;
	background: var(--xibit-surface);
	color: #fff;
	font-family: Sora, sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: color 0.2s ease;
}

.xibit-show__toggle:hover,
.xibit-show__toggle[aria-expanded="true"] {
	color: var(--xibit-accent);
}

.xibit-show__title {
	flex: 1 1 auto;
	white-space: normal;
	overflow-wrap: break-word;
}

/* The month/location repeats inside the panel; on a wide row show it up front. */
.xibit-show__meta-inline {
	flex: 0 0 auto;
	color: var(--xibit-muted);
	font-size: 13px;
	font-weight: 500;
}

.xibit-show__chevron {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform 0.2s ease;
}

.xibit-show__toggle[aria-expanded="true"] .xibit-show__chevron {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.xibit-show__panel {
	border: 1px solid var(--xibit-hairline);
	border-top: 0;
	background: var(--xibit-panel);
}

.xibit-show__panel[hidden] {
	display: none;
}

.xibit-show__body {
	display: flex;
	gap: 24px;
	padding: 29px;
}

.xibit-show__text {
	flex: 1 1 50%;
	min-width: 0;
}

.xibit-show__media {
	flex: 0 0 50%;
	min-width: 0;
}

.xibit-show__image {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.xibit-show__meta {
	margin: 0 0 8px;
	color: var(--xibit-accent);
	font-family: Sora, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.xibit-show__desc {
	margin: 0 0 20px;
	color: var(--xibit-muted);
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
}

/* ---------------------------------------------------------------- buttons */
.xibit-show__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.xibit-show__btn {
	display: inline-block;
	padding: 14px 25px;
	border-radius: 8px;
	font-family: Sora, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.xibit-show__btn--ghost {
	border: 2px solid var(--xibit-accent);
	background: #2e2e2e;
	color: var(--xibit-accent);
}

.xibit-show__btn--ghost:hover,
.xibit-show__btn--ghost:focus-visible {
	background: var(--xibit-accent);
	color: #fff;
}

.xibit-show__btn--solid {
	border: 1px solid var(--xibit-accent);
	padding: 16px 25px;
	background: var(--xibit-accent);
	color: #fff;
}

.xibit-show__btn--solid:hover,
.xibit-show__btn--solid:focus-visible {
	background: rgba(255, 77, 77, 0.7);
	color: #fff;
}

.xibit-showlist__empty {
	color: var(--xibit-muted);
	font-family: Inter, sans-serif;
}

/* ----------------------------------------------------------------- mobile */
@media (max-width: 1024px) {
	.xibit-showlist__tabs {
		gap: 12px;
	}

	.xibit-show__meta-inline {
		display: none;
	}

	.xibit-show__body {
		flex-direction: column;
	}

	.xibit-show__media {
		order: -1;
		flex: 1 1 auto;
	}

	.xibit-show__toggle,
	.xibit-show__body {
		padding: 20px;
	}

	.xibit-show__btn {
		padding: 12px 15px;
	}

	.xibit-show__btn--solid {
		padding: 12px 20px;
	}
}