/* playpodcast.css
   Two-column podcast player layout for /podcasts/play.html.
   Extracted from top.css (.container/.left-column/.right-column/.item/
   #share/#keywords), which play.html no longer links -- top.css itself
   is untouched, other pages (podcasts/index.html, search.cgi) still
   depend on it.

   .container in top.css was doing double duty here -- once for the
   old header layout (gone now, replaced by .site-header), once for
   the actual two-column player layout. Given the real layout its own
   distinct name (.podcast-layout) rather than reusing .container, so
   this file has zero dependency on top.css at all.

   Loaded after header.css.
*/

.podcast-layout {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	max-width: 800px;
	gap: 20px;
	box-sizing: border-box;
}

.left-column {
	flex: 1;
	min-width: 280px; /* keeps the description column from getting
	                     crushed to nothing before it wraps below */
}

.right-column {
	width: 100%;
	max-width: 300px;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	height: fit-content;
}

.item {
	padding: 10px;
	background: darkgrey;
	box-shadow: 5px 5px 5px;
	color: black;
	font-family: helvetica, geneva, arial;
	font-size: 12px;
	line-height: 120%;
}

.item p {
	padding: 8px 0px 8px 0px;
	text-align: justify;
	text-justify: inter-word;
}

.item a {
	color: black;
	text-decoration: none;
}

.item a:hover {
	text-decoration: underline;
}

/* Was an inline style with a real bug: "padding: 3px; 0px; 3px; 0px;"
   -- stray semicolons mid-value meant only "padding: 3px;" (all
   sides) actually applied, rest silently discarded. Fixed here as a
   valid 4-value shorthand matching the apparent original intent. */
.audio-place {
	padding: 3px 0px 3px 0px;
}

#share {
	padding: 3px 0px 3px 0px;
	margin: 10px 0px 10px 0px;
	background-color: grey;
	border-width: 2px;
	border-style: none dotted dotted dotted;
	border-color: white;
	font-style: italic;
	font-size: x-small;
	color: lightgrey;
	font-family: verdana;
	text-align: center;
}

#keywords a {
	color: lightgrey;
	text-decoration: none;
}

#keywords a:visited {
	color: lightgrey;
}

#keywords a:hover {
	color: darkorange;
}