@layer pages {

	/* ─── Experiences archive (index grid) ─── */

	.experiences-archive {
		padding-top: var(--uw-space-16);	
	}

	.experiences-archive__header {
		margin-block-end: var(--uw-space-16);
	}

	.experiences-grid {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--uw-space-10) var(--uw-space-6);
	}

	.experiences-archive__empty {
		text-align: center;
		opacity: 0.6;
	}

	/* Pagination */
	.experiences-archive .pagination {
		margin-block-start: var(--uw-space-12);
	}

	.experiences-archive .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		height: 40px;
		padding-inline: var(--uw-space-2);
		font-size: var(--uw-text-sm);
		color: var(--uw-fg);
		text-decoration: none;
		border-radius: var(--uw-radius-sm);
		transition: opacity var(--uw-transition-fast);
	}

	.experiences-archive .page-numbers:hover {
		opacity: 0.6;
	}

	.experiences-archive .page-numbers.current {
		background-color: var(--uw-primary);
		color: var(--uw-bg);
	}

	@media (max-width: 900px) {
		.experiences-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 560px) {
		.experiences-grid {
			grid-template-columns: 1fr;
		}
	}

	/* ─── Single Experience: intro ─── */

	.experience-reviews, .experience-intro, .faq-section {
		padding-block: var(--uw-space-16);
	}

	.faq-section {
		padding-bottom: var(--uw-space-32);
	}

	.experience-intro__inner {
		max-width: 720px;
		margin-inline: auto;
	}

	/* ─── Starting Point ─── */
	.experience-intro__starting {
		margin-block-start: var(--uw-space-12);
		text-align: center;
	}

	/* Matches the stats label/value hierarchy (formerly used by Schedule). */
	.experience-intro__subheading {
		font-family: var(--uw-font-body);
		font-size: var(--uw-text-sm);
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--uw-accent);
		margin-block-end: var(--uw-space-2);
	}

	.experience-intro__address {
		font-family: var(--uw-font-heading);
		font-size: var(--uw-text-lg);
		color: var(--uw-fg);
		text-wrap: pretty;
		margin: 0;
	}

	/* ─── Stats row (Price / Duration) ─── */
	.experience-stats {
		display: flex;
		justify-content: center;
		margin-block-start: var(--uw-space-12);
	}

	/* Starting Point + stats read as one cluster — keep them close. */
	.experience-intro__starting + .experience-stats {
		margin-block-start: var(--uw-space-6);
	}

	.experience-stat {
		text-align: center;
		padding-inline: var(--uw-space-8);
	}

	.experience-stat + .experience-stat {
		border-inline-start: 1px solid rgba(14, 20, 24, 0.1);
	}

	.experience-stat__label {
		font-family: var(--uw-font-body);
		font-size: var(--uw-text-sm);
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--uw-accent);
		margin-block-end: var(--uw-space-2);
	}

	.experience-stat__value {
		font-family: var(--uw-font-heading);
		font-size: var(--uw-text-lg);
		color: var(--uw-fg);
		margin: 0;
	}

	.experience-stat__unit {
		display: block;
		font-family: var(--uw-font-body);
		font-size: var(--uw-text-xs);
		color: var(--uw-fg);
		opacity: 0.55;
		line-height: 1;
	}

	/* ─── Booking button ─── */
	.experience-booking {
		margin-block-start: var(--uw-space-10);
		text-align: center;
	}

	.experience-booking .btn {
		min-width: 260px;
	}

	.experience-booking__note {
		margin-block-start: var(--uw-space-3);
		margin-block-end: 0;
		font-size: var(--uw-text-sm);
		color: var(--uw-fg);
		opacity: 0.55;
	}

	/* ─── Sticky booking bar ─── */
	.experience-bookbar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 90;
		background-color: var(--uw-bg);
		border-block-start: 1px solid rgba(14, 20, 24, 0.1);
		box-shadow: 0 -2px 14px rgba(14, 20, 24, 0.08);
		transform: translateY(100%);
		transition: transform var(--uw-transition-base);
	}

	.experience-bookbar.is-visible {
		transform: translateY(0);
	}

	.experience-bookbar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--uw-space-2);
		padding-block: var(--uw-space-3);
	}

	.experience-bookbar__info {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
		min-width: 0;
	}

	.experience-bookbar__title {
		font-family: var(--uw-font-heading);
		font-size: var(--uw-text-lg);
		color: var(--uw-fg);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.4;
	}

	.experience-bookbar__price {
		font-size: var(--uw-text-sm);
		color: var(--uw-fg);
		opacity: 0.75;
	}

	.experience-bookbar .btn {
		flex-shrink: 0;
	}

	@media (max-width: 560px) {
		/* Title takes too much room on small screens — lead with the price */
		.experience-bookbar__title {
			display: none;
		}

		.experience-bookbar__price {
			opacity: 1;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.experience-bookbar {
			transition: none;
		}
	}

	/* ─── Gallery slider ─── */
	.experience-gallery-wrap {
		margin-block-start: var(--uw-space-16);
	}

	/* Minimal prev/next controls — desktop only (touch users swipe) */
	.experience-gallery__controls {
		display: none;
	}

	@media (min-width: 769px) {
		.experience-gallery__controls {
			display: flex;
			justify-content: flex-end;
			gap: var(--uw-space-2);
			margin-block-end: var(--uw-space-4);
		}
	}

	.experience-gallery__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: var(--uw-radius-pill);
		border: 1px solid rgba(14, 20, 24, 0.2);
		color: var(--uw-fg);
		background: none;
		cursor: pointer;
		opacity: 0.6;
		transition:
			opacity var(--uw-transition-fast),
			border-color var(--uw-transition-fast);
	}

	.experience-gallery__arrow:hover {
		opacity: 1;
		border-color: var(--uw-fg);
	}

	.experience-gallery__arrow:disabled {
		opacity: 0.2;
		cursor: default;
	}

	.experience-gallery {
		list-style: none;
		margin-block-start: 0;
		/* Left stays aligned with the content; the track bleeds to the
		   right edge of the viewport so the peek isn't clipped by the
		   container padding. */
		margin-inline-end: calc(50% - 50vw);
		padding-inline: 0;
		display: flex;
		gap: var(--uw-space-4);
		/* Scroll on X only so the vertical wheel still scrolls the page. */
		overflow: auto hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.experience-gallery::-webkit-scrollbar {
		display: none;
	}

	.experience-gallery__item {
		/* ~2 across with a peek of the next */
		flex: 0 0 calc((100% - var(--uw-space-4)) / 2 - var(--uw-space-8));
		scroll-snap-align: start;
	}

	.experience-gallery__img {
		display: block;
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}

	/* End gap so the last image stops at the content edge, not the screen edge,
	   once fully scrolled (mirrors the left alignment). */
	.experience-gallery__item:last-child {
		margin-inline-end: calc(50vw - 50%);
	}

	/* ─── Description / content ─── */
	.experience-content {
		max-width: 720px;
		margin-inline: auto;
		margin-block-start: var(--uw-space-16);
	}

	.experience-content > :first-child {
		margin-block-start: 0;
	}

	.experience-content > :last-child {
		margin-block-end: 0;
	}

	/* ─── Responsive ─── */
	@media (max-width: 560px) {
		/* Price + Duration sit side by side */
		.experience-stats {
			display: grid;
			grid-template-columns: 1fr 1fr;
			row-gap: var(--uw-space-6);
		}

		.experience-stat {
			padding-inline: var(--uw-space-4);
		}

		.experience-gallery__item {
			flex-basis: 85%;
		}
	}
}