/* ==========================================================================
   Components — 卡片、标签、元信息、播放器、门禁、分页
   ========================================================================== */

/* ---------- 卡片骨架 ---------- */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--bg-box);
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var(--ease);
}

.card:hover .card__media img {
	transform: scale(1.04);
}

.card__badges {
	position: absolute;
	inset: 8px 8px auto 8px;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}

.card__dur {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 7px;
	border-radius: var(--r-xs);
	background: rgba(0, 0, 0, .68);
	color: #fff;
	font-size: var(--fs-xs);
	font-variant-numeric: tabular-nums;
	letter-spacing: .2px;
	backdrop-filter: blur(4px);
}

.card__body {
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.card__title {
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.42;
	color: var(--text-1);
	letter-spacing: -.1px;
	transition: color var(--dur) var(--ease);
}

.card:hover .card__title {
	color: var(--brand-ink);
}

.card__subtitle {
	font-size: var(--fs-sm);
	color: var(--text-4);
	line-height: 1.5;
}

.card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	font-size: var(--fs-xs);
	color: var(--text-4);
}

.card__meta .u-dot {
	margin: 0;
}

.card__stat {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--fs-xs);
	color: var(--text-4);
	font-variant-numeric: tabular-nums;
}

.card__stat .u-icon {
	width: 13px;
	height: 13px;
}

/* ---------- 标签 ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 20px;
	padding: 0 7px;
	border-radius: var(--r-xs);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .1px;
	white-space: nowrap;
}

.badge--brand {
	background: var(--brand);
	color: var(--brand-contrast);
}

.badge--soft {
	background: rgba(0, 0, 0, .55);
	color: #fff;
	backdrop-filter: blur(4px);
}

.badge--ghost {
	background: var(--bg-box);
	color: var(--text-3);
	font-weight: 500;
}

.badge--score {
	background: var(--bg-box);
	color: var(--text-2);
	font-variant-numeric: tabular-nums;
}

.badge--score.is-fresh {
	background: var(--brand-soft);
	color: var(--brand-ink);
	font-weight: 700;
}

.badge--score.is-rotten {
	background: var(--bg-box);
	color: var(--text-4);
	font-weight: 700;
}

/* 分类文字链（图下） */
.chip {
	display: inline-flex;
	align-items: center;
	height: 20px;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--brand-ink);
	letter-spacing: .2px;
}

.chip--muted {
	color: var(--text-4);
	font-weight: 500;
}

/* ---------- 头像与作者 ---------- */

.avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-box);
	flex: none;
}

.avatar--sm {
	width: 16px;
	height: 16px;
}

.avatar--lg {
	width: 36px;
	height: 36px;
}

.avatar--xl {
	width: 64px;
	height: 64px;
}

/* 首字母头像 */
.avatar-initial {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--bg-hover);
	color: var(--text-3);
	font-size: 10px;
	font-weight: 700;
	flex: none;
	text-transform: uppercase;
}

.avatar-initial--lg {
	width: 36px;
	height: 36px;
	font-size: 14px;
}

/* ---------- Hero 大卡 ---------- */

.hero {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--bg-box);
}

.hero__media {
	position: absolute;
	inset: 0;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}

.hero:hover .hero__media img {
	transform: scale(1.03);
}

.hero__mask {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .78) 100%);
}

.hero__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 28px 30px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.hero__title {
	font-size: var(--fs-3xl);
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	letter-spacing: -.6px;
	max-width: 760px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}

.hero__sub {
	font-size: var(--fs-md);
	color: rgba(255, 255, 255, .82);
	max-width: 640px;
}

.hero__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .76);
}

.hero:hover .hero__title {
	color: #fff;
}

/* ---------- 横向大卡（首页 3 列推荐） ---------- */

.tile {
	position: relative;
	display: block;
	border-radius: var(--r-md);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--bg-box);
}

.tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--ease);
}

.tile:hover img {
	transform: scale(1.04);
}

.tile__mask {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .78) 100%);
}

.tile__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 16px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tile__title {
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
}

.tile__sub {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .75);
}

/* ---------- 资讯条目 ---------- */

.news-item {
	display: flex;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	min-width: 0;
}

.news-item:last-child {
	border-bottom: 0;
}

.news-item__title {
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.5;
	color: var(--text-2);
	transition: color var(--dur) var(--ease);
}

.news-item:hover .news-item__title {
	color: var(--brand-ink);
}

.news-item__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: var(--fs-xs);
	color: var(--text-5);
}

.news-item__thumb {
	width: 64px;
	height: 48px;
	border-radius: var(--r-sm);
	object-fit: cover;
	flex: none;
	background: var(--bg-box);
}

/* ---------- 播单卡（深色） ---------- */

.album-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border-radius: var(--r-md);
	background: var(--bg-dark);
	color: #fff;
	height: 100%;
	transition: transform var(--dur) var(--ease);
}

.album-card:hover {
	color: #fff;
	transform: translateY(-2px);
}

.album-card__label {
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, .55);
	letter-spacing: .3px;
}

.album-card__title {
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}

.album-card__cover {
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--r-sm);
	object-fit: cover;
	margin-top: auto;
}

.album-card__cta {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, .7);
}

