/**
 * Adds a horizontal scrollbar above the media table.
 */
.hpl-media-scroll-top {
	overflow-x: auto;
	overflow-y: hidden;
	height: 16px; /* Only as high as the scrollbar itself. */
}

.hpl-media-scroll-top-spacer {
	height: 1px; /* Invisible element used only to provide the scroll width. */
}

.hpl-media-list {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hpl-media-table {
	white-space: nowrap; /* Prevents columns from shrinking by wrapping text. */
	width: auto; /* Resets possible width: 100% rules from the theme. */
}

.hpl-media-table th,
.hpl-media-table td {
	white-space: nowrap;
}

/** List **/
h1.page-title { font-size: 28px; }
h2.hpl-media-type-title { font-size: 20px; }

/** Details **/
h1.page-title { font-size: 28px; }
h2.hpl-media-subtitle { font-size: 20px; }
h3.hpl-media-author { font-size: 16px; }

.hpl-media-list {
	margin-top: 40px;
}

.hpl-media-table {
	table-layout: auto;
	white-space: nowrap;
	width: auto;
	border-collapse: collapse;
}

.hpl-media-table th,
.hpl-media-table td {
	padding: 8px 12px;
	border-bottom: 1px solid #dddddd;
	text-align: left;
}

/*
 * Spaltenköpfe der Media-Tabelle. Farbe/Hintergrund/Schriftgewicht gelten
 * für alle Spaltenköpfe gleich, unabhängig davon ob sortierbar oder nicht.
 */
.hpl-media-table th {
	color: var(--hpl-table-column-header-color);
	background-color: var(--hpl-table-column-header-background-color);
	font-weight: var(--hpl-table-column-header-font-weight);
}

/*
 * Sortierbare Spaltenköpfe (Link statt reinem Text) bekommen eine eigene
 * Farbe, damit sich klickbare von reinen Anzeige-Spalten unterscheiden
 * lassen. !important nötig: hpl-site.css setzt "a" bereits mit !important
 * auf --hpl-link-color/--hpl-link-decoration/--hpl-link-font-style - ohne
 * eigenes !important würde diese globale Regel gewinnen, siehe Erklärung
 * bei .hpl-media-title-link weiter unten.
 */
.hpl-media-table th a.hpl-media-sortable-column {
	color: var(--hpl-table-column-header-sortable-color) !important;
	text-decoration: none !important;
	font-style: normal !important;
}

/*
 * Sortier-Icon (Pfeil hoch/runter) nur in der aktuell sortierten Spalte,
 * zeigt die aktive Richtung. Zwei Icon-Varianten kommen aus
 * hpl-variables.css, damit sie sich zentral austauschen lassen.
 */
.hpl-media-sort-icon {
	display: inline-block;
	margin-left: 4px;
}

.hpl-media-sort-icon-asc::before {
	content: var(--hpl-table-column-header-sort-up-icon);
}

.hpl-media-sort-icon-desc::before {
	content: var(--hpl-table-column-header-sort-down-icon);
}

.hpl-media-more-button {
	background-color: #cc0000;
	color: #ffffff;
	border: none;
	padding: 10px 20px;
	margin-top: 20px;
	cursor: pointer;
	border-radius: 4px;
	font-size: 14px;
}

.hpl-media-more-button:hover {
	background-color: #aa0000;
}

.hpl-media-audio-table {
	width: auto;
	border-collapse: collapse;
}

.hpl-media-audio-title {
	white-space: nowrap;
	padding-right: 1rem;
	vertical-align: middle;
}

.hpl-media-audio-player {
	width: 46rem;
	max-width: 100%;
	vertical-align: middle;
}

.hpl-media-audio-player audio,
.hpl-media-audio-player .mejs-container {
	width: 100% !important;
}

@media (max-width: 800px) {
	.hpl-media-audio-table,
	.hpl-media-audio-table tbody,
	.hpl-media-audio-table tr,
	.hpl-media-audio-table td {
		display: block;
		width: 100%;
	}

	.hpl-media-audio-title {
		white-space: normal;
		padding-right: 0;
		margin-top: 0.75rem;
	}

	.hpl-media-audio-player {
		width: 100%;
	}
}

.hpl-media-audio,
.hpl-media-documentation {
	margin-top: 30px;
}

.hpl-media-audio h2,
.hpl-media-documentation h2 {
	font-size: 20px;
}

.hpl-media-row-image {
	display: block;
	max-width: 48px;
	max-height: 48px;
	object-fit: contain;
}

.hpl-media-table td.hpl-media-image {
	white-space: nowrap;
}

/*
 * Audio/Video- und Sprach-Icons in der Archiv-Liste. Beide Zellen können
 * mehrere Icons nebeneinander enthalten (z.B. zwei Flaggen bei Original-
 * und Übersetzungssprache), daher gap statt margin auf den Icons selbst.
 */
.hpl-media-icon-cell {
	white-space: nowrap;
}

.hpl-media-icon-cell img {
	display: inline-block;
	vertical-align: middle;
}

.hpl-media-icon-cell img + img {
	margin-left: 4px;
}

.hpl-media-availability-icon {
	height: 20px;
	width: auto;
}

.hpl-media-flag-icon {
	height: 16px;
	width: auto;
}

.hpl-media-table th.hpl-media-align-right,
.hpl-media-table td.hpl-media-align-right {
	text-align: right;
}

/*
 * Gleicher Stil wie die Links in hpl-events-manager (z.B.
 * .hpl-description-link, .em-item-meta-line a): kursiv und gepunktet
 * unterstrichen. Beide Werte kommen aus denselben globalen Variablen wie
 * der Rest der Seite (--hpl-link-font-style, --hpl-link-decoration aus
 * hpl-variables.css), damit sich der Stil an einer einzigen Stelle für
 * alle Plugins ändern lässt.
 *
 * "underline" wird hier bewusst explizit mit angegeben statt nur
 * "var(--hpl-link-decoration)": Die text-decoration-Kurzform setzt bei
 * fehlender Linienangabe text-decoration-line implizit auf "none"
 * zurück - ohne "underline" bliebe der gepunktete Stil unsichtbar.
 *
 * !important: hpl-site.css setzt bereits "a" mit !important auf
 * "text-decoration: var(--hpl-link-decoration)" (ohne "underline", also
 * praktisch unsichtbar - siehe Erklärung oben). Ohne eigenes !important
 * würde diese globale Regel gewinnen, obwohl unsere Klasse spezifischer
 * ist: bei !important entscheidet die Spezifität nicht mehr, sobald eine
 * Seite !important setzt und die andere nicht.
 */
.hpl-media-title-link {
	font-style: var(--hpl-link-font-style);
	text-decoration: underline var(--hpl-link-decoration) !important;
}

/*
 * Video-Links in den Details kommen als fertige <a>-Tags aus dem TYPO3-Import,
 * ohne eigene Klasse - sie erben nur die globale "a"-Regel aus hpl-site.css.
 * Diese setzt text-decoration ohne "underline" (nur "dotted"), was die Linie
 * unsichtbar macht - derselbe Effekt wie bei .hpl-media-title-link weiter
 * unten. Ohne sichtbare Unterstreichung und bei einer Link-Farbe nahe am
 * Fließtext (--hpl-link-color) waren die Links nicht mehr als solche zu
 * erkennen. !important nötig aus demselben Grund wie dort.
 */
.hpl-media-video-links a {
	font-style: var(--hpl-link-font-style);
	text-decoration: underline var(--hpl-link-decoration) !important;
}

.hpl-media-detail-author-image {
	display: inline-block;
	max-width: 160px;
	max-height: 160px;
	object-fit: contain;
	margin-right: 12px;
}

.hpl-media-color-swatch {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid #999999;
	border-radius: 3px;
	vertical-align: middle;
	margin-right: 8px;
}

.hpl-media-color-cell {
	white-space: nowrap;
}

/**
 * Colors the medium number itself according to the book category.
 * All colors get the same box (size, padding, border-radius) so the numbers
 * line up visually; only yellow and white - unreadable on the page's light
 * background - get a dark background behind the text. The rest stay
 * transparent.
 */
.hpl-media-book-color-red,
.hpl-media-book-color-green,
.hpl-media-book-color-blue,
.hpl-media-book-color-yellow,
.hpl-media-book-color-white {
	display: inline-block;
	min-width: 1.4em;
	padding: 2px 6px;
	border-radius: 3px;
	font-weight: 600;
	text-align: center;
	background-color: transparent;
}

.hpl-media-book-color-red { color: red; }
.hpl-media-book-color-green { color: green; }
.hpl-media-book-color-blue { color: blue; }

.hpl-media-book-color-yellow {
	color: yellow;
	background-color: #222222;
}

.hpl-media-book-color-white {
	color: white;
	background-color: #222222;
}