/* Podcast episodes — Repair page section, episode index, single episode.
   Type and colour follow style.css: AvenirNextCondensed for headings,
   #d8973c for accents, #4f4f4f for secondary text. */

.repair-episodes {
	border-top: solid 1px #e8e8e8;
	padding: 80px 0 90px;
}

/* Heading block with the podcast cover beside it. Text goes left-aligned here
   rather than centred: centred text next to a fixed image reads as a mistake. */
.repair-episodes-intro {
	max-width: 900px;
	margin: 0 auto 50px;
	display: flex;
	align-items: center;
	gap: 44px;
}

.repair-episodes-intro-text {
	flex: 1 1 auto;
	min-width: 0;
}

.repair-episodes-cover {
	flex: 0 0 190px;
	width: 190px;
	height: auto;
	display: block;
}

.episodes-heading {
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	font-size: 2em;
	line-height: 110%;
	text-transform: uppercase;
	margin: 0 0 18px 0;
}

.episodes-subhead {
	font-size: 1.063em;
	line-height: 155%;
	color: #4f4f4f;
}

.episodes-list {
	margin: 0 auto;
	max-width: 900px;
}

.episode {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding: 34px 0;
	border-bottom: solid 1px #e8e8e8;
}

.episodes-list .episode:first-child {
	border-top: solid 1px #e8e8e8;
}

.episode-art {
	flex: 0 0 225px;
	display: block;
	border: solid 4px #d8973c;
	font-size: 0;
	line-height: 0;
}

.episode-art img {
	width: 100%;
	height: auto;
	display: block;
}

.episode-art:hover {
	border-color: #000;
}

.episode-body {
	flex: 1 1 auto;
	min-width: 0;
}

.episode-meta {
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	font-size: 0.938em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #d8973c;
	margin: 0 0 10px 0;
}

.episode-body .episode-title {
	font-size: 1.5em;
	line-height: 115%;
	margin: 0 0 12px 0;
}

.episode-body .episode-title a {
	color: #000;
}

.episode-body .episode-title a:hover {
	color: #d8973c;
}

.episode-listing-text {
	font-size: 1.063em;
	line-height: 155%;
	color: #4f4f4f;
	margin: 0 0 18px 0;
}

.episode-player {
	margin: 0 0 16px 0;
}

.episode-audio {
	width: 100%;
	display: block;
}

.episode-player-embed iframe {
	width: 100%;
	border: 0;
	display: block;
}

.episode-more {
	font-family: AvenirNextCondensed, sans-serif;
	text-transform: uppercase;
	font-size: 1.063em;
}

.episode-more a {
	color: #d8973c;
}

/* Matches the cue row's "Watch and listen": same destination, same signal. */
.episode-more a:after {
	content: " \2197";
}

.episode-more a:hover {
	color: #000;
}

.episodes-all {
	margin: 44px 0 0 0;
	font-family: AvenirNextCondensed, sans-serif;
	text-transform: uppercase;
	font-size: 1.188em;
}

.episodes-all a {
	color: #d8973c;
}

.episodes-all a:hover {
	color: #000;
}

/* Episode index page */

/* A sparse index is short — one episode comes to roughly 600px — and the site
   wrapper's dark background then shows beneath it as a black band for the rest
   of the viewport. Fill the viewport so a one-episode index still reads as a
   page rather than a mistake. The subtraction is #barba-wrapper's fixed-header
   offset: 100px, dropping to 80px where responsive.css reduces it. */
#podcast-index {
	min-height: calc(100vh - 100px);
}

@media screen and (max-width: 1240px) {
	#podcast-index {
		min-height: calc(100vh - 80px);
	}
}

#podcast-index .podcast-intro {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

#podcast-index .podcast-intro .entry-content {
	text-align: left;
}

/* Single episode */

#single-episode .episode-hero {
	padding: 90px 0;
}

#single-episode .episode-hero .wrapper {
	display: flex;
	align-items: flex-start;
	gap: 50px;
}

#single-episode .episode-hero-art {
	flex: 0 0 300px;
	font-size: 0;
	line-height: 0;
	border: solid 4px #d8973c;
}

#single-episode .episode-hero-art img {
	width: 100%;
	height: auto;
	display: block;
}

#single-episode .episode-hero-copy {
	flex: 1 1 auto;
	min-width: 0;
}

#single-episode .episode-title {
	font-size: 2.25em;
	line-height: 110%;
	margin: 0 0 14px 0;
	color: #fff;
}

#single-episode .episode-guest {
	font-size: 1.188em;
	line-height: 140%;
	margin: 0 0 26px 0;
	color: #fff;
}

#single-episode .episode-hero .episode-player {
	margin: 0 0 24px 0;
}

.episode-listen-links .episode-listen-label {
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.938em;
	letter-spacing: 0.04em;
	margin: 0 0 10px 0;
}

.episode-listen-links ul {
	font-size: 0;
}

.episode-listen-links li {
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	margin: 0 10px 10px 0;
}

