/* --------------------------------------------------------------------------
   Podcast card, mini (phones): same markup, about one third of the height.
   One row: [ play ] [ EP. 15 / AI Law Wiki News / October 12, 2026 ] [ waveform / 10:32 ]
   The whole card is the play link. "00:00" and the follow / all-episodes links
   are hidden at this size.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
	body #mw-content-text #ailaw-podcast-card {
		position: relative;
		display: grid;
		grid-template-columns: 48px minmax(0, max-content) minmax(76px, 1fr);
		grid-template-rows: auto auto auto;
		column-gap: 12px;
		row-gap: 0;
		padding: 12px 14px 12px 12px;
		margin-bottom: 16px;
	}
	#ailaw-podcast-card .ailaw-podcast-player,
	#ailaw-podcast-card .ailaw-podcast-times { display: contents; }

	/* play button: left column, full height */
	#ailaw-podcast-card .ailaw-podcast-play { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
	body #mw-content-text #ailaw-podcast-card .ailaw-podcast-play a {
		position: static;          /* so the stretched ::after below covers the whole card */
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
	}
	body #mw-content-text #ailaw-podcast-card .ailaw-podcast-play a::before {
		position: static;
		width: 15px;
		height: 18px;
		margin-left: 3px;
	}
	/* stretch the play link over the whole card so any tap plays */
	body #mw-content-text #ailaw-podcast-card .ailaw-podcast-play a::after {
		content: "" !important;
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	/* middle column: kicker (episode only), title, date */
	#ailaw-podcast-card .ailaw-podcast-kicker { grid-column: 2; grid-row: 1; font-size: 0.625rem; }
	#ailaw-podcast-card .ailaw-podcast-kicker > span:first-child { display: none; }
	#ailaw-podcast-card .ailaw-podcast-kicker .ailaw-podcast-ep::before { content: "\25CF\00a0\00a0Listen\00a0\00b7\00a0"; }
	#ailaw-podcast-card .ailaw-podcast-title { grid-column: 2; grid-row: 2; font-size: 1.0625rem; margin: 2px 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	#ailaw-podcast-card .ailaw-podcast-date { grid-column: 2; grid-row: 3; margin: 0; font-size: 0.6875rem; }

	/* right column: waveform over duration */
	#ailaw-podcast-card .ailaw-podcast-wave { grid-column: 3; grid-row: 1 / span 2; height: 30px; align-self: end; }
	#ailaw-podcast-card .ailaw-podcast-times > span:first-child { display: none; }
	#ailaw-podcast-card .ailaw-podcast-times > span:last-child { grid-column: 3; grid-row: 3; justify-self: end; font-family: var(--dt-mono); font-size: 0.6875rem; font-weight: 500; }

	#ailaw-podcast-card .ailaw-podcast-links { display: none; }

	/* focus ring around the whole card when the stretched link is focused */
	body #mw-content-text #ailaw-podcast-card:has(.ailaw-podcast-play a:focus-visible) { outline: 2px solid var(--dt-on-accent, #0a0c0f); outline-offset: -5px; }
	body #mw-content-text #ailaw-podcast-card .ailaw-podcast-play a:focus-visible { outline: none; }
}