/*  Podcast episodes - the player and the episode index.
    The accent picks up the magenta from the page hero.  */

.pod-eps {
	--pod-accent: #A81D6A;
	--pod-accent-soft: rgba(168, 29, 106, .08);
	max-width: 780px;
	margin: 0 auto;
}

/* --~~ Player ~~-- */

.pod-player {
	margin: 0 0 28px;
	min-height: 152px;
}
.pod-player iframe { display: block; }
.pod-player:empty { display: none; }

/* --~~ Episode list ~~-- */

.pod-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,.08);
}
.pod-row { margin: 0; padding: 0; }
.pod-row + .pod-row { border-top: 1px solid rgba(0,0,0,.08); }

.pod-ep {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px 14px;
	border: 0;
	background: none;
	font-family: var(--roboto, "Roboto", sans-serif);
	font-size: 16px;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	color: var(--black, #16181c);
	cursor: pointer;
	transition: background-color .25s ease-in-out, color .25s ease-in-out;
}
.pod-ep:hover,
.pod-ep:focus-visible {
	background-color: var(--pod-accent-soft);
	color: var(--pod-accent);
	border-radius: 10px;
	outline: none;
}
.pod-ep:focus-visible { box-shadow: 0 0 0 2px var(--pod-accent); }

/*  The episode number, in its own chip so the titles line up.  */
.pod-num {
	flex-shrink: 0;
	width: 34px;
	height: 26px;
	line-height: 26px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	color: white;
	background-color: rgba(0,0,0,.35);
	transition: background-color .25s ease-in-out;
}
.pod-title { flex: 1; overflow-wrap: anywhere; }

/*  A dot on the episode currently in the player.  */
.pod-state { flex-shrink: 0; width: 10px; height: 10px; }
.pod-ep.is-playing .pod-state {
	border-radius: 50%;
	background-color: var(--pod-accent);
}

.pod-ep.is-playing {
	color: var(--pod-accent);
	font-weight: bold;
	background-color: var(--pod-accent-soft);
	border-radius: 10px;
	cursor: default;
}
.pod-ep.is-playing .pod-num { background-color: var(--pod-accent); }

/*  An episode with no stored embed goes out to Spotify instead.  */
.pod-ext .pod-state {
	width: auto;
	height: auto;
	font-size: 12px;
	opacity: .5;
}
.pod-ext .pod-state:before { content: "\2197"; }

.mobile .pod-ep { padding: 12px 6px; gap: 10px; font-size: 15px; }
.mobile .pod-num { width: 30px; }

/* --~~ Previous / next episode ~~-- */

.pod-nav {
	display: flex;
	gap: 12px;
	margin: -14px 0 26px;
}
.pod-nav-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 10px;
	background: none;
	font-family: var(--roboto, "Roboto", sans-serif);
	text-align: left;
	color: var(--black, #16181c);
	cursor: pointer;
	transition: background-color .25s ease-in-out, color .25s ease-in-out, border-color .25s ease-in-out;
}
.pod-nav-btn:hover:not([disabled]),
.pod-nav-btn:focus-visible:not([disabled]) {
	background-color: var(--pod-accent-soft);
	border-color: var(--pod-accent);
	color: var(--pod-accent);
	outline: none;
}
.pod-nav-btn[disabled] { opacity: .3; cursor: default; }

/*  "Next" is the later episode - it sits on the right and reads right.  */
.pod-next { flex-direction: row-reverse; text-align: right; }

.pod-nav-arrow { flex-shrink: 0; font-size: 18px; line-height: 1; }
.pod-prev .pod-nav-arrow:before { content: "\2190"; }
.pod-next .pod-nav-arrow:before { content: "\2192"; }

.pod-nav-text { min-width: 0; }
.pod-nav-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .55;
}
/*  Titles run long - one line, clipped, so the two buttons stay level.  */
.pod-nav-ep {
	display: block;
	font-size: 13px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pod-nav-btn[disabled] .pod-nav-ep { display: none; }

.mobile .pod-nav { gap: 8px; }
.mobile .pod-nav-btn { padding: 8px 10px; }
.mobile .pod-nav-label { font-size: 10px; }
.mobile .pod-nav-ep { font-size: 12px; }

/* --~~ Episode text ~~-- */

/*  The English text of whatever is in the player, under its title and above the
    index. An episode with no translation leaves the body empty, and then it
    takes up no room - the title above it stays either way.  */
.pod-text { margin: 0 0 26px; }
.pod-body:empty { display: none; }
.pod-text p {
	margin: 0 0 14px;
	font-family: var(--roboto, "Roboto", sans-serif);
	font-size: 16px;
	line-height: 1.65;
}
.pod-text p:last-child { margin-bottom: 0; }
.pod-body.is-loading { opacity: .35; }

.mobile .pod-text p { font-size: 15px; }

/*  The episode title over its text. It carries whichever episode is in the
    player, so it stands even when that episode has no translation under it.  */
.pod-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--title, source-serif-pro, serif);
	font-size: 28px;
	line-height: 1.25;
	font-weight: bold;
}
.pod-head-num {
	flex-shrink: 0;
	font-family: var(--roboto, "Roboto", sans-serif);
	font-size: 15px;
	font-weight: bold;
	color: var(--pod-accent);
}
.pod-head-num:empty { display: none; }

.mobile .pod-head { font-size: 22px; gap: 8px; margin-bottom: 12px; }
.mobile .pod-head-num { font-size: 13px; }