/* ====================================================== */
/* ========== ✨【核心修改】全新视频中心样式 v8 ========== */
/* ====================================================== */
.video-section {
    padding: 5rem 0;
    background-color: #121212;
}
.title-wrapper {
    text-align: center;
    margin-bottom: 3rem;
}
.section-title {
    display: inline-block;
    position: relative;
    font-size: 2rem; /* 稍作调整以匹配教育指南标题 */
    color: #f5f5f5;
    padding-bottom: 0.5rem;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #ff8a00;
}
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.video-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    aspect-ratio: 4 / 3;
}
.video-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.card-background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.7);
    transform: scale(1.2);
    z-index: 1;
}
.card-content {
    position: relative;
    height: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
}
.video-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    margin: 0;
}
.play-button {
    position: relative;
    align-self: flex-end;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: background-color 0.3s ease;
    padding: 0; /* 确保伪元素居中 */
}
.video-item:hover .play-button {
    background-color: rgba(255, 138, 0, 0.8);
}
.play-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #ffffff;
}
.video-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(-30deg);
    z-index: 3;
    transition: left 0.8s ease-in-out;
}
.video-item:hover::before {
    left: 150%;
}
/* ====================================================== */
/* ========== ✨ 视频模态框 (Modal) 样式 ========== */
/* ====================================================== */
.video-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.video-modal.modal-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.video-modal-content { position: relative; width: 90%; max-width: 960px; aspect-ratio: 16 / 9; }
.video-modal-content video { width: 100%; height: 100%; border-radius: 8px; }
.close-button { position: absolute; top: -45px; right: -5px; background: none; border: none; color: white; cursor: pointer; line-height: 1; padding: 5px; transition: transform 0.2s ease; }
.close-button:hover { transform: scale(1.1); }


/* ====================================================== */
/* ========== 教育指南样式 (Education Guides) ========== */
/* ====================================================== */
:root{
  --edu-bg: #0b0b0b;
  --card-bg: rgba(255,255,255,0.02);
  --card-border: rgba(255,255,255,0.08);
  --accent: #ffb400;
  --muted: #b3b3b3;
  --title-color: #f5f5f5;
  --max-width: 1200px;
}
.education-guides{
  background: var(--edu-bg);
  color: var(--title-color);
  padding: 56px 18px;
}
.edu-container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}
/* 使用了 .title-wrapper 和 .section-title 通用样式，这里无需重复定义标题 */
.edu-subtitle{
  margin: 14px 0 40px;
  text-align: center;
  color: var(--muted);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.edu-grid{
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media(min-width:700px){
  .edu-grid{ grid-template-columns: repeat(2,1fr); }
}
@media(min-width:1000px){
  .edu-grid{ grid-template-columns: repeat(3,1fr); }
}
.edu-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
  display: flex; /* 使用 flex 布局 */
  flex-direction: column;
  justify-content: space-between; /* 使内容上下分布 */
  text-decoration: none; /* 去除链接下划线 */
}
.edu-card:hover{
  border-color: var(--accent);
  box-shadow: 0 0 25px rgba(255,180,0,0.15);
  transform: translateY(-6px);
}
.edu-card-title{
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--title-color);
}
.edu-card-text{
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 18px;
  flex-grow: 1; /* 让文本区域占据多余空间 */
}
.edu-link{
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block; /* 确保它像按钮一样 */
  margin-top: auto; /* 确保链接总是靠下 */
}
.edu-link:hover{ color: #ffd45c; }