/*
 * Single event page (What's On - Event details).
 * Design: XD "Lympne Castle - What's on Events - Event details" (1920 x 6192).
 * Container 1300px centred; every rule is scoped under .lc-es.
 */
.lc-es {
	--lc-es-gold: #cfaf58;
	--lc-es-gold-line: #c6aa57;
	--lc-es-dark: #2f3528;
	--lc-es-green: #74825f;
	--lc-es-grey: #8e918a;
	--lc-es-beige: #fdfcfa;
	--lc-es-cream: #f8f5ed;
	--lc-es-mist: #f5f4f2;
	--lc-es-rule: #e2e2e2;
	--lc-es-serif: 'ivypresto-display', Georgia, serif;
	--lc-es-sans: 'Work Sans', Arial, sans-serif;
	--lc-es-container: 1300px;

	box-sizing: border-box;
	width: 100%;
	overflow-x: clip;
	background: #ffffff;
	font-family: var(--lc-es-sans);
	color: var(--lc-es-dark);
}

.lc-es *,
.lc-es *::before,
.lc-es *::after {
	box-sizing: border-box;
}

.lc-es img {
	display: block;
	max-width: 100%;
}

.lc-es .lc-es-icon {
	display: block;
	width: 27px;
	height: 27px;
	color: var(--lc-es-gold);
}

/* ---------- Shared type ---------- */
.lc-es .lc-es-eyebrow {
	margin: 0;
	padding: 0;
	font-family: var(--lc-es-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 5.78px;
	text-transform: uppercase;
	color: var(--lc-es-gold);
}

.lc-es .lc-es-eyebrow--light {
	color: var(--lc-es-gold);
}

/* ---------- Intro ---------- */
.lc-es .lc-es-intro {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lc-es-container);
	margin: 0 auto;
	padding: 96px 0 0;
	text-align: center;
}

.lc-es .lc-es-title {
	margin: 10px 0 0;
	padding: 0;
	font-family: var(--lc-es-serif);
	font-size: 54px;
	font-weight: 300;
	line-height: 80px;
	letter-spacing: 0.32px;
	color: #000000;
	text-transform: capitalize;
}

.lc-es .lc-es-title__suffix {
	font-style: italic;
	font-weight: 200;
	letter-spacing: 0.22px;
}

/* ---------- Event: image + body + details card ---------- */
.lc-es .lc-es-event {
	display: grid;
	grid-template-columns: 840px 420px;
	column-gap: 40px;
	align-items: start;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lc-es-container);
	margin: 0 auto 100px;
	padding: 100px 0 0;
}

.lc-es .lc-es-figure {
	position: relative;
	margin: 0;
	padding: 0;
	background: var(--lc-es-rule);
}

.lc-es .lc-es-figure__img {
	width: 100%;
	height: 480px;
	object-fit: cover;
}

.lc-es .lc-es-figure__frame {
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	border: 1px solid var(--lc-es-gold-line);
	pointer-events: none;
}

.lc-es .lc-es-body {
	margin: 40px 0 0;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: var(--lc-es-dark);
}

.lc-es .lc-es-body > *:first-child {
	margin-top: 0;
}

.lc-es .lc-es-body p {
	margin: 0 0 23px;
	font-size: 14.5px;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: var(--lc-es-dark);
}

.lc-es .lc-es-body p:last-child {
	margin-bottom: 0;
}

.lc-es .lc-es-body strong,
.lc-es .lc-es-body b {
	font-weight: 700;
}

.lc-es .lc-es-body ul,
.lc-es .lc-es-body ol {
	margin: 0 0 23px;
	padding-left: 18px;
}

.lc-es .lc-es-body li {
	margin: 0;
	font-size: 14.5px;
	line-height: 23px;
	letter-spacing: 0.23px;
}

/* Details card. No min-height: with all five rows it is the design's 732px on its own, and
   one with fewer rows (a ticketed event has no Reservations row) closes up instead of
   leaving a gap under the button. */
.lc-es .lc-es-card {
	box-sizing: border-box;
	width: 420px;
	padding: 44px 49px 53px;
	background: var(--lc-es-beige);
	border: 1px solid var(--lc-es-gold-line);
}

.lc-es .lc-es-card__title {
	margin: 0;
	padding: 0;
	font-family: var(--lc-es-serif);
	font-size: 49px;
	font-weight: 300;
	line-height: 73px;
	letter-spacing: 0.29px;
	color: #000000;
	text-align: center;
	text-transform: capitalize;
}

.lc-es .lc-es-card__rule {
	display: block;
	width: 100%;
	height: 1px;
	margin: 40px 0 0;
	background: var(--lc-es-rule);
}

