/*
 * Elementor event layouts (inc/event-layouts.php).
 * Design: Figma "Lympne Open Day 8b". The page itself - layout, spacing, colours, type, the
 * card, sticker, hero frame and button - is built and styled in the Elementor template with the
 * site's global colours and fonts. This file holds only what Elementor's controls cannot do:
 * the description's own typography, the [lc_list] / [lc_offer] / [lc_note] boxes typed into
 * it, parts that hide themselves when an event has nothing to put in them, the gallery's mixed
 * tile sizes, and the enquiry form without the standard page's card around it.
 *
 * The template's top-level containers carry the class lc-el, so these tokens reach every
 * widget inside them in the editor as well as on the page.
 */
.lc-el,
.lc-el-page {
	--lc-el-gold: var(--e-global-color-2b3922d, #cfaf58);
	--lc-el-ink: var(--e-global-color-text, #2f3528);
	--lc-el-green: var(--e-global-color-primary, #74825f);
	--lc-el-cream: var(--e-global-color-c2aae28, #f8f5ed);
	--lc-el-rule: var(--e-global-color-5fada66, #ece4d8);
	--lc-el-rule-strong: var(--e-global-color-cc5e8ed, #dccfc2);
	--lc-el-muted: color-mix(in srgb, var(--lc-el-ink) 72%, transparent);
	--lc-el-serif: var(--e-global-typography-1bdc823-font-family, 'ivypresto-display'), Georgia, serif;
	--lc-el-sans: var(--e-global-typography-8d16b03-font-family, 'Work Sans'), Arial, sans-serif;
	/* Body text on these pages: 16px on 26px, a step up from the site's 14.5px body style
	 * (2026-10-25). Fed into that global's own variables here as well, so the template's
	 * widgets that use it (excerpt, card rows, enquiry intro) follow - on these pages only. */
	--lc-el-text-size: 16px;
	--lc-el-line-height: 26px;
	--e-global-typography-8d16b03-font-size: var(--lc-el-text-size);
	--e-global-typography-8d16b03-line-height: var(--lc-el-line-height);
}

/* The standard page's wrapper is white and full width; inside an Elementor container each
 * piece takes the container's background instead. */
.lc-es.lc-el {
	background: transparent;
}

.lc-el-placeholder {
	margin: 0;
	padding: 16px;
	border: 1px dashed var(--lc-el-gold);
	font-family: var(--lc-el-sans);
	font-size: 13px;
	color: var(--lc-el-muted);
}

/* ---------- Description (the Post Content widget, CSS class lc-el-content) ---------- */
.lc-el-content {
	font-family: var(--lc-el-sans);
	font-size: var(--lc-el-text-size);
	line-height: var(--lc-el-line-height);
	letter-spacing: 0.23px;
	color: var(--lc-el-ink);
}

.lc-el-content p,
.lc-el-content li {
	font-size: var(--lc-el-text-size);
	line-height: var(--lc-el-line-height);
}

.lc-el-content p {
	margin: 0 0 var(--lc-el-line-height);
}

.lc-el-content h2,
.lc-el-content h3,
.lc-el-content h4 {
	margin: 0 0 20px;
	font-family: var(--lc-el-serif);
	font-weight: 300;
	color: #000000;
}

.lc-el-content h2 {
	font-size: var(--e-global-typography-1bdc823-font-size, 54px);
	line-height: 1.15;
}

.lc-el-content h3 {
	font-size: var(--e-global-typography-6b60d26-font-size, 37px);
	line-height: 1.2;
}

/* The lead line under a heading ("Dreaming of a winter wedding?"). */
.lc-el-content h4 {
	font-size: var(--e-global-typography-2348814-font-size, 2rem);
	line-height: 1.25;
}

.lc-el-content h2 em,
.lc-el-content h3 em {
	color: var(--lc-el-gold);
}

.lc-el-content hr {
	height: 0;
	margin: 48px 0 40px;
	border: 0;
	border-top: 1px solid var(--lc-el-gold);
}

.lc-el-content a {
	color: inherit;
	text-underline-offset: 4px;
}

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

.lc-el-content ul:not([class]),
.lc-el-content ol:not([class]) {
	margin: 0 0 var(--lc-el-line-height);
	padding-left: 18px;
}

.lc-el-content > :last-child,
.lc-el-content .elementor-widget-container > :last-child {
	margin-bottom: 0;
}

/* ---------- [lc_list], [lc_offer], [lc_note] ---------- */
.lc-el .lc-el-label {
	margin: 0 0 12px;
	font-family: var(--lc-el-sans);
	font-size: var(--e-global-typography-65d07a2-font-size, 15px);
	font-weight: 600;
	line-height: 18px;
	letter-spacing: var(--e-global-typography-65d07a2-letter-spacing, 5.7px);
	text-transform: uppercase;
	color: var(--lc-el-gold);
}

.lc-el-list,
.lc-el-offer {
	margin: 36px 0;
}

.lc-el-list .lc-el-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--lc-el-rule);
}

.lc-el-list .lc-el-list__item {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--lc-el-rule);
}

.lc-el-list .lc-es-arrow {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	fill: var(--lc-el-green);
	transform: translateY(1px);
}

.lc-el-offer {
	padding: 28px 32px;
	background: var(--lc-el-cream);
	border-top: 1px solid var(--lc-el-gold);
	border-bottom: 1px solid var(--lc-el-gold);
}

.lc-el-offer .lc-el-offer__text p {
	margin: 0 0 12px;
}

.lc-el-offer .lc-el-offer__text > :last-child,
.lc-el-note > :last-child {
	margin-bottom: 0;
}

.lc-el-note,
.lc-el-content .lc-el-note p {
	font-size: 13px;
	line-height: 1.6;
	color: var(--lc-el-muted);
}

/* ---------- Pieces of the Elementor template ----------
 * CSS classes set on the template's widgets and containers (Advanced > CSS Classes). */

/* Title suffix and the second line under a date or time, from the Event detail tag. */
.lc-el-title__suffix {
	font-style: italic;
	color: var(--lc-el-gold);
}

.lc-el-note-line {
	display: block;
	font-size: 13px;
	line-height: 18px;
	color: var(--lc-el-muted);
}

/* Elementor prints nothing for a widget whose dynamic value is empty, so a part without its
 * key widget has nothing to show: a card row without a value (the phone on a ticketed event,
 * an unused extra row), the sticker without its big line, a gallery without images, the
 * enquiry section on an event that books through tickets. */
.lc-el-row:not(:has(.lc-el-row__value)),
.lc-el-sticker:not(:has(.lc-el-sticker__main)),
.lc-el-gallery:not(:has(img)),
.lc-el-enquiry:not(:has(.lc-el-form)) {
	display: none;
}

/* Body-text widgets in the template (card rows, the excerpt and enquiry intro, CSS class
 * lc-el-text): the site's body global sets no line height, so Elementor's headings fall back
 * to 1 - too tight for running text. */
.lc-el-row .elementor-heading-title,
.lc-el-text .elementor-heading-title,
.lc-el-text p {
	line-height: var(--lc-el-line-height);
}

.lc-el-text p {
	margin: 0;
}

/* Editor only: Elementor makes the fixed-size sticker resizable there, and jQuery UI's
 * ".ui-resizable { position: relative }" then outranks the container's own absolute
 * position, so the sticker dropped below the photo while editing. */
.lc-el-sticker.ui-resizable {
	position: var(--position, absolute);
}

.lc-el-row__value a {
	color: inherit;
	text-decoration: none;
}

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

/* Gallery (Basic Gallery widget): two columns, the first image and every third after it - and
 * a last one left alone on its row - across both. Elementor shrinks its gallery wrapper to
 * its content, which left the grid half the column wide. */
.lc-el-gallery .elementor-image-gallery {
	display: block;
	width: 100%;
}

.lc-el-gallery .gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}

.lc-el-gallery .gallery br {
	display: none;
}

/* !important on the two sizes only: WordPress prints "#gallery-1 .gallery-item { width: 50% }"
 * inline with each gallery, an ID selector no class rule can outrank, and Elementor adds a
 * max-width per column count. The grid does the sizing instead. */
.lc-el-gallery .gallery-item {
	width: auto !important;
	max-width: none !important;
	margin: 0;
	padding: 0;
}

.lc-el-gallery .gallery-item:nth-of-type(3n + 1),
.lc-el-gallery .gallery-item:nth-of-type(3n + 2):last-of-type {
	grid-column: 1 / -1;
}

.lc-el-gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.lc-el-gallery .gallery-item:nth-of-type(3n + 1) img,
.lc-el-gallery .gallery-item:nth-of-type(3n + 2):last-of-type img {
	aspect-ratio: 3 / 2;
}

/* [lc_event_form]: the standard page's field styles, without its form card - the section's
 * cream is set in Elementor. */
.lc-es.lc-el .lc-es-form {
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	text-align: left;
}

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

@media (max-width: 1023px) {
	.lc-el-content h2 {
		font-size: 40px;
	}
}

@media (max-width: 639px) {
	.lc-el-offer {
		padding: 24px 20px;
	}
}