/**
 * podcast: loaded only on pages that show it.
 *
 * Split out of the shared stylesheets by bin/split-css.py; loaded by
 * inc/feature-styles.php when something on the page has the class.
 */

/* ---------- From blocks.css ---------- */
/* ---------- Podcast --------------------------------------------------------
 *
 * The show first — artwork, what it is, where to subscribe — then the
 * episodes, because somebody arriving here has one of two questions and the
 * page should answer both without a scroll: "what is this" and "what is the
 * latest one about".
 * -------------------------------------------------------------------------- */

.cong-pod { padding-block: var(--wp--preset--spacing--60); }

.cong-pod__head {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	margin-block-end: var(--wp--preset--spacing--50);
}

.cong-pod__art {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
}

.cong-pod__title { margin: 0.25rem 0 0; font-size: var(--wp--preset--font-size--xxl); line-height: 1.1; }
.cong-pod__blurb { margin: var(--wp--preset--spacing--20) 0 0; color: var(--wp--preset--color--ink-muted); }

.cong-pod__where {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: var(--wp--preset--spacing--30) 0 0;
}

.cong-pod__where-label {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-pod__service {
	padding: 0.35rem 0.9rem;
	background: var(--wp--preset--color--surface);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

/*
 * Written as `a.cong-pod__service` so it outranks the theme's own link colour,
 * which was winning on hover and painting dark navy text onto the green pill.
 * Same trap as the event view tabs.
 */
a.cong-pod__service:hover,
a.cong-pod__service:focus-visible {
	background: var(--wp--preset--color--leaf);
	color: var(--wp--preset--color--base);
	text-decoration-color: currentColor;
}

.cong-pod__list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.cong-pod__ep {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
}

.cong-pod__ep-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	align-items: baseline;
	justify-content: space-between;
}

.cong-pod__ep-title { margin: 0; font-size: var(--wp--preset--font-size--lg); line-height: 1.25; }
.cong-pod__ep-title a { color: inherit; text-decoration: none; }
.cong-pod__ep-title a:hover { color: var(--wp--preset--color--leaf); }

.cong-pod__ep-meta {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
}

.cong-pod__ep-text {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-pod__player {
	inline-size: 100%;
	block-size: 2.5rem;
	margin-block-start: var(--wp--preset--spacing--20);
}

.cong-pod__none { color: var(--wp--preset--color--ink-muted); }

@media (max-width: 40rem) {
	.cong-pod__head { grid-template-columns: minmax(0, 1fr); }
	.cong-pod__art { inline-size: min(10rem, 45%); }
	.cong-pod__ep-head { display: block; }
	.cong-pod__ep-meta { margin-block-start: 0.2rem; }
}

/* ------------------------------------------------------------------ *
 * The podcast archive
 *
 * The page used to show one episode between two promotional bands — three
 * thousand pixels of scrolling to be shown a single thing. It now shows the
 * back catalogue, which is what somebody arriving at a podcast page wants, so
 * the rows are tightened to make twenty of them readable rather than
 * exhausting.
 * ------------------------------------------------------------------ */
.cong-pod__list {
	gap: var(--wp--preset--spacing--20);
}

.cong-pod__ep {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/* The newest episode is the one most people came for. */
.cong-pod__ep:first-child {
	padding: var(--wp--preset--spacing--30);
	outline: 2px solid var(--wp--preset--color--leaf, #7a8b1e);
	outline-offset: -2px;
}

.cong-pod__ep-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Only the newest episode shows its description in full. Twenty paragraphs of
 * blurb is a wall; two lines each is a list somebody can scan.
 */
.cong-pod__ep:first-child .cong-pod__ep-text {
	-webkit-line-clamp: none;
	overflow: visible;
}

.cong-pod__player {
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
	height: 36px;
}

.cong-pod__ep:first-child .cong-pod__player {
	height: 44px;
}