/*
 * Glass — its own stylesheet.
 *
 * Loaded after the shared `events.css`, only while Glass draws the page. The
 * forms have stylesheets of their own beside this file (`*.form.css`, which
 * become each form's `custom_css`); this file draws the page around them, and
 * hides the questions the page's own cards stand for.
 *
 * Light glass, on purpose: white frosted panels and dark text over a picture
 * that is blurred and lifted, never darkened — the theme's header and footer
 * sit on the same background, and the forms are committed light too. The one
 * exception is the banner's title band: dark glass, white text.
 *
 * Contents
 *   1. Tokens          6. The column and the ticket    11. The form's frame
 *   2. The page        7. Cards                        12. Borrowed pieces
 *   3. The background  8. Dates                        13. Phones
 *   4. Glass           9. Offers                       14. Less motion
 *   5. The banner     10. Continue
 */

/* -- 1. Tokens --------------------------------------------------------------- */

/* Everything a site is likely to change, in one place. */
.event-page--glass {
	--glass-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--glass-ink: #0f172a;
	--glass-soft: rgb(15 23 42 / 0.66);
	--glass-faint: rgb(15 23 42 / 0.46);
	--glass-line: rgb(15 23 42 / 0.08);
	--glass-danger: #be123c;

	--glass-accent: #356fbc;
	--glass-accent-deep: #2a5a9a;
	--glass-accent-gradient: linear-gradient(135deg, #3f7dcc 0%, #2c5fa0 100%);
	--glass-accent-glow: 0 8px 20px -10px rgb(53 111 188 / 0.85);
	--glass-accent-ring: 0 0 0 3px rgb(53 111 188 / 0.14);

	/* The glass: its fill, its edge, how frosted, how it sits on the page. */
	--glass-fill: linear-gradient(145deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.5));
	--glass-edge: rgb(255 255 255 / 0.62);
	--glass-blur: 22px;
	--glass-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.7),
		0 1px 2px rgb(15 23 42 / 0.06),
		0 24px 48px -28px rgb(15 23 42 / 0.45);

	/* A card inside a panel: nearly white, and a touch of the accent once chosen. */
	--glass-tile: linear-gradient(180deg, rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.66));
	--glass-tile-chosen: linear-gradient(180deg, rgb(255 255 255 / 0.96), rgb(234 241 250 / 0.9));

	--glass-radius: 16px;
	--glass-radius-sm: 12px;

	/* The column: fixed in width, centred. */
	--glass-width: 72rem;
	--glass-gap: clamp(1rem, 2.4vw, 1.75rem);
	--glass-pad: clamp(1.25rem, 3vw, 2.25rem);

	/* The background: how blurred, and how far it drifts over the whole page. */
	--glass-backdrop-blur: 56px;
	--glass-travel: 22vh;

	/* Where the ticket stops on a wide screen: under the admin bar. A theme with
	   a fixed header adds its height here. */
	--glass-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + 4rem);
}

/* -- 2. The page ------------------------------------------------------------- */

/* The theme's header stays at the top while the page scrolls. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: #fff;
}

/* On a phone the admin bar scrolls away. */
@media screen and (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}



.event-page--glass {
	/* No z-index: the background below must share the page's root stacking context. */
	position: relative;
	max-width: none;
	margin: 0;
	padding: clamp(0.75rem, 3vw, 2.5rem) clamp(0.75rem, 3vw, 2rem) clamp(3rem, 8vw, 6rem);
	color: var(--glass-ink);
	font-family: var(--glass-font);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.event-page--glass *,
.event-page--glass *::before,
.event-page--glass *::after {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.event-page--glass) {
		scroll-behavior: smooth;
	}
}

/* -- 3. The background ------------------------------------------------------- */

/*
 * Fixed, and behind everything — `z-index: -1` puts it under the theme's
 * header and footer as well as this page. With no picture, a soft wash of the
 * accent stands in.
 */
