/*
 * Music Experiences listing-template presentation.
 * Keeps festival journeys and lessons distinct from local-experience pages.
 */

:root {
	--me-listing-ink: #272128;
	--me-listing-muted: #716a72;
	--me-listing-line: #e8e2e8;
	--me-listing-soft: #faf8fa;
	--me-listing-accent: #f23d76;
}

/* Shared template hygiene. */
html body.me-listing-template .listing-titlebar-title,
html body.me-listing-template .listeo-single-listing-content,
html body.me-listing-template .listeo-single-listing-sidebar {
	min-width: 0 !important;
}

@media (min-width: 992px) {
	html body.me-listing-template,
	html body.me-listing-template #wrapper,
	html body.me-listing-template .single-listing-page-titlebar,
	html body.me-listing-template .container.music-experiences,
	html body.me-listing-template #titlebar {
		background: #ffffff !important;
	}

	html body.me-listing-template .container.music-experiences {
		padding-top: 22px !important;
	}
}

html body.me-listing-template .listing-titlebar-tags {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 7px !important;
}

html body.me-listing-template .listing-titlebar-tags .listing-tag,
html body.me-listing-template .listing-titlebar-tags .listing-pricing-tag {
	margin: 0 !important;
}

html body.me-listing-template .me-quick-facts {
	align-items: stretch !important;
}

html body.me-listing-template .me-quick-facts > div {
	min-width: 0 !important;
}

html body.me-listing-template .me-quick-facts strong {
	overflow-wrap: anywhere !important;
}

/* Festival/trip listings are curated journeys, not individual host profiles. */
html body.me-template-festival-trip .listeo-single-listing-sidebar .widget_listing_owner {
	display: none !important;
}

html body.me-template-festival-trip .listeo-single-listing-sidebar .me-state-cta {
	order: -3 !important;
}

/* Lesson listings retain the instructor card but make it read as a person-first profile. */
html body.me-template-music-lesson .listeo-single-listing-sidebar .widget_listing_owner {
	border: 1px solid var(--me-listing-line) !important;
	border-radius: 18px !important;
	background: #fff !important;
	box-shadow: 0 10px 28px rgba(31,22,32,.06) !important;
	overflow: hidden !important;
}

html body.me-template-music-lesson .hosted-by-bio p {
	color: var(--me-listing-muted) !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
}

