/*
 * What's On list view: filter row + month blocks.
 * Spec: docs/superpowers/specs/2026-09-11-whats-on-events-list-design.md
 * Every rule is scoped under .lc-wo (added to the TEC list view container).
 * Gaps are variables so pixel checks can be tuned in one place.
 */

/* Hidden by request (2026-09-12): the "Signature Castle Events" intro block that sat
 * between the category strip and the filter row on the events archive. It is Elementor
 * container 9f0191c in template 10548: the eyebrow, the "Discover What's On & Join The
 * Experience" heading and the paragraph beside it. The container is left untouched in
 * Elementor, so removing this rule brings it straight back. */
body .elementor-element.elementor-element-9f0191c {
	display: none !important;
}

.lc-wo {
	--lc-wo-gold: #cfaf58;
	--lc-wo-dark: #2f3528;
	--lc-wo-grey: #8e918a;
	--lc-wo-black: #000000;
	--lc-wo-red: #980000;
	--lc-wo-rule: #e2e2e2;
	--lc-wo-serif: 'ivypresto-display', Georgia, serif;
	--lc-wo-sans: 'Work Sans', Arial, sans-serif;
	--lc-wo-outset-filter: 15px;
	--lc-wo-outset-grid: 5px;
	--lc-wo-filter-gap: 10px;
	--lc-wo-filter-row-gap: 30px;
	--lc-wo-filter-to-heading: 82px;
	--lc-wo-column-gap: 40px;
	--lc-wo-row-gap: 70px;
	--lc-wo-heading-to-cards: 100px;
	--lc-wo-month-gap: 90px;
	--lc-wo-image-height: 305px;
	--lc-wo-title-top: 15px;
	--lc-wo-excerpt-top: 20px;
	--lc-wo-label-top: 20px;
	--lc-wo-date-top: 2px;
}

.elementor-10548 .elementor-element.elementor-element-2d801b7:not(.elementor-motion-effects-element-type-background), .elementor-10548 .elementor-element.elementor-element-2d801b7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{
	background-color: #fff !important;
}

.tribe-events-header{
	display: none !important;
}

/* TEC parts removed from the list view (spec 5.5). */
.lc-wo .tribe-events-c-top-bar,
.lc-wo .tribe-events-c-events-bar__filter-button-container,
.lc-wo .tribe-events-header__messages,
.lc-wo nav.tribe-events-c-nav,
.lc-wo .tribe-events-c-subscribe-dropdown__container {
	display: none !important;
}

/* ---------- Filter row ---------- */
/* A grid so the search field (2026-10-06, client request) can take its own row at the top of
   the filter area, the width of one select, with the month and category selects and Apply
   keeping their row beneath it. */
.lc-wo.tribe-events-view section.tribe-common-l-container > .lc-wo-filter,
.lc-wo .lc-wo-filter {
	display: grid;
	grid-template-columns: 450px 450px minmax(0, 1fr);
	grid-template-areas:
		"search . ."
		"month category apply";
	flex: 0 0 auto;
	width: calc(100% + 2 * var(--lc-wo-outset-filter));
	max-width: none;
	align-items: end;
	column-gap: var(--lc-wo-filter-gap);
	row-gap: var(--lc-wo-filter-row-gap);
	box-sizing: border-box;
	margin: 0 calc(-1 * var(--lc-wo-outset-filter)) var(--lc-wo-filter-to-heading);
	padding: 70px 0 0 0;
}

.lc-wo .lc-wo-filter__field--month {
	grid-area: month;
}

.lc-wo .lc-wo-filter__field--search {
	grid-area: search;
}

.lc-wo .lc-wo-filter__field--category {
	grid-area: category;
}

.lc-wo .lc-wo-filter__apply {
	grid-area: apply;
}

