/* TTFN Podcasts — [ttfn_latest_podcasts], the strip of newest episodes.
 * Copyright (c) 2026 TTFN TV Limited. All rights reserved.
 * Scoped to .ttfnlp so the tagDiv Newspaper theme's rules for lists, links and
 * paragraphs can't leak in. Fonts are inherited from the page.
 *
 * Widths are the block's own (container queries), as the home page's column is
 * narrower than the screen:  600 px and up  4 across   420-599  3 across
 * under 420 (phones)  a row to swipe.  Older browsers get 3 across. */

.ttfnlp {
	--ttfnlp-accent: #005db6;        /* bbc.bm's headings and buttons */
	--ttfnlp-accent-dark: #00478c;
	--ttfnlp-ink: #111318;
	--ttfnlp-muted: #5d6470;
	--ttfnlp-soft: #eef1f5;
	--ttfnlp-gap: 16px;

	color: var(--ttfnlp-ink);
	font-size: 14px;
	line-height: 1.4;
	margin: 0 0 24px;
	container: ttfnlp / inline-size;
}

.ttfnlp *, .ttfnlp *::before, .ttfnlp *::after { box-sizing: border-box; }
.ttfnlp ul, .ttfnlp li { list-style: none; margin: 0; padding: 0; }
/* bbc.bm's theme spaces list items inside a text block with
 * ".tagdiv-type ul li:not(…):not(…) { margin-bottom: 10px }" (all but the last) and
 * the list with 26 px below. It outranks the line above, and the last card, with no
 * margin, then stretched 10 px taller, so its Play button sat lower. */
.ttfnlp .ttfnlp-list,
.ttfnlp .ttfnlp-list > .ttfnlp-card { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ttfnlp li::before, .ttfnlp li::marker { content: none; }
.ttfnlp p { margin: 0; padding: 0; }
.ttfnlp a { text-decoration: none; box-shadow: none; }
.ttfnlp img { display: block; max-width: 100%; border: 0; }
.ttfnlp :focus-visible { outline: 3px solid var(--ttfnlp-accent); outline-offset: 2px; }
.ttfnlp .ttfnlp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- The strip ----------------------------------------------------------- */

.ttfnlp .ttfnlp-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ttfnlp-gap);
}
.ttfnlp .ttfnlp-card:nth-child(n+4) { display: none; }

@container ttfnlp (min-width: 600px) {
	.ttfnlp .ttfnlp-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ttfnlp .ttfnlp-card:nth-child(4) { display: flex; }
}

@container ttfnlp (max-width: 419px) {
	.ttfnlp .ttfnlp-list {
		--ttfnlp-gap: 12px;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 42%;          /* two and a bit: the edge says "swipe" */
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.ttfnlp .ttfnlp-list::-webkit-scrollbar { display: none; }
	.ttfnlp .ttfnlp-card,
	.ttfnlp .ttfnlp-card:nth-child(n+4) { display: flex; scroll-snap-align: start; }
}

/* ---- A card -------------------------------------------------------------- */

.ttfnlp .ttfnlp-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	container: ttfnlp-card / inline-size;
}

.ttfnlp .ttfnlp-art {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--ttfnlp-soft);
}
.ttfnlp .ttfnlp-art img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .3s ease;
}
.ttfnlp .ttfnlp-card:hover .ttfnlp-art img { transform: scale(1.03); }

.ttfnlp .ttfnlp-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: 8px;
}

/* A long show name wraps rather than being cut: on a narrow card "What's Next
 * with Clarien" needs two lines. The buttons still line up (margin-top: auto). */
.ttfnlp .ttfnlp-show {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ttfnlp-accent) !important;
}
.ttfnlp .ttfnlp-show:hover { color: var(--ttfnlp-accent-dark) !important; text-decoration: underline; }

.ttfnlp .ttfnlp-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin-top: 2px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ttfnlp-ink) !important;
	overflow-wrap: anywhere;
}
.ttfnlp .ttfnlp-title:hover { color: var(--ttfnlp-accent) !important; }

.ttfnlp .ttfnlp-meta {
	margin: 3px 0 10px;
	font-size: 12.5px;
	color: var(--ttfnlp-muted) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ttfnlp .ttfnlp-dot { margin: 0 5px; }

/* ---- Play ---------------------------------------------------------------- */

.ttfnlp .ttfnlp-play {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;               /* every card's button on one line */
	height: 34px;
	padding: 0 12px 0 10px;
	border-radius: 999px;
	background: var(--ttfnlp-accent);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background .15s;
}
.ttfnlp .ttfnlp-play:hover,
.ttfnlp .ttfnlp-play:focus-visible { background: var(--ttfnlp-accent-dark); }
.ttfnlp .ttfnlp-play:hover,
.ttfnlp .ttfnlp-play:focus { color: #fff !important; }

/* How far through the episode: the darker part of the button. */
.ttfnlp .ttfnlp-play::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--ttfnlp-p, 0%);
	background: rgba(0, 0, 0, .28);
	z-index: -1;
	transition: width .25s linear;
}

.ttfnlp .ttfnlp-i { width: 16px; height: 16px; flex: none; }
.ttfnlp .ttfnlp-i-pause,
.ttfnlp .ttfnlp-i-wait { display: none; }
.ttfnlp .ttfnlp-play[data-state="playing"] .ttfnlp-i-play,
.ttfnlp .ttfnlp-play[data-state="loading"] .ttfnlp-i-play { display: none; }
.ttfnlp .ttfnlp-play[data-state="playing"] .ttfnlp-i-pause { display: block; }
.ttfnlp .ttfnlp-play[data-state="loading"] .ttfnlp-i-wait { display: block; animation: ttfnlp-spin .9s linear infinite; }
@keyframes ttfnlp-spin { to { transform: rotate(360deg); } }

.ttfnlp .ttfnlp-label { overflow: hidden; text-overflow: ellipsis; }
.ttfnlp .ttfnlp-time {
	margin-left: auto;
	padding-left: 4px;
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	opacity: .92;
}
.ttfnlp .ttfnlp-time:empty { display: none; }
@container ttfnlp-card (max-width: 159px) {
	.ttfnlp .ttfnlp-time { display: none; }
}

/* Couldn't play here: the button now leads to the episode's page. */
.ttfnlp .ttfnlp-play[data-state="failed"] { background: var(--ttfnlp-muted); }

/* ---- Link to the podcasts page (more="…") -------------------------------- */

.ttfnlp .ttfnlp-more { margin-top: 12px; font-size: 14px; font-weight: 600; }
.ttfnlp .ttfnlp-more a { color: var(--ttfnlp-accent) !important; }
.ttfnlp .ttfnlp-more a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.ttfnlp .ttfnlp-art img,
	.ttfnlp .ttfnlp-play::before { transition: none; }
	.ttfnlp .ttfnlp-card:hover .ttfnlp-art img { transform: none; }
}