/**
 * LOUNGE BODY + THE EXPERIENCE
 *
 * From this section down the page runs beside a sticky booking rail. Measured
 * from the product page: main column 808 + gap 138 + rail 452 = the 1400
 * content column. Slides are 393 wide, 23 apart, two in view.
 */

@layer components {

	/* ---- Two-column body with a sticky rail ------------------------------ */

	.lounge-body {
		display: grid;
		gap: var(--space-3xl);
		padding-block-end: var(--section-gap);
	}

	@media (min-width: 64rem) {
		.lounge-body {
			grid-template-columns: 808fr 452fr;
			column-gap: clamp(var(--space-xl), 9.9vw, 8.625rem);   /* → 138px */
			align-items: start;
		}

		/*
		 * The price follows you down the page. align-items: start on the grid is
		 * what lets this work — a stretched item has nothing to slide within.
		 */
		.lounge-body__rail {
			position: sticky;
			inset-block-start: var(--space-l);
		}
	}

	/*
	 * A card taller than the window would pin with its foot — and its button —
	 * permanently off screen. Below that height it simply scrolls with the page.
	 */
	@media (max-height: 46rem) {
		.lounge-body__rail { position: static; }
	}

	.lounge-body__main > * + * {
		margin-block-start: var(--section-gap);
	}

	/* ---- Copy ------------------------------------------------------------ */

	.lounge-exp__heading {
		margin-block: var(--space-2xs) 0;
		font-size: var(--fs-heading-lg);
		line-height: var(--lh-heading-lg);
		letter-spacing: var(--track-heading-lg);
		font-weight: var(--weight-bold);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.lounge-exp__body {
		margin-block-start: var(--space-l);
		font-size: var(--fs-body);
		line-height: 1.6;
		color: var(--clr-text-inverse-soft);
	}

	.lounge-exp__body > * + * {
		margin-block-start: var(--space-m);
	}

	/* ---- Carousel -------------------------------------------------------- */

	.media-carousel {
		margin-block-start: clamp(var(--space-2xl), 5.2vw, 4.5rem);
	}

	.media-carousel__viewport {
		overflow: hidden;
	}

	.media-carousel__track {
		display: flex;
		gap: 1.4375rem;                        /* 23px, measured */
	}

	.media-carousel__slide {
		flex: 0 0 calc(50% - 0.71875rem);      /* two in view, minus half the gap */
		min-inline-size: 0;
		margin: 0;
		border-radius: var(--radius-card);
		overflow: hidden;
	}

	.media-carousel__slide img {
		display: block;
		inline-size: 100%;
		aspect-ratio: 393 / 369;
		object-fit: cover;
	}

	@media (max-width: 47.999rem) {
		/* One at a time on a phone — half of a 393 slide is unreadable. */
		.media-carousel__slide { flex-basis: 100%; }
	}

	/* ---- Controls -------------------------------------------------------- */

	.media-carousel__controls {
		display: flex;
		align-items: center;
		gap: var(--space-l);
		margin-block-start: var(--space-l);
	}

	/*
	 * Reads as a scrollbar rather than a filling bar: the thumb is one page wide
	 * and travels the track, so it says both how far along you are and how much
	 * there is. Both numbers come from the carousel at runtime.
	 */
	.media-carousel__progress {
		position: relative;
		flex: 1;
		block-size: 4px;
		background-color: var(--clr-border);
		border-radius: var(--radius-pill);
		overflow: hidden;
	}

	.media-carousel__thumb {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: var(--thumb-width, 33%);
		background-color: var(--clr-accent);
		border-radius: inherit;
		transform: translateX(var(--thumb-offset, 0));
	}

	.media-carousel__arrows {
		display: flex;
		gap: 0.4375rem;                        /* 7px, measured */
		flex: none;
	}

	.carousel-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.375rem;                 /* 38px, measured */
		block-size: 2.375rem;
		padding: 0;
		background-color: transparent;
		border: 1px solid var(--clr-border);
		border-radius: 50%;
		color: var(--clr-text);
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);
	}

	.carousel-arrow svg {
		inline-size: 1.25rem;
		block-size: 1.25rem;
	}

	.carousel-arrow:hover:not(:disabled),
	.carousel-arrow:focus-visible {
		background-color: var(--clr-accent);
		border-color: var(--clr-accent);
		color: var(--clr-accent-text);
	}

	.carousel-arrow:disabled {
		opacity: 0.35;
		cursor: default;
	}
}