/* ================== Layout 整体布局 ================== */
.ka-calendar {
  max-width: 1000px;
  margin: 0 auto;
  color: #fff; /* 全局白色文字 */
  padding: 60px 40px;
  text-align: center;
}
.title {
    font-size: 50px;
    color: #b2b297;
}
/* ================== Filter / Navigation 筛选按钮 ================== */
.ka-filter {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  font-size: 20px;
  justify-content: center;
  flex-wrap: wrap; /* 手机端自动换行 */
}

.ka-filter a {
  cursor: pointer;
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;

}

/* 筛选按钮悬停效果 */
.ka-filter a:hover {
  background: transparent;

	color:#fff
}

/* 筛选按钮选中状态 */
.ka-filter a.active {
    font-weight: 800;
    border: 1px solid #ebebe0;
    background: #ebebe0;
    color: #1a1264;
    padding: 8px 18px;
    border-radius: 50px;

}

/* ================== Month Title 标题 ================== */
.ka-title{
     font-size: 50px;
        color: #fff;
}
.ka-title,
.calendar-month-title {
  font-size: 40px;
  margin-bottom: 16px;
  letter-spacing: .08em;
  cursor: pointer;

}

/* 标题悬停效果 */
.ka-title:hover,
.calendar-month-title:hover {

  transform: scale(1.05);
}

/* ================== List 列表容器 ================== */
.ka-list {
  border-top: 1px solid rgba(255,255,255,0.2);
}

/* ================== Item 单个事件项 ================== */
.ka-item {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  padding: 40px 0;
  border-bottom: 2px solid rgba(255,255,255,0.2);
  align-items: center;
  transition: all 0.3s ease;
}

/* ================== Date 日期：年月小字单行显示 + 垂直排版 ================== */
.ka-date {
  font-weight: 600;
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column; /* 大数字在上、年月在下 垂直排版 */
  align-items: flex-start; /* 左对齐 */
  line-height: 1;
  width: 100%;
  height: 100%;
  justify-content: center; /* 垂直居中，匹配布局 */
  gap: 2px; /* 大数字和年月的小间距，更紧凑 */
}
/* 大数字日期 */
.ka-date-day {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px; /* 数字和年月的间距*/
}
/* 小字年月 - 核心：强制单行显示，不换行 */
.ka-date-month {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap; /* 关键：禁止换行，年月始终单行 */
}
/* 日期容器：水平居中（大数字+年月都居中） */
.ka-date {
  font-weight: 600;
  color: #fff;
  text-align: center; /* center实现整体水平居中 */
  display: flex;
  flex-direction: column; /* 大数字在上、年月在下 垂直排版 */
  align-items: center; /* 配合text-align，确保子元素也居中 */
  line-height: 1;
  width: 100%;
  height: 100%;
  justify-content: center; /* 垂直居中，匹配布局 */
}

/* ================== 事件名称 & 链接 样式 ================== */
.ka-name {
  font-size: 20px;
  font-weight: 600; 

  transition: all 0.3s ease;
  transform: scale(1);
  color: #fff;
}
.ka-link a {
  text-decoration: underline;
  font-size: 20px;
  color: #fff;
  transition: all 0.3s ease;
  transform: scale(1);
  display: inline-block; /* 支持缩放动画 */
}

/* ================== 全局悬停交互（保留原有效果） ================== */
.ka-item:hover .ka-date,
.ka-item:hover .ka-date-day,
.ka-item:hover .ka-date-month {

  transition: all 0.3s ease;
}
.ka-item:hover .ka-name {

  transform: scale(1.06);
}
.ka-link a:hover {

  transform: scale(1.1);
	color:#fff
}

/* ================== 内容分隔/间距 ================== */
.ka-item > * {
  position: relative;
}
.ka-item > *:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  width: 1px;
  background: rgba(255,255,255,0.3);
}
.ka-item > * {
  padding: 0 60px;
}
.ka-item > *:first-child {
  padding-left: 0;
}
.ka-item > *:last-child {
  padding-right: 0;
}
.ka-title, .calendar-month-title {
    font-size: 20px;
    margin: 12px;
    color: #ffffff4f;
}
/* ================== 手机端完整适配（同步保留年月单行） ================== */
@media (max-width: 768px) {
  .ka-calendar {
    padding: 30px 20px;
  }
  .title {
    font-size: 36px;
  }
  /* 筛选按钮适配 */
  .ka-filter {
    font-size: 14px;
    gap: 12px;
    margin-bottom: 20px;
  }
  .ka-filter a {
    padding: 6px 12px;
  }
  .ka-filter a.active {
	  border:1px solid #fff;
    padding: 10px 24px;
  }
  /* 标题适配 */
  .ka-title {
    font-size: 24px;
  }
  .ka-title, .calendar-month-title {
    font-size: 20px;
    margin: 12px;
  }
  /* 事件项适配 */
  .ka-item {
    grid-template-columns: 70px 1fr 70px;
    padding: 20px 0;
  }
  /* 手机端日期适配 - 保留单行 */
  .ka-date-day {
    font-size: 24px;
  }
  .ka-date-month {
    font-size: 12px;
    white-space: nowrap; /* 手机端也强制年月单行 */
  }
  /* 文字和链接适配 */
  .ka-name {
    font-size: 15px;
    font-weight: 500;
  }
  .ka-link a {
    font-size: 14px;
  }
  /* 间距和分隔线适配 */
  .ka-item > * {
    padding: 0 15px;
  }
  .ka-item > *:not(:last-child)::after {
    right: -7px;
    height: 30px;
  }
}