/*
 * Music Experiences homepage discovery presentation.
 * Consolidates the legacy homepage snippets into the child theme.
 */

:root {
	--me-home-ink: #272128;
	--me-home-muted: #716a72;
	--me-home-line: #ece7ec;
	--me-home-accent: #f23d76;
}

html body.home .main-search-container.elementor-main-search-container {
	min-height: 680px !important;
}

html body.home .main-search-inner {
	display: flex !important;
	align-items: center !important;
	padding: 44px 0 !important;
	text-align: center !important;
}

html body.home .main-search-inner > .container {
	width: 100% !important;
	max-width: 1120px !important;
	margin: 0 auto !important;
	padding-right: 24px !important;
	padding-left: 24px !important;
}

@media (min-width: 992px) {
	html body.home .main-search-inner > .container {
		/* Keep the discovery controls in the lower-middle of the hero so the
		 * musicians remain visible and the search bar does not crowd the header. */
		transform: translateY(52px) !important;
	}
}

html body.home .main-search-inner h1 {
	max-width: 860px !important;
	margin: 0 auto 14px !important;
	color: #fff !important;
	font-size: clamp(40px, 5.5vw, 70px) !important;
	line-height: 1.02 !important;
	letter-spacing: -.048em !important;
	text-wrap: balance !important;
}

html body.home .main-search-inner h4 {
	max-width: 760px !important;
	margin: 0 auto 30px !important;
	color: rgba(255,255,255,.8) !important;
	font-size: clamp(16px, 2vw, 21px) !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	text-wrap: balance !important;
}

html body.home .typed-cursor,
html body.home .typed-words {
	display: none !important;
}

html body.home #listeo_core-search-form {
	display: block !important;
	float: none !important;
	width: 880px !important;
	max-width: 100% !important;
	margin: 28px auto 0 !important;
	padding: 0 !important;
}

html body.home .main-search-input {
	position: relative !important;
	inset: auto !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 880px !important;
	min-height: 72px !important;
	margin: 0 auto !important;
	padding: 6px !important;
	border: 1px solid rgba(255,255,255,.5) !important;
	border-radius: 999px !important;
	background: #fff !important;
	box-shadow: 0 18px 52px rgba(24,16,26,.24) !important;
	transform: none !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

html body.home .main-search-input-item.drilldown-taxonomy {
	display: none !important;
}

html body.home .main-search-input-item {
	position: relative !important;
	display: flex !important;
	align-items: flex-end !important;
	min-width: 0 !important;
	min-height: 60px !important;
	padding: 22px 20px 7px !important;
	border: 0 !important;
	border-right: 1px solid var(--me-home-line) !important;
	background: transparent !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

html body.home .main-search-input-item.text::before,
html body.home .main-search-input-item.location::before {
	position: absolute !important;
	left: 20px !important;
	top: 11px !important;
	color: #39333a !important;
	font-size: 10px !important;
	font-weight: 850 !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	letter-spacing: .1em !important;
}

html body.home .main-search-input-item.text::before {
	content: 'What';
}

html body.home .main-search-input-item.location::before {
	content: 'Where';
}

html body.home .main-search-input-item > div,
html body.home .main-search-input-item #autocomplete-container {
	width: 100% !important;
	min-width: 0 !important;
}

html body.home .main-search-input-item input {
	width: 100% !important;
	height: 34px !important;
	min-height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--me-home-ink) !important;
	font-size: 15px !important;
	font-weight: 650 !important;
	line-height: 34px !important;
	text-overflow: ellipsis !important;
}

html body.home .main-search-input-item input::placeholder {
	color: #746d75 !important;
	opacity: 1 !important;
}

html body.home .main-search-input-item.location > div > a,
html body.home .main-search-input-item.location .type-and-hit-enter {
	display: none !important;
}

html body.home .main-search-input .button {
	position: relative !important;
	inset: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	justify-self: center !important;
	width: 52px !important;
	height: 52px !important;
	min-width: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 8px 20px rgba(242,61,118,.28) !important;
	font-size: 0 !important;
	transform: none !important;
}

html body.home .main-search-input .button::before {
	content: '\f002';
	font-family: 'Font Awesome 5 Free' !important;
	font-size: 18px !important;
	font-weight: 900 !important;
	color: #fff !important;
}

