/*
Theme Name: Brochure
Author: 徐龙
Description: 用来展示电子宣传册.
Version: 1.0
*/

body {
    font-family: Arial, sans-serif;
}
a{text-decoration: none!important;}

.card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.3s ease;
}

.card .overlay-text,
.card .overlay-qr {
    color: white; /* 标题颜色 */
}

/* 鼠标悬停时显示 */
.card-link:hover .overlay {
    opacity: 1;
}
.header-scrolled {
    background: #fff;
    padding: 15px 0;
    box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}
.hover-shadow {
  transition: box-shadow 0.3s ease-in-out;
}
.hover-shadow:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.1);
}


.book-3d {
  --book-thickness: 6px;
  --cover-color: #CCC;

	perspective: 1000px;
  max-width: 250px;
  margin: 0 auto;

}

.book-3d__inner {
	position: relative;
	transform-style: preserve-3d;
transform: rotateY(-25deg)
}

/* Book Pages */
.book-3d__inner::before {
  position: absolute;
  content: ' ';
  left: 100%;
  top: 1%;
  width: calc( var(--book-thickness) * 2 );
  height: 98%;
  transform: translate(-55%,0) rotateY( 90deg );
  background: linear-gradient( 
  90deg , #fff 0%, 
  hsl(0, 0%, 94%) 5%, #fff 10%, 
  hsl(0, 0%, 94%) 15%, #fff 20%, 
  hsl(0, 0%, 94%) 25%, #fff 30%, 
  hsl(0, 0%, 94%) 35%, #fff 40%, 
  hsl(0, 0%, 94%) 45%, #fff 50%, 
  hsl(0, 0%, 94%) 55%, #fff 60%, 
  hsl(0, 0%, 94%) 65%, #fff 70%, 
  hsl(0, 0%, 94%) 75%, #fff 80%, 
  hsl(0, 0%, 94%) 85%, #fff 90%, 
  hsl(0, 0%, 94%) 95%, #fff 100% 
  );
}

/* Rear Cover */
.book-3d__inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 1%;
  width: 100%;
  height: 100%;
  transform: translateZ( calc( var(--book-thickness) * -1 ) );
  background-color: var(--cover-color);
  border-radius: 0 2px 2px 0;
  box-shadow: -10px 0 50px 10px rgba(0,0,0, 0.3);
}

.book-3d__cover {
  display:block;
  width:100%;
  height: auto;
  border-radius: 0px 2px 2px 0px;
  transform: translateZ( var(--book-thickness) );
  box-shadow: 5px 5px 20px rgba(0,0,0, 0.1);
}


/**
 * Pen Specific Styles
 * ===================
*/

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 分类区块的“查看全部”链接（分页优化新增，不改变卡片与 3D 书籍的任何样式） */
.category-more {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.35rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #004098;
  border: 1px solid rgba(0, 64, 152, 0.35);
  border-radius: 5px;
  transition: 0.2s;
}

.category-more:hover {
  color: #004098;
  background: rgba(0, 64, 152, 0.08);
  border-color: rgba(0, 64, 152, 0.6);
}

/* =========================================================================
 * 胶囊分类导航(一级分类 + 二级分类)
 * 样式取自页面排版参考稿
 * ====================================================================== */

.category-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  color: #334155;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-pill-btn:hover {
  color: #0d6efd;
  background-color: #f8fafc;
  border-color: #0d6efd;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(13, 110, 253, 0.12);
}

/* 一级分类 Badge */
.pill-badge {
  display: inline-block;
  padding: 2px 9px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 20px;
  background-color: #f1f5f9;
  color: #64748b;
  transition: all 0.25s ease;
}

.category-pill-btn:hover .pill-badge {
  background-color: #0d6efd;
  color: #ffffff;
}

/* 一级分类 激活状态 */
.category-pill-btn.active {
  background: linear-gradient(135deg, #0d6efd, #0b5ed7);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.3);
}

.category-pill-btn.active .pill-badge {
  background-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* -------------------------------------------------------------------------
 * 二级分类容器与微胶囊(次视觉)
 * ---------------------------------------------------------------------- */

.sub-category-wrapper {
  background-color: #f8fafc;
  border: 1px solid #f0f3f6;
  position: relative;
  /* 顶部微小三角形挂钩视觉 */
  margin-top: 12px;
}

/* 二级子分类微胶囊样式 */
.sub-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  color: #475569;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.sub-pill-btn:hover {
  color: #0d6efd;
  border-color: #93c5fd;
  background-color: #eff6ff;
  transform: translateY(-1px);
}

/* 二级分类 Badge */
.sub-pill-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  background-color: #f1f5f9;
  color: #94a3b8;
}

.sub-pill-btn:hover .sub-pill-badge {
  background-color: #dbeafe;
  color: #1d4ed8;
}

