/**
 * Experience Detail — identity, territorial context and nearby experiences.
 */

/* Structural grouping only: these are page sections, not one oversized card. */
.ch-experience-detail__editorial {
	margin: 0 0 clamp(16px, 2vw, 30px);
	background: var(--ch-color-ivory);
}

/* 1. Territorial narrative with an embedded key-facts panel. */
.ch-experience-territory {
	padding: clamp(34px, 3.5vw, 50px) 0 clamp(22px, 2.4vw, 34px);
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--ch-color-ivory) 98%, transparent) 0 52%, color-mix(in srgb, var(--ch-color-ivory) 88%, transparent) 74%, color-mix(in srgb, var(--ch-color-ivory) 94%, transparent) 100%);
}

.ch-experience-territory__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
	gap: clamp(46px, 6vw, 88px);
	align-items: center;
}

.ch-experience-territory .ch-section-kicker {
	color: var(--ch-color-text-muted);
}

.ch-experience-territory__title,
.ch-experience-related__title {
	margin: 7px 0 0;
	font-family: var(--ch-font-display);
	font-weight: 500;
	letter-spacing: -.015em;
	color: var(--ch-color-forest-deep);
}

.ch-experience-territory__title {
	max-width: 14em;
	font-size: clamp(35px, 3.4vw, 46px);
	line-height: 1.02;
}

.ch-experience-territory__trail {
	margin: 16px 0 20px;
	color: var(--ch-perspective-accent-strong);
	font-family: var(--ch-font-sans);
	font-size: 10px;
	font-weight: 750;
	line-height: 1.45;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.ch-experience-territory__narrative {
	max-width: 60ch;
	margin: 0 0 10px;
	color: var(--ch-color-text);
	font-family: var(--ch-font-sans);
	font-size: 14px;
	line-height: 1.62;
}

.ch-experience-territory__reference {
	display: flex;
	align-items: center;
}

/* The technical data is now a single embedded reading aid. */
.ch-experience-sheet {
	padding: 22px 24px;
	border: 1px solid color-mix(in srgb, var(--ch-color-border) 70%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, #dbe7e1 76%, var(--ch-color-ivory));
}

.ch-experience-sheet__title {
	margin: 0 0 14px;
	color: var(--ch-color-title);
	font-family: var(--ch-font-sans);
	font-size: 12px;
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ch-experience-sheet__facts {
	display: grid;
	gap: 11px;
	margin: 0;
}

.ch-experience-sheet__fact {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 11px;
	align-items: start;
}

.ch-experience-sheet__icon {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var(--ch-color-forest);
}

.ch-experience-sheet__icon svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.55;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ch-experience-sheet__copy {
	padding-top: 2px;
	font-family: var(--ch-font-sans);
	font-size: 13px;
	line-height: 1.42;
}

.ch-experience-sheet__copy dt,
.ch-experience-sheet__copy dd {
	display: inline;
	margin: 0;
}

.ch-experience-sheet__copy dt {
	color: var(--ch-color-title);
	font-weight: 750;
}

.ch-experience-sheet__copy dt::after {
	content: ': ';
}

.ch-experience-sheet__copy dd {
	color: var(--ch-color-text);
}

.ch-experience-sheet__fact--primary .ch-experience-sheet__copy dt {
	display: none;
}

.ch-experience-sheet__fact--primary .ch-experience-sheet__copy dd {
	color: var(--ch-color-forest);
	font-weight: 700;
}

/* 2. Nearby Experiences close the same chapter without restarting the page. */
.ch-experience-related {
	padding: clamp(22px, 2.5vw, 34px) 0 clamp(34px, 3.5vw, 50px);
	background: transparent;
}

.ch-experience-related__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 18px;
}

.ch-experience-related__title {
	font-size: clamp(34px, 3.4vw, 46px);
	line-height: 1;
}

.ch-experience-related__viewport {
	overflow: hidden;
}

.ch-experience-related__track {
	gap: 18px;
	padding: 3px 0 8px;
}

.ch-experience-related__item {
	flex: 0 0 calc((100% - 36px) / 3);
	min-width: 0;
	scroll-snap-align: start;
}

.ch-discovery.ch-experience-detail .ch-experience-related .ch-experience-card,
.ch-discovery.ch-experience-detail .ch-experience-related a.ch-experience-card,
.ch-experience-detail .ch-experience-related .ch-experience-card:link,
.ch-experience-detail .ch-experience-related .ch-experience-card:visited {
	height: 320px;
	min-height: 320px;
	aspect-ratio: auto;
}

.ch-experience-related .ch-experience-card__title {
	font-size: clamp(22px, 1.9vw, 29px);
}

.ch-experience-related .ch-experience-card__meaning {
	font-size: 12px;
	-webkit-line-clamp: 2;
}

.ch-experience-detail > .ch-destination-stay {
	padding: clamp(28px, 3.5vw, 48px) 0 clamp(40px, 5vw, 68px);
	background: var(--ch-color-ivory);
}

.ch-experience-detail > .ch-destination-stay .ch-home-founder {
	width: 100%;
	margin: 0;
}

@media (max-width: 1024px) {
	.ch-experience-territory__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.ch-experience-territory__title {
		max-width: 15em;
	}

	.ch-experience-territory__reference {
		display: block;
		max-width: 720px;
	}

	.ch-experience-related__item {
		flex-basis: calc((100% - 18px) / 2);
	}

	.ch-discovery.ch-experience-detail .ch-experience-related .ch-experience-card,
	.ch-discovery.ch-experience-detail .ch-experience-related a.ch-experience-card,
	.ch-experience-detail .ch-experience-related .ch-experience-card:link,
	.ch-experience-detail .ch-experience-related .ch-experience-card:visited {
		height: 350px;
		min-height: 350px;
	}
}

@media (max-width: 680px) {
	.ch-experience-territory,
	.ch-experience-related {
		padding-block: 30px;
	}

	.ch-experience-sheet {
		padding: 20px;
	}

	.ch-experience-related__head {
		align-items: flex-start;
	}

	.ch-experience-related__item {
		flex-basis: min(84vw, 350px);
	}

	.ch-discovery.ch-experience-detail .ch-experience-related .ch-experience-card,
	.ch-discovery.ch-experience-detail .ch-experience-related a.ch-experience-card,
	.ch-experience-detail .ch-experience-related .ch-experience-card:link,
	.ch-experience-detail .ch-experience-related .ch-experience-card:visited {
		height: 400px;
		min-height: 400px;
	}
}