.lc-es .lc-es-card__rows + .lc-es-card__rule {
	margin-top: 41px;
}

.lc-es .lc-es-card__rows {
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.lc-es .lc-es-row {
	display: flex;
	align-items: flex-start;
	gap: 27px;
	margin: 0 0 31.5px;
	padding: 0;
	list-style: none;
}

.lc-es .lc-es-row:last-child {
	margin-bottom: 0;
}

.lc-es .lc-es-row__icon {
	flex: 0 0 auto;
	display: block;
	width: 27px;
	height: 27px;
	margin-left: 5px;
}

.lc-es .lc-es-row__text {
	display: block;
	min-width: 0;
}

.lc-es .lc-es-row__label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 4.88px;
	text-transform: uppercase;
	color: #000000;
}

.lc-es .lc-es-row__value {
	display: block;
	margin-top: -0.5px;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: var(--lc-es-dark);
	word-break: break-word;
}

/* Second line of a row: only the Date row uses it, to say how a recurring event repeats.
 * Set slightly smaller and lighter so the occurrence date above stays the headline. */
.lc-es .lc-es-row__note {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0.23px;
	color: rgba(0, 0, 0, 0.66);
}

.lc-es .lc-es-row__value a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.lc-es .lc-es-row__value a:hover,
.lc-es .lc-es-row__value a:focus-visible {
	color: var(--lc-es-gold);
}

/* Buttons */
.lc-es .lc-es-btn,
.lc-es .lc-es-btn:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 188px;
	height: 60px;
	margin: 44px 0 0;
	padding: 0;
	background: var(--lc-es-dark);
	border: 0;
	border-radius: 0;
	font-family: var(--lc-es-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 2.1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--lc-es-mist);
	box-shadow: inset 0 0 0 2px var(--lc-es-dark), inset 0 0 0 3px var(--lc-es-gold);
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.lc-es .lc-es-btn:hover,
.lc-es .lc-es-btn:focus-visible {
	background: var(--lc-es-gold);
	box-shadow: inset 0 0 0 2px var(--lc-es-gold), inset 0 0 0 3px var(--lc-es-dark);
	color: var(--lc-es-dark);
	text-decoration: none;
}

/* The site's arrow mark, matched to the "Explore our media coverage" button: same path,
 * same 14.5px box, same #cfaf58. Used on the story block's call to action. */
.lc-es .lc-es-arrow {
	flex: 0 0 auto;
	display: block;
	width: 14.5px;
	height: 14.5px;
	fill: var(--lc-es-gold);
	transition: fill 0.25s ease;
}

/* ---------- Story ---------- */
.lc-es .lc-es-story {
	margin: 0;
	padding: 100px 0 120px;
	background: var(--lc-es-beige);
}

.lc-es .lc-es-story__item {
	display: grid;
	grid-template-columns: 650px 650px;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lc-es-container);
	margin: 0 auto;
}

.lc-es .lc-es-story__media {
	position: relative;
	margin: 0;
	padding: 0;
	height: 550px;
	background: var(--lc-es-rule);
	overflow: hidden;
}

.lc-es .lc-es-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lc-es .lc-es-story__frame {
	position: absolute;
	top: 15px;
	right: 15px;
	bottom: 15px;
	left: 15px;
	border: 1px solid var(--lc-es-gold-line);
	pointer-events: none;
}

.lc-es .lc-es-story__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	height: 550px;
	padding: 159px 125px 0;
	background: #ffffff;
	border: 1px solid var(--lc-es-gold);
}

.lc-es .lc-es-story__item--reverse .lc-es-story__media {
	order: 2;
}

.lc-es .lc-es-story__item--reverse .lc-es-story__text {
	order: 1;
}

.lc-es .lc-es-story__title {
	margin: 0;
	padding: 0;
	font-family: var(--lc-es-serif);
	font-size: 42px;
	font-weight: 300;
	line-height: 63px;
	letter-spacing: 0.42px;
	color: #000000;
	text-transform: capitalize;
}

.lc-es .lc-es-story__copy {
	width: 400px;
	max-width: 100%;
	margin: 30px 0 0;
	padding: 0;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: var(--lc-es-dark);
}

.lc-es .lc-es-link,
.lc-es .lc-es-link:visited {
	display: inline-flex;
	align-items: center;
	/* 11px gap to match the site's own arrow button. The negative margin keeps the label
	 * starting 23px in, where the design puts it, now that the mark is 14.5px wide
	 * rather than the 30.4px of the drawn arrow it replaced (-2.5 + 14.5 + 11 = 23). */
	gap: 11px;
	margin: 27.5px 0 0 -2.5px;
	padding: 0;
	border: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 23px;
	letter-spacing: 0.23px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--lc-es-dark);
}