@media (max-width: 767px) {
	/* Both non-local templates become a clean single-column reading flow. */
	html body.me-template-festival-trip .container.festivals,
	html body.me-template-music-lesson .container.music-lesson {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 16px !important;
		padding-left: 16px !important;
		box-sizing: border-box !important;
	}

	html body.me-template-festival-trip .container.festivals > .row,
	html body.me-template-music-lesson .container.music-lesson > .row,
	html body.me-template-festival-trip .sticky-wrapper,
	html body.me-template-music-lesson .sticky-wrapper {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	html body.me-template-festival-trip .container.festivals [class*='col-'],
	html body.me-template-music-lesson .container.music-lesson [class*='col-'] {
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	/* Title block: compact identity image + readable title. */
	html body.me-template-festival-trip #titlebar.listing-titlebar,
	html body.me-template-music-lesson #titlebar.listing-titlebar {
		display: grid !important;
		grid-template-columns: 76px minmax(0, 1fr) !important;
		align-items: start !important;
		gap: 14px !important;
		margin: 20px 0 18px !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	html body.me-template-festival-trip #titlebar .listing-logo,
	html body.me-template-music-lesson #titlebar .listing-logo {
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: 76px !important;
		height: 76px !important;
		margin: 0 !important;
		border-radius: 15px !important;
		background: #f2eef1 !important;
		overflow: hidden !important;
	}

	html body.me-template-music-lesson #titlebar .listing-logo {
		border-radius: 50% !important;
	}

	html body.me-template-festival-trip #titlebar .listing-logo img,
	html body.me-template-music-lesson #titlebar .listing-logo img {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		object-fit: cover !important;
	}

	html body.me-template-festival-trip #titlebar .listing-titlebar-title,
	html body.me-template-music-lesson #titlebar .listing-titlebar-title {
		grid-column: 2 !important;
		grid-row: 1 !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	html body.me-template-festival-trip #titlebar h1,
	html body.me-template-music-lesson #titlebar h1 {
		max-width: 100% !important;
		margin: 7px 0 8px !important;
		color: var(--me-listing-ink) !important;
		font-size: 31px !important;
		line-height: 1.06 !important;
		letter-spacing: -.04em !important;
		overflow-wrap: anywhere !important;
	}

	html body.me-template-festival-trip #titlebar .listing-titlebar-tags,
	html body.me-template-music-lesson #titlebar .listing-titlebar-tags {
		gap: 5px !important;
	}

	html body.me-template-festival-trip #titlebar .listing-tag,
	html body.me-template-music-lesson #titlebar .listing-tag,
	html body.me-template-music-lesson #titlebar .listing-pricing-tag {
		padding: 5px 8px !important;
		font-size: 10px !important;
		line-height: 1.2 !important;
	}

	html body.me-template-festival-trip #titlebar .listing-address,
	html body.me-template-music-lesson #titlebar .listing-address,
	html body.me-template-music-lesson #titlebar .listing-rating-link {
		font-size: 12px !important;
		line-height: 1.4 !important;
	}

	/* Keep save control below the title rather than squeezing it into the title grid. */
	html body.me-template-festival-trip #titlebar > .listing-widget,
	html body.me-template-music-lesson #titlebar > .listing-widget {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		width: 100% !important;
		margin: 2px 0 0 !important;
	}

	html body.me-template-festival-trip #titlebar .listing-share,
	html body.me-template-music-lesson #titlebar .listing-share {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Gallery: one strong hero image on phones; extra images remain available through Show All Photos. */
	html body.me-template-festival-trip .listeo-single-listing-gallery-grid,
	html body.me-template-music-lesson .listeo-single-listing-gallery-grid {
		width: 100% !important;
		margin: 0 0 24px !important;
		border-radius: 17px !important;
		overflow: hidden !important;
	}

	html body.me-template-festival-trip #single-listing-grid-gallery,
	html body.me-template-music-lesson #single-listing-grid-gallery {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}

	html body.me-template-festival-trip #single-listing-grid-gallery .slg-half,
	html body.me-template-music-lesson #single-listing-grid-gallery .slg-half {
		float: none !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
	}

	html body.me-template-festival-trip #single-listing-grid-gallery .slg-half + .slg-half {
		display: none !important;
	}

	html body.me-template-festival-trip #single-listing-grid-gallery .slg-gallery-img,
	html body.me-template-music-lesson #single-listing-grid-gallery .slg-gallery-img,
	html body.me-template-music-lesson #single-listing-grid-gallery .slg-gallery-img-single {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
	}

	html body.me-template-festival-trip #single-listing-grid-gallery img,
	html body.me-template-music-lesson #single-listing-grid-gallery img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 10 !important;
		object-fit: cover !important;
		border-radius: 17px !important;
	}

	html body.me-template-music-lesson #single-listing-grid-gallery img {
		aspect-ratio: 4 / 3 !important;
		object-position: center 32% !important;
	}

	html body.me-template-festival-trip #single-listing-grid-gallery-popup {
		position: absolute !important;
		right: 12px !important;
		bottom: 12px !important;
		z-index: 5 !important;
		min-height: 42px !important;
		padding: 10px 13px !important;
		border: 0 !important;
		border-radius: 11px !important;
		background: rgba(255,255,255,.94) !important;
		color: var(--me-listing-ink) !important;
		box-shadow: 0 6px 18px rgba(24,18,25,.18) !important;
		font-size: 12px !important;
		font-weight: 800 !important;
	}

	/* Content/sidebar stack. */
	html body.me-template-festival-trip .listeo-single-listing-content,
	html body.me-template-music-lesson .listeo-single-listing-content,
	html body.me-template-festival-trip .listeo-single-listing-sidebar,
	html body.me-template-music-lesson .listeo-single-listing-sidebar {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	html body.me-template-festival-trip .listeo-single-listing-sidebar,
	html body.me-template-music-lesson .listeo-single-listing-sidebar {
		position: static !important;
		top: auto !important;
		margin-top: 28px !important;
	}

	/* Mobile nav is a swipeable row instead of clipped tabs. */
	html body.me-template-festival-trip .listing-nav-container,
	html body.me-template-music-lesson .listing-nav-container {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
	}

	html body.me-template-festival-trip .listing-nav-container::-webkit-scrollbar,
	html body.me-template-music-lesson .listing-nav-container::-webkit-scrollbar {
		display: none !important;
	}

	html body.me-template-festival-trip .listing-nav,
	html body.me-template-music-lesson .listing-nav {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		width: max-content !important;
		min-width: 100% !important;
		margin: 0 !important;
		padding: 0 0 8px !important;
	}

	html body.me-template-festival-trip .listing-nav li,
	html body.me-template-music-lesson .listing-nav li {
		flex: 0 0 auto !important;
		margin: 0 !important;
	}

	html body.me-template-festival-trip .listing-nav a,
	html body.me-template-music-lesson .listing-nav a {
		display: inline-flex !important;
		align-items: center !important;
		min-height: 44px !important;
		padding: 9px 14px !important;
		white-space: nowrap !important;
		font-size: 14px !important;
	}

	/* Quick facts become readable stacked cards instead of compressed columns. */
	html body.me-template-festival-trip .me-quick-facts,
	html body.me-template-music-lesson .me-quick-facts {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 9px !important;
		margin: 18px 0 26px !important;
	}

	html body.me-template-festival-trip .me-quick-facts > div,
	html body.me-template-music-lesson .me-quick-facts > div {
		padding: 14px 15px !important;
		border: 1px solid var(--me-listing-line) !important;
		border-radius: 13px !important;
		background: var(--me-listing-soft) !important;
	}

	html body.me-template-festival-trip .me-quick-facts span,
	html body.me-template-music-lesson .me-quick-facts span {
		display: block !important;
		margin-bottom: 4px !important;
		color: #8a828b !important;
		font-size: 10px !important;
		font-weight: 850 !important;
		text-transform: uppercase !important;
		letter-spacing: .08em !important;
	}

	html body.me-template-festival-trip .me-quick-facts strong,
	html body.me-template-music-lesson .me-quick-facts strong {
		display: block !important;
		color: var(--me-listing-ink) !important;
		font-size: 14px !important;
		line-height: 1.42 !important;
	}

	/* Request/interest CTA should be unmistakable before generic share controls. */
	html body.me-template-festival-trip .me-state-cta,
	html body.me-template-music-lesson .me-state-cta {
		margin-top: 0 !important;
		margin-bottom: 18px !important;
	}

	html body.me-template-festival-trip #wrapper,
	html body.me-template-music-lesson #wrapper {
		overflow-x: hidden !important;
	}
}