.glass-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100lvh;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(60% 50% at 15% 10%, #c6dcf4 0%, transparent 70%),
		radial-gradient(55% 50% at 85% 20%, #e4ecf8 0%, transparent 70%),
		radial-gradient(70% 60% at 50% 100%, #bfe0f2 0%, transparent 70%),
		#eef4fb;
}

/*
 * Larger than the window on every side by more than the blur reaches — a blur
 * fades at the image's edge — and taller again by the distance it drifts.
 * `--glass-progress` (0 to 1) is set by `template.js` where the animation
 * below cannot run.
 */
.glass-backdrop__image {
	position: absolute;
	top: calc(var(--glass-backdrop-blur) * -2.5);
	left: calc(var(--glass-backdrop-blur) * -2.5);
	width: calc(100% + var(--glass-backdrop-blur) * 5);
	max-width: none;
	height: calc(100% + var(--glass-backdrop-blur) * 5 + var(--glass-travel));
	object-fit: cover;
	filter: blur(var(--glass-backdrop-blur)) saturate(1.45) brightness(1.04);
	transform: translate3d(0, calc(var(--glass-progress, 0) * var(--glass-travel) * -1), 0);
	will-change: transform;
}

/* A thin veil, lighter at the top where the title sits. */
.glass-backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 70% at 50% 0%, rgb(255 255 255 / 0.22), transparent 65%),
		linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(248 250 252 / 0.3));
}

/* The drift, tied to the page's scroll and run off the main thread. */
@keyframes glass-drift {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(0, calc(var(--glass-travel) * -1), 0);
	}
}

@supports (animation-timeline: scroll()) {
	.glass-backdrop__image {
		animation: glass-drift linear both;
		animation-timeline: scroll(root block);
	}
}

/* -- 4. Glass ---------------------------------------------------------------- */

.glass-surface,
.glass-card,
.event-page--glass .event-plan,
.event-page--glass .event-reviews {
	background: var(--glass-fill);
	border: 1px solid var(--glass-edge);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
	backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
}

/* Nothing to frost with: nearly opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass-surface,
	.glass-card,
	.event-page--glass .event-plan,
	.event-page--glass .event-reviews {
		background: rgb(255 255 255 / 0.9);
	}
}

/* -- 5. The banner ----------------------------------------------------------- */

.glass-hero {
	position: relative;
	max-width: var(--glass-width);
	margin: 0 auto;
	overflow: hidden;
	border-radius: calc(var(--glass-radius) + 4px);
	box-shadow: 0 2px 6px rgb(15 23 42 / 0.1), 0 40px 80px -40px rgb(15 23 42 / 0.55);
	isolation: isolate;
}

.glass-hero .event-hero {
	display: block;
	margin: 0;
}

.glass-hero .event-hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(68vh, 600px);
	margin: 0;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border-radius: 0;
}

/*
 * The title's pane — a dark band across the foot of the picture, the whole
 * width of the banner. The one dark pane on the page, and the one with
 * something sharp behind it, so it frosts harder. The banner's own rounded
 * corners clip it.
 */