/* 二级分类 激活/选中状态(当前所在页) */
.sub-pill-btn.active {
  background-color: #0d6efd;
  color: #ffffff;
  border-color: #0d6efd;
}

.sub-pill-btn.active .sub-pill-badge {
  background-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}


.brand-section-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-color: #f0f3f6 !important;
}

.brand-section-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

/* =========================================================================
 * 书架搁板
 *
 * 原来每张卡片各自内联一张 852×130 的「透视木板」图(no-repeat center)：
 * 卡片只有 ~380px 宽 → 图片左右各被裁掉一半;竖向上投影也被卡片边界裁掉;
 * background-size:auto 是固定像素,完全不随屏幕自适应。
 * 更根本的问题是——那张图是一整块带「板子端头」的透视图,无法横向平铺,
 * 所以相邻卡片永远各显示一整块板,接不成一条书架。
 *
 * 现在改成:每张卡片底部用 CSS 画一条贯通卡片宽度的搁板。
 * 卡片之间没有间隙(Bootstrap 的 gutter 被主题的 .row>[class*='col-']{padding:0} 抵消了),
 * 因此同一排卡片的搁板会首尾相接,自动连成一条完整的书架。
 *
 * 关键约束:所有纹理必须「只沿 y 方向变化」,横向完全均匀。
 * 这样每张卡片渲染出的像素完全相同,卡片边界处不可能出现纹理跳变,
 * 相邻卡片的阴影也不会在边界叠加出竖线(所以这里不能用 box-shadow)。
 * ====================================================================== */

.book-shelf {
  position: absolute;
  left: 0;
  right: 0;

  /* 定位基准是最近的定位祖先 —— index.php 里给 .background-wrapper 设了
     position:relative,也就是「书籍区域」本身。
     所以 100% 就是书籍的底边,搁板从书底开始向下画。 */
  top: 100%;

  /* 板厚固定:真实搁板的厚度不随长度变化,固定值在各断点之间也更一致。
     52px 与原来那张图被裁切后呈现的厚度接近。 */
  height: 52px;

  pointer-events: none;

  /* 两端收口开关(0 或 1),由下面的媒体查询按「每排第几张」打开。
     板身画在 ::before 上,这里只是定位容器。 */
  --end-l: 0;
  --end-r: 0;
}

/* 阴影:必须是「只沿 y 变化」的渐变。
   如果改用 box-shadow,相邻两张卡片的阴影会在边界处叠加变深,形成竖直接缝。 */
.book-shelf::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 55%;
  background: linear-gradient(180deg,
    rgba(54, 32, 8, 0.28) 0%,
    rgba(54, 32, 8, 0.12) 45%,
    rgba(54, 32, 8, 0) 100%);
}

/* -------------------------------------------------------------------------
 * 搁板两端收口
 *
 * 搁板是「每张卡片一条、首尾相接」拼成一整排的,如果每条都收口,
 * 一排就会变成三块断开的小板。所以只有**每排的第一张和最后一张**卡片
 * 才画端头,中间那些保持连续。
 *
 * 端头由三样东西叠出来:
 *   ① 端面:板子被切断的那一面,整条竖直的暗面(下半更深)
 *   ② 转角:以靠外的上角为圆心的径向暗部,让台面在末端"转过去"
 *   ③ 高光:端面与板面之间的一道亮线,把两个面分开
 * 只压一条竖线是不够的 —— 那样看起来只是"画了条带子",而不是板子结束。
 *
 * 用 --end-l / --end-r 两个开关(0 或 1)控制,这样「一排只有一张卡片」
 * (既是第一张也是最后一张)时两端能同时生效,不会互相覆盖。
 *
 * 板身画在 ::before、投影画在 ::after,两者分开:
 * 这样以后要单独裁切/遮罩板身(比如做透视收窄)时,不会连投影一起裁掉。
 * ---------------------------------------------------------------------- */