/* Host profile card. Markup and booking behavior remain in the platform layer;
 * its presentation is centralized here so no active snippet needs inline CSS. */
html body.single-listing .me-host-profile {
	margin: 42px 0 18px;
	clear: both;
}

html body.single-listing .me-host-profile > .me-eyebrow {
	margin: 0 0 10px;
	color: #d92f67;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

html body.single-listing .me-host-profile-card {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	padding: 28px;
	border: 1px solid #ebe7e9;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(37,28,32,.07);
}

html body.single-listing .me-host-profile-media {
	width: 150px;
}

html body.single-listing .me-host-photo {
	display: block;
	width: 150px !important;
	height: 150px !important;
	max-width: none !important;
	object-fit: cover;
	border: 5px solid #fff;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(37,28,32,.16);
}

html body.single-listing .me-hosted-by {
	margin: 0 0 2px;
	color: #6c6468;
	font-size: 14px;
	font-weight: 700;
}

html body.single-listing .me-host-profile-copy h2 {
	margin: 0 0 5px;
	font-size: 27px;
	line-height: 1.2;
}

html body.single-listing .me-host-credential {
	margin: 0 0 14px;
	color: #9f2850;
	font-weight: 700;
	line-height: 1.45;
}

html body.single-listing .me-host-bio p {
	margin: 0 0 14px;
	color: #443d40;
	line-height: 1.65;
}

html body.single-listing .me-host-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}

html body.single-listing .me-host-meta span {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 5px 10px;
	border-radius: 999px;
	background: #faf1f5;
	color: #6a2941;
	font-size: 12px;
	font-weight: 700;
}

html body.single-listing .me-host-profile-link {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 10px 15px;
	border: 1px solid #d92f67;
	border-radius: 10px;
	color: #d92f67 !important;
	font-weight: 800;
	text-decoration: none;
}

html body.single-listing .me-host-profile-link:hover,
html body.single-listing .me-host-profile-link:focus {
	background: #d92f67;
	color: #fff !important;
}

html body.single-listing #listing-sidebar .widget:has(.hosted-by-title),
html body.single-listing .listing-sidebar .widget:has(.hosted-by-title) {
	display: none !important;
}

@media (max-width: 700px) {
	html body.single-listing .me-host-profile-card {
		grid-template-columns: 1fr;
		padding: 22px;
	}

	html body.single-listing .me-host-profile-media {
		width: 112px;
	}

	html body.single-listing .me-host-photo {
		width: 112px !important;
		height: 112px !important;
	}

	html body.single-listing .me-host-profile-copy h2 {
		font-size: 24px;
	}
}