/**
 * AI Podcast Creator — Public / Frontend Styles
 *
 * Dark + gold "music library" look for the podcast archive and single embed,
 * with a custom theme-matched mini-player. Front-end visual only.
 *
 * All rules are scoped under .apc-library so site/theme styles cannot collide.
 *
 * @package AI_Podcast_Creator
 * @since   1.1.0
 */

/* ==========================================================================
   Tokens + scope
   ========================================================================== */

.apc-library {
	--apc-bg: #0a0a0c;
	--apc-card: #141419;
	--apc-gold: #c8962e;
	--apc-gold-2: #e0b457;
	--apc-ink: #f5f4f1;
	--apc-text: #b3b1ad;
	--apc-line: rgba(255, 255, 255, .08);
	--apc-radius: 16px;

	box-sizing: border-box;
	background: var(--apc-bg);
	color: var(--apc-text);
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	padding: 36px;
	border-radius: var(--apc-radius);
}

.apc-library *,
.apc-library *::before,
.apc-library *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.apc-library__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}

/* ==========================================================================
   Episode card
   ========================================================================== */

.apc-ep {
	display: flex;
	flex-direction: column;
	background: var(--apc-card);
	border: 1px solid var(--apc-line);
	border-radius: var(--apc-radius);
	overflow: hidden;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.apc-ep:hover {
	transform: translateY(-4px);
	border-color: rgba(200, 150, 46, .55);
	box-shadow: 0 18px 40px -16px rgba(200, 150, 46, .35);
}

/* Artwork tile (decorative stylized cover) */
.apc-ep__art {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	background:
		radial-gradient(120% 120% at 15% 10%, rgba(224, 180, 87, .28), transparent 55%),
		linear-gradient(135deg, rgba(200, 150, 46, .85), #15110a 85%);
	border-bottom: 1px solid var(--apc-line);
}

.apc-ep__glyph {
	color: var(--apc-gold-2);
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
}

.apc-ep__body {
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.apc-ep__title {
	margin: 0 0 6px;
	font-family: "Bricolage Grotesque", "Manrope", Georgia, serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--apc-ink);
	letter-spacing: -.01em;
}

.apc-ep__date {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--apc-text);
}

.apc-ep__desc {
	margin: 0 0 18px;
	font-size: 14.5px;
	color: var(--apc-text);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Custom mini-player
   ========================================================================== */

.apc-player {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding: 10px 12px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--apc-line);
	border-radius: 12px;
}

.apc-player__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: #15110a;
	background: linear-gradient(140deg, var(--apc-gold-2), var(--apc-gold));
	box-shadow: 0 6px 16px -6px rgba(200, 150, 46, .7);
	transition: transform .15s ease, box-shadow .2s ease;
}

.apc-player__toggle:hover {
	transform: scale(1.06);
}

.apc-player__toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--apc-bg), 0 0 0 5px var(--apc-gold-2);
}

/* Play / pause icon toggle via .is-playing — no innerHTML injection */
.apc-player__icon--pause {
	display: none;
}

.apc-player__toggle.is-playing .apc-player__icon--play {
	display: none;
}

.apc-player__toggle.is-playing .apc-player__icon--pause {
	display: block;
}

/* Seek range */
.apc-player__seek {
	--pct: 0%;
	flex: 1 1 auto;
	min-width: 0;
	height: 6px;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background: linear-gradient(
		to right,
		var(--apc-gold) 0%,
		var(--apc-gold-2) var(--pct),
		rgba(255, 255, 255, .12) var(--pct),
		rgba(255, 255, 255, .12) 100%
	);
}

.apc-player__seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	border: none;
	border-radius: 50%;
	background: var(--apc-gold-2);
	box-shadow: 0 0 0 3px rgba(200, 150, 46, .25);
	cursor: pointer;
}

.apc-player__seek::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: none;
	border-radius: 50%;
	background: var(--apc-gold-2);
	box-shadow: 0 0 0 3px rgba(200, 150, 46, .25);
	cursor: pointer;
}

.apc-player__seek::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
}

.apc-player__seek::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--apc-gold), var(--apc-gold-2));
}

.apc-player__seek:focus-visible {
	outline: none;
}

.apc-player__seek:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px var(--apc-bg), 0 0 0 5px var(--apc-gold-2);
}

.apc-player__seek:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px var(--apc-bg), 0 0 0 5px var(--apc-gold-2);
}

.apc-player__time {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--apc-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* ==========================================================================
   Download
   ========================================================================== */

.apc-ep__dl {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	color: var(--apc-text);
	transition: color .2s ease;
}

.apc-ep__dl:hover,
.apc-ep__dl:focus-visible {
	color: var(--apc-gold-2);
	outline: none;
}

.apc-ep__dl-icon {
	flex: 0 0 auto;
}

/* ==========================================================================
   Single embed
   ========================================================================== */

.apc-library--single {
	max-width: 460px;
}

.apc-library--single .apc-ep:hover {
	transform: none;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.apc-library__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

.apc-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--apc-line);
	background: var(--apc-card);
	color: var(--apc-text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}

a.apc-page:hover,
a.apc-page:focus-visible {
	border-color: rgba(200, 150, 46, .55);
	color: var(--apc-gold-2);
	outline: none;
}

.apc-page.is-current {
	background: linear-gradient(140deg, var(--apc-gold-2), var(--apc-gold));
	border-color: transparent;
	color: #15110a;
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.apc-library--empty {
	text-align: center;
}

.apc-library--empty p {
	margin: 0;
	color: var(--apc-text);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 600px) {
	.apc-library {
		padding: 20px;
	}

	.apc-library__grid {
		grid-template-columns: 1fr;
	}

	.apc-player__time {
		font-size: 11px;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.apc-library *,
	.apc-library *::before,
	.apc-library *::after {
		transition: none !important;
		animation: none !important;
	}
}