/* =========================================================
   Podcast Series + Episode Detail
   Series:  Figma 9296:143348
   Episode: Figma 9296:143616
   ========================================================= */

.container:has(.podcast-detail) {
	padding-inline: 0;
}

body:has(.podcast-detail) #content {
	display: flex;
	flex-direction: column;
}

.podcast-detail {
	background-color: var(--pod-bg, #000);
	color: var(--pod-white, #fff);
	flex: 1;
	display: flex;
	flex-direction: column;
	font-family: var(--pod-font, 'Manrope', sans-serif);
	width: 100%;
}

/* Episode detail: 1312px content at 1440px viewport (64px gutters).
   Series detail keeps 1200px via the 120px gutters below. */
.podcast-detail--episode .podcast-detail__bar-inner,
.podcast-detail--episode .podcast-detail__episode-header,
.podcast-detail--episode .podcast-detail__share-row,
.podcast-detail--episode .podcast-detail__content {
	padding-inline: 64px;
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.podcast-detail__bar-inner {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: 24px 120px;
	box-sizing: border-box;
}

.podcast-detail__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	min-width: 0;
}

.podcast-detail__bc-link {
	color: var(--pod-white, #fff);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.podcast-detail__bc-link:hover {
	text-decoration: underline;
}

/* Long series link (episode breadcrumb): allow it to shrink and show an
   ellipsis so the current episode item stays visible on screen. */
.podcast-detail__bc-link--truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 0 1 auto;
}

.podcast-detail__bc-sep {
	display: inline-flex;
	color: var(--pod-gray-400, #9f9f9f);
	flex-shrink: 0;
}

.podcast-detail__bc-current {
	color: var(--pod-gray-400, #9f9f9f);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	flex: 0 1 auto;
}

/* ── Episode header (series title above the share row) ──── */
.podcast-detail__episode-header {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 120px;
	box-sizing: border-box;
}

.podcast-detail__episode-heading {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 500;
	line-height: 48px;
	color: var(--pod-gray-100, #f2f2f2);
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ── Share row (episode detail) ─────────────────────────── */
.podcast-detail__share-row {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 120px 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 0;
}

.podcast-detail__share-label {
	color: var(--pod-white, #fff);
	display: inline-flex;
	align-items: center;
	align-self: center;
	height: 24px;
}

.podcast-detail--episode .art-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.podcast-detail--episode .art-share-icon:hover {
	opacity: 0.8;
	transform: scale(1.05);
}

.podcast-detail--episode .art-share-icon.art-share-x svg path {
	fill: #fff;
}

.podcast-detail--episode .art-share-icon.art-share-copy svg path {
	stroke: #fff;
}

/* ── Content shell ──────────────────────────────────────── */
.podcast-detail__content {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: 24px 120px 64px;
	box-sizing: border-box;
}

/* ── Series layout ────────────────────────────────────────── */
.podcast-detail__layout--series {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.podcast-detail__info {
	flex: 0 0 486px;
	max-width: 486px;
	position: sticky;
	top: 24px;
}

.podcast-detail__info-card {
	background: var(--pod-gray-900, #151515);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.podcast-detail__cover {
	aspect-ratio: 436 / 227;
	border-radius: 8px;
	overflow: hidden;
	background: var(--pod-gray-800, #202020);
}

.podcast-detail__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.podcast-detail__cover-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #202020 0%, #404040 100%);
}

.podcast-detail__title {
	margin: 24px 0 0;
	font-size: 32px;
	font-weight: 500;
	line-height: 48px;
}

.podcast-detail__desc {
	margin: 16px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--pod-gray-400, #9f9f9f);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.podcast-detail__streams {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.podcast-detail__stream {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--pod-gray-200, #dfdfdf);
	border-radius: 4px;
	background: transparent;
	color: var(--pod-gray-200, #dfdfdf);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.podcast-detail__stream:hover {
	background-color: var(--pod-gray-800);
	border-color: var(--pod-gray-400);
	color: var(--pod-gray-400);
}

.podcast-detail__stream-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: inherit;
}

.podcast-detail--series .podcast-detail__stream {
	height: 36px;
	box-sizing: border-box;
	padding-block: 0;
}

.podcast-detail__episodes-panel-wrap {
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid var(--pod-gray-700, #404040);
	border-radius: 12px;
	overflow: hidden;
}

.podcast-detail__layout--series .podcast-detail__episodes-panel-wrap {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.podcast-detail__layout--series .podcast-episode-sidebar {
	flex: 1;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
}

/* ── Episode layout ───────────────────────────────────────── */
/* Two-column player + sidebar grid, matched to the academy detail
 * page: at the 1440px frame the content track is 1312px (64px
 * gutters), the sidebar is a fixed 421px and the 24px gap leaves the
 * player at 1312 − 421 − 24 = 867px → 487px tall on its 16:9 ratio,
 * exactly the same as the academy lesson player + lessons box. */
.podcast-detail__layout--episode {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 421px;
	gap: 24px;
	align-items: start;
}

.podcast-detail__player-col {
	min-width: 0;
}

.podcast-detail__player-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.podcast-detail__player-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.podcast-detail__player-fallback {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--pod-gray-900, #151515);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pod-gray-400, #9f9f9f);
	font-size: 14px;
}

.podcast-detail__episode-body {
	max-width: 867px;
	margin-top: 24px;
}

.podcast-detail__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.podcast-detail__nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	min-width: 112px;
	justify-content: center;
	transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.podcast-detail__nav-btn--prev {
	background: var(--pod-gray-800, #202020);
	color: var(--pod-gray-700, #404040);
}

.podcast-detail__nav-btn--prev:not(.is-disabled) {
	color: var(--pod-gray-200, #dfdfdf);
}

/* Hover mirrors academy detail: Previous turns primary green, Next
 * deepens to the dim primary. */
.podcast-detail__nav-btn--prev:hover:not(.is-disabled) {
	background: var(--pod-primary, #0fef9e);
	color: var(--pod-gray-900, #151515);
}

.podcast-detail__nav-btn--next {
	background: var(--pod-primary, #0fef9e);
	color: var(--pod-gray-800, #202020);
}

.podcast-detail__nav-btn--next:hover:not(.is-disabled) {
	background: var(--pod-primary-dim, #098D5E);
	color: var(--pod-gray-800, #202020);
}

.podcast-detail__nav-btn.is-disabled {
	pointer-events: none;
	opacity: 0.45;
}

/* Prev on the first episode / Next on the last episode — solid muted
 * button (no opacity fade). */
.podcast-detail__nav-btn--prev.is-disabled,
.podcast-detail__nav-btn--next.is-disabled {
	background: var(--pod-gray-800, #202020);
	color: var(--pod-gray-700, #404040);
	opacity: 1;
}

.podcast-detail__nav-counter {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--pod-white, #fff);
}

.podcast-detail__episode-title {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 500;
	line-height: 36px;
	color: var(--pod-gray-100, #f2f2f2);
}

.podcast-detail__episode-prefix {
	display: inline;
}

.podcast-detail__episode-content {
	font-size: 14px;
	line-height: 20px;
	color: var(--pod-gray-300, #bfbfbf);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.podcast-detail__episode-content p {
	margin: 0 0 12px;
}

/* ── CMS-authored content inside the episode body ──────────────────
 * Mirrors `.academy-detail__lesson-body` so writer-pasted blocks
 * (lists, separators, tables, buttons, quotes, headings, media)
 * render consistently — adapted to the podcast dark theme tokens.
 * ───────────────────────────────────────────────────────────────── */
.podcast-detail__episode-content > * {
	max-width: 100%;
}

.podcast-detail__episode-content a {
	color: var(--pod-primary, #0fef9e);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.podcast-detail__episode-content a:hover {
	color: var(--pod-primary-dim, #098D5E);
}

.podcast-detail__episode-content strong,
.podcast-detail__episode-content b {
	font-weight: 600;
}
.podcast-detail__episode-content em,
.podcast-detail__episode-content i {
	font-style: italic;
}
.podcast-detail__episode-content u {
	text-decoration: underline;
}

.podcast-detail__episode-content h1,
.podcast-detail__episode-content h2 {
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: var(--pod-gray-100, #f2f2f2);
	margin: 24px 0 12px;
}
.podcast-detail__episode-content h3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--pod-gray-100, #f2f2f2);
	margin: 20px 0 12px;
}
.podcast-detail__episode-content h4 {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--pod-gray-100, #f2f2f2);
	margin: 16px 0 8px;
}

/* Lists — restore markers and indentation (browser defaults are not
 * guaranteed once theme/plugin resets land on the page). */
.podcast-detail__episode-content ul,
.podcast-detail__episode-content ol {
	padding-left: 24px;
	margin: 0 0 12px;
	list-style-position: outside;
}
.podcast-detail__episode-content ul {
	list-style-type: disc;
}
.podcast-detail__episode-content ol {
	list-style-type: decimal;
}
.podcast-detail__episode-content ul ul {
	list-style-type: circle;
}
.podcast-detail__episode-content ul ul ul {
	list-style-type: square;
}
.podcast-detail__episode-content li {
	margin-bottom: 8px;
}
.podcast-detail__episode-content li > p {
	margin: 0;
}

/* Horizontal rule / separator */
.podcast-detail__episode-content hr,
.podcast-detail__episode-content .wp-block-separator {
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	margin: 24px 0;
	border: 0;
	border-top: 1px solid var(--pod-gray-700, #404040);
	height: 0;
}

/* Blockquote */
.podcast-detail__episode-content blockquote {
	background: var(--pod-gray-900, #151515);
	border-radius: var(--pod-radius, 4px);
	padding: 16px 24px;
	margin: 16px 0;
}
.podcast-detail__episode-content blockquote p {
	margin: 0 0 8px;
}
.podcast-detail__episode-content blockquote p:last-child {
	margin-bottom: 0;
}

/* Media */
.podcast-detail__episode-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pod-radius-card, 8px);
	display: block;
	margin: 16px 0;
}
/* WordPress / TinyMCE image-alignment classes.
 *
 * The wpeditimage plugin (Education Editor UI / Academy Migrator) sets one
 * of `alignleft` / `alignright` / `aligncenter` / `alignnone` on the <img>
 * (or its wrapping <figure> / <dl class="wp-caption">) when an author picks
 * an alignment in the CMS.  Without these rules the `img { margin: 16px 0 }`
 * declaration above wins and every image stays left-aligned, so the front
 * end must honour the class to match what the author set in the back end. */
.podcast-detail__episode-content img.alignleft,
.podcast-detail__episode-content figure.alignleft,
.podcast-detail__episode-content .wp-caption.alignleft {
	float: none;
	display: block;
	margin: 16px auto 16px 0;
}

.podcast-detail__episode-content img.alignright,
.podcast-detail__episode-content figure.alignright,
.podcast-detail__episode-content .wp-caption.alignright {
	float: none;
	display: block;
	margin: 16px 0 16px auto;
}

.podcast-detail__episode-content img.aligncenter,
.podcast-detail__episode-content figure.aligncenter,
.podcast-detail__episode-content .wp-caption.aligncenter {
	float: none;
	display: block;
	margin: 16px auto;
}

.podcast-detail__episode-content img.alignnone,
.podcast-detail__episode-content figure.alignnone,
.podcast-detail__episode-content .wp-caption.alignnone {
	float: none;
	display: block;
	margin: 16px 0;
}

.podcast-detail__episode-content iframe {
	max-width: 100%;
	border-radius: var(--pod-radius-card, 8px);
}

/* Code */
.podcast-detail__episode-content pre,
.podcast-detail__episode-content code {
	max-width: 100%;
	overflow-x: auto;
}
.podcast-detail__episode-content pre {
	background: var(--pod-gray-900, #151515);
	border-radius: var(--pod-radius, 4px);
	padding: 16px;
	margin: 16px 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
	font-size: 13px;
	line-height: 20px;
	white-space: pre-wrap;
}
.podcast-detail__episode-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
	font-size: 0.92em;
}

/* Buttons (wp-block-button) */
.podcast-detail__episode-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}
.podcast-detail__episode-content .wp-block-button,
.podcast-detail__episode-content .wp-block-button__link {
	max-width: 100%;
}

/* Tables — `.cms-table-scroll` wrapper (added in PHP) handles mobile
 * horizontal scroll; data tables paint borders, layout tables stay flat. */
.podcast-detail__episode-content .cms-table-scroll {
	max-width: 100%;
	margin: 16px 0;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.podcast-detail__episode-content .cms-table-scroll > table {
	margin: 0;
}

.podcast-detail__episode-content table[style*="border-style: hidden"],
.podcast-detail__episode-content table[style*="border-style:hidden"] {
	max-width: 100%;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
}
.podcast-detail__episode-content table[style*="border-style: hidden"] th,
.podcast-detail__episode-content table[style*="border-style: hidden"] td,
.podcast-detail__episode-content table[style*="border-style:hidden"] th,
.podcast-detail__episode-content table[style*="border-style:hidden"] td {
	padding: 0;
	border: 0;
	vertical-align: top;
}

.podcast-detail__episode-content table:not([style*="border-style: hidden"]):not([style*="border-style:hidden"]) {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.podcast-detail__episode-content table:not([style*="border-style: hidden"]):not([style*="border-style:hidden"]) th,
.podcast-detail__episode-content table:not([style*="border-style: hidden"]):not([style*="border-style:hidden"]) td {
	padding: 12px 16px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--pod-gray-700, #404040);
	vertical-align: top;
}

/* Episode sidebar box — fixed 421×487 to match the academy lessons
 * box.  No sticky positioning: the box stays in normal flow next to
 * the player and only its inner list scrolls, so it never slides down
 * with the page.  The 487px height is released once the layout
 * collapses to a single column (see the ≤1439px block below). */
.podcast-detail__episodes-panel-wrap--sidebar {
	position: static;
	height: 487px;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.podcast-detail--episode .podcast-detail__episodes-panel-wrap--sidebar .podcast-episode-sidebar {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
}

/* ── Shared episode sidebar ───────────────────────────────── */
.podcast-episode-sidebar {
	padding: 0 8px 16px 16px;
	max-height: 544px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--pod-gray-700, #404040) transparent;
}

.podcast-episode-sidebar::-webkit-scrollbar {
	width: 4px;
}

.podcast-episode-sidebar::-webkit-scrollbar-thumb {
	background: var(--pod-gray-700, #404040);
	border-radius: 24px;
}

.podcast-episode-sidebar__heading {
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 0;
	padding: 16px 8px;
	background: var(--pod-bg, #000);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--pod-gray-100, #f2f2f2);
}

.podcast-episode-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.podcast-episode-sidebar__item {
	border-radius: var(--pod-radius, 4px);
}

.podcast-episode-sidebar__link {
	display: flex;
	align-items: stretch;
	width: 100%;
	text-decoration: none;
	color: inherit;
	padding: 0;
	min-height: 94px;
	box-sizing: border-box;
}

.podcast-episode-sidebar__index {
	flex: 0 0 16px;
	width: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	margin-right: 8px;
}

/* Index column colours (episode detail):
 *   - number rows  → white (#FFFFFF)
 *   - active play-icon row → grey (#9F9F9F); the play SVG uses
 *     `fill: currentColor`, so the colour cascades onto it. */
.podcast-detail--episode .podcast-episode-sidebar__index {
	color: var(--pod-white, #ffffff);
}
.podcast-detail--episode .podcast-episode-sidebar__item.has-play-icon .podcast-episode-sidebar__index {
	color: var(--pod-gray-400, #9f9f9f);
}

/* Highlight behind the title column only (starts at the thumb's right edge). */
.podcast-detail--episode .podcast-episode-sidebar__item.is-active .podcast-episode-sidebar__text {
	background: var(--pod-gray-900, #151515);
	border-radius: 0 var(--pod-radius, 4px) var(--pod-radius, 4px) 0;
}

.podcast-detail--series .podcast-episode-sidebar__item:hover .podcast-episode-sidebar__text,
.podcast-detail--episode .podcast-episode-sidebar__item:hover:not(.is-active) .podcast-episode-sidebar__text {
	background: var(--pod-gray-900, #151515);
	border-radius: 0 var(--pod-radius, 4px) var(--pod-radius, 4px) 0;
}

.podcast-episode-sidebar__thumb {
	position: relative;
	flex: 0 0 168px;
	width: 168px;
	height: 94px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--pod-gray-800, #202020);
}

.podcast-episode-sidebar__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Lazy-load lifecycle for episode sidebar thumbnails (mirrors the
 * academy lesson thumbs).  `acd-lazy` is the deferred placeholder
 * state; `acd-lazy--loaded` fades the real bitmap in once the JS
 * observer swaps data-src → src. */
.podcast-episode-sidebar__thumb img.acd-lazy {
	opacity: 0;
}
.podcast-episode-sidebar__thumb img.acd-lazy--loaded {
	opacity: 1;
	transition: opacity 0.25s ease;
}

.podcast-episode-sidebar__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #303030, #505050);
}

.podcast-episode-sidebar__duration {
	position: absolute;
	right: 4px;
	bottom: 4px;
	padding: 3px 4px;
	background: #161722;
	font-size: 10px;
	color: #fff;
}

.podcast-episode-sidebar__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 94px;
	align-self: stretch;
	padding: 8px;
	box-sizing: border-box;
	transition: background 0.18s ease;
}

.podcast-episode-sidebar__title {
	font-size: 14px;
	line-height: 20px;
}

/* Clamp the sidebar title to 3 lines and append an ellipsis once the
 * title overflows (series + episode detail). */
.podcast-episode-sidebar__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.podcast-episode-sidebar__date {
	font-size: 12px;
	line-height: 18px;
	color: #aaa;
}

.podcast-episode-sidebar__empty {
	padding: 24px 8px;
	color: var(--pod-gray-400, #9f9f9f);
	font-size: 14px;
}

.podcast-detail .podcast-cta {
	margin-top: auto;
}

/* ── Responsive ─────────────────────────────────────────── */

/* Episode detail — breakpoints mirror the academy detail page:
 * the player + sidebar grid collapses to a single column as soon as
 * the viewport drops below the 1440px design canvas, gutters step
 * 64px → 24px → 16px at 1440 / 1439 / 768, exactly like academy.
 * Scoped to `.podcast-detail--episode` so the series page keeps its
 * own (1279 / 1023 / 768 / 767) breakpoints below. */
@media (max-width: 1439px) {
	.podcast-detail--episode .podcast-detail__bar-inner,
	.podcast-detail--episode .podcast-detail__episode-header,
	.podcast-detail--episode .podcast-detail__content,
	.podcast-detail--episode .podcast-detail__share-row {
		padding-inline: 24px;
	}

	.podcast-detail--episode .podcast-detail__content {
		padding-block: 24px 32px;
	}

	.podcast-detail--episode .podcast-detail__layout--episode {
		display: flex;
		flex-direction: column;
		grid-template-columns: 1fr;
	}

	/* Once the grid collapses, the player column spans the full content
	 * width — release the fixed 867px body cap so the episode copy
	 * tracks the player width instead of staying narrow on the left. */
	.podcast-detail--episode .podcast-detail__player-col,
	.podcast-detail--episode .podcast-detail__episode-body {
		max-width: 100%;
		width: 100%;
	}

	/* Tablet — the box spans the full content width below the player
	 * but keeps the academy 487px fixed height with the list scrolling
	 * internally (matches `.academy-detail__lessons` which holds 487px
	 * down to the mobile breakpoint).  `flex: none` is essential: in the
	 * collapsed column-flex layout the base `flex: 1 1 0` would zero the
	 * flex-basis and override the explicit `height: 487px`, collapsing
	 * the box to 0 height (sidebar disappears). */
	.podcast-detail--episode .podcast-detail__episodes-panel-wrap,
	.podcast-detail--episode .podcast-detail__episodes-panel-wrap--sidebar {
		flex: none;
		max-width: none;
		width: 100%;
	}

	/* Fit the episode count from tablet up to 1439px: shrink to the
	   episode list when it's short, cap + scroll at 487px once long. */
	.podcast-detail--episode .podcast-detail__episodes-panel-wrap--sidebar {
		height: auto;
		max-height: 487px;
	}
}

@media (max-width: 768px) {
	.podcast-detail--episode .podcast-detail__bar-inner,
	.podcast-detail--episode .podcast-detail__episode-header,
	.podcast-detail--episode .podcast-detail__content,
	.podcast-detail--episode .podcast-detail__share-row {
		padding-inline: 16px;
	}

	/* Title scales down on mobile to match `.academy-detail__title`. */
	.podcast-detail--episode .podcast-detail__episode-heading {
		font-size: 18px;
		line-height: 28px;
	}

	/* Mobile — mirror `.academy-detail__lessons` at ≤768px: the box
	 * collapses to its content height for short episode lists yet caps
	 * at 487px and scrolls internally once the list is long enough. */
	.podcast-detail--episode .podcast-detail__episodes-panel-wrap--sidebar {
		height: auto;
		max-height: 487px;
	}
}

@media (max-width: 1279px) {
	.podcast-detail--series .podcast-detail__bar-inner,
	.podcast-detail--series .podcast-detail__content,
	.podcast-detail--series .podcast-detail__share-row {
		padding-inline: 64px;
	}
}

@media (max-width: 1023px) {
	.podcast-detail__layout--series {
		grid-template-columns: 1fr;
		display: flex;
		flex-direction: column;
	}

	.podcast-detail__desc {
		display: block;
		-webkit-line-clamp: unset;
		line-clamp: unset;
		overflow: visible;
	}

	.podcast-detail__info,
	.podcast-detail--series .podcast-detail__episodes-panel-wrap {
		position: static;
		flex: none;
		max-width: none;
		width: 100%;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.podcast-detail--series .podcast-detail__bar-inner,
	.podcast-detail--series .podcast-detail__content,
	.podcast-detail--series .podcast-detail__share-row {
		padding-inline: 24px;
	}

	.podcast-detail__content {
		padding-block: 24px 32px;
	}

	.podcast-detail--series .podcast-detail__layout--series {
		gap: 24px;
	}

	.podcast-detail--series .podcast-detail__info-card {
		display: grid;
		grid-template-columns: minmax(0, 384px) minmax(0, 1fr);
		column-gap: 24px;
		row-gap: 24px;
		padding: 24px;
	}

	.podcast-detail--series .podcast-detail__cover {
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: start;
		width: 100%;
		max-width: 384px;
		height: auto;
		aspect-ratio: 436 / 227;
	}

	.podcast-detail--series .podcast-detail__title {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		font-size: 32px;
		line-height: 48px;
	}

	.podcast-detail--series .podcast-detail__desc {
		grid-column: 2;
		grid-row: 2;
		margin: -8px 0 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 7;
		line-clamp: 7;
		overflow: hidden;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.podcast-detail--series .podcast-detail__streams {
		grid-column: 1 / -1;
		grid-row: 3;
		display: flex;
		flex-wrap: nowrap;
		gap: 16px;
		margin: 0;
	}

	.podcast-detail--series .podcast-detail__streams > li {
		flex: 1 1 0;
		min-width: 0;
	}

	.podcast-detail--series .podcast-detail__stream {
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
	}

	.podcast-detail--series .podcast-detail__episodes-panel-wrap {
		display: flex;
		flex-direction: column;
		/* Fit the episode count: shrink to content when there are few
		   episodes, cap + scroll once the list gets tall. */
		height: auto !important;
		max-height: 558px;
		overflow: hidden;
	}

	.podcast-detail--series .podcast-episode-sidebar {
		flex: 1;
		min-height: 0;
		padding: 0 16px 16px;
		overflow-y: auto;
	}

	.podcast-detail--series .podcast-episode-sidebar__list {
		padding-top: 0;
	}

	.podcast-detail--series .podcast-episode-sidebar__link {
		gap: 0;
		min-height: 94px;
	}

	.podcast-detail--series .podcast-episode-sidebar__index {
		margin-right: 8px;
	}

	.podcast-detail--series .podcast-episode-sidebar__thumb {
		flex: 0 0 168px;
		width: 168px;
		height: 94px;
	}
}

@media (max-width: 767px) {
	.podcast-detail--series .podcast-detail__bar-inner,
	.podcast-detail--series .podcast-detail__content,
	.podcast-detail--series .podcast-detail__share-row {
		padding-inline: 16px;
	}

	.podcast-detail__content {
		padding-block: 24px 32px;
	}

	.podcast-detail--series .podcast-detail__layout--series {
		gap: 32px;
	}

	.podcast-detail--series .podcast-detail__info-card {
		display: flex;
		flex-direction: column;
		padding: 16px;
	}

	.podcast-detail--series .podcast-detail__cover {
		grid-column: auto;
		grid-row: auto;
		max-width: none;
		height: auto;
		aspect-ratio: 436 / 227;
	}

	.podcast-detail--series .podcast-detail__title {
		grid-column: auto;
		grid-row: auto;
		margin-top: 24px;
	}

	.podcast-detail--series .podcast-detail__desc {
		grid-column: auto;
		grid-row: auto;
	}

	.podcast-detail--series .podcast-detail__streams {
		grid-column: auto;
		grid-row: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 24px;
	}

	.podcast-detail__title {
		font-size: 24px;
		line-height: 36px;
	}

	.podcast-detail__stream {
		padding-inline: 5px;
	}

	.podcast-detail--series .podcast-detail__stream {
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
	}

	.podcast-detail--series .podcast-detail__episodes-panel-wrap {
		display: flex;
		flex-direction: column;
		/* Fit the episode count: shrink to content when there are few
		   episodes, cap + scroll once the list gets tall. */
		height: auto !important;
		max-height: 487px;
		overflow: hidden;
	}

	.podcast-detail--series .podcast-episode-sidebar {
		flex: 1;
		min-height: 0;
		padding: 0 16px 16px;
		overflow-y: auto;
	}

	.podcast-detail--series .podcast-episode-sidebar__list {
		padding-top: 8px;
	}

	.podcast-episode-sidebar__link {
		gap: 8px;
		min-height: 80px;
	}

	.podcast-episode-sidebar__index {
		margin-right: 0;
	}

	.podcast-episode-sidebar__thumb {
		flex: 0 0 143px;
		width: 143px;
		height: 80px;
	}

	.podcast-episode-sidebar__text {
		min-height: 80px;
		padding-block: 2px;
	}
}

/* ── Snackbar ──────────────────────────────────────────────── */

@keyframes art-snackbar-in {
	from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes art-snackbar-out {
	from { opacity: 1; transform: translateX(-50%) translateY(0); }
	to   { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}

.art-snackbar {
	position: fixed;
	top: 65px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	width: 177px;
	padding: 12px 8px;
	border-radius: 4px;
	background: #d3edde;

	white-space: nowrap;
	animation: art-snackbar-in 0.2s ease forwards;
}

.art-snackbar[hidden] {
	display: none;
}

.art-snackbar.is-hiding {
	display: flex;
	animation: art-snackbar-out 0.2s ease forwards;
}

.art-snackbar__check {
	flex-shrink: 0;
	display: block;
	width: 14px;
	height: 14px;
}

.art-snackbar__text {
	font-family: 'Manrope', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #24a759;
}

.art-snackbar__close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: #24a759;
}