.lc-wo .lc-wo-filter__field {
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.lc-wo .lc-wo-filter__label {
	display: block;
	margin: 0 0 15px 4px;
	padding: 0;
	font-family: var(--lc-wo-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--lc-wo-black);
}

.lc-wo .lc-wo-filter__select-wrap {
	display: block;
}

.lc-wo .lc-wo-filter__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	box-sizing: border-box;
	width: 450px;
	height: 56px;
	margin: 0;
	padding: 0 48px 0 24px;
	border: 1px solid var(--lc-wo-gold);
	border-radius: 0;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4.32' viewBox='0 0 7 4.32'%3E%3Cpath d='M.5.5l3 3.32 3-3.32' fill='none' stroke='%23CFAF58' stroke-width='1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 7px 4.32px;
	box-shadow: none;
	font-family: var(--lc-wo-sans);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: var(--lc-wo-dark);
	cursor: pointer;
}

.lc-wo .lc-wo-filter__select:focus {
	outline: 2px solid var(--lc-wo-gold);
	outline-offset: 2px;
	border-color: var(--lc-wo-gold);
}

.lc-wo .lc-wo-filter__select.is-placeholder {
	color: var(--lc-wo-grey);
}

.lc-wo .lc-wo-filter__select::-ms-expand {
	display: none;
}

.lc-wo .lc-wo-filter__select option {
	color: var(--lc-wo-dark);
}

/* Search field: the same box as the selects, with a gold magnifier in place of the arrow. */
.lc-wo .lc-wo-filter__search-wrap {
	position: relative;
	display: block;
}

.lc-wo .lc-wo-filter__search {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	box-sizing: border-box;
	width: 450px;
	height: 56px;
	margin: 0;
	padding: 0 56px 0 24px;
	border: 1px solid var(--lc-wo-gold);
	border-radius: 0;
	background: #ffffff;
	box-shadow: none;
	font-family: var(--lc-wo-sans);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: var(--lc-wo-dark);
}

.lc-wo .lc-wo-filter__search::placeholder {
	color: var(--lc-wo-grey);
	opacity: 1;
}

.lc-wo .lc-wo-filter__search::-webkit-search-decoration,
.lc-wo .lc-wo-filter__search::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.lc-wo .lc-wo-filter__search:focus {
	outline: 2px solid var(--lc-wo-gold);
	outline-offset: 2px;
	border-color: var(--lc-wo-gold);
}

.lc-wo .lc-wo-filter__search-go {
	position: absolute;
	top: 50%;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: -18px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--lc-wo-gold);
	cursor: pointer;
}

.lc-wo .lc-wo-filter__search-go:hover,
.lc-wo .lc-wo-filter__search-go:focus {
	background: transparent;
	color: var(--lc-wo-dark);
}

.lc-wo .lc-wo-filter__search-go:focus {
	outline: 0;
}

.lc-wo .lc-wo-filter__search-go:focus-visible {
	outline: 2px solid var(--lc-wo-gold);
	outline-offset: 0;
}

.lc-wo .lc-wo-filter__search-go svg {
	display: block;
	width: 18px;
	height: 18px;
}

