/* L44 Info Box
 * -------------------------------------------------------------------------
 * The button panel is the event page's, to the pixel — 320px column, 300px
 * buttons growing to 320 when open, 20px between them, 2px stroke, pink fill.
 * Written out here rather than shared with the event page, so that page can
 * change without dragging this along with it.
 */

.l44ib {
	--ib-ink: #181617;
	--ib-pink: #e6b5c9;
	--ib-stroke: #181617;
	/* The side inset the theme's header container uses, so this section's
	   edges line up with the logo and the hamburger — and with the calendar
	   and the Upcoming strip, which are measured the same way. The script
	   replaces this figure with the header's real one at runtime; 35 is only
	   what holds until it does. */
	--ib-inset: 35px;

	font-family: "CoFoSans Regular", "CoFo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--ib-ink);

	/* 1000px of content, like everything else. The inset is added to the
	   maximum rather than taken out of it, so the panel still gets its full
	   1000 on a wide screen and only narrow ones lose anything. */
	box-sizing: border-box;
	width: 100%;
	max-width: calc( 1000px + var(--ib-inset) * 2 );
	/* 60 above as well as below: the section needs clearing from whatever it
	   follows, and on the home page that is the marquee. Adjacent margins
	   collapse to the larger of the two, so this gives 60 rather than adding
	   to the space the previous block already carries. */
	margin: 60px auto;
	padding-left: var(--ib-inset);
	padding-right: var(--ib-inset);
}

.l44ib * { box-sizing: border-box; }

/* Fallback only: the script copies the real figure off the header. */
@media (max-width: 1000px) {
	.l44ib { --ib-inset: 15px; }
}

/* Sized with the Upcoming events heading — the other thing at this level. */
.l44ib__title {
	margin: 0 0 18px;
	font-size: clamp( 26px, 3vw, 40px );
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.1;
}

.l44ib__intro {
	margin: 0 0 34px;
	font-size: 21px;
	line-height: 1.35;
	max-width: 62ch;
}
.l44ib__intro p { margin: 0 0 10px; }
.l44ib__intro p:last-child { margin-bottom: 0; }

/* The event page's section heading size. */
.l44ib__label {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.1;
}

.l44ib__sections {
	position: relative;
	display: grid;
	grid-template-columns: 320px minmax( 0, 1fr );
	gap: 0;
}

