/* ==========================================================================
   首页 · 分类探索

   结构来自参考图：一个分类 = 一条标题 + 一面图卡墙。
   卡片是「封面打底、标题与简介压在图上」，所以文字必须自带压暗层，
   否则浅色封面上的白字会读不出来。

   用色沿用全站规则：河水青只用于「正在发生」的状态（选中、悬停），
   其余一律走墨与纸的灰阶。
   ========================================================================== */

.explore {
  margin-top: var(--sp-6);
}

.explore__stamp {
  margin: calc(var(--sp-4) * -1) 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--paper-ghost);
}

.explore__status {
  padding: var(--sp-5) 0;
  color: var(--paper-ghost);
  font-size: var(--fs-small);
}

/* 就地展开的歌单详情，和上面的分类墙拉开距离 */
.explore__detail:not(:empty) {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* ---- 图卡墙 ---- */
.grid--explore {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 186px), 1fr));
}

.xcard {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: 13px;
}

.xcard__art {
  position: relative;
  aspect-ratio: 1.55 / 1;
  border-radius: 13px;
  overflow: hidden;
  /* 封面加载失败时的底色，避免出现破图或黑块 */
  background-color: var(--ink-3);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s;
}

/* 压暗层：上浅下深，保证底部白字在浅色封面上也读得清 */
.xcard__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 7, 15, 0.08) 0%,
    rgba(4, 7, 15, 0.34) 46%,
    rgba(4, 7, 15, 0.88) 100%
  );
}

.xcard__badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(4, 7, 15, 0.55);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--paper-dim);
}

.xcard__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.xcard__title {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xcard__sub {
  font-size: var(--fs-micro);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 悬停与选中：只有这两种「正在发生」的状态用河水青 */
.xcard:hover .xcard__art,
.xcard:focus-visible .xcard__art {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--line-bamboo), 0 14px 30px rgba(0, 0, 0, 0.45);
}

.xcard:focus-visible {
  outline: none;
}

.xcard.is-open .xcard__art {
  box-shadow: inset 0 0 0 2px var(--river), 0 10px 26px rgba(0, 0, 0, 0.4);
}

/* 「最新发布」的曲目列表给一点底色，和大段分类墙区分开 */
.explore__fresh {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--river-glow), transparent 42%);
}

@media (max-width: 640px) {
  .grid--explore {
    grid-template-columns: repeat(2, 1fr);
  }
}