.glass-hero__pane {
	--glass-blur: 26px;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: clamp(0.9rem, 2.34vw, 1.575rem) clamp(1rem, 2.7vw, 1.8rem);
	border: 0;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	border-radius: 0;
	background: linear-gradient(180deg, rgb(15 23 42 / 0.38), rgb(15 23 42 / 0.62));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

/* Nothing to frost with: nearly opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass-hero__pane {
		background: rgb(15 23 42 / 0.86);
	}
}

.glass-hero__title {
	margin: 0;
	color: #fff;
	font-family: inherit;
	font-size: clamp(1.575rem, 3.78vw, 1.8rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* No picture: the pane is a card at the top of the column. */
.glass-hero--bare {
	overflow: visible;
	box-shadow: none;
}

.glass-hero--bare .glass-hero__pane {
	position: static;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
}

/* Ended, or sold out. */
.glass-status {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.3em 0.8em;
	border-radius: 999px;
	background: rgb(15 23 42 / 0.86);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* On the banner's dark band: light glass instead, so it still stands out. */
.glass-hero .glass-status {
	margin-bottom: 0.675rem;
	font-size: 0.675rem;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
	background: rgb(255 255 255 / 0.16);
}

.glass-status--sold-out,
.glass-hero .glass-status--sold-out {
	background: var(--glass-danger);
}

/* -- 6. The column and the ticket ---------------------------------------------- */

.glass-layout {
	display: grid;
	gap: var(--glass-gap);
	max-width: var(--glass-width);
	margin: var(--glass-gap) auto 0;
}

.glass-main {
	display: grid;
	gap: var(--glass-gap);
	min-width: 0;
}

/* What people said, before it arrives — or when there is nothing to say. */
.glass-main > .ax-live:empty {
	display: none;
}

/* Two columns once there is room: the ticket is first in the source (on a phone
   it comes straight after the title) and second here, staying in view. */
@media (min-width: 1024px) {
	.glass-layout {
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 22.5rem);
		align-items: start;
	}

	.glass-aside {
		position: sticky;
		top: var(--glass-sticky-top);
		grid-column: 2;
		grid-row: 1;
	}

	.glass-main {
		grid-column: 1;
		grid-row: 1;
	}
}

.glass-ticket {
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.1rem, 2.4vw, 1.5rem);
}

.glass-facts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.glass-fact {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	align-items: center;
	gap: 0.95rem;
	padding: 0.85rem 0;
}

.glass-fact:first-child {
	padding-top: 0;
}

.glass-fact:last-child {
	padding-bottom: 0;
}

.glass-fact + .glass-fact {
	border-top: 1px solid var(--glass-line);
}

.glass-fact__icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--glass-radius-sm);
	background: rgb(255 255 255 / 0.72);
	box-shadow: inset 0 0 0 1px #fff, 0 1px 2px rgb(15 23 42 / 0.08);
	color: var(--glass-accent);
}

/* The page's own icons: line drawings in the colour of their text. Named, not
   every `svg` — the room and the form draw pictures of their own. */
.glass-fact__icon svg,
.glass-button svg,
.glass-choose svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.glass-fact__text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.glass-fact__main {
	font-weight: 650;
	line-height: 1.3;
}

.glass-fact__sub {
	color: var(--glass-soft);
	font-size: 0.925rem;
}

.glass-fact__note {
	color: var(--glass-faint);
	font-size: 0.875rem;
}