.l44ib__buttons {
	position: relative;
	z-index: 1;
	width: 320px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.l44ib__btn {
	appearance: none;
	font: inherit;
	font-size: 21px;
	text-transform: uppercase;
	width: 300px;
	flex: 0 0 auto;
	/* min-height with the sizing carried by line-height: a label that wraps
	   grows the button instead of spilling out of it, and a one-line label
	   still fills exactly 35px. */
	min-height: 35px;
	line-height: 31px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	background: transparent;
	color: var(--ib-ink);
	border: 2px solid var(--ib-stroke);
	box-sizing: border-box;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.14s ease, width 0.16s ease;
}

/* Hover: the button's own colour at a quarter strength, the same reaction the
   event page gives its section buttons — but keyed to each button's colour
   rather than always pink, now that they can differ.
   
   The flat rgba is a fallback for browsers without color-mix; they get the
   pink tint the event page uses, which is right for most buttons anyway. */
@media (hover: hover) {
	.l44ib__btn:not(.is-active):hover {
		background: rgba( 230, 181, 201, 0.25 );
		background: color-mix( in srgb, var( --ib-c, #e6b5c9 ) 25%, transparent );
	}
}

/* Open: filled with its own colour, and stretched the last 20px so it meets
   the panel. The border takes the fill too, so the bar reads as one block —
   except on white, where a white border would leave it floating on the page. */
.l44ib__btn.is-active {
	background: var( --ib-c, var(--ib-pink) );
	border-color: var( --ib-c, var(--ib-pink) );
	width: 320px;
	font-weight: 700;
}
.l44ib__btn.is-active[data-colour="#ffffff"] { border-color: var(--ib-stroke); }
.l44ib__btn.is-active.on-dark { color: #ffffff; }

.l44ib__panel {
	position: relative;
	/* The script writes the open row's colour here; the pink is what shows
	   before it runs and if a row has never been given one. */
	background: var( --ib-panel, var(--ib-pink) );
	align-self: start;
	overflow: hidden;      /* the image starts outside this edge */
	transition: background-color 0.24s ease;
}

.l44ib__row.on-dark .l44ib__body { color: #ffffff; }

.l44ib__row { display: none; }
.l44ib__row.is-open { display: block; }

/* The row on its way out. Still drawn, so its image can slide off, but laid
   over the panel rather than in the flow — otherwise the two rows would stack
   and the panel would jump to twice its height for the length of the
   animation. Its text goes at once; only the picture is worth animating. */
.l44ib__row.is-leaving {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.l44ib__row.is-leaving .l44ib__body { visibility: hidden; }
.l44ib__row.is-leaving .l44ib__shot { transform: translateX( 100% ); }

/* The incoming picture is held outside the panel, without a transition, until
   the outgoing one has finished leaving — then the hold is released and it
   slides in on its own. Two images crossing mid-panel reads as a mistake. */
.l44ib__row.is-open.is-hold .l44ib__shot {
	transform: translateX( 100% );
	transition: none;
}

.l44ib__body {
	padding: 22px 26px;
	font-size: 19px;
	line-height: 1.35;
}
.l44ib__body p { margin: 0 0 18px; }
.l44ib__body p:last-child { margin-bottom: 0; }

/* ---- the image ----
   Half the panel, pinned to the right edge and the full height of whatever the
   panel ends up being — so when longer text grows the panel, the image grows
   with it rather than leaving a gap under itself. Held off to the right until
   its row opens, then slid in. */
.l44ib__shot {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	transform: translateX( 100% );
	transition: transform 0.36s ease;
	will-change: transform;
}

.l44ib__row.is-open .l44ib__shot { transform: translateX( 0 ); }

.l44ib__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* With an image the text keeps to the left half, or the two overlap. */
.l44ib__row.has-shot .l44ib__body { width: 50%; padding-right: 20px; }

@media (prefers-reduced-motion: reduce) {
	.l44ib__shot,
	.l44ib__btn { transition: none; }
}

/* ---- narrow screens ----
   The columns stack: buttons across the top, then the panel. The image stops
   being half a panel and becomes a band under the text — half of a phone-width
   panel is too little for either of them. */
@media (max-width: 900px) {
	.l44ib { margin: 25px auto; }
	.l44ib__intro { font-size: 17px; margin-bottom: 24px; }

	.l44ib__sections { grid-template-columns: minmax( 0, 1fr ); }
	.l44ib__buttons { width: 100%; gap: 0; }
	/* No pull on the button itself: its accordion panel carries the -2px, and
	   the two together lifted the next bar 4px, which set the two 2px borders
	   edge to edge instead of on top of each other — one continuous 4px line
	   rather than a single stroke. */
	.l44ib__btn,
	.l44ib__btn.is-active { width: 100%; margin-bottom: 0; }

	/* No hover tint on a touch screen: :hover sticks after a tap there, so a
	   bar would stay tinted until another was touched. */
	.l44ib__btn:not(.is-active):hover { background: transparent; }

	/* The bar keeps its colour at full strength; the panel under it is the
	   same colour at half. Both are written by the script, which is the only
	   place that knows a row's hex as an rgba. */
	.l44ib__panel { min-height: 0 !important; background: transparent; }
	.l44ib__btn.is-active { background: var( --ib-c, var(--ib-pink) ); }

	/* Stacked, so the picture is a band between the button and its text. */
	.l44ib__row.is-open { display: flex; flex-direction: column; }
	.l44ib__shot { order: -1; }
	.l44ib__body { order: 0; }

	.l44ib__body { font-size: 16px; padding: 18px; }
	.l44ib__row.has-shot .l44ib__body { width: 100%; padding-right: 18px; }

	.l44ib__shot {
		position: relative;
		width: 100%;
		height: 100px;
		aspect-ratio: auto;
		transform: none;
		margin: 0;
	}
	.l44ib__row.is-open .l44ib__shot,
	.l44ib__row.is-open.is-hold .l44ib__shot { transform: none; transition: none; }
	.l44ib__row.is-leaving { display: none; }
}

/* ---- the vertical stack ----
   All the pictures in one column, with the panel's right half as its window.
   Moving the stack rather than swapping images is what makes a jump from the
   first button to the last travel past the ones between, instead of cutting
   straight there. Heights are set by the script, because a slide has to be
   exactly the panel's height and the panel's height depends on the text. */
.l44ib--strip .l44ib__strip {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	overflow: hidden;
}

.l44ib--strip .l44ib__track {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	transform: translateY( 0 );
	transition: transform 0.5s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	will-change: transform;
}

.l44ib--strip .l44ib__slide { overflow: hidden; }
.l44ib--strip .l44ib__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* With the stack in place the text keeps to the left half on every row, not
   only the ones that happen to have a picture — the window is always there. */
.l44ib--strip .l44ib__body { width: 50%; padding-right: 20px; }

@media (prefers-reduced-motion: reduce) {
	.l44ib--strip .l44ib__track { transition: none; }
}

/* The accordion panels, hidden unless the window is narrow.
   
   They are built by the script the first time the section is seen on a phone,
   and they stay in the page afterwards. Every rule that governed them sat
   inside the query below, so widening the window back to a desktop left them
   with no styling at all — no height of zero, nothing hiding them — and they
   unrolled full length beside the desktop panel. That is the section appearing
   twice over.
   
   Declaring the default out here means the query turns them on rather than
   being the only thing that governs them. */
.l44ib__acc { display: none; }

/* ---- mobile accordion ----
   The panel opens between the bars, as on the event page: text on 50% pink,
   the bars themselves full strength. Built by the script. */
@media (max-width: 900px) {
	.l44ib--strip .l44ib__strip { display: none; }
	.l44ib--strip .l44ib__body { width: 100%; padding-right: 18px; }

	.l44ib__panel { display: none; }

	.l44ib__acc {
		display: block;
		background: var( --ib-acc, rgba( 230, 181, 201, 0.5 ) );
		overflow: hidden;
		height: 0;
		margin-top: -2px;
		/* The button column is a flex column aligned to its start, so a child
		   with no width of its own shrinks to fit its text — which left the
		   panel narrower than the bars above and below it. The buttons never
		   showed this because they state width: 100% themselves. */
		width: 100%;
		align-self: stretch;
	}
	/* No padding on the wrapper: the picture runs the full width of the pink
	   field and sits flush against the bar above it. The text carries its own
	   inset instead. */
	.l44ib__acc-inner { padding: 0; font-size: 16px; line-height: 1.45; overflow-wrap: break-word; }

	.l44ib__acc-text { padding: 18px; }
	.l44ib__acc-text p { margin: 0 0 1em; }
	.l44ib__acc-text p:last-child { margin-bottom: 0; }

	/* Edge to edge and hard against the bar, 100px tall. */
	.l44ib__acc-shot { display: block; width: 100%; height: 100px; overflow: hidden; }
	.l44ib__acc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

	/* 5px between the picture and the words. */
	.l44ib__acc-shot + .l44ib__acc-text { padding-top: 5px; }
}