/* L44 Event Page — Simple booking layout.
 * Type sizes follow the artboard ratio 35pt ≈ 25px (so 1pt ≈ 0.714px):
 *   title 60pt ≈ 43px, subtitle 48pt ≈ 34px, date 30pt ≈ 21px,
 *   hours 40pt ≈ 29px, group 40pt ≈ 29px, buttons ~30pt ≈ 21px.
 * ------------------------------------------------------------------------- */

/* Keep the fixed site header above our content so its menu stays clickable. */
.single-product .header { z-index: 100 !important; }
/* padding, not margin, to clear the fixed header. A top margin left a strip of
   the darker page background showing above the section — the grey rectangle at
   the top of every event page. As padding, the light grey starts at the very
   top and runs up behind the header, which draws its own band over it. Same
   140px of clearance either way. */
.l44ep-main { background: #efefef; padding-top: 140px; position: relative; z-index: 0; }
.l44ep {
	--ep-ink: #181617;
	--ep-green: #00a95c;
	--ep-pink: #e6b5c9;
	--ep-stroke: #181617;
	--ep-gap: 40px;

	max-width: 1000px;   /* matches the gallery's visible content and the artboards */
	margin: 0 auto;
	padding: 0;
	font-family: "CoFoSans Regular", "CoFo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--ep-ink);
	box-sizing: border-box;
}
.l44ep * { box-sizing: border-box; }

/* ---------- Header ---------- */

.l44ep__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 30px;
}
.l44ep__title {
	margin: 0;
	font-size: 70px;
	line-height: 1.0;
	text-transform: uppercase;
	font-weight: 400;
}
.l44ep__title .l44ep__row { display: block; }
.l44ep__subtitle .l44ep__row { display: block; }
.l44ep__subtitle {
	font-size: 30px;
	line-height: 1.05;
	text-transform: uppercase;
	margin-top: 2px;
}
.l44ep__meta { text-align: right; flex: 0 0 auto; }
.l44ep__date { font-size: 70px; line-height: 1.0; text-transform: uppercase; }
.l44ep__time { font-size: 30px; line-height: 1.1; }
.l44ep__group { font-size: 30px; line-height: 1.1; text-transform: uppercase; }

/* ---------- Body: image + short info ---------- */

.l44ep__body {
	display: grid;
	grid-template-columns: 650fr 330fr;
	gap: 40px;
	align-items: start;
	margin-bottom: 50px;
}

.l44ep__image-frame {
	position: relative;
	width: 650px;
	max-width: 100%;
	height: 275px;
	overflow: hidden;          /* the oversized image moves within this frame */
	background: #cfcfcf;
}
.l44ep__image {
	position: absolute;
	left: 0;
	right: 0;
	top: -40%;                 /* overhang above */
	height: 180%;              /* 80% taller than the frame: 40% spare each side, for parallax */
	background-size: cover;
	background-position: center;
	will-change: transform;
}