/* Arrow: 21px shaft plus a filled head, exactly as drawn in the design. */
.lc-es .lc-es-link__text {
	display: inline-block;
}

.lc-es .lc-es-link:hover,
.lc-es .lc-es-link:focus-visible {
	color: var(--lc-es-gold);
}

/* ---------- Enquiry (green) ---------- */
.lc-es .lc-es-enquiry {
	position: relative;
	padding: 115px 0 140px;
	background-color: var(--lc-es-dark);
	background-image: linear-gradient(180deg, #74825f 0%, #2f3528 100%);
	overflow: hidden;
}

/* Carpet pattern sits at 10% over the green, then a second gradient fades it out. */
.lc-es .lc-es-enquiry::before,
.lc-es .lc-es-enquiry::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

.lc-es .lc-es-enquiry::before {
	background-image: url('carpet.webp');
	background-repeat: repeat;
	background-size: 1491px 1055px;
	background-position: center top;
	opacity: 0.1;
}

.lc-es .lc-es-enquiry::after {
	background-image: linear-gradient(180deg, rgba(116, 130, 95, 0) 0%, #2f3528 100%);
}

.lc-es .lc-es-enquiry__frame {
	position: absolute;
	z-index: 2;
	top: 15px;
	right: 15px;
	bottom: 15px;
	left: 15px;
	border: 1px solid var(--lc-es-gold);
	pointer-events: none;
}

.lc-es .lc-es-enquiry__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lc-es-container);
	margin: 0 auto;
	text-align: center;
}

.lc-es .lc-es-enquiry__title {
	margin: 10px 0 0;
	padding: 0;
	font-family: var(--lc-es-serif);
	font-size: 54px;
	font-weight: 300;
	line-height: 80px;
	letter-spacing: 0.32px;
	color: #ffffff;
	text-transform: capitalize;
}

/* ---------- Form card ---------- */
.lc-es .lc-es-form {
	box-sizing: border-box;
	width: 100%;
	min-height: 937px;
	margin: 60px 0 0;
	padding: 90px 180px 70px;
	background: var(--lc-es-cream);
	border: 1px solid var(--lc-es-gold-line);
	text-align: center;
}

.lc-es .lc-es-form__intro {
	width: 750px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: var(--lc-es-dark);
	text-align: center;
}

.lc-es .lc-es-form .elementor-form {
	margin-top: 80px;
	text-align: left;
}

.lc-es .lc-es-form .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -20px;
}

.lc-es .lc-es-form .elementor-field-group {
	box-sizing: border-box;
	padding: 0 20px;
	margin: 0 0 41px;
}

.lc-es .lc-es-form .elementor-field-group.elementor-col-50 {
	width: 50%;
}

.lc-es .lc-es-form .elementor-field-group.elementor-col-100 {
	width: 100%;
}

.lc-es .lc-es-form .elementor-field-label {
	display: block;
	margin: 0 0 15px;
	padding: 0;
	font-family: var(--lc-es-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #000000 !important;
}

.lc-es .lc-es-form .elementor-field-group.elementor-field-required .elementor-field-label {
	color: var(--lc-es-gold);
}

.lc-es .lc-es-form .elementor-mark-required .elementor-field-label:after {
	content: ' *';
	color: inherit;
}

.lc-es .lc-es-form .elementor-field-textual,
.lc-es .lc-es-form input[type='text'],
.lc-es .lc-es-form input[type='email'],
.lc-es .lc-es-form input[type='tel'],
.lc-es .lc-es-form input[type='number'],
.lc-es .lc-es-form select,
.lc-es .lc-es-form textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 56px;
	padding: 0 24px;
	background-color: #ffffff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--lc-es-sans);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: #000000;
}

/* The arrow is the form widget's own caret; the theme draws none (two arrows showed, 2026-10-12). */
.lc-es .lc-es-form select {
	background-image: none;
	padding-right: 48px;
	cursor: pointer;
}

/* Recurring events: a date with a single time shows it, fixed - no arrow, no clicks. */
.lc-es .lc-es-form select.is-locked {
	/* !important: the form widget's own field colour is printed with a higher specificity. */
	background-color: #f4f1ea !important;
	cursor: default;
	pointer-events: none;
}

.lc-es .lc-es-form .elementor-select-wrapper:has(select.is-locked) .select-caret-down-wrapper {
	display: none;
}

.lc-es .lc-es-form textarea {
	height: 200px;
	padding: 16px 24px;
	resize: vertical;
}