.episode-listen-links a {
	display: inline-block;
	padding: 8px 16px;
	border: solid 2px #d8973c;
	color: #d8973c;
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.938em;
	line-height: 100%;
}

.episode-listen-links a:hover {
	background: #d8973c;
	color: #fff;
}

#single-episode .episode-notes,
#single-episode .episode-transcript,
#single-episode .episode-back {
	padding: 70px 0;
}

#single-episode .episode-transcript,
#single-episode .episode-back {
	padding-top: 0;
}

#single-episode .episode-notes .wrapper,
#single-episode .episode-transcript .wrapper {
	max-width: 860px;
}

.episode-section-title {
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	font-size: 1.5em;
	line-height: 110%;
	text-transform: uppercase;
	margin: 0 0 22px 0;
}

.episode-transcript-details summary {
	cursor: pointer;
	margin: 0;
}

.episode-transcript-details[open] summary {
	margin: 0 0 22px 0;
}

.episode-back a {
	color: #d8973c;
	font-family: AvenirNextCondensed, sans-serif;
	text-transform: uppercase;
	font-size: 1.188em;
}

.episode-back a:hover {
	color: #000;
}

@media screen and (max-width: 1240px) {
	.episodes-list,
	#podcast-index .podcast-intro {
		padding: 0 20px;
	}
}

@media screen and (max-width: 860px) {
	#single-episode .episode-hero .wrapper {
		display: block;
		padding: 0 20px;
	}

	#single-episode .episode-hero-art {
		max-width: 240px;
		margin: 0 0 30px 0;
	}

	#single-episode .episode-title {
		font-size: 1.75em;
	}
}

@media screen and (max-width: 860px) {
	.repair-episodes-intro {
		gap: 28px;
	}

	.repair-episodes-cover {
		flex-basis: 140px;
		width: 140px;
	}
}

@media screen and (max-width: 700px) {
	.repair-episodes {
		padding: 50px 0 60px;
	}

	/* Cover above the text once there is no room beside it. */
	.repair-episodes-intro {
		display: block;
		text-align: center;
	}

	.repair-episodes-cover {
		width: 150px;
		margin: 0 auto 22px;
	}

	.episode {
		display: block;
		padding: 26px 0;
	}

	.episode-art {
		max-width: 200px;
		margin: 0 0 18px 0;
	}

	.episodes-heading {
		font-size: 1.625em;
	}

	.episode-body .episode-title {
		font-size: 1.25em;
	}

	.episodes-subhead,
	.episode-listing-text {
		font-size: 0.95em;
		line-height: 150%;
	}

	#single-episode .episode-hero,
	#single-episode .episode-notes {
		padding: 50px 0;
	}
}

/* Video episodes */

.episode-video {
	width: 100%;
	height: auto;
	display: block;
	background: #000;
	aspect-ratio: 16 / 9;
}

.episode-player-video-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.episode-player-video-embed iframe,
.episode-player-video-embed video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* With video in the hero, the artwork column is redundant: the poster frame
   carries the image, and the player wants the width. */
#single-episode .episode-hero:has(.episode-player-video) .wrapper {
	display: block;
}

#single-episode .episode-hero:has(.episode-player-video) .episode-hero-art {
	display: none;
}

.episodes-show-title {
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	font-size: 1.375em;
	line-height: 115%;
	color: #d8973c;
	margin: -8px 0 16px 0;
}

@media screen and (max-width: 700px) {
	.episodes-show-title {
		font-size: 1.188em;
	}
}

/* Prose inside show notes and transcript.
 *
 * style.css resets every heading and strong to inherit font-size and
 * font-weight, and only restores a size for h1 — there is no h2/h3 rule in the
 * theme at all. The one prose heading on a story page gets its size from an
 * inline <span style="font-size: 1.375em"><b> the editor typed by hand. Show
 * notes arrive as real markup, so the rules live here instead, scoped to the
 * episode sections so nothing else on the site moves.
 *
 * Link colour is the same fix: the global rule is a {color: #D7D7D7} with a
 * white hover, which is for dark backgrounds. Components sitting on white
 * override it with #d8973c — see .partner .text a in style.css.
 */

.episode-notes .entry-content h2,
.episode-notes .entry-content h3,
.episode-notes .entry-content h4,
.episode-transcript .entry-content h2,
.episode-transcript .entry-content h3,
.episode-transcript .entry-content h4 {
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	font-size: 1.313em;
	line-height: 120%;
	color: #000;
	margin: 46px 0 18px 0;
}

.episode-notes .entry-content h4,
.episode-transcript .entry-content h4 {
	font-size: 1.125em;
}

.episode-notes .entry-content > h2:first-child,
.episode-notes .entry-content > h3:first-child,
.episode-transcript .entry-content > h2:first-child,
.episode-transcript .entry-content > h3:first-child {
	margin-top: 0;
}

.episode-notes .entry-content a,
.episode-transcript .entry-content a {
	color: #d8973c;
	border-bottom: solid 1px rgba(216, 151, 60, 0.4);
}

