/* ==================================================================
 * PODCAST — every rule for the podcast feature, in one file.
 *
 * Loaded only on pages that render a podcast block (block.json names the
 * `sgtp-podcast` handle as its style). Tokens only: no hard-coded colour,
 * radius, shadow or spacing. Written in the two layers the content rules
 * ask for — STRUCTURAL first (any site could use it), then the
 * TRIALPORT-SPECIFIC look at the bottom.
 *
 * Cards deliberately ride on the site's one card look, `.tp-post-card`
 * (style.css). This file only ADDS what a video card needs — the still,
 * the play badge, the S·E chip — and never restates the card surface, so a
 * change to the post card reaches episode cards too.
 *
 * OVERRIDE SURFACE (on .tp-pod-episodes / .tp-pod-episode):
 *   --tp-pod-gap         grid + section gap          [spacing--40]
 *   --tp-pod-card-min    narrowest card before wrap  [18rem]
 *   --tp-pod-radius      large media corner          [radius--bubble]
 *   --tp-pod-play-size   player play button          [5.5rem]
 *
 * WHY THE PLAY BADGES SIT IN THE LOWER-LEFT CORNER. First built centred-low
 * (the video-gallery lesson: a centred badge covers a webcam guest's eyes).
 * Then Keith's real artwork arrived (2026-10-25): designed thumbnails with the
 * title in the middle and the trialport logo bottom-centre, which a centred
 * or centred-low badge covers. The corner is clear on every one of them.
 * ================================================================== */

/* ------------------------------------------------------------------ */
/* STRUCTURAL                                                         */
/* ------------------------------------------------------------------ */

.tp-pod-episodes,
.tp-pod-episode {
	--tp-pod-gap: var(--wp--preset--spacing--40);
	--tp-pod-card-min: 18rem;
	--tp-pod-radius: var(--wp--custom--radius--bubble);
	--tp-pod-play-size: 5.5rem;
	--tp-pod-chip-surface: color-mix(in srgb, var(--wp--preset--color--canvas) 82%, transparent);
}

:where(.tp-pod-episodes, .tp-pod-episode, .tp-pod-hero) .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -- The grid ------------------------------------------------------ */

.tp-pod-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tp-pod-card-min)), 1fr));
	gap: var(--tp-pod-gap);
}

.tp-pod-episodes {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--80);
	scroll-margin-top: var(--wp--preset--spacing--100);
}

.tp-pod-episodes__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}
.tp-pod-episodes__head > * { margin: 0; }

.tp-pod-more-link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--tertiary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}
.tp-pod-more-link::after {
	content: "\f061"; /* fa-arrow-right */
	font: var(--ccc-fa-font-active);
	margin-inline-start: 0.5em;
	text-decoration: none;
	display: inline-block;
}

.tp-pod-empty,
.tp-pod-editor-note {
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--default-width) dashed var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--default);
	color: var(--wp--preset--color--ink-soft);
}

/* -- Episode card ---------------------------------------------------- */

/* A note on the compound selectors below (`.tp-pod-card .tp-pod-card__guest`
   and friends). WordPress prints `:root :where(p) { font-size: … }`; a single
   class ties with it and then loses on source order, because this sheet can
   load before the global styles. Every rule that sizes a <p> here carries a
   parent class for that reason — the same trap voice-card, the post card and
   the pre-footer CTA hit. */

.tp-pod-card {
	position: relative; /* anchors the stretched title link */
	/* The post card gets its column layout from core's flex group; this card
	   is not a group, so it states the same thing itself. */
	display: flex;
	flex-direction: column;
}

/* The still is the card's lid — flush to the top and sides, exactly as the
   post card treats its featured image. */
.tp-pod-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: calc(var(--tp-card-pad) * -1) calc(var(--tp-card-pad) * -1) 0;
	border-radius: var(--tp-card-radius) var(--tp-card-radius) 0 0;
	overflow: hidden;
	background: var(--wp--preset--color--canvas);
}
.tp-pod-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
}

.tp-pod-card__play {
	position: absolute;
	inset: auto auto var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	display: grid;
	place-items: center;
	width: 3.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--tp-pod-chip-surface);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--custom--elevation--card);
	transition: background-color 200ms ease-out, scale 260ms cubic-bezier(.22, 1, .36, 1);
}
.tp-pod-card__play i { translate: 8% 0; } /* optical centre of a triangle */

