/* past.css — styles unique to the Past Events page
 *
 * 说明：
 * 1) 本文件已去重与合并规则；仅保留一处 .gallery-img 高度定义（桌面 220px / 移动 180px）。
 * 2) 折叠逻辑：只有当容器拥有 .is-collapsible 时才会限制高度与添加渐隐遮罩；
 *    该类名由 JS 根据“是否超过3行”动态添加/移除。
 * 3) HTML 对应要求（重要）：
 *    - 图片网格外需有 <div class="gallery-collapsible"> 包裹；
 *    - “更多”按钮必须在该容器内部：<button class="gallery-more-btn">更多</button>
 *    - 之前 HTML 中多余的 </section> 和多余的 </div> 已被删除（此处仅保留注释说明，不需 CSS 处理）。
 */

/* ========== 标题/通用区块 ========== */
.video-section h3 {
  text-align: center;
  margin: 2rem 0 1rem;
  color: var(--primary-color);
}

/* 往届回顾区块 */
.year-section { margin-bottom: 4rem; }

.year-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--primary-color), #34495e);
  color: #fff;
  border-radius: 8px;
}

.year-header h2 { font-size: 2rem; margin-bottom: 0.5rem; }

.year-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.event-description {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  line-height: 1.8;
}

/* 引用/高亮 */
.highlight-quote {
  background: linear-gradient(135deg, var(--secondary-color), #2980b9);
  color: #fff;
  padding: 2rem;
  border-radius: 8px;
  margin: 2rem 0;
  text-align: center;
  font-style: italic;
  font-size: 1.2rem;
}

/* 上下结构（图片网格 + 视频模块） */
.media-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ========== 图片网格 ========== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* 桌面固定4列（在较宽屏幕时） */
.gallery-grid.gallery-4col {
  grid-template-columns: repeat(4, 1fr);
}

/* 卡片与图片（统一高度只保留一处定义） */
.gallery-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.gallery-item:hover { transform: scale(1.03); }

.gallery-img {
  width: 100%;
  height: 220px;           /* 统一桌面卡片高度 */
  object-fit: cover;
  display: block;
}

/* 图片下方文字注释 */
.caption {
  text-align: center;
  font-size: 0.95rem;
  color: #555;
  background: #fff;
  padding: 0.6rem 0.4rem;
  line-height: 1.4;
}
.caption .lang-en { font-size: 0.85rem; color: #777; }

/* ========== 视频模块 ========== */
.video-section { margin: 3rem 0; }

.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.video-player { width: 100%; height: 450px; background: #000; border: none; display: block; }

.video-placeholder {
  width: 100%;
  height: 450px;
  background: linear-gradient(135deg, #2c3e50, #4a6491);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.video-placeholder:hover { background: linear-gradient(135deg, #34495e, #556b9b); }

.play-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.9; }
.video-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.video-description { opacity: 0.8; max-width: 80%; line-height: 1.5; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.video-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.video-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.video-thumbnail { width: 100%; height: 200px; object-fit: cover; cursor: pointer; }
.video-info { padding: 1.5rem; }
.video-card-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--primary-color); }
.video-card-description { color: #666; line-height: 1.5; margin-bottom: 1rem; }
.video-duration {
  display: inline-block;
  background: var(--primary-color);
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* 更大的视频布局（与 HTML 中 .video-container--xl / .video-player--xl 对应） */
.video-container--xl { width: 100%; max-width: 1280px; margin: 0 auto; }
.video-player--xl {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 12px;
}

/* ========== 折叠/展开（仅当需要时生效） ========== */
/* 对应 HTML：外层 <div class="gallery-collapsible"> 包裹图片网格与“更多”按钮 */
.gallery-collapsible {
  position: relative;
  --rows-visible: 3;     /* 只显示 3 行 */
  --gap: 1.5rem;         /* 必须与 .gallery-grid 的 gap 一致 */
  --card-h: 220px;       /* 必须与 .gallery-img 的高度一致（移动端在媒体查询里同步） */
  overflow: hidden;
}

/* 仅当容器具有 .is-collapsible（JS 动态添加）且未展开时，才限制高度 */
.gallery-collapsible.is-collapsible:not(.is-expanded) .gallery-grid {
  max-height: calc(var(--rows-visible) * (var(--card-h) + var(--gap)) - var(--gap));
  overflow: hidden;
}

/* 仅当需要折叠时显示渐隐遮罩（见上条选择器的同样条件） */
.gallery-collapsible.is-collapsible:not(.is-expanded)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4.5rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
  z-index: 1; /* 保持在按钮下面 */
}

/* 居中、更大、更醒目的“更多/收起”按钮（必须位于 .gallery-collapsible 内部） */
.gallery-more-btn {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 3;

  padding: 0.9rem 2.2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-more-btn:hover { transform: translateX(-50%) scale(1.05); box-shadow: 0 10px 22px rgba(0,0,0,0.3); }
.gallery-more-btn:active { transform: translateX(-50%) scale(0.98); }

/* ========== 响应式 ========== */
@media (max-width: 1200px) {
  .gallery-grid.gallery-4col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .gallery-grid.gallery-4col { grid-template-columns: repeat(2, 1fr); }

  /* 移动端卡片高度更低；注意同步 --card-h 以确保“仅显示3行”的计算准确 */
  .gallery-img { height: 180px; }
  .gallery-collapsible { --card-h: 180px; }

  .video-player, .video-placeholder { height: 250px; }
  .video-grid { grid-template-columns: 1fr; }

  .gallery-more-btn {
    padding: 0.7rem 1.8rem;
    font-size: 1rem;
  }
}

/* ========== HTML 注释对应的说明（仅注释，无样式） ==========
 * - HTML 中我们已移除一处多余的 </section> 以及多余的 </div></div>，以避免结构错位。
 * - 按钮需与网格共同置于 .gallery-collapsible 内部，避免被 overflow:hidden 裁切。
 * - 当图片总行数 <= 3 时，JS 不会给容器加 .is-collapsible：
 *     → 不裁切、不加遮罩、不显示“更多”按钮（因为也不需要）。
 * - 当图片总行数 > 3 时，JS 会加 .is-collapsible：
 *     → 裁切至 3 行 + 显示渐隐遮罩 + 显示“更多”按钮。
 */