/*
 * Music Experiences editorial presentation.
 * Guides index and individual articles.
 */

:root {
	--me-editorial-ink: #272128;
	--me-editorial-muted: #6f6870;
	--me-editorial-line: #e9e3e9;
	--me-editorial-soft: #f7f4f6;
	--me-editorial-accent: #f23d76;
}

/* The Guides page has its own editorial hero; the legacy Listeo titlebar is redundant. */
body.page-id-108 #titlebar {
	display: none !important;
}

body.page-id-108 #wrapper {
	overflow-x: hidden !important;
}

body.page-id-108 .me-blog-hero {
	margin: 0 !important;
	padding: 96px 24px 84px !important;
	background: #17151a !important;
	color: #fff !important;
}

body.page-id-108 .me-blog-hero .wp-block-group__inner-container {
	max-width: 900px !important;
	margin: 0 auto !important;
}

body.page-id-108 .me-blog-eyebrow {
	margin: 0 0 14px !important;
	color: #ff8bb1 !important;
	font-size: 12px !important;
	font-weight: 850 !important;
	text-transform: uppercase !important;
	letter-spacing: .13em !important;
}

body.page-id-108 .me-blog-title {
	max-width: 840px !important;
	margin: 0 auto 20px !important;
	color: #fff !important;
	font-size: clamp(44px, 6vw, 72px) !important;
	line-height: 1.02 !important;
	letter-spacing: -.05em !important;
	text-wrap: balance !important;
}

body.page-id-108 .me-blog-intro {
	max-width: 720px !important;
	margin: 0 auto !important;
	color: #d9d3da !important;
	font-size: 19px !important;
	line-height: 1.55 !important;
	text-wrap: balance !important;
}

body.page-id-108 .me-blog-shell {
	margin: 0 !important;
	padding: 72px 24px 94px !important;
	background: #fff !important;
}

body.page-id-108 .me-blog-shell > .wp-block-group__inner-container {
	max-width: 1180px !important;
	margin: 0 auto !important;
}

body.page-id-108 .me-blog-section-title {
	margin: 0 0 10px !important;
	color: var(--me-editorial-ink) !important;
	font-size: clamp(31px, 4vw, 46px) !important;
	line-height: 1.08 !important;
}

body.page-id-108 .me-blog-section-copy {
	max-width: 680px !important;
	margin: 0 0 34px !important;
	color: var(--me-editorial-muted) !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
}

body.page-id-108 .me-blog-query .wp-block-post-template {
	gap: 28px !important;
}

body.page-id-108 .me-blog-card {
	height: 100% !important;
	margin: 0 !important;
	border: 1px solid var(--me-editorial-line) !important;
	border-radius: 18px !important;
	background: #fff !important;
	box-shadow: 0 10px 34px rgba(31, 22, 32, .07) !important;
	overflow: hidden !important;
}

body.page-id-108 .me-blog-card-image {
	margin: 0 !important;
	overflow: hidden !important;
	background: #ece8ec !important;
}

body.page-id-108 .me-blog-card-body {
	padding: 22px 22px 24px !important;
}

body.page-id-108 .me-blog-date {
	margin: 0 0 10px !important;
	color: #8b838c !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: .09em !important;
}

body.page-id-108 .me-blog-card-title {
	margin: 0 0 12px !important;
	color: var(--me-editorial-ink) !important;
	font-size: 22px !important;
	line-height: 1.23 !important;
	letter-spacing: -.025em !important;
}

body.page-id-108 .me-blog-card-title a {
	color: var(--me-editorial-ink) !important;
	text-decoration: none !important;
}

body.page-id-108 .me-blog-excerpt {
	color: var(--me-editorial-muted) !important;
	font-size: 14px !important;
	line-height: 1.58 !important;
}

body.page-id-108 .me-blog-excerpt p {
	margin: 0 !important;
}

body.page-id-108 .me-blog-excerpt .wp-block-post-excerpt__more-text {
	margin-top: 18px !important;
}

body.page-id-108 .me-blog-excerpt .wp-block-post-excerpt__more-link {
	color: var(--me-editorial-accent) !important;
	font-size: 13px !important;
	font-weight: 850 !important;
	text-decoration: none !important;
}

body.page-id-108 .me-blog-cta {
	margin-top: 76px !important;
	padding: 54px 28px !important;
	border-radius: 22px !important;
	background: var(--me-editorial-soft) !important;
}

/* Individual guide: the article itself already owns the H1. */
body.single-post #titlebar {
	display: none !important;
}

body.single-post .container.right-sidebar {
	padding-top: 54px !important;
	padding-bottom: 72px !important;
}