.tp-pod-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.75em;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--tp-pod-chip-surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	line-height: 1.2;
}
.tp-pod-card__chip,
.tp-pod-card__runtime { position: absolute; }
.tp-pod-card__chip { inset: var(--wp--preset--spacing--20) auto auto var(--wp--preset--spacing--20); }
.tp-pod-card__runtime { inset: auto var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) auto; font-weight: 400; }

.tp-pod-card .tp-pod-card__guest {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	color: var(--wp--preset--color--tertiary);
}

.tp-pod-card__title { margin: 0; font-size: var(--wp--preset--font-size--large); }
.tp-pod-card__title a {
	color: inherit;
	text-decoration: none;
}
/* The one link, stretched over the whole card. */
.tp-pod-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 1;
}
.tp-pod-card__title a:focus-visible { outline: none; }
.tp-pod-card:has(.tp-pod-card__title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--tertiary);
	outline-offset: 3px;
}

.tp-post-card .tp-pod-card__summary {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

.tp-pod-card:hover .tp-pod-card__media img { transform: scale(1.04); }
.tp-pod-card:hover .tp-pod-card__play { background: var(--wp--preset--color--cta); color: var(--wp--custom--color--cta-opposite); scale: 1.08; }
.tp-pod-card:hover .tp-pod-card__title a { text-decoration: underline; }

.tp-pod-card.is-current { outline: 2px solid var(--wp--preset--color--tertiary); outline-offset: 3px; }

/* -- Upcoming (scheduled) episodes ---------------------------------- */

/* Greyed out and inert until WordPress publishes the post. Grayscale on the
   still only — the words stay at full contrast so the release date is easy
   to read, which is the point of showing the card at all. */
.tp-pod-card.is-upcoming { cursor: default; }
.tp-pod-card.is-upcoming .tp-pod-card__media img,
.tp-pod-card.is-upcoming .tp-pod-card__placeholder {
	filter: grayscale(1);
	opacity: 0.55;
}
.tp-post-card.tp-pod-card.is-upcoming:hover,
.tp-post-card.tp-pod-card.is-upcoming:focus-within {
	transform: none;
	box-shadow: var(--wp--custom--elevation--card);
}
.tp-pod-card.is-upcoming:hover .tp-pod-card__media img { transform: none; }
.tp-pod-card.is-upcoming:hover .tp-pod-card__play {
	background: var(--tp-pod-chip-surface);
	color: var(--wp--preset--color--ink);
	scale: 1;
}
.tp-pod-card.is-upcoming .tp-pod-card__guest { color: var(--wp--preset--color--ink-soft); }
.tp-pod-card__runtime.is-date { font-weight: 700; }
/* Its own class, NOT .tp-post-card__more: that class is a link's look, and
   style.css underlines it on hover (loading after this sheet, so it won).
   This line is a date, not a link — no underline, no arrow, no hover. */
.tp-pod-card .tp-pod-card__release {
	margin-block-start: auto;
	padding-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--ink-soft);
}

/* No artwork yet: a quiet branded tile with the episode number. */
.tp-pod-card__media.is-empty { background: var(--wp--preset--gradient--brand); }
.tp-pod-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	color: var(--wp--custom--color--brand-opposite);
}
.tp-pod-card__media.is-empty .tp-pod-card__play { display: none; }
/* An upcoming episode with no artwork yet: canvas, not the brand gradient, so
   it sits with the greyed-out cards around it instead of outshining them. */
.tp-pod-card.is-upcoming .tp-pod-card__media.is-empty { background: var(--wp--preset--color--canvas); }
.tp-pod-card.is-upcoming .tp-pod-card__placeholder { filter: none; opacity: 1; color: var(--wp--custom--gray--60); }

/* -- Guest panel with several people --------------------------------- */