.lc-es .lc-es-form ::placeholder {
	color: var(--lc-es-grey);
	opacity: 1;
}

.lc-es .lc-es-form .elementor-field-type-acceptance {
	display: flex;
	justify-content: center;
	margin-top: -21px;
	margin-bottom: 60px;
}

.lc-es .lc-es-form .elementor-field-type-acceptance .elementor-field-subgroup,
.lc-es .lc-es-form .elementor-field-option {
	display: flex;
	align-items: center;
	gap: 15px;
}

.lc-es .lc-es-form .elementor-field-type-acceptance input[type='checkbox'] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	background: #ffffff;
	border: 1px solid var(--lc-es-gold);
	border-radius: 0;
	cursor: pointer;
}

.lc-es .lc-es-form .elementor-field-type-acceptance input[type='checkbox']:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8.5' fill='none' stroke='%23CFAF58' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

.lc-es .lc-es-form .elementor-field-type-acceptance label,
.lc-es .lc-es-form .elementor-field-option label {
	margin: 0;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: 0.06px;
	text-transform: none;
	color: #000000;
}

.lc-es .lc-es-form .elementor-field-type-submit {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 0;
}

.lc-es .lc-es-form .elementor-button,
.lc-es .lc-es-form button[type='submit'] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 250px;
	height: 60px;
	padding: 0;
	background: var(--lc-es-dark);
	border: 0;
	border-radius: 0;
	font-family: var(--lc-es-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 2.1px;
	text-transform: uppercase;
	color: var(--lc-es-mist);
	cursor: pointer;
	/* The gold line is an inset shadow, not a 1px ::after border: at some browser zoom
	 * levels a hairline pseudo-element border loses its bottom edge, which is what the
	 * details card button was reported for. A shadow is painted as one box and cannot
	 * drop a side. */
	box-shadow: inset 0 0 0 2px var(--lc-es-dark), inset 0 0 0 3px var(--lc-es-gold);
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.lc-es .lc-es-form .elementor-button:hover,
.lc-es .lc-es-form .elementor-button:focus-visible,
.lc-es .lc-es-form button[type='submit']:hover,
.lc-es .lc-es-form button[type='submit']:focus-visible {
	background: var(--lc-es-gold);
	box-shadow: inset 0 0 0 2px var(--lc-es-gold), inset 0 0 0 3px var(--lc-es-dark);
	color: var(--lc-es-dark);
}

.lc-es .lc-es-form .elementor-button .elementor-button-content-wrapper {
	gap: 0;
}

.lc-es .lc-es-form .elementor-message {
	font-family: var(--lc-es-sans);
	font-size: 14.5px;
	line-height: 23px;
}

/* Elementor form: these beat the plugin's own row-gap / column-gap / button rules. */
.lc-es .lc-es-form .elementor-form .elementor-form-fields-wrapper {
	margin-right: -20px !important;
	margin-left: -20px !important;
}

.lc-es .lc-es-form .elementor-form .elementor-button,
.lc-es .lc-es-form .elementor-form .elementor-button .elementor-button-text {
	color: var(--lc-es-mist) !important;
}

.lc-es .lc-es-form .elementor-form .elementor-button:hover,
.lc-es .lc-es-form .elementor-form .elementor-button:hover .elementor-button-text {
	color: var(--lc-es-dark);
}

.lc-es .lc-es-form .elementor-widget-wrap,
.lc-es .lc-es-form .elementor-widget-wrap.elementor-element-populated {
	padding: 0;
}

.lc-es .lc-es-form .elementor-form .elementor-field-group {
	padding-right: 20px !important;
	padding-left: 20px !important;
	margin-bottom: 40px !important;
}

.lc-es .lc-es-form .elementor-form .elementor-field-group.elementor-field-type-acceptance {
	margin-top: -21px !important;
	margin-bottom: 61.5px !important;
}

.lc-es .lc-es-form .elementor-form .elementor-field-group.elementor-field-type-submit {
	margin-bottom: 0 !important;
}

.lc-es .lc-es-form .elementor-form textarea.elementor-field-textual {
	height: 200px !important;
	padding: 16px 24px !important;
}

.lc-es .lc-es-form .elementor-form .elementor-field-type-submit .elementor-button {
	flex: 0 0 auto !important;
	width: 250px !important;
	max-width: 250px !important;
}

.lc-es .lc-es-form .elementor-form .elementor-field-subgroup {
	display: flex;
	justify-content: center;
	width: auto;
	margin: 0 auto;
}

.lc-es .lc-es-form .elementor-form .elementor-field-subgroup .elementor-field-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	width: 100%;
}

