/* favorites.css — Favorites grid (compactness tuning center), unfav button, empty state */

/* ============================================================
   ★ 收藏 TAB 紧凑度调节中心 ★
   ────────────────────────────────────────────────────────────
   想让收藏列表更紧凑或更宽松，只改这里的几个数值即可：

     1. --fav-grid-gap        卡片之间的间距 (默认 2px)
     2. --fav-grid-pad-x      左右内边距 (默认 12px)
     3. --fav-grid-pad-y      上下内边距 (默认 4px)
     4. --fav-row-pad-y       每行卡片自身上下内边距 (默认 4px)
     5. --fav-logo-size       台标大小 (默认 46px)
     6. --fav-row-gap         台标和文字之间的距离 (默认 12px)
     7. --fav-star-size       右侧星星 icon 大小 (默认 20px)

   每排电台数量：改下面 .favorites-grid 里 repeat() 的数字即可。
   手机：1 列；平板 (≥600px)：2 列；桌面 (≥900px)：3 列；宽屏 (≥1200px)：4 列
   ============================================================ */
.favorites-grid {
  /* —— 紧凑度变量集中区，统一调节 —— */
  --fav-grid-gap:   0px;   /* 改为 0，分隔线由 ::before 负责，与 settings 风格一致 */
  --fav-grid-pad-x: var(--edge-pad);  /* 16→var(--edge-pad)：与全局 Tab 边距统一 */
  --fav-grid-pad-y: 8px;   /* 4→8：整组上下留出更多呼吸感 */
  --fav-row-pad-y:  8px;   /* 4→8：行高 52+16=68px，符合 iOS 触摸目标规范 */
  --fav-logo-size: clamp(62px, 17vw, 74px);  /* 与首页 .station-card 的 width:17vw / min 62px / max 74px 完全对齐 */
  --fav-row-gap:    12px;  /* 不变：与 settings-row gap 一致 */
  --fav-star-size:  20px;

  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--fav-grid-gap);
  padding: var(--fav-grid-pad-y) var(--fav-grid-pad-x) calc(var(--fav-grid-pad-y) + 12px);
}
@media (min-width: 600px) {
  .favorites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .favorites-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .favorites-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 收藏行之间不再画横线 ──────────────────────────────────
   与分组列表(.radio-item)统一为"无分隔线"的极简风格,
   行之间用 padding 自然形成呼吸感即可。 */

/* ── 收藏卡片：去掉方框，台标融入背景 ──────────────────────
   核心改动：移除 background / border / 圆角，让台标看起来像
   "悬浮在背景上"，与首页的分组列表风格一致。 */
.favorites-grid .station-card.fav-card {
  /* 覆盖 .station-card 默认的窄宽度 */
  width: 100%; min-width: 0; max-width: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--fav-row-gap);
  padding: var(--fav-row-pad-y) 0;   /* 无横向 padding：彻底融入背景 */
  background: transparent;            /* ★ 关键：去掉卡片底色 */
  border: none;                       /* ★ 关键：去掉边框 */
  border-radius: 0;
  overflow: visible;
  box-sizing: border-box;
}

/* 台标外框：保留方框样式（glass 背景 + 边框），与首页电台卡片一致 */
.favorites-grid .station-card.fav-card .station-card-img-wrap {
  flex-shrink: 0;
  width: var(--fav-logo-size);
  height: var(--fav-logo-size);
  aspect-ratio: unset;
  border-radius: 10px;
  /* 不再覆盖 background / border：沿用基础 .station-card-img-wrap 的玻璃质感外框 */
}
/* 加载占位仍要可见，所以给加载层保留一点 placeholder 灰 */
.favorites-grid .station-card.fav-card .station-card-img-loading {
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
  .favorites-grid .station-card.fav-card .station-card-img-loading {
    background: rgba(255,255,255,0.04);
  }
}

/* 右侧信息区 */
.fav-card-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ── 取消收藏按钮（右侧实心星）──────────────────────────
   统一为简洁风格：纯 icon，无圆形背景，与其他位置（分组弹窗）
   的星星按钮视觉一致。 */
.fav-card-unfav-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer;
  color: #ffcc00;            /* iOS 系统星星黄，与 .imm-fav-btn 一致 */
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.fav-card-unfav-btn:hover { transform: scale(1.1); }
.fav-card-unfav-btn:active { transform: scale(0.85); opacity: 0.7; }
.fav-card-unfav-icon {
  width: var(--fav-star-size);
  height: var(--fav-star-size);
  display: block;
}

.fav-empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 20px;
  color: var(--tab-inactive);
}
.fav-empty-icon {
  width: 48px; height: 48px; margin-bottom: 12px;
  opacity: 0.35; color: var(--tab-inactive);
}
.fav-empty-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.fav-empty-sub { font-size: 13px; opacity: 0.7; }