.tp-pod-guest__person { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.tp-pod-guest__person > * { margin: 0; }
.tp-pod-guest__person + .tp-pod-guest__person {
	margin-block-start: var(--wp--preset--spacing--20);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: var(--wp--custom--border--default-width) solid var(--wp--custom--border--color);
}

/* -- Latest-episode feature ----------------------------------------- */

.tp-pod-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: stretch;
	overflow: hidden;
	border-radius: var(--tp-pod-radius);
	background: var(--wp--preset--color--panel);
	color: var(--wp--custom--color--panel-opposite);
	box-shadow: var(--wp--custom--elevation--raised);
}
.tp-pod-feature__media {
	position: relative;
	display: block;
	/* Always the full 16:9 frame. Keith's episode artwork is designed — title
	   type, logos, faces at the edges — so cropping it to fill a taller row
	   cuts words off. align-self keeps the frame from being stretched to the
	   copy's height (a stretched item with a ratio widens out of its column);
	   the panel colour fills the space above and below instead. */
	align-self: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	/* Inset with its own corners, so the panel around it reads as a frame. */
	margin: var(--wp--preset--spacing--40);
	margin-inline-end: 0;
	border-radius: var(--wp--custom--radius--default);
}
@media (max-width: 781px) {
	.tp-pod-feature__media { margin: 0; border-radius: 0; }
}
.tp-pod-feature__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(.22, 1, .36, 1);
}
.tp-pod-feature__media .tp-pod-card__play { width: 4.5rem; font-size: var(--wp--preset--font-size--large); }
.tp-pod-feature:hover .tp-pod-feature__media img { transform: scale(1.03); }
.tp-pod-feature:hover .tp-pod-card__play { background: var(--wp--preset--color--cta); color: var(--wp--custom--color--cta-opposite); }

.tp-pod-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}
.tp-pod-feature__body > * { margin: 0; }
.tp-pod-feature .tp-pod-feature__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	color: var(--wp--preset--color--ink-soft);
}
.tp-pod-feature__title a { color: inherit; text-decoration: none; }
.tp-pod-feature__title a:hover { text-decoration: underline; }
.tp-pod-feature .tp-pod-feature__guest { font-size: var(--wp--preset--font-size--small); }
.tp-pod-feature__guest span { display: block; color: var(--wp--preset--color--ink-soft); }
.tp-pod-feature .tp-pod-feature__summary { line-height: 1.7; color: var(--wp--preset--color--ink-soft); }
.tp-pod-feature .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--20); }
.tp-pod-feature .wp-block-button__link i { margin-inline-end: 0.4em; }

@media (max-width: 781px) {
	.tp-pod-feature { grid-template-columns: 1fr; }
	.tp-pod-feature__body { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
}

/* -- Seasons + tabs -------------------------------------------------- */

.tp-pod-seasons {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}
/* Once tabbed, only one season shows, so the gap is the tabs' own. */
.tp-pod-seasons:has(.tp-pod-tabs:not([hidden])) { gap: var(--wp--preset--spacing--40); }

.tp-pod-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}
.tp-pod-tabs[hidden] { display: none; }

.tp-pod-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.6em 1.25em;
	border: var(--wp--custom--border--default-width) solid var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}
.tp-pod-tab:hover { border-color: var(--wp--preset--color--tertiary); }
.tp-pod-tab:focus-visible { outline: 2px solid var(--wp--preset--color--tertiary); outline-offset: 3px; }
.tp-pod-tab[aria-selected="true"] {
	background: var(--wp--preset--color--tertiary);
	border-color: var(--wp--preset--color--tertiary);
	color: var(--wp--custom--color--tertiary-opposite);
}
.tp-pod-tab__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.6em;
	padding: 0 0.4em;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, currentColor 16%, transparent);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
}

.tp-pod-season {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.tp-pod-season[hidden] { display: none; } /* display:flex above would beat the attribute */
.tp-pod-season:focus-visible { outline: none; }
.tp-pod-season__head > * { margin: 0; }
.tp-pod-season__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); max-width: var(--wp--custom--layout--narrow-size); }
.tp-pod-season__num {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-transform: uppercase;
	color: var(--wp--preset--color--tertiary);
}
.tp-pod-season .tp-pod-season__blurb { color: var(--wp--preset--color--ink-soft); }

/* -- Listen-on row --------------------------------------------------- */

.tp-pod-listen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); }
.tp-pod-listen .tp-pod-listen__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}
.tp-pod-listen__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
}
.tp-pod-listen__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 1em;
	border: var(--wp--custom--border--default-width) solid var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-decoration: none;
	transition: border-color 200ms ease-out, background-color 200ms ease-out;
}
.tp-pod-listen__link:hover,
.tp-pod-listen__link:focus-visible {
	border-color: var(--wp--preset--color--tertiary);
	background: color-mix(in srgb, var(--wp--preset--color--tertiary) 12%, transparent);
}
.tp-pod-listen__link i { font-size: 1.15em; }
.tp-pod-listen--hero { margin-block-start: var(--wp--preset--spacing--40); }