.book-shelf::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* 两端的外圆角,让板端不是生硬的直角 */
  border-top-left-radius: calc(var(--end-l) * 6px);
  border-bottom-left-radius: calc(var(--end-l) * 6px);
  border-top-right-radius: calc(var(--end-r) * 6px);
  border-bottom-right-radius: calc(var(--end-r) * 6px);

  background-image:
    /* ① 左端面 + 转角 */
    radial-gradient(72px 160% at 0% 14%,
      rgba(36, 19, 2, 0.90) 0px,
      rgba(36, 19, 2, 0.70) 14px,
      rgba(36, 19, 2, 0.36) 32px,
      rgba(36, 19, 2, 0.13) 50px,
      rgba(36, 19, 2, 0) 72px),
    /* ② 右端面 + 转角 */
    radial-gradient(72px 160% at 100% 14%,
      rgba(36, 19, 2, 0.90) 0px,
      rgba(36, 19, 2, 0.70) 14px,
      rgba(36, 19, 2, 0.36) 32px,
      rgba(36, 19, 2, 0.13) 50px,
      rgba(36, 19, 2, 0) 72px),
    /* ③ 左端高光:端面与板面的转折 */
    linear-gradient(90deg,
      rgba(255, 250, 240, 0) 0px,
      rgba(255, 250, 240, 0.52) 7px,
      rgba(255, 250, 240, 0) 14px),
    /* ④ 右端高光 */
    linear-gradient(270deg,
      rgba(255, 250, 240, 0) 0px,
      rgba(255, 250, 240, 0.52) 7px,
      rgba(255, 250, 240, 0) 14px),
    /* ⑤ 台面与立面的分界:一条硬边暗线。
       太软的话两个面会糊成一片曲面,整块板就变成一根"圆棒" */
    linear-gradient(180deg, rgba(66, 38, 10, 0.72), rgba(66, 38, 10, 0.72)),
    /* ⑥ 木纹(细) */
    repeating-linear-gradient(180deg,
      rgba(110, 68, 26, 0) 0px, rgba(110, 68, 26, 0.34) 1.2px,
      rgba(110, 68, 26, 0.08) 2.4px, rgba(110, 68, 26, 0) 3.6px,
      rgba(255, 246, 228, 0) 5.2px, rgba(255, 246, 228, 0.24) 6.4px,
      rgba(255, 246, 228, 0) 8px, rgba(110, 68, 26, 0) 10px,
      rgba(110, 68, 26, 0.42) 12px, rgba(110, 68, 26, 0.10) 14.5px,
      rgba(110, 68, 26, 0) 17px, rgba(255, 246, 228, 0) 19px,
      rgba(255, 246, 228, 0.18) 21px, rgba(255, 246, 228, 0) 23px,
      rgba(110, 68, 26, 0) 26px, rgba(110, 68, 26, 0.26) 28px,
      rgba(110, 68, 26, 0) 31px),
    /* ⑦ 木纹(粗) */
    repeating-linear-gradient(180deg,
      rgba(96, 56, 18, 0) 0px, rgba(96, 56, 18, 0.26) 6px,
      rgba(96, 56, 18, 0) 14px, rgba(255, 248, 232, 0.20) 21px,
      rgba(255, 248, 232, 0) 30px, rgba(96, 56, 18, 0) 41px,
      rgba(96, 56, 18, 0.16) 55px, rgba(96, 56, 18, 0) 67px),
    /* ⑧ 前立面 */
    linear-gradient(180deg,
      #eedbba 0%, #dfbe91 8%, #c69b65 30%,
      #ac7f48 60%, #8c6234 84%, #69471f 95%, #523616 100%),
    /* ⑨ 台面景深:刻意做得很平。
       台面是一个朝上的平面,本来就该接近均匀受光;
       落差一大(后暗前亮)立刻会被读成圆柱反光 */
    linear-gradient(180deg,
      rgba(58, 34, 9, 0.24) 0%,
      rgba(58, 34, 9, 0.08) 34%,
      rgba(58, 34, 9, 0) 62%),
    /* ⑩ 基色 */
    linear-gradient(180deg, #b1874f 0%, #c3985f 50%, #d2ab77 100%);

  background-size:
    calc(var(--end-l) * 72px) 100%,
    calc(var(--end-r) * 72px) 100%,
    calc(var(--end-l) * 14px) 100%,
    calc(var(--end-r) * 14px) 100%,
    100% 2px, 100% 100%, 100% 100%, 100% 36%, 100% 64%, 100% 100%;
  background-position:
    left center, right center, left center, right center,
    0 64%, center, center, bottom, top, center;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
}

/* 桌面/平板:col-md-4 → 每排 3 张 */
@media (min-width: 768px) {
  .row > .col-6:nth-child(3n + 1) .book-shelf { --end-l: 1; }
  .row > .col-6:nth-child(3n) .book-shelf,
  .row > .col-6:last-child .book-shelf { --end-r: 1; }
}

/* 手机:col-6 → 每排 2 张 */
@media (max-width: 767.98px) {
  .row > .col-6:nth-child(2n + 1) .book-shelf { --end-l: 1; }
  .row > .col-6:nth-child(2n) .book-shelf,
  .row > .col-6:last-child .book-shelf { --end-r: 1; }
}

/* 窄屏上书本变小,搁板按比例会过薄,给一个下限并稍稍加厚 */
/* 窄屏上书本本身变小(卡片宽度不足 250px),搁板同步减薄 */
@media (max-width: 767.98px) {
  .book-shelf {
    height: 32px;
  }
}