/* The radio interviews box. Since 1.2.0 it sits beside the Radio News player on the
   bbc.bm home page, two columns of about 337 px, so it is drawn as that player's twin:
   the same white card, the same blue.

   The card's numbers are copied from TTFN SoundCloud Player's player.css, which is the
   source of truth for them — they cannot be inherited, because --ttfnscp-* are declared
   on .ttfnscp rather than on a shared root. If the player's card changes, change these.

   There is deliberately no prefers-color-scheme block: the card is always white, as the
   player's is, so a dark-mode divider colour would simply be invisible.

   Copyright (c) 2026 TTFN TV Limited. All rights reserved. */

.ttfn-ri {
	/* How tall the list may be before it scrolls, on a computer only.
	   Measured, not guessed: beside Listen to Radio News the player is 337 px wide and
	   437 px tall with all five bulletin names wrapped onto two lines, which is what
	   they all do — they are all "BBC Radio News: <day> <slot> - <date>". Take off this
	   card's 14 px padding top and bottom, its 1 px border, the player at the top
	   (136 px), the gap under it (12 px) and SoundCloud's logo at the foot (12 px plus
	   its 10 px gap), and the list may have 237 px — three rows and a glimpse of the
	   fourth, which is what says there is more. It cannot be
	   exact: the radio news player moves about a line whenever a bulletin's name
	   happens to fit on one. Override per placement with
	   [ttfn_radio_interviews max="300"]. */
	--ttfn-ri-max: 237px;
	--ttfn-ri-accent: #005db6;
	--ttfn-ri-accent-dark: #00478c;

	margin: 0 0 24px;
	padding: 14px;
	background: #fff;
	border: 1px solid #e1e5ec;
	border-radius: 10px;
	text-align: left;
}
.ttfn-ri-title { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.ttfn-ri-list { list-style: none; margin: 0; padding: 0; }
/* Picture left, words right, as the radio news rows are laid out. The player
   sits under both, the full width of the row. */
.ttfn-ri-item {
	padding: 8px 0;
	border-top: 1px solid rgba(0, 0, 0, .12);
}
.ttfn-ri-item:first-child { border-top: 0; }
.ttfn-ri-body { min-width: 0; }
.ttfn-ri-art {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	object-fit: cover;
	background: #eef1f5;
	max-width: none;          /* the theme shrinks images inside text blocks */
	display: block;
}
.ttfn-ri-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
                font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.ttfn-ri-station { font-weight: 700; color: var(--ttfn-ri-accent); }
.ttfn-ri-when { color: #6b7280; }
/* Said plainly rather than tucked away: a listener should see it at a glance. */
.ttfn-ri-paid {
	padding: 1px 6px;
	border-radius: 3px;
	background: #8a6d00;
	color: #fff;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .04em;
}

/* Two lines, so a row's height is predictable and the cap below stays honest. */
.ttfn-ri-about {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 3px 0 0;
	font-size: 13.5px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* The player at the top, as Listen to Radio News has it. Every interview's
   player is here, one shown at a time, so a row plays on the first press. */
.ttfn-ri-top { margin-bottom: 12px; }
.ttfn-ri-stage .ttfnscp { margin-bottom: 0; }
.ttfn-ri-stage .ttfnscp-list { display: none; }   /* one track: its own row is the list */
/* SoundCloud's logo belongs once, at the foot of the box, as the radio news
   player has it — not inside the player at the top with the list below it.
   Three classes deep on purpose: the player's own `.ttfnscp .ttfnscp-foot`
   is two, so an equal-weight rule here would be settled by whichever
   stylesheet happened to load second, and the player's won. */
.ttfn-ri-stage .ttfnscp .ttfnscp-foot { display: none; }
.ttfn-ri-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.ttfn-ri-sc img { display: block; max-width: none; border-radius: 3px; }

/* The whole row is the button. It has to be reset to look like a row of text,
   not a form control, and to fill the width so the press target is the row. */
.ttfn-ri-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 10px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.ttfn-ri-item:not(:has(.ttfn-ri-art)) .ttfn-ri-row { grid-template-columns: minmax(0, 1fr); }
.ttfn-ri-row:hover .ttfn-ri-about { color: var(--ttfn-ri-accent); }

/* Which one the player is on, marked as the radio news list marks its own. */
.ttfn-ri-item[aria-current="true"] .ttfn-ri-about { color: var(--ttfn-ri-accent); font-weight: 700; }

/* Keeping the gutter at all widths means turning the cap on doesn't shift the text. */
.ttfn-ri-scroll { scrollbar-gutter: stable; }

/* The cap exists for ONE reason: to keep this card level with the Radio News player
   beside it on the home page. So it applies only inside that pair (`.ttfn-duo`) —
   anywhere else, the /radio page included, the list simply runs as long as it needs to.
   `max=` still overrides it wherever the box is.

   And only where the two columns really are side by side. A phone stacks them, and the
   box is then about the same width it has in the column — 335 px against 337 px — so a
   container query cannot tell the two apart and this has to key off the window. 1141 px
   is the width the home page check already treats as tagDiv's desktop layout. Erring
   high is deliberate: a missing cap beside the player is merely untidy, while a cap on a
   stacked phone traps the page's own scroll inside the box. */
@media (min-width: 1141px) {
	.ttfn-duo .ttfn-ri-scroll {
		max-height: var(--ttfn-ri-max);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: #c3c9d4 transparent;
	}
}

/* The player's focus ring, which this box had none of — not even on Play. */
.ttfn-ri :focus-visible {
	outline: 3px solid var(--ttfn-ri-accent);
	outline-offset: 2px;
	border-radius: 4px;
}
.ttfn-ri-scroll:focus-visible { outline: 3px solid var(--ttfn-ri-accent); outline-offset: 0; }