.event-page--glass .glass-fact__link {
	margin-top: 0.2rem;
	color: var(--glass-accent);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.event-page--glass .glass-fact__link:hover {
	text-decoration: underline;
}

/* The address, when the event has a location link: the fact's ink, underlined. */
.event-page--glass .glass-fact__place {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--glass-faint);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.event-page--glass .glass-fact__place:hover,
.event-page--glass .glass-fact__place:focus-visible {
	color: var(--glass-accent);
	text-decoration-color: currentColor;
}

/* A calendar leaf: the month on a band of the accent, the day under it. */
.glass-leaf {
	display: grid;
	width: 3.25rem;
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 6px 14px -8px rgb(15 23 42 / 0.3);
	text-align: center;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.glass-leaf__month {
	padding: 0.2rem 0;
	background: var(--glass-accent-gradient);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.glass-leaf__day {
	padding: 0.15rem 0 0.25rem;
	font-size: 1.35rem;
	font-weight: 750;
	letter-spacing: -0.02em;
}

/* The page's main button: the ticket's, and every Continue. */
.event-page--glass .glass-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	background: var(--glass-accent-gradient);
	color: #fff;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), var(--glass-accent-glow);
	transition: transform 0.2s ease, filter 0.2s ease;
}

.event-page--glass .glass-button:hover {
	color: #fff;
	filter: brightness(1.07);
	transform: translateY(-1px);
}

.event-page--glass .glass-button:focus-visible {
	outline: 3px solid rgb(53 111 188 / 0.45);
	outline-offset: 3px;
}

.event-page--glass .glass-button svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* -- 7. Cards ---------------------------------------------------------------- */

.glass-card {
	min-width: 0;
	padding: var(--glass-pad);
	scroll-margin-top: calc(var(--glass-sticky-top) + 0.5rem);
}

.glass-card__title,
.event-page--glass .event-section__title {
	margin: 0 0 1.1rem;
	color: var(--glass-ink);
	font-family: inherit;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	font-weight: 720;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.glass-card__lead {
	margin: -0.5rem 0 1.5rem;
	color: var(--glass-soft);
}

.glass-card__lead:last-child {
	margin-bottom: 0;
}

/* The author's words, at the size and measure prose reads at. */
.glass-card .event-description {
	max-width: 42rem;
	color: rgb(15 23 42 / 0.86);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.glass-card .event-description :is(h2, h3, h4) {
	margin: 1.75em 0 0.5em;
	color: var(--glass-ink);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 700;
}

.glass-card .event-description a {
	color: var(--glass-accent);
}

/* -- 8. Dates ---------------------------------------------------------------- */

.glass-dates {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.glass-dates__item {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.95rem;
	padding: 0.75rem 1rem 0.75rem 0.75rem;
	border: 1px solid rgb(255 255 255 / 0.75);
	border-radius: var(--glass-radius-sm);
	background: rgb(255 255 255 / 0.5);
}

.glass-dates__item.is-next {
	border-color: rgb(53 111 188 / 0.35);
	background: rgb(255 255 255 / 0.82);
	box-shadow: var(--glass-accent-ring);
}

.glass-dates__item.is-past {
	opacity: 0.6;
}

/* "Next", "Ended". */
.glass-tag {
	padding: 0.25em 0.7em;
	border-radius: 999px;
	background: rgb(53 111 188 / 0.12);
	color: var(--glass-accent-deep);
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.glass-tag--quiet {
	background: rgb(15 23 42 / 0.07);
	color: var(--glass-soft);
}

/* -- 9. Offers: passes and sponsorships ------------------------------------------ */

/* They need the script to work, so they wait for it (`glass-js`, set inline). */
html:not(.glass-js) .glass-offers {
	display: none;
}

.glass-offers__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One card: the words on the left, the price and the control on the right. */
.glass-offer {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		'name  price'
		'note  control'
		'terms control'
		'error error';
	align-items: center;
	gap: 0.3rem 1.25rem;
	padding: 1.1rem 1.15rem 1.1rem 1.3rem;
	border: 1px solid rgb(255 255 255 / 0.9);
	border-radius: 14px;
	background: var(--glass-tile);
	box-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 10px 28px -18px rgb(15 23 42 / 0.35);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* A name-your-price card's amounts need the width: a row of their own. */
.glass-offer[data-kind='amount'] {
	grid-template-areas:
		'name    price'
		'note    note'
		'terms   terms'
		'control control'
		'error   error';
}

.glass-offer:hover {
	border-color: rgb(53 111 188 / 0.28);
}

.glass-offer.is-chosen {
	border-color: rgb(53 111 188 / 0.55);
	background: var(--glass-tile-chosen);
	box-shadow: var(--glass-accent-ring), 0 16px 34px -18px rgb(53 111 188 / 0.6);
}

/* The chosen card's bar, down its left edge. */
.glass-offer.is-chosen::before {
	content: '';
	position: absolute;
	top: 1.1rem;
	bottom: 1.1rem;
	left: 0;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: var(--glass-accent-gradient);
}

.glass-offer.is-invalid {
	border-color: rgb(190 18 60 / 0.5);
	box-shadow: 0 0 0 3px rgb(190 18 60 / 0.12);
}

.glass-offer[data-sold-out] {
	opacity: 0.62;
}

.glass-offer__name {
	grid-area: name;
	margin: 0;
	color: var(--glass-ink);
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 680;
	line-height: 1.3;
}

.glass-offer__price {
	grid-area: price;
	justify-self: end;
	margin: 0;
	font-weight: 720;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.glass-offer[data-sold-out] .glass-offer__price {
	color: var(--glass-danger);
}

.glass-offer__note {
	grid-area: note;
	max-width: 36rem;
	margin: 0;
	color: var(--glass-soft);
	font-size: 0.95rem;
	line-height: 1.5;
}

.glass-offer__terms {
	grid-area: terms;
	margin: 0;
	color: var(--glass-faint);
	font-size: 0.85rem;
}

.glass-offer__control {
	grid-area: control;
	justify-self: end;
}

.glass-offer[data-kind='amount'] .glass-offer__control {
	justify-self: start;
	margin-top: 0.6rem;
}

.glass-offer__error {
	grid-area: error;
	margin: 0.35rem 0 0;
	color: var(--glass-danger);
	font-size: 0.9rem;
	font-weight: 600;
}

/*
 * Two shapes of button: ROUND for a stepper's − and +, PILL for a choice — an
 * amount, Other, Choose. A pressed pill, and a round one under the pointer,
 * fill with the accent.
 */
.event-page--glass :is(.glass-round, .glass-pill) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 44px;
	margin: 0;
	border: 1px solid rgb(15 23 42 / 0.1);
	border-radius: 999px;
	background: #fff;
	color: var(--glass-accent);
	font: inherit;
	font-weight: 650;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 1px 2px rgb(15 23 42 / 0.1);
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.event-page--glass .glass-round {
	width: 40px;
	min-height: 40px;
	padding: 0;
	font-size: 1.25rem;
}

.event-page--glass .glass-pill {
	padding: 0.55rem 1.15rem;
}

.event-page--glass .glass-pill:hover {
	border-color: rgb(53 111 188 / 0.5);
}

.event-page--glass .glass-round:hover:not(:disabled),
.event-page--glass .glass-pill[aria-pressed='true'] {
	border-color: transparent;
	background: var(--glass-accent-gradient);
	color: #fff;
	box-shadow: var(--glass-accent-glow);
}

.event-page--glass .glass-round:disabled {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	color: rgb(15 23 42 / 0.25);
	cursor: default;
}

.event-page--glass :is(.glass-round, .glass-pill):focus-visible {
	outline: 2px solid var(--glass-accent);
	outline-offset: 2px;
}

/* Quantity: − n + in a pill of its own. */
.glass-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	padding: 4px;
	border: 1px solid rgb(15 23 42 / 0.08);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.7);
}

.glass-stepper__value {
	min-width: 2.4em;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Amount: the suggestion, Other, and the box Other opens. */
.glass-amounts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.glass-money {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 44px;
	padding: 0 0.5rem 0 1rem;
	border: 1px solid var(--glass-accent);
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--glass-accent-ring);
}

.glass-money[hidden] {
	display: none;
}

.glass-money__symbol {
	color: var(--glass-soft);
	font-weight: 650;
}

.event-page--glass .glass-money input {
	width: 7rem;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--glass-ink);
	font: inherit;
	font-size: max(16px, 1rem); /* 16px stops iOS zooming into the box. */
	font-weight: 700;
	appearance: textfield;
}

.event-page--glass .glass-money input::-webkit-inner-spin-button {
	appearance: none;
}

/* Once: Choose, which reads Chosen while pressed. */
.glass-choose__on,
.glass-choose[aria-pressed='true'] .glass-choose__off {
	display: none;
}

.glass-choose[aria-pressed='true'] .glass-choose__on {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.event-page--glass .glass-choose svg {
	width: 1.1rem;
	height: 1.1rem;
	stroke-width: 2.2;
}

/* -- 10. Continue ------------------------------------------------------------ */

/* The foot of a section of cards, once anything is chosen: the total and the way on. */
.glass-next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem 1.25rem;
	margin-top: 1.25rem;
	padding: 1rem 1rem 1rem 1.25rem;
	border: 1px solid #fff;
	border-radius: 14px;
	background: linear-gradient(135deg, rgb(234 241 250 / 0.95), rgb(243 247 252 / 0.85));
}

.glass-next[hidden],
.glass-next__sum[hidden] {
	display: none;
}

.glass-next__sum {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 auto 0 0;
	color: var(--glass-soft);
	font-weight: 600;
}

.glass-next__sum strong {
	color: var(--glass-ink);
	font-size: 1.5rem;
	font-weight: 760;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* -- 11. The form's frame ---------------------------------------------------- */

/*
 * The questions the cards stand for: still in the form, still counted and
 * sent — hidden by a class of the page's own, never by `hidden`, which Forms
 * reads as "not asked". A section left with nothing to show goes too, heading
 * and all.
 */
.event-page--glass .field.glass-mirrored,
.event-page--glass .form__body > .section:not(:has(.field:not(.glass-mirrored))) {
	display: none;
}

/* -- 12. Borrowed pieces: the room, and what people said ------------------------ */

.event-page--glass :is(.event-plan, .event-reviews) {
	min-width: 0;
	margin: 0;
	padding: var(--glass-pad);
}

.event-page--glass :is(.event-reviews__summary, .event-reviews__count) {
	color: var(--glass-soft);
}

.event-page--glass .event-reviews__button {
	border-color: #fff;
	background: rgb(255 255 255 / 0.7);
	color: var(--glass-ink);
}

.event-page--glass .event-review {
	border: 1px solid rgb(255 255 255 / 0.8);
	border-radius: var(--glass-radius-sm);
	background: rgb(255 255 255 / 0.62);
}

.event-page--glass .event-review__star {
	color: rgb(15 23 42 / 0.16);
}

.event-page--glass .event-review__star.is-on {
	color: #f59e0b;
}

/* -- 13. Phones -------------------------------------------------------------- */

@media (max-width: 782px) {
	.event-page--glass {
		--glass-radius: 14px;
		--glass-radius-sm: 10px;
		--glass-backdrop-blur: 40px;
	}

	/* The narrow crop is portrait: give it room, never the whole screen. */
	.glass-hero .event-hero img {
		max-height: 68svh;
		aspect-ratio: 4 / 5;
	}

	.glass-dates__item {
		grid-template-columns: 3.25rem minmax(0, 1fr);
	}

	.glass-dates__item .glass-tag {
		grid-column: 2;
		justify-self: start;
	}

	/* A card: the name with its price under it and the control beside both,
	   then what it includes across the whole card. */
	.glass-offer {
		grid-template-areas:
			'name  control'
			'price control'
			'note  note'
			'terms terms'
			'error error';
		gap: 0.15rem 0.9rem;
		padding: 1rem 0.9rem 1rem 1.1rem;
	}

	.glass-offer[data-kind='amount'] {
		grid-template-areas:
			'name    name'
			'price   price'
			'note    note'
			'terms   terms'
			'control control'
			'error   error';
	}

	.glass-offer__price {
		justify-self: start;
		color: var(--glass-accent);
	}

	.glass-offer__note {
		margin-top: 0.5rem;
	}

	.glass-next .glass-button {
		flex: 1 1 100%;
	}
}

/* -- 14. Less motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.glass-backdrop__image {
		transform: none;
		animation: none;
	}

	.event-page--glass *,
	.event-page--glass *::before {
		transition: none !important;
	}

	.event-page--glass .glass-button:hover {
		transform: none;
	}
}