/* ---------- 播客行（列表页） ---------- */

.ep {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.ep__cover {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--bg-box);
}

.ep__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ep__play {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	backdrop-filter: blur(6px);
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.ep__play:hover {
	background: var(--brand);
	transform: scale(1.06);
}

.ep__play .u-icon {
	width: 15px;
	height: 15px;
	fill: currentColor;
	stroke: none;
}

.ep__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 2px 0;
}

.ep__title {
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.4;
	color: var(--text-1);
}

.ep:hover .ep__title {
	color: var(--brand-ink);
}

.ep__desc {
	font-size: var(--fs-sm);
	color: var(--text-4);
	line-height: 1.6;
}

.ep__meta {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-xs);
	color: var(--text-4);
}

/* ---------- 全局播放条 ---------- */

.gplayer {
	position: fixed;
	left: var(--side-w);
	right: 0;
	bottom: 0;
	z-index: 70;
	height: var(--player-h);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px;
	background: var(--bg);
	border-top: 1px solid var(--line);
	box-shadow: var(--shadow-player);
	animation: player-in 260ms var(--ease);
}

@keyframes player-in {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

.gplayer__toggle {
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: var(--brand);
	color: var(--brand-contrast);
	display: grid;
	place-items: center;
	transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.gplayer__toggle:hover {
	transform: scale(1.05);
	background: var(--brand-deep);
}

.gplayer__toggle .u-icon {
	width: 17px;
	height: 17px;
	fill: currentColor;
	stroke: none;
}

.gplayer__icon-pause {
	display: none;
}

.gplayer__toggle.is-playing .gplayer__icon-play {
	display: none;
}

.gplayer__toggle.is-playing .gplayer__icon-pause {
	display: block;
}

.gplayer__cover {
	width: 40px;
	height: 40px;
	border-radius: var(--r-sm);
	overflow: hidden;
	flex: none;
	background: var(--bg-box);
}

.gplayer__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gplayer__info {
	width: 200px;
	flex: none;
	min-width: 0;
}

.gplayer__title {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gplayer__author {
	display: block;
	font-size: var(--fs-xs);
	color: var(--text-4);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gplayer__progress {
	flex: 1;
	height: 20px;
	display: flex;
	align-items: center;
	cursor: pointer;
	min-width: 80px;
}

.gplayer__progress::before {
	content: "";
	position: absolute;
}

.gplayer__progress {
	position: relative;
}

.gplayer__progress i {
	display: block;
	width: 0;
	height: 3px;
	border-radius: var(--r-pill);
	background: var(--brand);
	position: relative;
	z-index: 1;
	transition: width 120ms linear;
}

.gplayer__progress::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 3px;
	transform: translateY(-50%);
	border-radius: var(--r-pill);
	background: var(--line-2);
	z-index: 0;
}

.gplayer__time {
	font-size: var(--fs-xs);
	color: var(--text-4);
	font-variant-numeric: tabular-nums;
	flex: none;
}

.gplayer__close {
	color: var(--text-5);
	padding: 6px;
	flex: none;
}

.gplayer__close:hover {
	color: var(--text-1);
}

@media (max-width: 1024px) {
	.gplayer {
		left: 0;
	}

	.gplayer__info {
		width: 130px;
	}
}

@media (max-width: 640px) {
	.gplayer__cover,
	.gplayer__time {
		display: none;
	}
}

/* ---------- 分页 ---------- */

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 36px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	color: var(--text-3);
	background: var(--bg);
	border: 1px solid var(--line);
	transition: all var(--dur) var(--ease);
}

.pagination .page-numbers:hover {
	border-color: var(--text-4);
	color: var(--text-1);
}

.pagination .page-numbers.current {
	background: var(--text-1);
	border-color: var(--text-1);
	color: var(--bg);
	font-weight: 600;
}

.pagination .page-numbers.dots {
	border: 0;
	background: none;
}

/* ---------- 空状态 ---------- */

.empty {
	padding: 72px 24px;
	text-align: center;
	color: var(--text-4);
}

.empty .u-icon {
	width: 40px;
	height: 40px;
	margin: 0 auto 14px;
	color: var(--icon);
}

.empty h2 {
	font-size: var(--fs-lg);
	margin-bottom: 8px;
}

.empty p {
	font-size: var(--fs-sm);
	margin: 0;
}

/* ---------- 面包屑 ---------- */

.crumbs {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xs);
	color: var(--text-4);
	margin-bottom: 18px;
}

.crumbs a:hover {
	color: var(--brand-ink);
}

.crumbs .u-icon {
	width: 12px;
	height: 12px;
	color: var(--text-5);
}

/* 播放条默认隐藏（hidden 属性需要覆盖 display:flex） */
.gplayer[hidden] {
	display: none;
}

/* 卡片等高：元信息贴底，保证同一行标题基线一致 */
.card {
	height: 100%;
}

.card__body {
	flex: 1;
}

.card__meta {
	margin-top: auto;
}

/* 播单卡在侧栏列内等比分配高度 */
.radio-block__side .album-card {
	flex: 1;
}

.radio-block__side .album-card__cover {
	aspect-ratio: 4 / 3;
	margin-top: 6px;
	object-fit: cover;
}