.episode-notes .entry-content a:hover,
.episode-transcript .entry-content a:hover {
	color: #000;
	border-bottom-color: #000;
}

.episode-notes .entry-content strong,
.episode-notes .entry-content b,
.episode-transcript .entry-content strong,
.episode-transcript .entry-content b {
	font-weight: 700;
}

.episode-notes .entry-content em,
.episode-notes .entry-content i,
.episode-transcript .entry-content em,
.episode-transcript .entry-content i {
	font-style: italic;
}

@media screen and (max-width: 700px) {
	.episode-notes .entry-content h2,
	.episode-notes .entry-content h3,
	.episode-transcript .entry-content h2,
	.episode-transcript .entry-content h3 {
		font-size: 1.188em;
		margin: 36px 0 14px 0;
	}
}

/* Podcast cue under the hero film.
   A single quiet row: label, show, episode, action. No badge, no colour block. */

/* The cue sits above the hero film, so it is the first thing on the page.
   #header is fixed with no offset reserved for it anywhere in the theme — the
   hero simply runs underneath it — so the cue reserves its own: 100px of header
   on desktop, 80px below 1240px, matching the menu's line-height. */

.repair-podcast-cue {
	background: #fff;
	padding: 100px 0 0 0;
}

.repair-podcast-cue .repair-cue {
	display: flex;
	align-items: baseline;
	gap: 22px;
	padding: 18px 0 20px;
	border-top: solid 1px #e8e8e8;
	color: #000;
}

.repair-cue-label {
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	font-size: 0.875em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #d8973c;
	flex: 0 0 auto;
}

.repair-cue-text {
	flex: 1 1 auto;
	min-width: 0;
}

.repair-cue-show {
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	font-size: 1.125em;
	line-height: 130%;
	margin: 0 12px 0 0;
}

.repair-cue-episode {
	font-size: 1em;
	line-height: 130%;
	color: #4f4f4f;
}

.repair-cue-action {
	flex: 0 0 auto;
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	font-size: 0.938em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #d8973c;
	white-space: nowrap;
}

/* Popout arrow: this link leaves the page for the episode's own tab. The audio
   link below overrides it with a down arrow, since that one stays here. */
.repair-cue-action:after {
	content: " \2197";
}

.repair-cue-action-audio {
	color: #4f4f4f;
}

.repair-cue-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 22px;
	white-space: nowrap;
}

.repair-cue-action:hover {
	color: #000;
}

.repair-cue-action-audio:after {
	content: " \2193";
}

/* Intro copy wraps the dictionary graphic.
 *
 * style.css puts the graphic in a 44% float and the copy in a 50% float beside
 * it, so the copy could never run under the image and the block ran tall. Here
 * the copy is taken out of its float and flows around the image instead: the
 * opening lines sit to its right, the rest continues beneath it at full width.
 * The gap is the image's right margin, narrower than the old two-column gutter,
 * with enough room for the -10deg rotation to swing its corners without
 * touching the text.
 *
 * Above the 760px breakpoint only — below it responsive.css stacks the two,
 * which is still what small screens want. */

@media screen and (min-width: 761px) {
	#repair-page .repair-copy {
		float: none;
		width: auto;
		padding: 4px 0 0 0;
	}

	#repair-page .repair-definition-image {
		margin: 0 56px 18px 0;
	}

	#repair-page .repair-intro .wrapper:after {
		content: " ";
		display: table;
		clear: both;
	}

	/* The question's gold bar is absolutely positioned at its paragraph's left
	   edge. Now that the copy flows around the image instead of sitting in its
	   own column, that edge is the wrapper's, so the bar drew to the left of the
	   dictionary graphic while the text wrapped to its right. flow-root makes
	   the paragraph its own formatting context, which cannot overlap a float:
	   the box starts where the text starts, and the bar comes with it. */
	#repair-page .repair-copy .repair-question {
		display: flow-root;
	}
}

/* The hero caption's own rule lives in template_repair.php's inline <style>
   block, which sits after this file in the cascade, so it is widened there. */

/* Hover preview chip on episode artwork */

.episode-art {
	position: relative;
}

.episode-preview-chip {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 5px 9px;
	background: #d8973c;
	color: #fff;
	font-family: AvenirNextCondensed, sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 100%;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity .25s ease;
}

.episode-art.is-previewing .episode-preview-chip {
	opacity: 1;
}

@media screen and (max-width: 1240px) {
	.repair-podcast-cue {
		padding-top: 80px;
	}
}

@media screen and (max-width: 860px) {
	.repair-podcast-cue .repair-cue {
		display: block;
		padding: 18px 20px;
	}

	.repair-cue-label {
		display: block;
	}

	.repair-cue-actions {
		display: flex;
		gap: 18px;
	}

	.repair-cue-label {
		margin: 0 0 6px 0;
	}

	.repair-cue-action {
		margin: 8px 0 0 0;
	}

	#repair-page .repair-narrative {
		padding: 30px 0 0 0;
	}
}