/* p3.24③重做(原 p3.17③):分类精选页(category.php)——参考 App Store
   "编辑精选"集锦卡(总指挥发的参考截图):每个分类一张卡,卡上是该分
   类文章封面图标的横向缓慢自动滚动带 + 分类名(可选 eyebrow 小字)+
   动态背景色。总指挥原话"横向固定显示 2 个分类框……别做成响应式多
   列",这里没有任何 @media 断点改列数——2 列是所有视口宽度下唯一的
   布局,手机也是 2 列,不随宽度收缩成 1 列。 */

.category-collections-section { padding-bottom: 40px; }

.category-collections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 700px) {
  .category-collections { gap: 16px; }
}

.collection-card {
  display: block;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: 16px;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  /* p3.24③:1-3 个色相(--h0/--h1/--h2,category.php 不够 3 个时用最后
     一个色相重复补齐,这里的三段渐变永远有值可用)拼一条柔和渐变——
     只有 1 个真实色相时三个变量相同,视觉上退化成和原来单色版一致的
     观感,不是"少了两个色的时候渐变breaks"。 */
  background:
    radial-gradient(120% 100% at 100% 0%, hsl(var(--h0) 70% 45% / .55), transparent 60%),
    linear-gradient(115deg, hsl(var(--h0) 55% 28%), hsl(var(--h1) 58% 20%) 55%, hsl(var(--h2) 60% 14%));
  box-shadow: 0 10px 30px rgb(0 0 0 / .18);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
/* p3.26:原来只有 :active(触屏按下反馈),鼠标移上去没有任何反应——补
   一个轻微上浮 + 阴影加深,和这一轮歌单卡片(.playlist-card)、下面按
   钮的 hover 语言保持一致。展开态(.is-open)的卡片本来就跨满整行、不
   是"可以再点开一次"的悬浮卡片语义,不需要这个反馈。 */
@media (hover: hover) {
  .collection-card:not(.is-open):hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgb(0 0 0 / .26);
  }
}
.collection-card:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .collection-card:not(.is-open):hover { transform: none; }
}
/* p3.25①:卡片从 <a> 换成 role="button" 的 <div> 之后,键盘 Tab 到它身
   上得有可见焦点态,不然键盘用户找不到焦点在哪——只在键盘导航时显示
   (:focus-visible),鼠标点击不触发这圈轮廓,不平白多一圈视觉噪音。 */
.collection-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* p3.24③:封面图标横向无限跑马灯——.collection-card__marquee 是裁切窗
   口(overflow:hidden,不占超出自己宽度的空间),.collection-card__marquee-track
   是真正在动的那一条(category.php 已经把图标列表完整复制了一份接在
   后面),关键帧只需要把整条移动自身宽度的一半(= 原始那一份列表的宽
   度),移到那个位置时第二份列表的起点和第一帧视觉完全相同,循环处
   看不出接缝,不需要 JS 算任何时机/宽度。速度是固定时长(不是按图标
   数量换算的速度,图标多的分类看起来会滚快一点——真实产品里这个差异
   小到几乎感知不到,不值得为了"匀速"引入一次额外的 JS 测量)。 */
.collection-card__marquee {
  overflow: hidden;
  margin: 0 -16px 14px;
  padding: 0 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* p3.25①:两排交错(文章数够多的分类才有第二条 track,category.php 的
   $appstore_cat['useTwoRows'] 决定)——两条 track 之间留一点竖向间距,
   仿 Apple Music 参考图里"两条各自滚动的图标带"的样子。 */
.collection-card__marquee--dual {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.collection-card__marquee-track {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: collection-marquee 22s linear infinite;
}
.collection-card.is-open .collection-card__marquee-track { animation-duration: 30s; }
/* 第二排反向滚动 + 稍慢一点的节奏,和第一排错开,不是简单复制一条一
   模一样的带子——"两排交错"的交错感主要就靠这一条规则撑起来。 */
.collection-card__marquee-track--row2 {
  animation-direction: reverse;
  animation-duration: 26s;
}
.collection-card.is-open .collection-card__marquee-track--row2 { animation-duration: 34s; }
@keyframes collection-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .collection-card__marquee-track { animation: none; }
}
.collection-card__icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 22%;
  background: rgb(255 255 255 / .14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px rgb(0 0 0 / .18);
}
.collection-card__icon .fe { width: 60%; height: 60%; display: block; }

.collection-card__eyebrow {
  font-size: 12px;
  font-weight: 600;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.collection-card__name { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.collection-card__subtitle { font-size: 14px; opacity: .82; }

/* p3.25①:展开态——原来靠 PHP 按 URL slug 判断"是不是当前分类"预先渲
   染成展开态(.is-current),现在改成点哪张展开哪张(category.js 切
   .is-open),所有卡片统一从收起态开始。卡片横跨整行、放大铺开成大面
   板(总指挥原话"向上放大铺开"),不再是网格里普通一员。grid-column 本
   身不能过渡(不是可动画属性),点击瞬间跳到整行宽度是预期的——真正有
   过渡观感的是紧接着的 opacity/transform(卡片本身)和下面文章行各自
   错落淡入,呼应原来"铺开"的视觉语言,不是完全没有过渡感就一步到位。 */
.collection-card.is-open {
  grid-column: 1 / -1;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .collection-card.is-open { transition: none; }
}

/* 文章列表——初始收起(display:none,不占位置也不能被 Tab 到里面的链
   接),点击展开时才切到 flex 布局显示。展开时错落淡入 + 上移(总指挥原
   话),每一行的延迟由 category.php 写进来的 --row-i 行内变量决定(第几
   行乘固定间隔),不需要 JS 逐行算 setTimeout,category.js 一次性给所有
   行挂 is-visible,CSS transition-delay 自己错开。 */
.collection-card:not(.is-open) .collection-card__list {
  display: none;
}
.collection-card__list {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / .16);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.collection-card__row {
  background: rgb(255 255 255 / .07);
  border-radius: var(--radius-row);
  opacity: 0;
  transform: translateY(8px);
}
.collection-card__row.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(.2, .9, .2, 1);
  transition-delay: calc(var(--row-i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
  .collection-card__row { opacity: 1; transform: none; transition: none; }
}
/* .article-row 组件原本按"坐在浅色卡片上"设计配色(见 components.css),
   这里叠在深色渐变集锦卡上,标题/副标题/阅读按钮需要反转成亮色文字,
   不能沿用组件默认的深色文字(会看不清)。 */
.collection-card__row .article-row__title,
.collection-card__row .article-row__subtitle,
.collection-card__row .article-row__btn { color: #fff; }
.collection-card__row .article-row__subtitle { color: rgb(255 255 255 / .68); }
.collection-card__row .article-row__btn { background: rgb(255 255 255 / .16); }