/* ═══════════ ② 科目页 —— 深色底 · 便当盒（bento）布局 ═══════════
   参考：深色底 + 左侧教材封面卡 + 中间两格青色卡 + 右侧一宽两小三张彩卡 */

/* ── 背景：不在这里画，直接用 body 那张底（首页同款），保证两页没有色差 ── */
#view-subject{
  /* 四周留白和首页用同一套变量，两页的导航/内容间距才一致 */
  padding:var(--sb-h) 0 var(--page-bottom);
}

/* ── 顶部：AI老师 + 学科导航 + 右侧信息胶囊 ──
   导航行的 padding 和导航项的样式都跟首页共用（见 tokens.css 的 --page-pad
   和 home.css 的 .home-top / .subj-tab），这里不再单独覆盖，否则两边会岔开。 */
.subj-navrow{
  position:relative;z-index:4;flex:none;display:flex;align-items:center;gap:1.35rem;
  padding:.55rem var(--page-pad) .45rem;
}

.subj-meta{margin-left:auto;display:flex;align-items:center;gap:.5rem;}
.meta-pill{
  display:flex;align-items:center;gap:.34rem;padding:.36rem .8rem;border-radius:999px;
  font-size:.78rem;font-weight:600;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);
  white-space:nowrap;transition:background .18s,transform .18s;
}
button.meta-pill{cursor:pointer;}
button.meta-pill:active{background:rgba(255,255,255,.16);transform:scale(.96);}
.meta-pill .ic{opacity:.7;}

/* ── 便当盒网格：1 封面 + 5 卡 ── */
.bento{
  position:relative;z-index:3;flex:1;min-height:0;
  display:grid;gap:.9rem;padding:.9rem 4.4rem;
  /* 列宽比按参考图量的：左边一组 ≈61% / 右列两小格各 ≈19% */
  grid-template-columns:3.15fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
}
/* 左边三块（封面 + 前两张卡）共用一个青色底框——参考图里封面外面那圈 */
.bento-group{
  grid-column:1;grid-row:1 / span 2;
  display:grid;gap:.7rem;
  grid-template-columns:1.45fr 1.7fr;   /* 组内：封面 / 中列 */
  grid-template-rows:1fr 1fr;
  padding:.85rem;border-radius:1.35rem;
  border:.4rem solid #12899c;
  box-shadow:0 0 1.8rem rgba(20,165,185,.34),0 .8rem 1.6rem rgba(0,0,0,.3);
}
.bento-cover{grid-column:1;grid-row:1 / span 2;}
.bento-c1{grid-column:2;grid-row:1;}
.bento-c2{grid-column:2;grid-row:2;}
.bento-c3{grid-column:2 / span 2;grid-row:1;}
.bento-c4{grid-column:2;grid-row:2;}
.bento-c5{grid-column:3;grid-row:2;}

/* ── 功能卡 ── */
.bcard{
  position:relative;overflow:hidden;border-radius:1.1rem;
  padding:1.1rem 1.2rem;display:flex;flex-direction:column;
  background:linear-gradient(158deg,var(--c1),var(--c2));
  box-shadow:
    var(--card-drop),
    var(--card-ring),                          /* 参考图里每张卡都有一圈浅色描边 */
    var(--card-top);
  transition:transform .2s cubic-bezier(.22,.9,.28,1),box-shadow .2s;
  text-align:left;
}
.bcard:active{transform:scale(.975);}
.bcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(92% 70% at 84% 0%,rgba(255,255,255,.24),transparent 62%);
}
.bcard.al-center{justify-content:center;}
.bcard.al-top{justify-content:flex-start;}
.bcard.al-bottom{justify-content:flex-end;}
.bc-title{
  position:relative;z-index:2;font-size:1.45rem;font-weight:800;color:#fff;letter-spacing:.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.34);
}
.bc-sub{
  position:relative;z-index:2;margin-top:.32rem;font-size:.72rem;font-weight:500;
  color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bc-art{
  position:absolute;right:.7rem;top:50%;transform:translateY(-50%);
  width:48%;max-height:78%;display:grid;place-items:center;z-index:1;pointer-events:none;
}
.bc-art svg{width:100%;height:auto;max-height:100%;
  filter:drop-shadow(0 .7rem 1rem rgba(0,0,0,.4));}
/* 小卡里插图挪到右上角，给底部的标题让位 */
.bento-c4 .bc-art,.bento-c5 .bc-art{
  width:50%;max-height:52%;right:.55rem;top:.6rem;bottom:auto;transform:none;
}

/* 五张卡的配色（和首页共用 tokens.css 里的变量） */
.bcard.c-teal  {--c1:var(--c-teal-1);  --c2:var(--c-teal-2);}
.bcard.c-amber {--c1:var(--c-amber-1); --c2:var(--c-amber-2);}
.bcard.c-coral {--c1:var(--c-coral-1); --c2:var(--c-coral-2);}
.bcard.c-violet{--c1:var(--c-violet-1);--c2:var(--c-violet-2);}

/* ── 教材封面卡 ──
   原来这里是 CSS+SVG 画出来的"假封面"，现在直接用教材 PDF 第 1 页渲染出的
   真实课本封面图（assets/books/<科目>/cover.jpg）。
   图片比卡片"胖"（书是 0.71，卡片是 0.57），用 contain 保证四边的字都不被裁掉。 */
.bento-cover{
  position:relative;overflow:hidden;border-radius:1.1rem;padding:0;display:block;
  background:linear-gradient(170deg,#20283f,#141a2c);
  box-shadow:0 .9rem 2rem rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.1);
  transition:transform .2s cubic-bezier(.22,.9,.28,1);
}
.bento-cover:active{transform:scale(.978);}
/* 图已按卡片比例（286x499）预先裁好（_tools/make_cards.py），所以直接铺满、不留白 */
.cv-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;user-select:none;
}
/* 底部提示条：进得去、看得出来能点 */
.cv-open{
  position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:.3rem;white-space:nowrap;
  padding:.34rem .85rem;border-radius:999px;
  font-size:.76rem;font-weight:700;color:#08221c;
  background:linear-gradient(100deg,#63f2bb,#3fd8ff);
  box-shadow:0 .4rem 1rem rgba(63,216,255,.4);
  opacity:0;transition:opacity .2s;
}
.cv-open .ic{fill:currentColor;stroke:none;}
.bento-cover:hover .cv-open,.bento-cover:active .cv-open{opacity:1;}
/* 触屏设备没有 hover，直接常显 */
@media (hover:none){ .cv-open{opacity:1;} }

/* ── 底部居中那块原来有一排"页码点"（从 iPad 参考图抄来的），已删除：
      这个 app 没有分页也不能左右滑，点没有功能；而且它想表达的 4 个位置
      （首页/语文/数学/英语）在科目页里天然缺一个，怎么修都缺语义。
      省下的高度加到了 #view-subject 的 padding-bottom，方块大小不变。 ── */

/* 底部应用坞的样式统一在 css/shell.css 的 #dock 里（首页科目页共用），这里不再覆盖 */