/* cards.css — Reusable cards: .station-card (home/search/category) + .fav-card (favorites) */

.station-card {
  flex-shrink: 0;
  width: 17vw;
  min-width: 62px;
  max-width: 74px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.2s;
  vertical-align: top;
}
.station-card:active { transform: scale(0.96); }
.station-card.now-playing .station-card-name { color: var(--primary); }

.station-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.station-card-img-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.station-card-img { width: 100%; height: 100%; object-fit: contain; }
.station-card-img.lazy {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.station-card-img:not(.lazy) {
  opacity: 1;
}
.station-card-img-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
}
.station-card-img-loading.hidden {
  display: none;
}
.station-card-img-loading::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--tab-inactive);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.station-card-placeholder { font-size: 28px; color: var(--tab-inactive); }
.station-card-hq {
  position: absolute; bottom: 3px; right: 3px;
  width: 14px; height: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  z-index: 2;
}
.station-card-name {
  margin-top: 6px;
  font-size: 11px; font-weight: 600; line-height: 1.3;
  color: var(--text-dark);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  height: 2.6em;
  padding: 0 2px;
  min-width: 0;
}

/* ============================================================
   收藏页专用卡片 .fav-card —— 与 app.js 中 buildFavCardHTML 配套
   结构:
     .station-card.fav-card
       └ .station-card-img-wrap         (logo)
       └ .fav-card-epg                  (节目预告容器)
           ├ .fav-card-prog.fav-card-prog-now    (当前,默认蓝;此卡 .now-playing 时变红)
           │   ├ .fav-card-prog-time             (时间,如 10:00)
           │   └ .fav-card-prog-title            (节目名)
           └ .fav-card-prog.fav-card-prog-next   (下一档,灰色)
       └ .fav-card-epg.fav-card-epg-fallback     (无节目单时显示电台名;同样默认蓝,播放中变红)
   要点:
     - 时间列固定 32px,让两行的"10:00 / 14:00"上下严格对齐
     - 节目名 flex:1 + ellipsis,文字再长也不会撑爆栅格
   ============================================================ */
/* ★ 收藏卡片：电台名称行（与 .radio-item-name 同规格） */
.fav-card-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
  margin-bottom: 2px;
}
/* 播放中：名称也随节目变红 */
.fav-card.now-playing .fav-card-name {
  color: #ff3b30;
}

.fav-card .fav-card-epg {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  min-width: 0;
  overflow: hidden;
}
.fav-card-prog {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  line-height: 1.35;
  min-width: 0;
}
.fav-card-prog-time {
  flex-shrink: 0;
  width: 36px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: left;
  letter-spacing: -0.2px;
}
.fav-card-prog-title {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ★ 当前播出节目：时间用主色蓝（「直播中」标识），标题用正常深色——
     避免整行都是蓝色，导致多行视觉噪音和列表拥挤感。
     主流 App（蜻蜓FM / Apple Podcasts）的做法：
     名称（粗黑）→ 时间（小蓝点/蓝字）→ 节目名（中灰）→ 下一档（淡灰）。 */
.fav-card-prog-now .fav-card-prog-time {
  color: var(--primary);
  font-weight: 600;
}
.fav-card-prog-now .fav-card-prog-title {
  color: var(--text-dark);
  font-weight: 500;
  opacity: 0.85;
}
.fav-card-prog-next .fav-card-prog-time,
.fav-card-prog-next .fav-card-prog-title {
  color: var(--text-dark);
  opacity: 0.45;
}
/* ★ 当此电台正在播放器播放（卡片带 .now-playing）时，节目时间和名称都变红 */
.fav-card.now-playing .fav-card-prog-now .fav-card-prog-time,
.fav-card.now-playing .fav-card-prog-now .fav-card-prog-title {
  color: #ff3b30;
  opacity: 1;
}