/* -- Show header (the site hero, plus two small additions) ------------ */

.tp-pod-hero .tp-pod-host {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}
.tp-pod-host i { color: var(--wp--preset--color--tertiary); margin-inline-end: 0.35em; }

/* -- Episode page ---------------------------------------------------- */

.tp-pod-episode {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--60);
}

.tp-pod-episode__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	max-width: var(--wp--custom--layout--narrow-size);
}
.tp-pod-episode__header > * { margin: 0; }

.tp-pod-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-soft);
}
.tp-pod-crumbs li + li::before { content: "/"; margin-inline-end: 0.4em; opacity: 0.6; }
.tp-pod-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.tp-pod-crumbs a:hover { color: var(--wp--preset--color--tertiary); }

.tp-pod-episode .tp-pod-episode__eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-transform: uppercase;
	color: var(--wp--preset--color--tertiary);
}
.tp-pod-episode__eyebrow i { margin-inline-end: 0.35em; }

.tp-pod-episode__title { text-wrap: balance; }

.tp-pod-episode .tp-pod-episode__guest { font-size: var(--wp--preset--font-size--large); }
.tp-pod-episode__guest span { color: var(--wp--preset--color--ink-soft); margin-inline-start: 0.5em; }
.tp-pod-episode__guest span::before { content: "— "; }
.tp-pod-episode__guest a { color: var(--wp--preset--color--tertiary); }

.tp-pod-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}
.tp-pod-facts i { margin-inline-end: 0.35em; color: var(--wp--preset--color--tertiary); }
.tp-pod-facts a { color: inherit; }

/* The player. A still + a big button until pressed; the iframe after. */
.tp-pod-player {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--tp-pod-radius);
	background: var(--wp--preset--color--canvas);
	box-shadow: var(--wp--custom--elevation--overlay);
}
.tp-pod-player__poster,
.tp-pod-player__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.tp-pod-player__poster { display: block; }
.tp-pod-player__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(.22, 1, .36, 1), filter 300ms ease-out;
}
/* A scrim from the bottom so the button always has something to sit on. */
.tp-pod-player__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--canvas) 55%, transparent), transparent 55%);
	pointer-events: none;
}
.tp-pod-player__btn {
	position: absolute;
	inset: auto auto var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em 1.5em 0.5em 0.5em;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	box-shadow: var(--wp--custom--elevation--overlay);
	transform-origin: left center;
	transition: scale 260ms cubic-bezier(.22, 1, .36, 1);
}
.tp-pod-player__btn i {
	display: grid;
	place-items: center;
	width: calc(var(--tp-pod-play-size) * 0.7);
	aspect-ratio: 1;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--canvas) 30%, transparent);
	font-size: var(--wp--preset--font-size--large);
	padding-inline-start: 0.15em; /* optical centre of a triangle */
}
@media (max-width: 600px) {
	.tp-pod-player__btn { inset: auto auto var(--wp--preset--spacing--20) var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); }
	.tp-pod-player__btn i { width: 2.5rem; font-size: var(--wp--preset--font-size--medium); }
}
/* On a phone the player is ~200px tall; the label would cover a third of it. */
@media (max-width: 480px) {
	.tp-pod-player__btn { padding: 0.35em; }
	.tp-pod-player__btn > span { display: none; }
}
.tp-pod-player__poster:hover img { transform: scale(1.02); }
.tp-pod-player__poster:hover .tp-pod-player__btn,
.tp-pod-player__poster:focus-visible .tp-pod-player__btn { scale: 1.05; }
.tp-pod-player__poster:focus-visible { outline: 3px solid var(--wp--preset--color--tertiary); outline-offset: -6px; border-radius: var(--tp-pod-radius); }

