/* Stories / Digital 区域：把“文字部分”设为可点，购买按钮宽度固定 */
#stories .btn, #digital .btn { min-width:130px; padding:10px 14px; }

/* 让标题/说明/价格等文字鼠标可点（跳转到 stories.html / digital.html）*/
#stories h3, #stories h4, #stories p, #stories .desc,
#digital h3, #digital h4, #digital p, #digital .desc { cursor: pointer; }

/* 让主要文字看起来可点 */
#stories h3, #stories h4, #stories p, #stories .desc,
#digital h3, #digital h4, #digital p, #digital .desc {
  cursor: pointer;
}

/* “现在订购”按钮不要太宽，避免视觉上以为只有按钮能点 */
#stories .btn, #digital .btn {
  min-width: 120px;
  padding: 8px 12px;
}

/* --- Stories: 卡片矩阵 --- */
#storiesGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap:18px;
  align-items:stretch;
  padding-top:12px;
}
#storiesGrid .story-card{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  padding:16px;
  height:100%;
  display:flex; flex-direction:column;
}
#storiesGrid .story-desc{ color:#aab4c3; margin:6px 0 14px; line-height:1.7;}
#storiesGrid .story-meta{ margin-top:auto; display:flex; justify-content:space-between; align-items:center;}
#storiesGrid .btn{ border-radius:999px; padding:8px 14px; }

/* ====== 通用：卡片矩阵容器 ====== */
#storiesGrid, #digitalGrid, .card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
  padding-top: 12px;
}

/* ====== 通用：卡片外观 ====== */
.story-card, .digital-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  padding: 16px;
  height: 100%;
  display: grid;
  /* 三等分：icon(1/3) | title(1/3) | price(1/3) */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "icon title price"
    "desc desc  desc"
    "cat  cat   cat"
    "meta meta  meta";
  gap: 10px 12px;
}

/* ====== 顶部三栏：图标 / 标题 / 价格 ====== */
.story-card .story-icon,
.digital-card .story-icon{
  grid-area: icon;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; line-height: 1;   /* emoji 场景 */
}
.story-card .story-icon img,
.digital-card .story-icon img{ max-width: 80%; height: auto; object-fit: contain; }

.story-card .story-title,
.digital-card .story-title,
.story-card .story-title-text,
.digital-card .story-title-text{
  grid-area: title; align-self: center;
  font-weight: 700; font-size: 18px;
  letter-spacing: .2px;
}

.story-card .story-price,
.digital-card .story-price{
  grid-area: price; align-self: center; justify-self: end;
  font-weight: 700; font-size: 18px;
}

/* ====== 互换顺序：描述在前、分类在后 ====== */
.story-card .story-desc,
.digital-card .story-desc{
  grid-area: desc;   /* 占一整行：1/-1 */
  color: #aab4c3; line-height: 1.7;
  margin-top: 4px;
}

.story-card .story-cat,
.digital-card .story-cat{
  grid-area: cat;    /* 描述之后 */
  color: #9fc1ff; font-size: 13px;
  opacity: .9;
}

/* ====== 底部 meta 区（按钮、销量/库存等） ====== */
.story-card .story-meta,
.digital-card .story-meta{
  grid-area: meta;
  display:flex; justify-content: space-between; align-items:center;
  gap: 10px; margin-top: 4px;
}

.story-card .btn, .digital-card .btn{
  border-radius: 999px; padding: 8px 14px;
}

/* ====== 小屏兜底 ====== */
@media (max-width: 480px){
  .story-card, .digital-card{
    grid-template-columns: 1fr 1fr;  /* 两列更紧凑 */
    grid-template-areas:
      "icon title"
      "price price"
      "desc  desc"
      "cat   cat"
      "meta  meta";
  }
  .story-card .story-price, .digital-card .story-price{ justify-self: start; }
}

/* ====== 通用：卡片矩阵容器 ====== */
#storiesGrid, #digitalGrid, .card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
  padding-top: 12px;
}