html body.home .highlighted-categories-headline,
html body.home .highlighted-categories {
	width: 880px !important;
	max-width: 100% !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

html body.home .highlighted-categories-headline {
	margin-top: 21px !important;
	margin-bottom: 11px !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	letter-spacing: .09em !important;
}

html body.home .highlighted-categories {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 9px !important;
}

html body.home .highlighted-category {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: auto !important;
	min-height: 41px !important;
	margin: 0 !important;
	padding: 9px 14px !important;
	border: 1px solid rgba(255,255,255,.38) !important;
	border-radius: 999px !important;
	background: rgba(22,18,23,.46) !important;
	box-shadow: none !important;
	backdrop-filter: blur(9px) !important;
	box-sizing: border-box !important;
}

html body.home .highlighted-category i {
	margin: 0 !important;
	color: #fff !important;
	font-size: 14px !important;
}

html body.home .highlighted-category h4 {
	margin: 0 !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 750 !important;
	line-height: 1.2 !important;
}

html body.home .highlighted-category:hover {
	background: #fff !important;
	transform: translateY(-1px) !important;
}

html body.home .highlighted-category:hover i,
html body.home .highlighted-category:hover h4 {
	color: var(--me-home-ink) !important;
}

/* Shared homepage section width and spacing. */
html body.home .elementor-element-bf2502c > .elementor-container,
html body.home .elementor-element-3c55e99 > .elementor-container,
html body.home .elementor-element-53b5761 > .elementor-container,
html body.home .elementor-element-5fc073b > .elementor-container {
	max-width: 1180px !important;
	padding-right: 22px !important;
	padding-left: 22px !important;
}

html body.home .elementor-element-9d03b8f .headline,
html body.home .elementor-element-a96695e .headline,
html body.home .elementor-element-f1eacbc .headline {
	text-align: left !important;
}

html body.home .elementor-element-a96695e .headline {
	text-align: center !important;
}

html body.home .elementor-element-9d03b8f .headline h2,
html body.home .elementor-element-a96695e .headline h2,
html body.home .elementor-element-f1eacbc .headline h2,
html body.home .elementor-element-9d03b8f h3,
html body.home .elementor-element-a96695e h3,
html body.home .elementor-element-f1eacbc h3 {
	font-size: clamp(28px, 3vw, 38px) !important;
	line-height: 1.12 !important;
	letter-spacing: -.025em !important;
}

html body.home .elementor-element-a96695e .headline > span {
	display: block !important;
	max-width: 760px !important;
	margin-right: auto !important;
	margin-left: auto !important;
	text-align: center !important;
}

/* Featured listing carousel: image-led marketplace cards. */
html body.home .elementor-element-b7e308e .fw-carousel-item {
	padding: 0 9px !important;
}

html body.home .elementor-element-b7e308e .listing-card-container-nl {
	margin: 0 !important;
}

html body.home .elementor-element-b7e308e .listing-card-nl {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
}

html body.home .elementor-element-b7e308e .listing-image-container-nl {
	aspect-ratio: 4 / 3 !important;
	border-radius: 17px !important;
	background: #eee !important;
	box-shadow: 0 1px 0 rgba(20,16,21,.04) !important;
	overflow: hidden !important;
}

html body.home .elementor-element-b7e308e .slider-wrapper-nl {
	height: 100% !important;
}

html body.home .elementor-element-b7e308e .slider-image-nl {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

html body.home .elementor-element-b7e308e .listing-details-nl {
	display: block !important;
	min-height: 0 !important;
	padding: 14px 2px 4px !important;
	border: 0 !important;
	background: transparent !important;
}

html body.home .elementor-element-b7e308e .details-main-col-nl,
html body.home .elementor-element-b7e308e .details-sidebar-col-nl {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
}

html body.home .elementor-element-b7e308e .listing-title-nl {
	margin: 0 0 6px !important;
	color: var(--me-home-ink) !important;
	font-size: 16px !important;
	font-weight: 750 !important;
	line-height: 1.35 !important;
	letter-spacing: -.01em !important;
}

html body.home .elementor-element-b7e308e .listing-rating-nl {
	justify-content: flex-start !important;
	margin: 0 !important;
	font-size: 12px !important;
}

html body.home .elementor-element-b7e308e .rating-text-nl.no-rating {
	display: none !important;
}

/* Why-us blocks. */
html body.home .elementor-element-3c55e99 .icon-box-2,
html body.home .elementor-element-3c55e99 .icon-box-3 {
	height: 100% !important;
	padding: 30px 26px !important;
	border: 1px solid #ebe6eb !important;
	border-radius: 17px !important;
	background: #fff !important;
	box-shadow: 0 7px 24px rgba(25,18,26,.05) !important;
}

html body.home .elementor-element-3c55e99 .icon-box-2 h3,
html body.home .elementor-element-3c55e99 .icon-box-3 h3 {
	font-size: 18px !important;
	line-height: 1.3 !important;
}

html body.home .elementor-element-3c55e99 .icon-box-2 p,
html body.home .elementor-element-3c55e99 .icon-box-3 p {
	color: #6d666e !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
}

html body.home .elementor-element-5fc073b .blog-compact-item-container,
html body.home .elementor-element-5fc073b .blog-post {
	border-radius: 17px !important;
	overflow: hidden !important;
}

/* Cards should show one human-readable date. Keep the modified timestamp in
 * document metadata for SEO, but do not print two dates back-to-back in UI. */
html body.home .elementor-element-5fc073b .blog-post-tags time.updated {
	display: none !important;
}

@media (max-width: 767px) {
	html body.home .main-search-container.elementor-main-search-container {
		min-height: max(760px, 100svh) !important;
	}

	html body.home .main-search-inner {
		align-items: flex-start !important;
		padding-top: calc(76px + env(safe-area-inset-top)) !important;
		padding-bottom: 30px !important;
	}

	html body.home .main-search-inner > .container {
		padding-right: 18px !important;
		padding-left: 18px !important;
	}

	html body.home .main-search-inner h1 {
		font-size: clamp(36px, 9.5vw, 40px) !important;
		line-height: 1.04 !important;
		letter-spacing: -.042em !important;
	}

	html body.home .main-search-inner h4 {
		margin-bottom: 18px !important;
		font-size: 16px !important;
		line-height: 1.45 !important;
	}

	html body.home #listeo_core-search-form {
		width: 100% !important;
		max-width: 560px !important;
		margin-top: 16px !important;
	}

	html body.home .main-search-input {
		grid-template-columns: 1fr !important;
		min-height: 0 !important;
		padding: 6px !important;
		border-radius: 20px !important;
		overflow: hidden !important;
	}

	html body.home .main-search-input-item {
		min-height: 58px !important;
		padding: 21px 16px 6px !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--me-home-line) !important;
	}

	html body.home .main-search-input-item.location {
		border-bottom: 0 !important;
	}

	html body.home .main-search-input-item.text::before,
	html body.home .main-search-input-item.location::before {
		left: 16px !important;
	}

	html body.home .main-search-input .button {
		width: calc(100% - 10px) !important;
		height: 50px !important;
		min-height: 50px !important;
		margin: 6px 5px 5px !important;
		border-radius: 14px !important;
		font-size: 15px !important;
		gap: 7px !important;
	}

	html body.home .main-search-input .button::before {
		margin-right: 7px !important;
	}

	html body.home .highlighted-categories-headline {
		display: block !important;
		width: calc(100% - 36px) !important;
		max-width: 560px !important;
		margin: 14px auto 9px !important;
		text-align: left !important;
	}

	html body.home .highlighted-categories {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 9px !important;
		width: calc(100% - 36px) !important;
		max-width: 560px !important;
		margin: 0 auto !important;
		padding: 0 0 20px !important;
		overflow: visible !important;
	}

	html body.home .highlighted-category,
	html body.home .highlighted-category:nth-child(3) {
		grid-column: auto !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 52px !important;
		height: auto !important;
		padding: 10px 14px !important;
		border-radius: 16px !important;
	}

	html body.home .highlighted-category i {
		flex: 0 0 auto !important;
		margin: 0 !important;
		font-size: 15px !important;
	}

	html body.home .highlighted-category h4 {
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		font-size: 12px !important;
		line-height: 1.25 !important;
		white-space: normal !important;
		text-wrap: pretty !important;
	}

	html body.home .elementor-element-bf2502c > .elementor-container,
	html body.home .elementor-element-3c55e99 > .elementor-container,
	html body.home .elementor-element-53b5761 > .elementor-container,
	html body.home .elementor-element-5fc073b > .elementor-container {
		padding-right: 16px !important;
		padding-left: 16px !important;
	}

	/* Homepage section rhythm belongs here, not in the global mobile layer. */
	html body.home .elementor-element-bf2502c {
		padding-top: 40px !important;
		padding-bottom: 28px !important;
	}

	html body.home .elementor-element-3c55e99 {
		padding-top: 42px !important;
		padding-bottom: 24px !important;
	}

	html body.home .elementor-element-fdcc131 {
		margin-top: -12px !important;
		margin-bottom: 0 !important;
	}

	html body.home .elementor-element-53b5761 {
		padding-top: 30px !important;
		padding-bottom: 8px !important;
	}

	html body.home .elementor-element-5fc073b {
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 28px !important;
	}

	html body.home .elementor-element-f1eacbc {
		margin-bottom: 0 !important;
	}

	html body.home .elementor-element-b7e308e .slick-arrow,
	html body.home .elementor-element-b7e308e .fw-carousel-nav,
	html body.home .elementor-element-b7e308e .carousel-nav,
	html body.home .elementor-element-b7e308e .owl-nav {
		display: none !important;
	}

	/* Keep card controls inside the image at narrow widths. */
	html body.home .listing-image-container-nl {
		position: relative !important;
		overflow: hidden !important;
	}

	html body.home .listing-image-container-nl .image-overlay-top-nl {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		padding: 0 !important;
		pointer-events: none !important;
	}

	html body.home .image-overlay-top-nl .listing-category-tag-nl {
		position: absolute !important;
		left: 12px !important;
		top: 12px !important;
		right: auto !important;
		bottom: auto !important;
		display: inline-flex !important;
		align-items: center !important;
		max-width: 66% !important;
		margin: 0 !important;
		padding: 7px 10px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		font-size: 11px !important;
		line-height: 1.15 !important;
		z-index: 7 !important;
	}

	html body.home .image-overlay-top-nl .favorite-icon-nl {
		position: absolute !important;
		right: 12px !important;
		top: 12px !important;
		left: auto !important;
		bottom: auto !important;
		margin: 0 !important;
		pointer-events: auto !important;
		z-index: 9 !important;
	}

	html body.home .listing-card-nl .me-availability-badge {
		display: none !important;
	}
}