.l44ep__buy {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;   /* align to the right edge of the image */
	gap: 12px;
	width: 650px;
	max-width: 100%;
	margin-top: 12px;
}
.l44ep__price {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 35px;
	border: 2px solid var(--ep-stroke);
	font-size: 18px;
	white-space: nowrap;
	box-sizing: border-box;
}
.l44ep__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 35px;
	background: var(--ep-green);
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	text-transform: uppercase;
	box-sizing: border-box;
}
.l44ep__cart:hover { background: #008f4e; }

.l44ep__info-label { font-size: 24px; text-transform: uppercase; margin-bottom: 8px; }
.l44ep__info-text { font-size: 15px; line-height: 1.4; text-align: justify; }
.l44ep__info-text p { margin: 0 0 1em; }

/* ---------- Sections: buttons + connected panel ----------
   Exact spec:
   - buttons column 320px, each button 300px wide, 35px tall, 20px vertical gap
   - the active button fills pink and its pink ends at 320px, exactly where the
     text area begins (no overlap)
   - text area 680px, pink at 50% opacity
   The two columns are 320 + 680 = 1000, matching the content width. */

.l44ep__sections {
	position: relative;
	display: grid;
	grid-template-columns: 320px 680px;
	gap: 0;
	/* 30px, halved from 60. This is what sets the gap down to the address:
	   the address's own 20px top margin collapses into it, so the larger of
	   the two is the whole distance and changing the address alone would have
	   done nothing. */
	margin-bottom: 30px;
}

.l44ep__buttons {
	position: relative;
	z-index: 1;
	width: 320px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;   /* buttons keep their own width, do not stretch */
	gap: 20px;
}

.l44ep__sbtn {
	appearance: none;
	font: inherit;
	font-size: 21px;
	text-transform: uppercase;
	width: 300px;
	flex: 0 0 auto;
	/* min-height, not height: a label too long for 300px wraps to a second
	   line, and a fixed height let it spill straight out of the border. The
	   box grows to hold it instead.

	   line-height carries the sizing rather than padding, because padding
	   would also inflate the single-line buttons. At 31px a one-line label
	   fills the 35px box exactly as before, and a two-line one comes to 66px
	   — the doubled bar, with no second rule and no breakpoint. */
	min-height: 35px;
	line-height: 31px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	background: transparent;
	color: var(--ep-ink);
	border: 2px solid var(--ep-stroke);
	box-sizing: border-box;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.14s ease, width 0.16s ease;
}

/* Active: solid pink, and it stretches to 320px — flush with the text area's
   left edge — so the button meets the panel without overlapping it. */
/* Hover feedback: inactive buttons ease to 25% pink. The active one keeps its
   solid pink (below), so this only applies while not active. */
.l44ep__sbtn:not(.is-active):hover {
	background: rgba( 230, 181, 201, 0.25 );
}

.l44ep__sbtn.is-active {
	background: var(--ep-pink) !important;
	border-color: var(--ep-pink) !important;
	width: 320px !important;   /* reaches the panel edge; box is 300, +20 to connect */
}

/* Text area: starts exactly at the 320px column line, 680px wide, pink 50%. */
.l44ep__panel {
	background: #e6b5c9;
	padding: 22px 26px;
	align-self: start;   /* panel top aligns to the first button row */
	/* min-height is set per selection by JS: top of button 1 to bottom of the
	   selected button, so a short panel spans buttons 1..selected. */
}
.l44ep__panel-text { display: none; font-size: 15px; line-height: 1.45; }
.l44ep__panel-text.is-active { display: block; }
.l44ep__panel-text p { margin: 0 0 1em; }
.l44ep__panel-text p:last-child { margin-bottom: 0; }

/* ---------- Address block ---------- */
.l44ep__address {
	margin-top: 20px;
	text-align: right;
	font-size: 30px;
	line-height: 1.15;
	text-transform: uppercase;
}

/* A multi-day event follows the short info with INFO BY DATE rather than the
   section buttons, and that pairing sits closer: 35px, 30% off the standard 50.
   Falls back to the full 50px where :has() is unsupported. */
.l44ep__body:has( + .l44ep__bydate ) { margin-bottom: 35px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.l44ep-main { padding-top: 170px; }   /* clear the taller mobile header */
	.l44ep {
		padding: 10px 20px 0;   /* spacing before content halved; side inset kept */
		max-width: 100%;
	}
	/* Keep title and date on one row when the title is short enough to fit;
	   wrap the date below only when the title needs the width. */
	.l44ep__head { flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
	.l44ep__titles { flex: 1 1 auto; min-width: 0; }
	.l44ep__meta { flex: 0 0 auto; }
	/* margin-left: auto is what actually carries the block to the right edge.
	   text-align only ranges the lines inside the box, and a wrapped flex item
	   sits alone on its line — justify-content has no second item to space it
	   against, so it stayed at the left with its text neatly right-ranged
	   inside its own narrow width. The auto margin eats the free space on that
	   line instead. Harmless when the title is short enough that the two share
	   a row, where space-between already separates them. */
	.l44ep__meta { text-align: right; align-self: flex-end; margin-left: auto; }
	/* Without a group line the meta block is a line shorter, and bottom-aligning
	   it drops the date well below the title it should sit beside. With the
	   group line present the two columns are close enough in height that the
	   bottom alignment still reads correctly, so this only changes the short
	   case — the time keeps its place under the date either way. */
	.l44ep__head--nogroup .l44ep__meta { align-self: flex-start; }
	.l44ep__body { grid-template-columns: 1fr; }
	/* Halved from 50px. The :has() variant is repeated here so the desktop
	   multi-date rule below does not out-specify this one inside the query. */
	.l44ep__body,
	.l44ep__body:has( + .l44ep__bydate ) { margin-bottom: 25px; }
	/* The gallery is the theme's, one level out from .l44ep in the shared
	   container, so it never picked up the 20px side inset the event content
	   has here — it ran 20px wider on each side than everything above it. */
	.l44ep-main .lb-product-slider {
		box-sizing: border-box;
		padding-left: 20px;
		padding-right: 20px;
	}
	.l44ep__image-frame { width: 100%; }
	.l44ep__buy { width: 100%; }
	.l44ep__buy .l44ep__price, .l44ep__buy .l44ep__cart { flex: 1 1 0; width: auto; }
	.l44ep__title { font-size: 32px; }
	.l44ep__subtitle { font-size: 24px; }
	.l44ep__date { font-size: 32px; }     /* same as the title */
	.l44ep__time, .l44ep__group { font-size: 24px; }   /* match subtitle */

	/* Mobile sections become a cafe-menu-style accordion: full-width bars, the
	   text opening BETWEEN them. Handled by JS (l44ep-acc); these are the
	   resting styles. */
	.l44ep__sections { display: block; }
	.l44ep__buttons { width: 100%; display: block; }
	/* display stays flex so a wrapped label keeps centring in the taller bar;
	   as a block the two lines rode to the top of the box. */
	.l44ep__sbtn { width: 100% !important; display: flex; margin-bottom: -2px; }
	.l44ep__sbtn:not(.is-active):hover { background: transparent; }   /* no hover tint on mobile */
	.l44ep__sbtn:last-of-type { margin-bottom: 0; }
	.l44ep__sbtn.is-active { width: 100% !important; position: relative; z-index: 1; }
	/* When a panel opens between bars it must not reintroduce a gap/double edge:
	   pull it up by the shared border too. */
	.l44ep__acc-panel { margin-top: -2px; }

	/* On mobile the panel text lives inside each section (injected by JS) and is
	   50% pink; the buttons/bars stay 100%. */
	.l44ep__panel { display: none; }   /* desktop panel hidden on mobile */
	.l44ep__acc-panel {
		background: rgba( 230, 181, 201, 0.5 );
		overflow: hidden;
		height: 0;
	}
	.l44ep__acc-panel-inner { padding: 18px 20px; font-size: 15px; line-height: 1.45; overflow-wrap: break-word; word-wrap: break-word; }
	.l44ep__acc-panel-inner p { margin: 0 0 1em; }
	.l44ep__acc-panel-inner p:last-child { margin-bottom: 0; }
}

/* ---------- Multi-option events ----------
   Options in a 2-row grid, filling column by column (1 top-left, 2 below, 3
   top-next, 4 below...), each 150px wide, 17px between columns, 20px between the
   two rows and 20px below the image. Price/cart sit to the right. */

.l44ep__options {
	width: 650px;
	max-width: 100%;
	margin-top: 20px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;   /* buttons left, price/cart to the image's right edge */
	gap: 17px;
}

.l44ep__optbtns {
	display: grid;
	grid-template-rows: 40px 40px;      /* two rows */
	grid-auto-flow: column;             /* fill down then across */
	grid-auto-columns: 150px;           /* each option 150px wide */
	column-gap: 17px;
	row-gap: 20px;
}

.l44ep__opt {
	appearance: none;
	font: inherit;
	font-size: 16px;
	text-transform: uppercase;
	width: 150px;
	height: 40px;
	padding: 0 10px;
	background: transparent;
	color: var(--ep-ink);
	border: 2px solid var(--ep-stroke);
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.l44ep__opt:not(.is-active):hover { background: rgba( 255, 181, 17, 0.18 ); }
.l44ep__opt.is-active {
	background: #ffb511;
	border-color: #ffb511;
	color: #181617;
}
.l44ep__opt.is-out {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Price + cart stacked on the right, aligned to the two option rows. */
.l44ep__options .l44ep__buy {
	display: grid;
	grid-template-rows: 40px 40px;
	row-gap: 20px;
	margin-top: 0;
	margin-left: auto;   /* always sit at the right edge of the image */
	width: auto;
}
.l44ep__options .l44ep__price,
.l44ep__options .l44ep__cart { width: 150px; height: 40px; }

@media (max-width: 900px) {
	/* Options + price/cart as one uniform 2-per-row layout. Both grids share the
	   same 2-column shape and 15px gaps, stacked with 15px between, so every box
	   (options, price, cart) is the same size and evenly spaced. 15px from the
	   image to the first row. */
	.l44ep__options { width: 100%; flex-direction: column; gap: 15px; margin-top: 15px; }
	.l44ep .l44ep__options .l44ep__optbtns {
		width: 100% !important;                              /* stretch to fill the column */
		grid-template-rows: none !important;
		grid-auto-flow: row !important;
		grid-auto-columns: auto !important;
		grid-template-columns: repeat(2, 1fr) !important;   /* 2 per row, filling the width */
		column-gap: 15px !important;
		row-gap: 15px !important;
	}
	.l44ep__opt { width: 100% !important; height: 44px; min-width: 0; box-sizing: border-box; }
	.l44ep__opt:not(.is-active):hover { background: transparent; }   /* no hover tint on mobile */
	.l44ep__options .l44ep__buy {
		grid-template-rows: none;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 15px;
		row-gap: 15px;
		width: 100%;
		margin-left: 0;
	}
	.l44ep__options .l44ep__price,
	.l44ep__options .l44ep__cart { width: 100%; height: 44px; }
}

/* ---------- INFO BY DATE (multi-day events) ---------- */

.l44ep__bydate { margin-bottom: 40px; }
.l44ep__bydate-label { font-size: 24px; text-transform: uppercase; margin-bottom: 12px; }

/* Pills equally distributed across the full width, sitting 10px above the panel.
   The active pill grows down 10px (30 -> 40) to bridge that gap and connect to
   the aqua panel. */
.l44ep__bydate-pills {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;      /* equal width, filling the row */
	gap: 4px;
	align-items: start;
	margin-bottom: 10px;         /* the 10px gap above the panel */
}
.l44ep__pill {
	appearance: none;
	font: inherit;
	font-size: 24px;
	height: 30px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #cccccc;         /* inactive grey rectangle */
	color: var(--ep-ink);
	border: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.16s ease, height 0.16s ease, margin-bottom 0.16s ease;
}
/* Active pill: aqua 50% and 10px taller, reaching down to meet the panel. */
.l44ep__pill.is-active {
	background: rgba( 130, 216, 213, 0.5 );
	height: 40px;
	margin-bottom: -10px;        /* cancel the row gap so it touches the panel */
}

.l44ep__bydate-panel {
	background: rgba( 130, 216, 213, 0.5 );
	padding: 24px 26px;
}
.l44ep__bydate-text { display: none; font-size: 15px; line-height: 1.45; }
.l44ep__bydate-text.is-active { display: block; }
.l44ep__bydate-title { font-size: 24px; text-transform: uppercase; margin-bottom: 10px; }
.l44ep__bydate-text p { margin: 0 0 1em; }
.l44ep__bydate-text p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	/* Dates wrap into a 3-per-row grid on mobile, panel below. */
	.l44ep__bydate-pills {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-flow: row;
		gap: 6px;
		margin-bottom: 6px;
	}
	.l44ep__pill {
		white-space: nowrap;
		min-width: 0;
		width: 100%;
		font-size: 22px;
	}
	/* On mobile the active pill does not drop to connect (it may not be on the
	   last row); it just fills aqua like the panel. */
	.l44ep__pill.is-active { height: 30px; margin-bottom: 0; }
}

/* ---- Free event, no booking ----
   A drop-in event has nothing to add to a cart, so this row states the terms
   rather than offering an action. .l44ep__buy is already the image's width, so
   the note lands on the image's left edge and the badge on its right, the two
   centred on the same line. */
.l44ep__buy--free { align-items: center; }
.l44ep__firstcome {
	margin-right: auto;          /* holds the note against the left edge */
	font-size: 24px;             /* reads as a statement, like SHORT INFO opposite */
	text-transform: uppercase;
	white-space: nowrap;
}
/* Built to match the cart button, but deliberately not one: a span with no
   href and no hover, so nothing invites a click that would do nothing.

   Sized by its own text rather than the cart button's 150px: the label is long
   enough that a fixed width would break it over two lines. Padding plus nowrap
   keeps it on one row whatever the rendered width of the font turns out to be,
   which a hand-measured width would not survive a font change. */
.l44ep__freebadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	padding: 0 20px;
	white-space: nowrap;
	height: 35px;
	background: var(--ep-green);
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	/* The note wraps rather than pushing the badge off the row. */
	.l44ep__firstcome { font-size: 16px; white-space: normal; }
	.l44ep__buy--free { gap: 15px; }
}

/* Heading above the sections block. Deliberately the same size and spacing as
   .l44ep__bydate-label — on a multi-day event the two labels stack one above
   the other, so any difference between them would read as an accident. */
.l44ep__sections-label { font-size: 24px; text-transform: uppercase; margin-bottom: 12px; }

/* ---- fully booked ----
 *
 * The same shape as the button it stands in for, so the page keeps its
 * proportions, and coloured to say plainly that this one is not a way forward.
 * No link and no pointer: there is nothing here to press.
 */
.l44ep__cart--full {
	background: #e45d50;
	cursor: default;
	user-select: none;
}