/* ---------- Upcoming ---------- */
.lc-es .lc-es-upcoming .lc-es-eyebrow {
	color: var(--lc-es-gold-line);
}

.lc-es .lc-es-upcoming {
	padding: 104px 0 146.5px;
	background: var(--lc-es-mist);
}

.lc-es .lc-es-upcoming__head {
	display: grid;
	grid-template-columns: 1fr 580px;
	column-gap: 40px;
	align-items: start;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lc-es-container);
	margin: 0 auto;
}

.lc-es .lc-es-upcoming__head {
	position: relative;
}

.lc-es .lc-es-upcoming__head::after {
	content: '';
	position: absolute;
	top: 59px;
	left: 50%;
	width: 1px;
	height: 101px;
	background: var(--lc-es-gold-line);
}

.lc-es .lc-es-upcoming__title {
	margin: 17.5px 0 0;
	padding: 0;
	font-family: var(--lc-es-serif);
	font-size: 54px;
	font-weight: 300;
	line-height: 65px;
	letter-spacing: 0.32px;
	color: #000000;
	text-transform: capitalize;
}

.lc-es .lc-es-upcoming__title em {
	display: block;
	font-style: italic;
	font-weight: 200;
	letter-spacing: 0.22px;
}

.lc-es .lc-es-upcoming__title span {
	display: block;
}

.lc-es .lc-es-upcoming__intro {
	margin: 59px 0 0;
	padding: 0;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0;
	color: var(--lc-es-dark);
}

/* The cards sit in a scroll-snap track. It works with no JavaScript at all - native
 * swipe on touch, arrow keys once focused - and event-single.js only adds the dots and
 * arrows on top, and only when the track actually overflows. */
.lc-es .lc-es-upcoming__viewport {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lc-es-container);
	margin: 105.5px auto 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* The arrows and dots move the track by assigning scrollLeft; this is what eases it. */
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* The design shows no scrollbar under the cards; the dots are the position cue. */
	scrollbar-width: none;
}

.lc-es .lc-es-upcoming__viewport::-webkit-scrollbar {
	display: none;
}

.lc-es .lc-es-upcoming__viewport:focus-visible {
	outline: 2px solid var(--lc-es-gold);
	outline-offset: 4px;
}