.tp-pod-episode__body {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}
@media (max-width: 900px) {
	.tp-pod-episode__body { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
}

.tp-pod-episode__main { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.tp-pod-episode__main > * { margin: 0; }
.tp-pod-episode .tp-pod-episode__lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}
.tp-pod-notes > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.tp-pod-notes__title { font-size: var(--wp--preset--font-size--x-large); }
/* Headings inside the notes ("In this episode", "Chapters") sit under the
   "Show notes" h2, so they must read smaller than it; the theme's h3 default
   is larger than the x-large the h2 uses here. */
.tp-pod-notes .wp-block-heading { font-size: var(--wp--preset--font-size--large); margin-block-start: var(--wp--preset--spacing--40); }

.tp-pod-transcript {
	border-radius: var(--wp--custom--radius--default);
	background: var(--wp--preset--color--panel);
	color: var(--wp--custom--color--panel-opposite);
}
.tp-pod-transcript summary {
	padding: var(--wp--preset--spacing--30);
	font-weight: 700;
	cursor: pointer;
	list-style-position: inside;
}
.tp-pod-transcript summary i { color: var(--wp--preset--color--tertiary); margin-inline: 0.25em 0.4em; }
.tp-pod-transcript__body {
	max-height: 32rem;
	overflow: auto;
	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
}

.tp-pod-episode__aside {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.tp-pod-panel {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--default);
	background: var(--wp--preset--color--panel);
	color: var(--wp--custom--color--panel-opposite);
	box-shadow: var(--wp--custom--elevation--card);
}
.tp-pod-panel > * { margin: 0; }
.tp-pod-panel .tp-pod-panel__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-transform: uppercase;
	color: var(--wp--preset--color--tertiary);
}
.tp-pod-panel .tp-pod-guest__name { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; line-height: 1.2; }
.tp-pod-panel .tp-pod-guest__role { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-soft); }
.tp-pod-guest__org {
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--tertiary);
}
.tp-pod-guest__org i { font-size: 0.8em; margin-inline-start: 0.3em; }
.tp-pod-audio__embed iframe { width: 100%; border-radius: var(--wp--custom--radius--default); }

.tp-pod-share__list { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); margin: 0; padding: 0; list-style: none; }
.tp-pod-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 1em;
	border: var(--wp--custom--border--default-width) solid var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.tp-pod-share__btn:hover,
.tp-pod-share__btn:focus-visible { border-color: var(--wp--preset--color--tertiary); }
.tp-pod-share__btn[hidden] { display: none; }
.tp-pod-share__btn.is-done { border-color: var(--wp--preset--color--tertiary); color: var(--wp--preset--color--tertiary); }

.tp-pod-youtube-link {
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--ink-soft);
}
.tp-pod-youtube-link i { margin-inline-end: 0.35em; }
.tp-pod-youtube-link:hover { color: var(--wp--preset--color--ink); }

.tp-pod-pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.tp-pod-pager__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--default-width) solid var(--wp--custom--border--color);
	border-radius: var(--wp--custom--radius--default);
	color: inherit;
	text-decoration: none;
	transition: border-color 200ms ease-out, background-color 200ms ease-out;
}
.tp-pod-pager__link.is-next { grid-column: 2; text-align: end; }
.tp-pod-pager__link:hover,
.tp-pod-pager__link:focus-visible { border-color: var(--wp--preset--color--tertiary); background: var(--wp--preset--color--panel); }
.tp-pod-pager__dir { font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: var(--wp--custom--eyebrow--letter-spacing); text-transform: uppercase; color: var(--wp--preset--color--tertiary); }
.tp-pod-pager__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; }
@media (max-width: 600px) {
	.tp-pod-pager { grid-template-columns: 1fr; }
	.tp-pod-pager__link.is-next { grid-column: auto; }
}

/* Reduced motion is the resting state, not a slower animation. */
@media (prefers-reduced-motion: reduce) {
	.tp-pod-card__media img,
	.tp-pod-feature__media img,
	.tp-pod-player__poster img,
	.tp-pod-card__play,
	.tp-pod-player__btn { transition: none; }
	.tp-pod-card:hover .tp-pod-card__media img,
	.tp-pod-feature:hover .tp-pod-feature__media img,
	.tp-pod-player__poster:hover img { transform: none; }
	.tp-pod-card:hover .tp-pod-card__play,
	.tp-pod-player__poster:hover .tp-pod-player__btn { scale: 1; }
}

/* ------------------------------------------------------------------ */
/* TRIALPORT-SPECIFIC                                                 */
/* ------------------------------------------------------------------ */

/* The player's play button wears the brand gradient — the same fuchsia →
   purple → cyan run every primary CTA on the site carries (pattern 2), so the
   one thing on the page that says "press me" looks like every other one. */
.tp-pod-player__btn {
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--custom--color--brand-opposite);
}

/* "Latest episode" is the one pink chip on the page: new = the alt accent. */
.tp-pod-chip.is-new {
	background: var(--wp--preset--color--cta);
	color: var(--wp--custom--color--cta-opposite);
}