body.single-post .blog-post,
body.single-post .post-content {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.single-post .blog-post > .post-img,
body.single-post .post-img img,
body.single-post .wp-post-image {
	width: 100% !important;
	border-radius: 18px !important;
	object-fit: cover !important;
}

body.single-post .post-content > a:first-child {
	color: inherit !important;
	text-decoration: none !important;
}

body.single-post .post-content > a:first-child h1 {
	margin: 26px 0 12px !important;
	color: var(--me-editorial-ink) !important;
	font-size: clamp(38px, 5vw, 58px) !important;
	line-height: 1.05 !important;
	letter-spacing: -.045em !important;
	text-wrap: balance !important;
}

body.single-post .post-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px 16px !important;
	margin: 0 0 34px !important;
	padding: 0 !important;
	color: #817981 !important;
	font-size: 13px !important;
}

body.single-post .post-meta li {
	margin: 0 !important;
	font-size: 13px !important;
}

/* Listeo prints published and modified dates as adjacent time elements. Keep
 * one readable date in the article UI; the modified date stays in SEO/schema. */
body.single-post .post-meta time.updated {
	display: none !important;
}

body.single-post .post-content,
body.single-post .entry-content {
	color: #3d373e !important;
	font-size: 18px !important;
	line-height: 1.78 !important;
}

body.single-post .post-content p,
body.single-post .entry-content p {
	margin: 0 0 1.35em !important;
	font-size: 18px !important;
	line-height: 1.78 !important;
}

body.single-post .post-content p:empty,
body.single-post .entry-content p:empty {
	display: none !important;
}

body.single-post .post-content h2,
body.single-post .entry-content h2 {
	margin: 1.65em 0 .55em !important;
	color: var(--me-editorial-ink) !important;
	font-size: 34px !important;
	line-height: 1.15 !important;
}

body.single-post .post-content h3,
body.single-post .entry-content h3 {
	margin: 1.5em 0 .5em !important;
	color: var(--me-editorial-ink) !important;
	font-size: 25px !important;
	line-height: 1.22 !important;
}

body.single-post .post-content img,
body.single-post .entry-content img {
	max-width: 100% !important;
	height: auto !important;
}

body.single-post figure.wp-block-table {
	max-width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
}

body.single-post figure.wp-block-table table {
	min-width: 680px !important;
}

body.single-post .wp-block-media-text.is-stacked-on-mobile {
	max-width: 100% !important;
}

body.single-post blockquote {
	margin: 34px 0 !important;
	padding: 24px 26px !important;
	border-left: 4px solid var(--me-editorial-accent) !important;
	border-radius: 0 14px 14px 0 !important;
	background: var(--me-editorial-soft) !important;
	color: #4c454d !important;
}

body.single-post details.wp-block-details {
	margin: 28px 0 !important;
	padding: 16px 18px !important;
	border: 1px solid var(--me-editorial-line) !important;
	border-radius: 14px !important;
	background: var(--me-editorial-soft) !important;
}

body.single-post details.wp-block-details summary {
	cursor: pointer !important;
	line-height: 1.5 !important;
}

@media (max-width: 767px) {
	body.page-id-108 .me-blog-hero {
		padding: 68px 18px 58px !important;
	}

	body.page-id-108 .me-blog-title {
		font-size: 39px !important;
		line-height: 1.04 !important;
	}

	body.page-id-108 .me-blog-intro {
		font-size: 16px !important;
	}

	body.page-id-108 .me-blog-shell {
		padding: 48px 16px 66px !important;
	}

	body.page-id-108 .me-blog-query .wp-block-post-template {
		grid-template-columns: 1fr !important;
		gap: 22px !important;
	}

	body.page-id-108 .me-blog-card {
		border-radius: 16px !important;
	}

	body.page-id-108 .me-blog-card-body {
		padding: 19px 18px 21px !important;
	}

	body.page-id-108 .me-blog-cta {
		margin-top: 52px !important;
		padding: 38px 18px !important;
		border-radius: 17px !important;
	}

	body.single-post .container.right-sidebar {
		width: 100% !important;
		padding: 28px 16px 52px !important;
	}

	body.single-post .blog-page .col-lg-9,
	body.single-post .blog-page .col-md-8 {
		width: 100% !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	body.single-post .post-content > a:first-child h1 {
		margin-top: 22px !important;
		font-size: 34px !important;
		line-height: 1.08 !important;
	}

	body.single-post .post-content,
	body.single-post .entry-content,
	body.single-post .post-content p,
	body.single-post .entry-content p,
	body.single-post .post-content li,
	body.single-post .entry-content li {
		font-size: 17px !important;
		line-height: 1.72 !important;
	}

	body.single-post .post-content h2,
	body.single-post .entry-content h2 {
		font-size: 28px !important;
	}

	body.single-post .post-content h3,
	body.single-post .entry-content h3 {
		font-size: 23px !important;
	}

	body.single-post figure.wp-block-table {
		margin-right: -4px !important;
		padding-bottom: 8px !important;
	}
}