.lc-es .lc-es-upcoming__grid {
	display: flex;
	/* flex-start, not center: once the track overflows, centring pushes the first cards
	 * into negative scroll space that can never be reached. */
	justify-content: flex-start;
	column-gap: 40px;
	box-sizing: border-box;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-es .lc-es-ucard {
	flex: 0 0 400px;
	scroll-snap-align: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-es .lc-es-ucard__media {
	position: relative;
	display: block;
	width: 100%;
	height: 305px;
	border: 1px solid var(--lc-es-gold);
	background: #ffffff;
	overflow: hidden;
}

.lc-es .lc-es-ucard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.lc-es .lc-es-ucard__media:hover img {
	transform: scale(1.02);
}

.lc-es .lc-es-ucard__title {
	margin: 15px 0 0;
	padding: 0;
	font-family: var(--lc-es-serif);
	font-size: 28px;
	font-weight: 300;
	line-height: 41px;
	letter-spacing: 0.17px;
	color: #000000;
	text-transform: capitalize;
}

.lc-es .lc-es-ucard__title a {
	border: 0;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.lc-es .lc-es-ucard__title a:hover,
.lc-es .lc-es-ucard__title a:focus-visible {
	color: var(--lc-es-gold);
}

.lc-es .lc-es-ucard__label {
	margin: 14px 0 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 2.7px;
	text-transform: uppercase;
	color: #000000;
}

.lc-es .lc-es-ucard__date {
	margin: 0.5px 0 0;
	padding: 0;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: var(--lc-es-dark);
}

/* ---------- Ticket form ----------
 * Event Tickets' own form, appended to the description by inc/ticket-sales.php for the
 * events that sell online. Only its look changes here - markup, script and checkout stay
 * the plugin's. Drawn as a sibling of the Event details card: the same cream panel with
 * the gold hairline, a serif heading, tracked Work Sans labels and the site's dark button.
 * The selectors are long on purpose: the plugin's own rules are scoped under
 * .tribe-common and would otherwise win. */
.lc-es .lympne-event-tickets {
	margin: 40px 0 0;
	/* The card's "Get Tickets" button jumps here; clear the sticky nav. */
	scroll-margin-top: 90px;
}

.lc-es .lympne-event-tickets .tribe-common.tribe-tickets__tickets-wrapper {
	/* The plugin's own colour and font tokens, so the parts not restyled below (the
	 * quantity number, the footer totals, "Sold Out", a struck-through price) follow
	 * the page instead of its navy and Helvetica. */
	--tec-color-text-primary: var(--lc-es-dark);
	--tec-font-family-sans-serif: var(--lc-es-sans);
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: var(--lc-es-sans);
	color: var(--lc-es-dark);
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-form {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 37px 49px 49px;
	background: var(--lc-es-beige);
	border: 1px solid var(--lc-es-gold-line);
	border-radius: 0;
	box-shadow: none;
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-title {
	margin: 0;
	padding: 0 0 26px;
	border: 0;
	border-bottom: 1px solid var(--lc-es-rule);
	font-family: var(--lc-es-serif);
	font-size: 40px;
	font-weight: 300;
	line-height: 56px;
	letter-spacing: 0.29px;
	color: #000000;
	text-transform: none;
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__notice {
	margin: 24px 0 0;
	padding: 14px 18px;
	background: #ffffff;
	border: 1px solid var(--lc-es-rule);
	border-left: 3px solid var(--lc-es-gold);
	border-radius: 0;
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets-notice__content {
	font-family: var(--lc-es-sans);
	font-size: 13.5px;
	line-height: 20px;
	color: var(--lc-es-dark);
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item {
	margin: 0;
	padding: 26px 0;
	border: 0;
	border-bottom: 1px solid var(--lc-es-rule);
	align-items: center;
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item-content-title {
	font-family: var(--lc-es-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 4.88px;
	text-transform: uppercase;
	color: #000000;
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item-extra-price,
.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-sale-price {
	font-family: var(--lc-es-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: var(--lc-es-dark);
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item-extra-available {
	font-family: var(--lc-es-sans);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.23px;
	color: rgba(0, 0, 0, 0.66);
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item-quantity {
	font-family: var(--lc-es-sans);
	color: var(--lc-es-dark);
}

/* The - and + are the plugin's buttons; the parent theme would paint them magenta. */
.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item-quantity button,
.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item-quantity button:hover,
.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item-quantity button:focus {
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--lc-es-gold);
	border-radius: 50%;
	box-shadow: none;
	font-family: var(--lc-es-sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	color: var(--lc-es-dark);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

@media (hover: hover) {
	.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item-quantity button:hover {
		background: var(--lc-es-gold);
		color: var(--lc-es-dark);
	}
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item-quantity button:focus:not(:focus-visible) {
	outline: none;
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-item-quantity button:focus-visible {
	background: var(--lc-es-gold);
	color: var(--lc-es-dark);
	outline: 2px solid var(--lc-es-dark);
	outline-offset: 2px;
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input {
	font-family: var(--lc-es-sans);
	font-size: 20px;
	font-weight: 600;
	line-height: 32px;
	color: var(--lc-es-dark);
	background: transparent;
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer {
	margin: 0;
	padding: 30px 0 0;
	border: 0;
	align-items: center;
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer-quantity,
.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer-total {
	font-family: var(--lc-es-sans);
	font-size: 14.5px;
	line-height: 23px;
	letter-spacing: 0.23px;
	color: var(--lc-es-dark);
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer-quantity-number,
.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer-total-wrap {
	font-weight: 600;
	color: var(--lc-es-dark);
}

.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer-total {
	margin-right: 28px;
}

/* The site's button: dark block, gold hairline inside, gold on hover - as the card's. */
.lc-es .lympne-event-tickets .tribe-common .tribe-common-c-btn.tribe-tickets__tickets-buy {
	box-sizing: border-box;
	width: auto;
	min-width: 188px;
	height: 60px;
	margin: 0;
	padding: 0 32px;
	background: var(--lc-es-dark);
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 0 0 2px var(--lc-es-dark), inset 0 0 0 3px var(--lc-es-gold);
	font-family: var(--lc-es-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 2.1px;
	text-transform: uppercase;
	color: var(--lc-es-mist);
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.lc-es .lympne-event-tickets .tribe-common .tribe-common-c-btn.tribe-tickets__tickets-buy:not(:disabled):hover,
.lc-es .lympne-event-tickets .tribe-common .tribe-common-c-btn.tribe-tickets__tickets-buy:not(:disabled):focus-visible {
	background: var(--lc-es-gold);
	box-shadow: inset 0 0 0 2px var(--lc-es-gold), inset 0 0 0 3px var(--lc-es-dark);
	color: var(--lc-es-dark);
}

/* Until a quantity is picked the plugin disables the button. */
.lc-es .lympne-event-tickets .tribe-common .tribe-common-c-btn.tribe-tickets__tickets-buy:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

@media (max-width: 1023px) {
	.lc-es .lympne-event-tickets {
		scroll-margin-top: 24px;
	}
}

/* ---------- Empty-field states ----------
 * Every piece of copy comes from ACF, so any element can be absent. These rules keep the
 * vertical rhythm correct when something above an element is not rendered. */
.lc-es .lc-es-title--no-eyebrow {
	margin-top: 0;
}

.lc-es .lc-es-body--no-image {
	margin-top: 0;
}

.lc-es .lc-es-event--no-card {
	grid-template-columns: minmax(0, 840px);
}

.lc-es .lc-es-card > .lc-es-card__rows:first-child,
.lc-es .lc-es-card > .lc-es-btn:first-child {
	margin-top: 0;
}

.lc-es .lc-es-card__title + .lc-es-btn {
	margin-top: 40px;
}

.lc-es .lc-es-enquiry__title--no-eyebrow {
	margin-top: 0;
}

.lc-es .lc-es-form--no-intro .elementor-form {
	margin-top: 0;
}

.lc-es .lc-es-upcoming__title--no-eyebrow {
	margin-top: 0;
}

.lc-es .lc-es-upcoming__grid--no-head {
	margin-top: 0;
}

.lc-es .lc-es-ucard__title--no-image {
	margin-top: 0;
}

.lc-es .lc-es-ucard__date--no-label {
	margin-top: 14px;
}

/* Slider controls. The dots are measured from the design: 10px circles on a 15px centre
 * pitch, a 1px #cfaf58 ring, the active one filled. The design draws no arrows here at
 * all - those are a client addition, so they flank the dot row, which is the only place
 * the design gives any anchor for. */
.lc-es .lc-es-upcoming__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lc-es-container);
	/* 66.5px below the cards, leaving 70px to the end of the section: the two plus the
	 * 10px dot height are exactly the 146.5px the section already reserved. */
	margin: 66.5px auto 0;
}

.lc-es .lc-es-upcoming__controls[hidden] {
	display: none;
}

.lc-es .lc-es-slider__dots {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-es .lc-es-slider__dot-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-es .lc-es-slider__dot {
	display: block;
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--lc-es-gold);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.lc-es .lc-es-slider__dot.is-active {
	background: var(--lc-es-gold);
}

.lc-es .lc-es-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.lc-es .lc-es-slider__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

/* The right-pointing mark mirrored, so both arrows are the one shared icon. */
.lc-es .lc-es-slider__arrow--prev .lc-es-arrow {
	transform: scaleX(-1);
}

/* "View all events" is styled on the enquiry form's "Send your enquiry" submit: same
 * 250x60 dark block, same type, same gold line inset 2px, same inversion on hover.
 * The one deliberate difference is how that inner line is drawn - box-shadow rather than
 * the submit button's ::after - because a 1px pseudo-element border on this site drops
 * its bottom edge at some browser zoom levels, which is what the details card button hit. */
.lc-es .lc-es-viewall,
.lc-es .lc-es-viewall:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 250px;
	height: 60px;
	margin: 40px auto 0;
	padding: 0;
	background: var(--lc-es-dark);
	border: 0;
	border-radius: 0;
	font-family: var(--lc-es-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 2.1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--lc-es-mist);
	box-shadow: inset 0 0 0 2px var(--lc-es-dark), inset 0 0 0 3px var(--lc-es-gold);
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.lc-es .lc-es-upcoming__foot {
	display: flex;
	justify-content: center;
	width: 100%;
}

.lc-es .lc-es-viewall:hover,
.lc-es .lc-es-viewall:focus-visible {
	background: var(--lc-es-gold);
	box-shadow: inset 0 0 0 2px var(--lc-es-gold), inset 0 0 0 3px var(--lc-es-dark);
	color: var(--lc-es-dark);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.lc-es .lc-es-upcoming__viewport {
		scroll-behavior: auto;
	}

	.lc-es .lc-es-ucard__media img,
	.lc-es .lc-es-slider__dot,
	.lc-es .lc-es-slider__arrow {
		transition: none;
	}

	.lc-es .lc-es-ucard__media:hover img {
		transform: none;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1359px) {
	.lc-es .lc-es-intro,
	.lc-es .lc-es-event,
	.lc-es .lc-es-story__item,
	.lc-es .lc-es-enquiry__inner,
	.lc-es .lc-es-upcoming__head,
	.lc-es .lc-es-upcoming__viewport {
		max-width: 100%;
	}

	/* Below the 1300px container the page needs its own side gutter, the same 30px the
	 * upcoming slider uses, or the photo, description, card and ticket form touch the edges -
	 * and the enquiry form card covers the green, which should show either side of it. */
	.lc-es .lc-es-intro,
	.lc-es .lc-es-event,
	.lc-es .lc-es-enquiry__inner {
		padding-left: 30px;
		padding-right: 30px;
	}

	.lc-es .lc-es-upcoming__grid {
		padding-left: 30px;
		padding-right: 30px;
	}

	.lc-es .lc-es-upcoming__controls,
	.lc-es .lc-es-upcoming__foot {
		padding-left: 30px;
		padding-right: 30px;
	}

	.lc-es .lc-es-event {
		grid-template-columns: minmax(0, 1fr) 420px;
	}

	.lc-es .lc-es-figure__img {
		height: auto;
		aspect-ratio: 840 / 480;
	}

	.lc-es .lc-es-story__item {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lc-es .lc-es-story__text {
		padding: 90px 60px 0;
	}

	/* three up: two 40px gaps and the 60px of page padding come off the viewport */
	.lc-es .lc-es-ucard {
		flex: 0 0 calc((100vw - 60px - 80px) / 3);
	}

	.lc-es .lc-es-ucard__media {
		height: auto;
		aspect-ratio: 400 / 305;
	}

	.lc-es .lc-es-form {
		padding-left: 60px;
		padding-right: 60px;
	}
}

@media (max-width: 1023px) {
	.lc-es .lc-es-title,
	.lc-es .lc-es-enquiry__title,
	.lc-es .lc-es-upcoming__title {
		font-size: 40px;
		line-height: 56px;
	}

	.lc-es .lc-es-event {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 50px;
		padding-top: 60px;
	}

	.lc-es .lc-es-card {
		width: 100%;
		min-height: 0;
	}

	.lc-es .lc-es-event {
		margin-bottom: 60px;
	}

	.lc-es .lc-es-story {
		margin-top: 0;
		padding: 60px 0;
	}

	.lc-es .lc-es-story__item,
	.lc-es .lc-es-upcoming__head {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The vertical keyline only makes sense beside the two-column heading. */
	.lc-es .lc-es-upcoming__head::after {
		display: none;
	}

	.lc-es .lc-es-story__media,
	.lc-es .lc-es-story__text {
		height: auto;
	}

	.lc-es .lc-es-story__media {
		aspect-ratio: 650 / 550;
	}

	.lc-es .lc-es-story__text {
		padding: 50px 40px;
	}

	.lc-es .lc-es-story__item--reverse .lc-es-story__media {
		order: 0;
	}

	.lc-es .lc-es-story__item--reverse .lc-es-story__text {
		order: 0;
	}

	.lc-es .lc-es-upcoming__intro {
		margin-top: 24px;
	}

	/* two up */
	.lc-es .lc-es-ucard {
		flex: 0 0 calc((100vw - 60px - 40px) / 2);
	}

	.lc-es .lc-es-upcoming__viewport {
		margin-top: 60px;
	}

	.lc-es .lc-es-form {
		min-height: 0;
		padding: 50px 30px;
	}

	.lc-es .lc-es-form .elementor-form {
		margin-top: 50px;
	}

	.lc-es .lc-es-form .elementor-field-group {
		margin-bottom: 40px;
	}
}

@media (max-width: 639px) {
	.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-form {
		padding: 30px 24px 36px;
	}

	.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-title {
		font-size: 32px;
		line-height: 44px;
	}

	/* Quantity and total share a line inside the panel's margins; the button goes full
	 * width under them. */
	.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		margin: 0;
		padding: 24px 0 0;
	}

	.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer-quantity,
	.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer-total {
		gap: 6px;
		margin: 0 0 18px;
		padding: 0;
		text-align: left;
	}

	.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer--active .tribe-tickets__tickets-footer-quantity,
	.lc-es .lympne-event-tickets .tribe-common .tribe-tickets__tickets-footer--active .tribe-tickets__tickets-footer-total {
		display: flex;
	}

	.lc-es .lympne-event-tickets .tribe-common .tribe-common-c-btn.tribe-tickets__tickets-buy {
		flex: 0 0 100%;
		width: 100%;
		max-width: none;
	}

	.lc-es .lc-es-title,
	.lc-es .lc-es-enquiry__title,
	.lc-es .lc-es-upcoming__title {
		font-size: 32px;
		line-height: 44px;
	}

	.lc-es .lc-es-story__title {
		font-size: 30px;
		line-height: 44px;
	}

	.lc-es .lc-es-card {
		padding: 40px 24px;
	}

	/* one up, with a sliver of the next card showing so the swipe is discoverable */
	.lc-es .lc-es-ucard {
		flex: 0 0 calc(100vw - 60px - 34px);
	}

	.lc-es .lc-es-form .elementor-field-group.elementor-col-50 {
		width: 100%;
	}
}