/* ====== 通用：卡片外观 ====== */
.story-card, .digital-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  padding: 16px;
  height: 100%;
  display: grid;
  /* 三等分：icon(1/3) | title(1/3) | price(1/3) */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "icon title price"
    "desc desc  desc"
    "cat  cat   cat"
    "meta meta  meta";
  gap: 10px 12px;
}

/* ====== 顶部三栏：图标 / 标题 / 价格 ====== */
.story-card .story-icon,
.digital-card .story-icon{
  grid-area: icon;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; line-height: 1;   /* emoji 场景 */
}
.story-card .story-icon img,
.digital-card .story-icon img{ max-width: 80%; height: auto; object-fit: contain; }

.story-card .story-title,
.digital-card .story-title,
.story-card .story-title-text,
.digital-card .story-title-text{
  grid-area: title; align-self: center;
  font-weight: 700; font-size: 18px;
  letter-spacing: .2px;
}

.story-card .story-price,
.digital-card .story-price{
  grid-area: price; align-self: center; justify-self: end;
  font-weight: 700; font-size: 18px;
}

/* ====== 互换顺序：描述在前、分类在后 ====== */
.story-card .story-desc,
.digital-card .story-desc{
  grid-area: desc;   /* 占一整行：1/-1 */
  color: #aab4c3; line-height: 1.7;
  margin-top: 4px;
}

.story-card .story-cat,
.digital-card .story-cat{
  grid-area: cat;    /* 描述之后 */
  color: #9fc1ff; font-size: 13px;
  opacity: .9;
}

/* ====== 底部 meta 区（按钮、销量/库存等） ====== */
.story-card .story-meta,
.digital-card .story-meta{
  grid-area: meta;
  display:flex; justify-content: space-between; align-items:center;
  gap: 10px; margin-top: 4px;
}

.story-card .btn, .digital-card .btn{
  border-radius: 999px; padding: 8px 14px;
}

/* ====== 小屏兜底 ====== */
@media (max-width: 480px){
  .story-card, .digital-card{
    grid-template-columns: 1fr 1fr;  /* 两列更紧凑 */
    grid-template-areas:
      "icon title"
      "price price"
      "desc  desc"
      "cat   cat"
      "meta  meta";
  }
  .story-card .story-price, .digital-card .story-price{ justify-self: start; }
}

/* ====== Stories/Digital 卡片：三等分 + 描述/分类整行 ====== */
#storiesGrid, #digitalGrid, .card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px; align-items:stretch; padding-top:12px;
}

.story-card, .digital-card{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;              /* 1/3 | 1/3 | 1/3 */
  grid-template-areas:
    "icon title price"                             /* 第一行：图标 | 标题 | 价格 */
    "desc desc  desc"                              /* 第二行：描述（整行）*/
    "cat  cat   cat"                               /* 第三行：分类（整行）*/
    "meta meta  meta";                             /* 底部：按钮/统计 */
  gap:10px 12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.22);
  padding:16px; height:100%;
}

/* —— 三等分区域 —— */
.story-icon{ grid-area: icon; display:flex; align-items:center; justify-content:center; font-size:42px; line-height:1; }
.story-icon img{ max-width:80%; height:auto; object-fit:contain; }

.story-title{ grid-area: title; align-self:center; font-weight:700; font-size:18px; letter-spacing:.2px; }

.story-price{ grid-area: price; align-self:center; justify-self:end; font-weight:700; font-size:18px; text-align:right; }

/* —— 互换顺序：描述在前、分类在后 —— */
.story-desc{ grid-area: desc; color:#aab4c3; line-height:1.7; margin-top:4px; }
.story-cat { grid-area: cat;  color:#9fc1ff; font-size:13px; opacity:.9; }

/* —— 底部操作区 —— */
.story-meta{ grid-area: meta; display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:4px; }
.story-card .btn, .digital-card .btn{ border-radius:999px; padding:8px 14px; }

/* —— 小屏兜底 —— */
@media (max-width:480px){
  .story-card, .digital-card{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "icon title"
      "price price"
      "desc  desc"
      "cat   cat"
      "meta  meta";
  }
  .story-price{ justify-self:start; }
}