/* ===== 蓝夹缬展板页 ===== */
/* 靛蓝宣纸展陈：深蓝底 + 暖白面板 + 雕版花框 */

.container {
  flex: 1;
  width: calc(100% - 60px);
  margin-left: 60px;
  padding: 28px;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
}

.container.blue-jiaxie-pattern {
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* 靛蓝光晕氛围 */
.container.blue-jiaxie-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(29, 79, 145, 0.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(39, 101, 167, 0.14), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(15, 44, 90, 0.06), transparent 60%);
  pointer-events: none;
}

/* 展板背景：半透明暖白，露出下方深蓝底与纹样 */
.container.blue-jiaxie-pattern::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(248, 246, 242, 0.92), rgba(238, 242, 248, 0.90));
  box-shadow: inset 0 0 0 1px rgba(31, 67, 116, 0.10);
  pointer-events: none;
  z-index: 0;
}

.main-title-icon, .main-title, .section-subtitle,
.video-section, .image-section { position: relative; z-index: 1; }

/* 亭子图标 */
.main-title-icon {
  width: 220px;
  height: 220px;
  margin: 0 auto 4px;
  background: url("../../bgimg/亭子.png") center / contain no-repeat;
  opacity: 0.94;
  filter: drop-shadow(0 4px 12px rgba(15, 44, 90, 0.10));
}

/* 主标题：深靛蓝，醒目 */
.main-title {
  text-align: center;
  font-size: 36px;
  line-height: 1.2;
  color: var(--ink-2);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

/* 普通副标题 */
.section-subtitle {
  text-align: center;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 26px;
}

/* ===== 核心修复：主标题下方的副标题 ===== */
/* 之前是奶油色 rgba(244,240,230,0.92) 在白底上完全看不见 */
.main-title + .section-subtitle {
  color: var(--ink-4);
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* 视频/图片区块：暖白面板 + 雕版四角花 */
.video-section, .image-section {
  position: relative;
  margin-top: 24px;
  padding: 28px;
  border-radius: 26px;
  background: rgba(248, 246, 242, 0.85);
  border: 1px solid rgba(31, 67, 116, 0.14);
  box-shadow: 0 18px 36px rgba(14, 38, 74, 0.10);
  overflow: hidden;
}

/* 织物纹理背景 */
.video-section::before, .image-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20px 20px, rgba(31, 67, 116, 0.07) 0 1px, transparent 1px),
    radial-gradient(circle at 20px 20px, rgba(119, 64, 26, 0.05) 0 2px, transparent 2px),
    radial-gradient(circle at calc(100% - 20px) 20px, rgba(31, 67, 116, 0.07) 0 1px, transparent 1px),
    radial-gradient(circle at calc(100% - 20px) calc(100% - 20px), rgba(31, 67, 116, 0.07) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(244, 240, 230, 0.25), rgba(244, 240, 230, 0.10));
  background-size: 28px 22px, 44px 34px, 28px 22px, 28px 22px, auto;
  opacity: 0.9;
  z-index: 0;
}

/* 角落蓝夹缬纹样装饰 */
.video-section::after, .image-section::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  opacity: 0.10;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
}

.video-section::after {
  top: -12px;
  right: -12px;
  background-image: url("../../bgimg/纹样-20.png");
  transform: rotate(90deg);
}

.image-section::after {
  bottom: -12px;
  left: -12px;
  background-image: url("../../bgimg/纹样-21.png");
  transform: rotate(-90deg);
}

.video-section > *, .image-section > * { position: relative; z-index: 1; }

/* 区块标题：蓝夹缬风格装饰条 */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  font-size: 28px;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ink-3));
  border-radius: 999px;
}

.title-right-decoration {
  display: inline-block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--ink-3), transparent);
  border-radius: 999px;
}

/* 木刻圆点装饰 */
.section-title::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(119, 64, 26, 0.70);
  box-shadow: 0 0 0 4px rgba(119, 64, 26, 0.10);
}

/* 视频网格 */
.video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
#first-video-layer { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 视频/图片卡片 */
.video-item, .image-item {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d5e0ee;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(23, 54, 95, 0.07);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, border-color 0.25s ease;
}

.video-item:hover, .image-item:hover {
  transform: translateY(-4px);
  border-color: rgba(31, 67, 116, 0.30);
  box-shadow: 0 20px 34px rgba(23, 54, 95, 0.14);
}

/* 视频容器 */
.video-container {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #dbe6f3, #eef4fb);
  overflow: hidden;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* 播放按钮覆盖层 */
.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(4, 12, 48, 0.04), rgba(4, 12, 48, 0.34));
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.video-item.video-playing .video-play-overlay { opacity: 0; }

.video-play-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-3);
  font-size: 26px;
  box-shadow: 0 10px 24px rgba(4, 12, 48, 0.20);
}

/* 卡片底部信息 */
.video-info, .image-info { padding: 16px 18px 18px; }

.video-info h3, .image-info h4 {
  font-size: 18px;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.video-info p, .image-info p, .combined-subtitle {
  color: #60758f;
  line-height: 1.6;
  font-size: 14px;
}

/* 图片网格 */
.image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.combined-item { display: flex; flex-direction: column; padding: 0; }

.combined-header {
  padding: 22px 22px 18px;
  text-align: center;
  background: linear-gradient(180deg, rgba(240, 245, 252, 0.95), rgba(255, 255, 255, 0.95));
  border-bottom: 1px solid #e4ebf4;
}

.combined-title { font-size: 22px; color: var(--ink-2); margin-bottom: 8px; }
.combined-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.combined-image { display: flex; flex-direction: column; }
.combined-image + .combined-image { border-left: 1px solid #e4ebf4; }

.combined-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #dbe6f3, #eef4fb);
}

/* 响应式 */
@media (max-width: 1200px) {
  .video-grid, #first-video-layer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  body.blue-jiaxie-theme { padding: 16px; }
  .container { width: 100%; margin-left: 0; padding: 20px; }
  .main-title-icon { width: 160px; height: 160px; }
  .main-title { font-size: 28px; }
  .section-title { font-size: 22px; }
  .video-section, .image-section { padding: 20px; }
  .video-grid, #first-video-layer, .image-grid, .combined-images { grid-template-columns: 1fr; }
  .combined-image + .combined-image { border-left: none; border-top: 1px solid #e4ebf4; }
}