/* share.css — 分享按钮与分享面板（配合 assets/js/share.js） */

.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid var(--line,#d9dfd4);
  border-radius:50%;
  background:var(--card,#fffefa);
  color:var(--green,#183c34);
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.share-btn:hover{background:#eef2ea;border-color:#b9cbb8;transform:translateY(-1px)}
.share-btn:active{transform:translateY(0)}
.series-nav .share-btn{margin-left:auto}

/* 书籍详情页 · 右上角浮动，和 Aa 设置钮并排 */
.share-btn--float{
  position:fixed;
  top:10px;
  right:54px;
  z-index:60;
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--card-bg,#fffefa);
  border:1px solid var(--card-bd,#d9dfd4);
  color:var(--txt,#2b3a33);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.share-btn--float:hover{border-color:var(--head,#315e50);color:var(--head,#315e50);background:var(--card-bg,#fffefa);transform:none}
.share-btn--float:active{transform:translateY(1px)}
@media (max-width:560px){
  .share-btn--float{top:10px;right:54px;width:34px;height:34px}
}

.share-mask{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:flex-start;   /* 内容高于视口时从顶部开始，配合 .share-box 的 margin:auto 才不会被裁掉顶边 */
  justify-content:center;
  padding:22px;
  background:rgba(20,36,31,.5);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  overflow:auto;
}
.share-mask[hidden]{display:none}

.share-box{
  --pad-x:24px;
  --pad-t:24px;
  position:relative;
  box-sizing:border-box;
  width:100%;
  max-width:330px;
  margin:auto;
  padding:var(--pad-t) var(--pad-x) 20px;
  border-radius:18px;
  background:var(--card,#fffefa);
  box-shadow:0 24px 60px rgba(16,32,27,.28);
  text-align:center;
  overflow:hidden;       /* 海报区铺到卡片边缘，靠这里收圆角 */
}
/* 横版：封面在左、书名与二维码在右 */
.share-box[data-layout="h"]:not(.is-nocover){max-width:408px}
.share-eyebrow{
  margin:0;
  font-size:.68rem;
  letter-spacing:.2em;
  font-weight:700;
  color:var(--gold,#c28b54);
}
.share-h{
  margin:6px 0 16px;
  font:600 1.25rem/1.4 var(--serif,Georgia,serif);
  color:var(--green,#183c34);
}

/* ---------- 海报区：模糊背景 + 封面 + 书名 + 二维码 ---------- */
.share-poster{margin:0 0 14px}

/* 竖版：通栏 hero 在卡片顶部，书名与二维码依次往下 */
.share-box[data-layout="v"] .share-poster{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.share-box[data-layout="v"] .share-hero{
  align-self:stretch;
  height:240px;
  margin:calc(var(--pad-t) * -1) calc(var(--pad-x) * -1) 14px;
  border-radius:18px 18px 0 0;
}

/* 横版：hero 在左列，书名和二维码靠右排 */
.share-box[data-layout="h"] .share-poster{
  display:grid;
  grid-template-columns:172px minmax(0,1fr);
  grid-template-areas:
    "hero book"
    "hero qr";
  gap:10px 16px;
  align-items:center;
  text-align:left;
}
.share-box[data-layout="h"] .share-hero-cover{width:132px}
.share-box[data-layout="h"] .share-hero{
  grid-area:hero;
  width:172px;
  height:240px;
  border-radius:12px;
}

/* 封面「墙上」：同一张图放大、模糊、压暗当背景，清晰封面浮在中间 */
.share-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#11171a;
  isolation:isolate;
}
.share-hero-bg{
  position:absolute;
  inset:-16%;
  z-index:0;
  width:auto;
  height:auto;
  object-fit:cover;
  filter:blur(18px) saturate(1.2) brightness(.62);
  transform:scale(1.06);
}
.share-hero-cover{
  position:relative;
  z-index:1;
  display:block;
  width:136px;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:6px;
  background:#eef0ea;
  box-shadow:0 14px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07);
}
/* 顶部压一层暗渐变，保证角上的关闭 / 切换按钮始终看得见 */
.share-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg,rgba(8,12,14,.3) 0%,rgba(8,12,14,0) 15%);
  pointer-events:none;
}

.share-box.is-nocover .share-hero{display:none}
.share-box.is-nocover .share-book{display:none}
/* 没封面就没海报，标题回到正常位置，别留一张空白面板（写在 has-hero 之后仍要压过它） */
.share-box.has-hero.is-nocover .share-eyebrow,
.share-box.has-hero.is-nocover .share-h{
  position:static;
  width:auto;
  height:auto;
  overflow:visible;
  clip-path:none;
  white-space:normal;
}
.share-box.has-hero.is-nocover .share-eyebrow{margin:0}
.share-box.has-hero.is-nocover .share-h{margin:6px 0 14px}
.share-box.is-nocover[data-layout="h"] .share-poster{grid-template-columns:minmax(0,1fr);grid-template-areas:"book" "qr"}

.share-book{margin:0;min-width:0}
.share-box[data-layout="v"] .share-book{width:100%;max-width:280px;margin-top:10px}
.share-box[data-layout="h"] .share-book{grid-area:book}
.share-bt{
  margin:0;
  font:600 .92rem/1.45 var(--serif,Georgia,serif);
  color:var(--green,#183c34);
  text-wrap:balance;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.share-bs{
  margin:4px 0 0;
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--muted,#6b7a72);
}

.share-qrcol{min-width:0;justify-self:center}
.share-box[data-layout="h"] .share-qrcol{grid-area:qr}
.share-box[data-layout="h"] .share-qrcol .share-tip{font-size:.7rem;line-height:1.5}
.share-box[data-layout="v"] .share-qrcol{margin-top:14px}
.share-qrcol .share-tip{margin:9px 0 0;min-height:0;font-size:.74rem;text-wrap:balance}
.share-qr{
  display:flex;
  align-items:center;
  justify-content:center;
  width:196px;
  height:196px;
  margin:0 auto;
  padding:10px;
  border:1px solid var(--line,#d9dfd4);
  border-radius:12px;
  background:#fffefa;
}
.share-qr img,.share-qr canvas{display:block;width:176px!important;height:176px!important}
/* 带封面的分享卡：封面是主角，二维码只当配角 */
.share-box[data-layout="v"] .share-qr{width:128px;height:128px;padding:8px}
.share-box[data-layout="v"] .share-qr img,
.share-box[data-layout="v"] .share-qr canvas{width:112px!important;height:112px!important}
.share-box[data-layout="h"] .share-qr{width:124px;height:124px;padding:8px}
.share-box[data-layout="h"] .share-qr img,
.share-box[data-layout="h"] .share-qr canvas{width:108px!important;height:108px!important}
.share-box.is-nocover .share-qr{width:128px;height:128px;padding:8px}
.share-box.is-nocover .share-qr img,
.share-box.is-nocover .share-qr canvas{width:112px!important;height:112px!important}
.share-qr.is-pulse{animation:share-pulse .5s ease}
@keyframes share-pulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.035)}
  100%{transform:scale(1)}
}
.share-tip{
  margin:12px 0 16px;
  font-size:.8rem;
  line-height:1.6;
  color:var(--muted,#6b7a72);
  min-height:2.6em;
}

/* ---------- 有封面时：标题让位给书名，卡片直接从海报开始 ---------- */
.share-box.has-hero .share-eyebrow,
.share-box.has-hero .share-h{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* 版式切换：小屏不显示（默认就是竖版，横版也放不下） */
.share-layout{
  position:absolute;
  top:8px;
  right:42px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted,#6b7a72);
  cursor:pointer;
}
.share-layout:hover{color:var(--green,#183c34);background:rgba(24,60,52,.07)}
.share-box.is-nocover .share-layout{display:none}
.share-layout svg{display:block}

.share-acts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.share-acts > *{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:9px 2px 8px;
  border:1px solid var(--line,#d9dfd4);
  border-radius:10px;
  background:#f7f9f4;
  color:var(--green,#183c34);
  font-size:.74rem;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.share-acts svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.share-acts [data-act="wechat"] svg{color:#2f9e44}
.share-acts [data-act="moments"] svg{color:#4c8bf5}
.share-acts [data-act="weibo"] svg{color:#e05a3a}
.share-acts [data-act="qzone"] svg{color:#e0a52b}
.share-acts > *:hover{background:#eaf1e6;border-color:#b9cbb8}
.share-copy{
  width:100%;
  margin-top:10px;
  padding:10px;
  border:0;
  border-radius:10px;
  background:var(--green,#183c34);
  color:#f6f4ec;
  font-size:.84rem;
  font-weight:700;
  cursor:pointer;
}
.share-copy:hover{background:#245247}

/* 深色主题：面板是深底，原来那套「浅底浅字」的按钮会糊在一起，单独配一套 */
[data-theme="dark"] .share-acts > *{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .share-acts > *:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
[data-theme="dark"] .share-copy{color:#12211a}
[data-theme="dark"] .share-copy:hover{background:#a6d9ba}
.share-x{
  position:absolute;
  top:8px;
  right:10px;
  z-index:3;
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  color:var(--muted,#6b7a72);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}
.share-x:hover{color:var(--green,#183c34)}
/* 压在海报上时换成白字，配一层深色描边 */
.share-box.has-hero .share-x{color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.share-box.has-hero .share-x:hover{color:#fff}
.share-box.has-hero .share-layout{color:rgba(255,255,255,.75)}
.share-box.has-hero .share-layout:hover{color:#fff;background:rgba(255,255,255,.16)}

@media(max-width:560px){
  .share-layout{display:none}
  .share-box[data-layout="h"]{max-width:330px}
  .share-box[data-layout="h"] .share-poster{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .share-box[data-layout="h"] .share-hero{
    align-self:stretch;
    width:auto;
    height:212px;
    margin:calc(var(--pad-t) * -1) calc(var(--pad-x) * -1) 12px;
    border-radius:18px 18px 0 0;
  }
  .share-box[data-layout="h"] .share-book{margin-top:0}
  .share-box[data-layout="h"] .share-qrcol{margin-top:14px}
}
@media(max-width:420px){
  .share-box{--pad-x:18px;--pad-t:20px;padding:var(--pad-t) var(--pad-x) 16px}
  .share-box[data-layout="v"] .share-hero,
  .share-box[data-layout="h"] .share-hero{height:208px}
  .share-hero-cover,
  .share-box[data-layout="h"] .share-hero-cover{width:116px}
  .share-box[data-layout="v"] .share-qr,
  .share-box[data-layout="h"] .share-qr{width:116px;height:116px;padding:8px}
  .share-box[data-layout="v"] .share-qr img,
  .share-box[data-layout="v"] .share-qr canvas,
  .share-box[data-layout="h"] .share-qr img,
  .share-box[data-layout="h"] .share-qr canvas{width:100px!important;height:100px!important}
  .share-bt{font-size:.88rem}
  .share-acts{gap:6px}
  .share-acts > *{font-size:.76rem;padding:8px 2px}
}