/*
 * Experience detail page. Phones: hero, intro, booking panel, details, with a sticky bottom bar.
 * Wide screens: details on the left, booking panel sticky on the right.
 */
.tz-exp__hero {
	background: var(--tz-surface-sunk);
}

.tz-exp__hero img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Capped so the title, price and booking panel still reach the first screen on laptops. */
@media (min-width: 48em) {
	/* An explicit width stops aspect-ratio from turning the max-height into a max-width. */
	.tz-exp__hero img,
	.tz-exp__hero .tz-placeholder {
		width: 100%;
		max-height: 50svh;
		aspect-ratio: 21 / 9;
	}
}

.tz-exp__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "intro" "book" "body";
	gap: var(--tz-space-xl);
	max-width: calc(var(--tz-wide) + 2 * var(--tz-gutter));
	margin-inline: auto;
	padding: var(--tz-space-xl) var(--tz-gutter) var(--tz-space-2xl);
}

.tz-exp__intro {
	grid-area: intro;
}

.tz-exp__book {
	grid-area: book;
}

.tz-exp__body {
	grid-area: body;
	display: grid;
	gap: var(--tz-space-2xl);
	max-width: var(--tz-measure);
}

@media (min-width: 64em) {
	.tz-exp__layout {
		grid-template-columns: minmax(0, 1fr) 22rem;
		grid-template-areas: "intro book" "body book";
		column-gap: var(--tz-space-2xl);
		padding-top: var(--tz-space-2xl);
	}

	.tz-exp__book {
		position: sticky;
		top: calc(var(--tz-header-h) + var(--tz-space-l));
		align-self: start;
	}
}

/* Intro */
.tz-exp__header {
	display: flex;
	flex-direction: column;
	gap: var(--tz-space-s);
}

.tz-exp__types {
	order: -1;
	color: var(--tz-text-muted);
	font-size: var(--tz-step--1);
	font-weight: 500;
}

.tz-exp__title {
	font-size: var(--tz-step-4);
}

.tz-exp__lead {
	max-width: var(--tz-measure);
	color: var(--tz-text-soft);
	font-size: var(--tz-step-1);
	line-height: 1.6;
}

.tz-exp__intro .tz-facts {
	margin-top: var(--tz-space-l);
}

/* Booking panel, topped with a strip of the curtain. */
.tz-book {
	position: relative;
	padding: calc(var(--tz-space-m) + 4px) var(--tz-space-m) var(--tz-space-m);
	overflow: hidden;
	border: 1px solid var(--tz-line);
	border-radius: var(--tz-radius);
	background: var(--tz-surface);
}

.tz-book::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--tz-maku);
}

.tz-book__title {
	font-size: var(--tz-step-1);
}

.tz-book__price {
	margin-top: var(--tz-space-xs);
	font-family: var(--tz-font-display);
	font-size: var(--tz-step-2);
	font-weight: 700;
	line-height: 1.3;
}

.tz-book__price.is-tba {
	color: var(--tz-text-muted);
	font-family: var(--tz-font-body);
	font-size: var(--tz-step-0);
	font-weight: 500;
}

.tz-book__note {
	margin-top: var(--tz-space-2xs);
	color: var(--tz-text-muted);
	font-size: var(--tz-step--1);
}

.tz-book .tz-cta-slot {
	margin-top: var(--tz-space-m);
}

/* Detail sections */
.tz-exp__heading {
	margin-bottom: var(--tz-space-m);
	font-size: var(--tz-step-2);
}

.tz-incl {
	display: grid;
	gap: var(--tz-space-l);
}

.tz-incl__title {
	margin-bottom: var(--tz-space-xs);
	font-family: var(--tz-font-body);
	font-size: var(--tz-step-0);
	font-weight: 700;
}

@media (min-width: 40em) {
	.tz-incl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tz-incl__col:only-child {
		grid-column: 1 / -1;
	}
}

.tz-venue__name {
	font-family: var(--tz-font-display);
	font-size: var(--tz-step-1);
	font-weight: 700;
}

.tz-venue__address {
	margin-top: var(--tz-space-3xs);
	color: var(--tz-text-soft);
}