.lc-wo .lc-wo-filter__apply,
.lc-wo .lc-wo-filter__apply:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 183px;
	height: 56px;
	margin: 0 0 0 auto;
	padding: 0;
	border: 1px solid var(--lc-wo-gold);
	border-radius: 0;
	background: var(--lc-wo-dark);
	font-family: var(--lc-wo-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 2.1px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: #ffffff;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lc-wo .lc-wo-filter__apply:hover,
.lc-wo .lc-wo-filter__apply:focus-visible {
	background: var(--lc-wo-gold);
	color: var(--lc-wo-dark);
	text-decoration: none;
}

/* Loading: while the Apply button is loading (lc-wo--applying on the view container) TEC's overlay
   loader is hidden and the button carries the spinner; search, pagination and view switching keep
   TEC's own loader. */
.lc-wo.lc-wo--applying .tribe-events-view-loader {
	display: none !important;
}

.lc-wo .lc-wo-filter__apply:focus {
	outline: 0;
}

.lc-wo .lc-wo-filter__apply:focus-visible {
	outline: 2px solid var(--lc-wo-gold);
	outline-offset: 2px;
}

.lc-wo .lc-wo-filter__apply.is-loading,
.lc-wo .lc-wo-filter__apply.is-loading:hover,
.lc-wo .lc-wo-filter__apply.is-loading:focus,
.lc-wo .lc-wo-filter__apply.is-loading:focus-visible {
	pointer-events: none;
	background: var(--lc-wo-dark);
	color: #ffffff;
	transition: none;
	outline: 0;
}

.lc-wo .lc-wo-filter__apply.is-loading::after {
	content: '';
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	margin-left: 10px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: lc-wo-spin 0.7s linear infinite;
}

@keyframes lc-wo-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Notices ("There were no results found.") shown under the filter row. */
.lc-wo.tribe-events-view section.tribe-common-l-container > .lc-wo-messages,
.lc-wo .lc-wo-messages {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: calc(100% + 2 * var(--lc-wo-outset-grid));
	max-width: none;
	margin: 0 calc(-1 * var(--lc-wo-outset-grid)) 40px;
	padding: 18px 24px;
	background: var(--lc-wo-gold);
	text-align: center;
}

.lc-wo .lc-wo-messages__item {
	margin: 0;
	padding: 0;
	font-family: var(--lc-wo-serif);
	font-size: 24px;
	font-weight: 300;
	line-height: 32px;
	letter-spacing: 0.2px;
	color: #ffffff;
}

.lc-wo .lc-wo-messages__item a {
	color: inherit;
	text-decoration: underline;
}

/* The section is a wrapping flex container with a 700px min-height (TEC); without this the
   spare height is spread between the rows when the list is short (e.g. no results). */
.lc-wo.tribe-events-view section.tribe-common-l-container {
	align-content: flex-start;
}

/* ---------- Grid ---------- */
.lc-wo.tribe-events-view section.tribe-common-l-container ul.tribe-events-calendar-list {
	display: grid;
	grid-template-columns: repeat(3, 400px);
	column-gap: var(--lc-wo-column-gap);
	row-gap: var(--lc-wo-row-gap);
	justify-content: start;
	box-sizing: border-box;
	width: calc(100% + 2 * var(--lc-wo-outset-grid)) !important;
	max-width: none;
	margin: 0 calc(-1 * var(--lc-wo-outset-grid));
	padding: 0 !important;
	list-style: none;
}

.lc-wo.tribe-events-view section.tribe-common-l-container ul.tribe-events-calendar-list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Month heading ---------- */
.lc-wo.tribe-events-view section.tribe-common-l-container ul.tribe-events-calendar-list > li.lc-wo-month {
	grid-column: 1 / -1;
	margin-top: calc(var(--lc-wo-month-gap) - var(--lc-wo-row-gap));
	margin-bottom: calc(var(--lc-wo-heading-to-cards) - var(--lc-wo-row-gap));
}

.lc-wo.tribe-events-view section.tribe-common-l-container ul.tribe-events-calendar-list > li.lc-wo-month:first-child {
	margin-top: 0;
}

.lc-wo .lc-wo-month__title {
	margin: 0;
	padding: 0;
	font-family: var(--lc-wo-serif);
	font-size: 49px;
	font-weight: 300;
	line-height: 73px;
	letter-spacing: 0.29px;
	text-transform: capitalize;
	color: var(--lc-wo-black);
}

/* Rules above and below the month title. In the XD file these are the edges of a full-bleed
   background band, so they run the whole window width (body has overflow-x: hidden, which clips
   the scrollbar overhang of 100vw). Colour #E2E2E2 from the design palette, not gold. */
.lc-wo .lc-wo-month__title {
	position: relative;
}

.lc-wo .lc-wo-month__title::before,
.lc-wo .lc-wo-month__title::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	height: 1px;
	background: var(--lc-wo-rule);
}

.lc-wo .lc-wo-month__title::before {
	top: -20px;
}

.lc-wo .lc-wo-month__title::after {
	bottom: -20px;
}

/* ---------- Card ---------- */
.lc-wo .lc-wo-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.lc-wo .lc-wo-card__media {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: var(--lc-wo-image-height);
	border: 1px solid var(--lc-wo-gold);
	background: #ffffff;
	overflow: hidden;
}

.lc-wo .lc-wo-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	outline: 0;
}

.lc-wo .lc-wo-card__image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* Hover: mirrors the homepage event cards (title to gold, image scales 1.02). */
.lc-wo .lc-wo-card__media:hover .lc-wo-card__image {
	transform: scale(1.02);
}

