/**
 * Frontend playlist nav + header.
 */

.obf-playlist-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0 0 28px;
}

.obf-playlist-nav__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--obf-hairline, #e6e2de);
	border-radius: 999px;
	background: #fff;
	color: var(--obf-ink, #1a1a1a);
	font: 600 13px/1.2 var(--obf-sans, "Public Sans", sans-serif);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.obf-playlist-nav__chip:hover {
	border-color: rgba(239, 103, 31, 0.45);
	color: var(--obf-accent, #ef671f);
	text-decoration: none;
}

.obf-playlist-nav__chip.is-active {
	background: var(--obf-accent, #ef671f);
	border-color: var(--obf-accent, #ef671f);
	color: #fff;
}

.obf-playlist-nav__count {
	display: inline-flex;
	min-width: 1.4em;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	font-size: 11px;
	font-weight: 700;
}

.obf-playlist-nav__chip.is-active .obf-playlist-nav__count {
	background: rgba(255, 255, 255, 0.22);
}

.obf-playlist-header {
	margin: 0 0 24px;
	max-width: 720px;
}

.obf-playlist-header__eyebrow {
	margin: 0 0 8px;
	font: 700 11px/1 var(--obf-sans, "Public Sans", sans-serif);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--obf-gray-40, #777);
}

.obf-playlist-header__title {
	margin: 0;
	font: 700 clamp(28px, 4vw, 40px)/1.15 var(--obf-serif, "Newsreader", Georgia, serif);
	color: var(--obf-ink, #1a1a1a);
}

.obf-playlist-header__desc {
	margin: 12px 0 0;
	font: 400 16px/1.55 var(--obf-sans, "Public Sans", sans-serif);
	color: var(--obf-gray-40, #4a4a4a);
}

/* Nest chips inside archive container padding. */
body.obf-podcast-listing .empath__blog-wrapper > .container > .obf-playlist-nav,
body.obf-playlist-archive .empath__blog-wrapper > .container > .obf-playlist-nav,
body.obf-podcast-listing .empath__blog-wrapper > .container > .obf-playlist-header,
body.obf-playlist-archive .empath__blog-wrapper > .container > .obf-playlist-header {
	width: 100%;
}