/* Venue Events — matches Functionality_Design mockups + v1.6 updates
   Body font: Albert Sans 400 | Headings & buttons: Figtree
   Accent #29d1bb + black on white, ticket-style cards */

.ve-wrap {
	--ve-accent: #29d1bb;
	--ve-black: #0d0d0d;
	--ve-border: #cfcfcf;
	--ve-radius: 10px;
	--ve-body-font: 'Albert Sans', system-ui, -apple-system, sans-serif;
	--ve-heading-font: 'Figtree', system-ui, -apple-system, sans-serif;
	font-family: var(--ve-body-font);
	font-weight: 400;
	color: var(--ve-black);
	max-width: 1180px;
	margin: 0 auto;
	box-sizing: border-box;
}
.ve-wrap *,
.ve-wrap *::before,
.ve-wrap *::after { box-sizing: border-box; }

.ve-page-title {
	font-family: var(--ve-heading-font);
	font-weight: 800;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	margin: 0 0 1.25em;
}
.ve-notice { font-family: var(--ve-body-font); }
.ve-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Buttons -------------------------------------------------------- */
.ve-btn {
	display: inline-block;
	font-family: var(--ve-heading-font);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 0.9em 1.6em;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: opacity 0.15s ease, transform 0.1s ease;
}
.ve-btn:hover { opacity: 0.85; text-decoration: none; }
.ve-btn:active { transform: scale(0.98); }
.ve-btn:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.ve-btn-black { background: var(--ve-black); color: #fff; }
.ve-btn-accent { background: var(--ve-accent); color: #fff; }
.ve-btn-black:hover, .ve-btn-accent:hover { color: #fff; }
.ve-btn-lg { font-size: 1.25rem; padding: 1em 2.4em; }
.ve-btn-block { display: block; width: 100%; }
.ve-btn svg { vertical-align: -3px; margin-right: 0.45em; }

/* ---- Create / Edit form --------------------------------------------- */
.ve-form { max-width: 760px; }
.ve-field { display: block; margin: 0 0 1.1rem; }
.ve-label {
	display: block;
	font-family: var(--ve-body-font);
	font-weight: 600;
	font-size: 1.05rem;
	margin-bottom: 0.35rem;
}
.ve-hint {
	display: block;
	font-size: 0.92rem;
	color: #555;
	margin-top: 0.3rem;
}
.ve-form input[type="text"],
.ve-form input[type="url"],
.ve-form input[type="date"],
.ve-form input[type="time"],
.ve-form select,
.ve-form textarea {
	width: 100%;
	font-family: var(--ve-body-font);
	font-weight: 400;
	font-size: 1.05rem;
	padding: 0.85em 1em;
	border: 1.5px solid var(--ve-border);
	border-radius: var(--ve-radius);
	background: #fff;
	color: var(--ve-black);
}
.ve-form input:focus,
.ve-form select:focus,
.ve-form textarea:focus {
	outline: none;
	border-color: var(--ve-black);
}
/* WYSIWYG (wp_editor) wrapper */
.ve-form .wp-editor-wrap {
	border: 1.5px solid var(--ve-border);
	border-radius: var(--ve-radius);
	overflow: hidden;
}
.ve-form .wp-editor-container { border: 0; }
.ve-days-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	padding: 0.35rem 0;
}
.ve-day-check {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	font-size: 1.05rem;
	cursor: pointer;
}
.ve-day-check input[type="checkbox"] {
	width: 1.35rem;
	height: 1.35rem;
	accent-color: var(--ve-black);
	margin: 0;
}
.ve-two-col { display: flex; gap: 1rem; }
.ve-two-col .ve-field { flex: 1; }
.ve-current-thumb {
	display: block;
	max-width: 260px;
	border-radius: var(--ve-radius);
	margin: 0.25rem 0 0.5rem;
}
.ve-form-msg { font-weight: 600; margin-top: 1rem; }
.ve-form-msg.is-error { color: #c62828; }
.ve-form-msg.is-success { color: #0a7a2f; }

/* ---- Admin edit list ------------------------------------------------- */
.ve-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	border: 1.5px solid var(--ve-border);
	border-radius: var(--ve-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
	background: #fff;
}
.ve-row-title { font-size: 1.15rem; font-weight: 600; flex: 1.2; }
.ve-row-date { flex: 1; font-size: 1.05rem; }
.ve-row-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }

/* ---- Listings: toolbar (Sort By + view toggle) ------------------------ */
.ve-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}
.ve-sortby {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.ve-sortby-label {
	font-family: var(--ve-heading-font);
	font-weight: 700;
	font-size: 1.05rem;
	white-space: nowrap;
}
.ve-filter-select {
	font-family: var(--ve-body-font);
	font-weight: 600;
	font-size: 1rem;
	padding: 0.8em 2.4em 0.8em 1em;
	border: 1.5px solid var(--ve-black);
	border-radius: 8px;
	background: #fff;
	color: var(--ve-black);
	min-width: 220px;
	cursor: pointer;
}
.ve-view-toggle {
	display: flex;
	border: 1.5px solid var(--ve-black);
	border-radius: 8px;
	overflow: hidden;
}
.ve-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: #fff;
	color: var(--ve-black);
	padding: 0.65em 0.95em;
	cursor: pointer;
	line-height: 0;
}
.ve-view-btn + .ve-view-btn { border-left: 1.5px solid var(--ve-black); }
.ve-view-btn.is-active {
	background: var(--ve-black);
	color: #fff;
}
.ve-view-btn:focus-visible { outline: 3px solid #1a73e8; outline-offset: -3px; }

/* ---- Listings shell + carousel footer (dots + arrows) ------------------ */
.ve-listings-shell { position: relative; }
.ve-carousel-footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-bottom: 1rem;
}
.ve-carousel-footer[hidden] { display: none; }
.ve-carousel-footer .ve-dots { grid-column: 2; margin-top: 0.5rem; }
.ve-car-nav {
	grid-column: 3;
	justify-self: end;
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.ve-wrap .ve-car-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	min-width: 46px;
	padding: 0;
	margin: 0;
	border: 2px solid var(--ve-black);
	border-radius: 50%;
	background: #fff;
	color: var(--ve-black);
	cursor: pointer;
	line-height: 0;
	box-shadow: none;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.ve-wrap .ve-car-arrow svg {
	width: 20px;
	height: 20px;
	margin: 0;
	display: block;
	fill: currentColor;
}
.ve-wrap .ve-car-arrow:hover { background: #f2f2f2; opacity: 1; }
.ve-wrap .ve-car-arrow:disabled {
	border-color: #d5d5d5;
	color: #b5b5b5;
	background: #fff;
	cursor: default;
}
.ve-wrap .ve-car-arrow:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }

/* ---- Listings: ticket cards (list view) ------------------------------- */
.ve-card {
	position: relative;
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 1.75rem;
	min-height: 200px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ve-card.is-hidden { display: none; }
.ve-card-img {
	position: relative;
	flex: 0 0 34%;
	max-width: 34%;
	overflow: hidden;
}
.ve-card-img img,
.ve-img-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ve-img-placeholder { background: linear-gradient(135deg, #222, #555); }
.ve-ribbon {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--ve-accent);
	color: #fff;
	font-family: var(--ve-heading-font);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	padding: 0.45em 1.1em;
}
/* Compact date strip on the image — used on mobile and in carousel view */
.ve-card-date-strip {
	display: none;
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--ve-accent);
	color: #fff;
	font-family: var(--ve-heading-font);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	padding: 0.5em 1.1em;
	white-space: nowrap;
}
.ve-card-body {
	flex: 1;
	padding: 1.5rem 12rem 1.5rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.65rem;
	min-width: 0;
}
.ve-card-title {
	font-family: var(--ve-heading-font);
	font-size: 1.7rem;
	font-weight: 800;
	margin: 0;
}
.ve-card-excerpt {
	margin: 0;
	font-family: var(--ve-body-font);
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ve-card-body .ve-btn { align-self: flex-start; }

/* Accent semicircle date bubble, clipped by the card's right edge */
.ve-card-date {
	position: absolute;
	top: 50%;
	right: -150px;
	transform: translateY(-50%);
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: var(--ve-accent);
	color: #fff;
	display: flex;
	align-items: center;
}
.ve-date-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 0.15rem;
	width: 150px;
	padding-right: 28px;
	font-family: var(--ve-heading-font);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
}

/* ---- Listings: carousel view ------------------------------------------ */
.ve-listings.is-carousel {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.ve-listings.is-carousel::-webkit-scrollbar { display: none; }
.ve-listings.is-carousel .ve-card {
	flex: 0 0 calc((100% - 3rem) / 3);
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
	margin-bottom: 0;
	scroll-snap-align: start;
}
.ve-listings.is-carousel .ve-card-img {
	flex: none;
	max-width: 100%;
	aspect-ratio: 16 / 9;
}
.ve-listings.is-carousel .ve-card-body {
	padding: 1.25rem 1.25rem 1.5rem;
	justify-content: flex-start;
}
.ve-listings.is-carousel .ve-card-title { font-size: 1.35rem; }
.ve-listings.is-carousel .ve-card-date { display: none; }
.ve-listings.is-carousel .ve-ribbon { display: none; }
.ve-listings.is-carousel .ve-card-date-strip { display: inline-block; }
.ve-listings-dots { margin-bottom: 1rem; }

/* ---- Load more -------------------------------------------------------- */
.ve-load-more-wrap { text-align: center; margin: 0.5rem 0 1rem; }
.ve-load-more-wrap[hidden] { display: none; }
.ve-count {
	font-weight: 600;
	font-size: 1.05rem;
	margin: 0 0 1rem;
}
.ve-load-more { min-width: 220px; font-size: 1.05rem; }
.ve-load-more:disabled {
	background: #9e9e9e;
	color: #fff;
	cursor: default;
	opacity: 1;
	transform: none;
}

/* ---- Single event post ------------------------------------------------ */
.ve-single-img {
	max-width: 860px;
	margin: 0 auto 2rem;
}
.ve-single-img img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.ve-single-main {
	display: flex;
	gap: 2.5rem;
	max-width: 860px;
	margin: 0 auto;
	align-items: flex-start;
}
.ve-single-content { flex: 1.6; min-width: 0; }
.ve-single-title {
	font-family: var(--ve-heading-font);
	font-size: 2rem;
	font-weight: 800;
	margin: 0 0 0.75rem;
}
.ve-single-desc {
	font-family: var(--ve-body-font);
	font-weight: 400;
	font-size: 1.08rem;
	line-height: 1.55;
}
.ve-when-box {
	flex: 1;
	border: 1.5px solid var(--ve-border);
	border-radius: var(--ve-radius);
	padding: 1.5rem;
}
.ve-when-box h4 {
	font-family: var(--ve-heading-font);
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}
.ve-when-box h4 + .ve-when-lines { margin-top: 0; }
.ve-when-lines { font-size: 1.25rem; line-height: 1.4; margin: 0 0 1.5rem; }
.ve-share { display: flex; gap: 0.7rem; margin-bottom: 1.5rem; }
.ve-share a { line-height: 0; border-radius: 50%; }
.ve-share a:hover { opacity: 0.8; }
.ve-share a:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.ve-when-actions .ve-btn-block + .ve-btn-block { margin-top: 0.65rem; }

/* ---- Also Coming Up carousel ------------------------------------------ */
.ve-coming-title {
	font-family: var(--ve-heading-font);
	text-align: center;
	font-size: 1.9rem;
	font-weight: 800;
	margin: 3rem 0 1.5rem;
}
.ve-carousel-shell { max-width: 1140px; margin: 0 auto; }
.ve-carousel {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.ve-carousel::-webkit-scrollbar { display: none; }
.ve-mini-card {
	flex: 0 0 calc((100% - 3rem) / 3);
	scroll-snap-align: start;
	text-decoration: none;
	color: var(--ve-black);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.ve-mini-img {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.ve-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-mini-date {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--ve-accent);
	color: #fff;
	font-family: var(--ve-heading-font);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	padding: 0.4em 1em;
}
.ve-mini-title {
	font-family: var(--ve-heading-font);
	font-size: 1.25rem;
	font-weight: 800;
	margin-top: 0.35rem;
}
.ve-mini-excerpt {
	font-family: var(--ve-body-font);
	font-weight: 400;
	font-size: 0.98rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ve-dots {
	display: flex;
	justify-content: center;
	gap: 0.55rem;
	margin-top: 1.25rem;
}
.ve-dots[hidden] { display: none; }
.ve-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: var(--ve-black);
	cursor: pointer;
}
.ve-dot.is-active { background: var(--ve-accent); }
.ve-dot:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.ve-carousel,
	.ve-listings.is-carousel { scroll-behavior: auto; }
	.ve-btn { transition: none; }
}

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 820px) {
	.ve-card { flex-direction: column; min-height: 0; }
	.ve-card-img { flex: none; max-width: 100%; aspect-ratio: 16 / 9; }
	.ve-card-body { padding: 1.25rem 1.25rem 1.5rem; }

	.ve-ribbon { display: none; }
	.ve-card-date { display: none; }
	.ve-card-date-strip { display: inline-block; }

	.ve-sortby { flex: 1; }
	.ve-filter-select { flex: 1; min-width: 0; }

	.ve-listings.is-carousel .ve-card { flex: 0 0 82%; }

	.ve-single-main { flex-direction: column; gap: 1.75rem; }
	.ve-when-box { width: 100%; }

	.ve-mini-card { flex: 0 0 82%; }

	.ve-row { flex-wrap: wrap; gap: 0.6rem; }
	.ve-row-title, .ve-row-date { flex: 1 1 100%; }
	.ve-row-actions { width: 100%; }
	.ve-row-actions .ve-btn { flex: 1; }

	.ve-two-col { flex-direction: column; gap: 0; }

	/* Arrows are a desktop control; mobile keeps swipe + dots */
	.ve-car-nav { display: none; }
	.ve-carousel-footer { grid-template-columns: 1fr; }
	.ve-carousel-footer .ve-dots { grid-column: 1; }
}