.lc-wo .lc-wo-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	background: #ffffff;
	font-family: var(--lc-wo-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--lc-wo-red);
}

.lc-wo .lc-wo-card__title {
	margin: var(--lc-wo-title-top) 0 0;
	padding: 0;
	font-family: var(--lc-wo-serif);
	font-size: 28px;
	font-weight: 300;
	line-height: 41px;
	letter-spacing: 0.17px;
	text-transform: none;
	color: var(--lc-wo-black);
}

.lc-wo .lc-wo-card__link,
.lc-wo .lc-wo-card__link:visited {
	border: 0;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.lc-wo .lc-wo-card__link:hover,
.lc-wo .lc-wo-card__link:focus-visible {
	color: var(--lc-wo-gold);
	text-decoration: none;
}

.lc-wo .lc-wo-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: var(--lc-wo-excerpt-top) 0 0;
	padding: 0;
	font-family: var(--lc-wo-sans);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 20.5px;
	letter-spacing: -0.36px;
	color: var(--lc-wo-dark);
}

.lc-wo .lc-wo-card__meta-label {
	margin: var(--lc-wo-label-top) 0 0;
	padding: 0;
	font-family: var(--lc-wo-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 2.7px;
	text-transform: uppercase;
	color: var(--lc-wo-black);
}

.lc-wo .lc-wo-card__datetime {
	margin: var(--lc-wo-date-top) 0 0;
	padding: 0;
	font-family: var(--lc-wo-sans);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: 0.23px;
	color: var(--lc-wo-dark);
}

/* Says the event runs on dates beyond the one on this card. Set below the date and
 * lighter than it, so the date stays the thing you read first. */
.lc-wo .lc-wo-card__dates-note {
	margin: 4px 0 0;
	padding: 0;
	font-family: var(--lc-wo-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.2px;
	color: rgba(0, 0, 0, 0.6);
}

/* ---------- Responsive (spec 8.4) ---------- */
@media (max-width: 1329px) {
	.lc-wo {
		--lc-wo-outset-filter: 0px;
		--lc-wo-outset-grid: 0px;
	}

	.lc-wo.tribe-events-view section.tribe-common-l-container > .lc-wo-filter,
	.lc-wo .lc-wo-filter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	}

	.lc-wo .lc-wo-filter__select,
	.lc-wo .lc-wo-filter__search {
		width: 100%;
	}

	.lc-wo.tribe-events-view section.tribe-common-l-container ul.tribe-events-calendar-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lc-wo .lc-wo-card__media {
		height: auto;
		aspect-ratio: 400 / 305;
	}

	/* The link fills the aspect-ratio box so the image keeps object-fit: cover. */
	.lc-wo .lc-wo-card__media-link {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: auto;
	}
}

@media (max-width: 1023px) {
	.lc-wo {
		--lc-wo-filter-to-heading: 60px;
		--lc-wo-column-gap: 30px;
		--lc-wo-row-gap: 50px;
		--lc-wo-heading-to-cards: 60px;
		--lc-wo-month-gap: 60px;
	}

	/* One column: search, month, category, Apply - the same 10px rhythm as before. */
	.lc-wo.tribe-events-view section.tribe-common-l-container > .lc-wo-filter,
	.lc-wo .lc-wo-filter {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"search"
			"month"
			"category"
			"apply";
		align-items: stretch;
		row-gap: var(--lc-wo-filter-gap);
	}

	.lc-wo .lc-wo-filter__apply,
	.lc-wo .lc-wo-filter__apply:visited {
		width: 100%;
		margin-left: 0;
	}

	.lc-wo.tribe-events-view section.tribe-common-l-container ul.tribe-events-calendar-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lc-wo .lc-wo-month__title {
		font-size: 36px;
		line-height: 48px;
	}

	.lc-wo .lc-wo-card__title {
		font-size: 24px;
		line-height: 34px;
	}
}

@media (max-width: 639px) {
	.lc-wo {
		--lc-wo-row-gap: 40px;
		--lc-wo-heading-to-cards: 50px;
	}

	.lc-wo.tribe-events-view section.tribe-common-l-container ul.tribe-events-calendar-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-wo .lc-wo-month__title {
		font-size: 32px;
		line-height: 42px;
	}
}