.tz-venue__facts {
	margin-top: var(--tz-space-m);
	padding-top: var(--tz-space-s);
	border-top: 1px solid var(--tz-line);
}

/* Label beside the value; with enlarged text the value moves under the label instead of out of the screen. */
.tz-venue__facts div {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--tz-space-s);
}

.tz-venue__facts dt {
	flex: 0 0 8rem;
	color: var(--tz-text-muted);
	font-size: var(--tz-step--1);
	line-height: var(--tz-leading);
}

.tz-venue__facts dd {
	flex: 1 1 10rem;
	min-width: 0;
}

.tz-venue__facts .is-tba dd {
	color: var(--tz-text-muted);
}

.tz-venue__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--tz-space-l);
	margin-top: var(--tz-space-s);
}

/* Sticky booking bar (phones and tablets) */
.tz-sticky-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	padding-bottom: env(safe-area-inset-bottom);
	border-top: 1px solid var(--tz-line-strong);
	background: var(--tz-surface);
	box-shadow: 0 -0.5rem 1.5rem rgb(28 25 21 / 0.1);
	transition: transform var(--tz-duration) var(--tz-ease), visibility var(--tz-duration);
}

.tz-sticky-cta.is-hidden {
	visibility: hidden;
	transform: translateY(100%);
}

.tz-sticky-cta__inner {
	display: flex;
	align-items: center;
	min-height: 4.5rem;
	padding: var(--tz-space-xs) var(--tz-gutter);
}

.tz-sticky-cta .tz-cta-slot {
	flex: 1;
}

/*
 * Price or status on the left, the action on the right. Neither column may shrink below its
 * longest word, so enlarged text wraps instead of printing the status over the button; when
 * even that does not fit (very large text), the two stack (review A11Y-3).
 */
.tz-sticky-cta__inner {
	container-type: inline-size;
}

.tz-sticky-cta .tkz-cta {
	display: grid;
	grid-template-columns: minmax(min-content, 1fr) minmax(min-content, max-content);
	align-items: center;
	gap: 0 var(--tz-space-s);
}

.tz-sticky-cta .tkz-cta > * {
	grid-column: 1;
}

.tz-sticky-cta .tkz-cta > :is(.tkz-cta__button, .tkz-cta__ask) {
	grid-column: 2;
	grid-row: 1 / span 2;
}

@container (max-width: 16em) {
	.tz-sticky-cta .tkz-cta {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--tz-space-2xs);
	}

	.tz-sticky-cta .tkz-cta > :is(.tkz-cta__button, .tkz-cta__ask) {
		grid-column: 1;
		grid-row: auto;
	}
}

/*
 * Keyboard focus must not end up under the bar: scrolling a focused element into view keeps
 * this much room at the bottom (WCAG 2.4.11, review A11Y-1). theme.js measures the bar.
 */
@media (max-width: 63.99em) {
	html:has(.tz-sticky-cta) {
		scroll-padding-bottom: calc(var(--tz-sticky-reserve, var(--tz-sticky-h)) + var(--tz-space-s));
	}
}

.tz-sticky-cta .tkz-cta__price {
	font-size: var(--tz-step--1);
}

/*
 * Room for the bar below the last content, inside the dark footer so the band stays unbroken.
 * theme.js sets --tz-sticky-reserve to the bar's measured height; the token is the no-JS fallback.
 */
body:has(.tz-sticky-cta) .tz-footer {
	padding-bottom: var(--tz-sticky-reserve, calc(var(--tz-sticky-h) + env(safe-area-inset-bottom)));
}

@media (min-width: 64em) {
	.tz-sticky-cta {
		display: none;
	}

	body:has(.tz-sticky-cta) .tz-footer {
		padding-bottom: 0;
	}
}

/* An open booking embed needs the full width, so the side panel drops back into the flow. */
@media (min-width: 64em) {
	.tz-exp__layout:has(.tkz-booking:not([hidden])) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "intro" "book" "body";
	}

	.tz-exp__layout:has(.tkz-booking:not([hidden])) .tz-exp__book {
		position: static;
	}
}