/* Podigee RSS Importer – Frontend Player Styles
 *
 * All visual properties use CSS custom properties (prefixed --podigee-player-*)
 * so themes or custom CSS can override them without touching this file.
 */

/* -----------------------------------------------------------------------
   Featured image – preserve original aspect ratio
   The core/post-featured-image block injects inline aspect-ratio and
   object-fit:cover; override only for Podigee posts via a class added
   by the render_block filter in podigee-rss-importer.php.
   Scoped to single posts so archive grid layouts are not affected.
   Themes can undo this by targeting .podigee-featured-image with higher
   specificity or their own !important rule.
----------------------------------------------------------------------- */
body.single .podigee-featured-image {
	aspect-ratio: unset !important;
}

body.single .podigee-featured-image img {
	height: auto !important;
	object-fit: unset !important;
}

.podigee-featured-image {
	position: relative;
	cursor: pointer;
}

/* Play / pause overlay icon – visible on hover and while playing */
.podigee-featured-image::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		center / 64px no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='38' fill='rgba(0%2C0%2C0%2C0.45)'/%3E%3Cpolygon points='32%2C24 60%2C40 32%2C56' fill='white'/%3E%3C/svg%3E");
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 1;
	pointer-events: none;
}

.podigee-featured-image:hover::before,
.podigee-featured-image.is-playing::before {
	opacity: 1;
}

/* Swap to pause icon while playing */
.podigee-featured-image.is-playing::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='38' fill='rgba(0%2C0%2C0%2C0.45)'/%3E%3Crect x='26' y='22' width='10' height='36' fill='white'/%3E%3Crect x='44' y='22' width='10' height='36' fill='white'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------
   Subtitle & Description paragraphs
   Use opacity instead of hardcoded colors so the theme's text color
   (including dark mode) is inherited automatically.
----------------------------------------------------------------------- */
.podigee-subtitle {
	font-size: 1.1em;
	font-style: italic;
	opacity: 0.75;
	margin-bottom: 0.25em !important;
}

.podigee-description {
	opacity: 0.85;
	line-height: 1.65;
	margin-bottom: 1.5em !important;
}

/* -----------------------------------------------------------------------
   Player card – minimal, customisable via CSS custom properties
   -----------------------------------------------------------------------
   Override example (in theme CSS or Customizer → Additional CSS):

   .podigee-player {
       --podigee-player-bg: #1a1a2e;
       --podigee-player-color: #eee;
       --podigee-player-accent: #e94560;
       --podigee-player-radius: 16px;
       --podigee-player-padding: 24px;
       --podigee-player-shadow: none;
       --podigee-player-tint: transparent;
   }
----------------------------------------------------------------------- */
.podigee-player {
	--podigee-player-bg: var(--wp--preset--color--base, #f5f5f5);
	--podigee-player-color: var(--wp--preset--color--contrast, #333);
	--podigee-player-accent: #1e6cb5;
	--podigee-player-radius: 8px;
	--podigee-player-padding: 16px;

	--podigee-player-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	--podigee-player-tint: rgba(0, 0, 0, 0.03);
	--podigee-player-thumb-size: 80px;

	background: var(--podigee-player-bg);
	color: var(--podigee-player-color);
	border-radius: var(--podigee-player-radius);
	padding: var(--podigee-player-padding);
	box-shadow: var(--podigee-player-shadow), inset 0 0 0 9999px var(--podigee-player-tint);
	margin: 24px 0;
	display: flex;
	align-items: center;
	gap: var(--podigee-player-padding);
}

/* Thumbnail */
.podigee-player__thumb {
	flex-shrink: 0;
	width: var(--podigee-player-thumb-size);
	height: var(--podigee-player-thumb-size);
	border-radius: calc(var(--podigee-player-radius) / 2);
	overflow: hidden;
}

.podigee-player__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Body (badge + controls) fills remaining space */
.podigee-player__body {
	flex: 1;
	min-width: 0;
}

/* Episode badge (e.g. "Episode 42 anhören") */
.podigee-player__badge {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.03em;
	background: var(--podigee-player-accent);
	color: #fff;
	border-radius: 3px;
	padding: 2px 8px;
	margin-bottom: 10px;
}

/* Plyr theming via its own custom properties */
.podigee-player {
	--plyr-color-main: var(--podigee-player-accent);
	--plyr-audio-controls-background: transparent;
	--plyr-audio-control-color: var(--podigee-player-color);
	--plyr-audio-control-color-hover: var(--podigee-player-accent);
	--plyr-range-fill-background: var(--podigee-player-accent);
	--plyr-range-track-height: 4px;
	--plyr-range-thumb-height: 14px;
	--plyr-range-thumb-background: var(--podigee-player-accent);
	--plyr-audio-control-background-hover: transparent;
	--plyr-font-size-time: 0.8em;
}

/* Remove extra spacing from the figure/audio WP wrapper inside the card */
.podigee-player__controls .wp-block-audio {
	margin: 0;
}

/* -----------------------------------------------------------------------
   Embed variant (Podigee iframe)
----------------------------------------------------------------------- */
.podigee-player--embed {
	padding: 0;
	overflow: hidden;
	background: none;
}

.podigee-player--embed iframe {
	display: block;
	width: 100%;
	height: var(--podigee-player-embed-height, 200px);
	border: none;
	border-radius: var(--podigee-player-radius);
}