/* ===== 基础重置 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "idolFont";
  src: url("/assets/font/IrisIdol.ttf") format("truetype");
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ===== 背景 ===== */
#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* ===== 漂浮图案 ===== */
.shape {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 50px;
    background:#1f1f1f;
}

/* logo */
.logo img{
    height:50px;
    transition:0.3s;
}

.logo img:hover{
    transform:scale(1.1);
}

/* 导航容器 */
.navbar nav{
    display:flex;
}

/* 导航链接 */
.navbar a{
    color:white;
    margin-left:20px;
    text-decoration:none;
    font-size:16px;
}
/* ===== 标题 ===== */
h1 {
  text-align: center;
  padding: 15px;
  font-size: clamp(14px, 5vw, 65px);
  background: linear-gradient(90deg, #7e6ca8, #e75bec);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  text-align: center;
  color: #999;
  font-size: 20px;
  margin-bottom: 15px;
}

/* 演唱会模块 */
.concert-module {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}
.module-title {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3436;
    margin-bottom: 20px;
    border-left: 6px solid #ff6fa5;
    padding-left: 16px;
}
/* 年份筛选 */
.year-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.year-filter button {
    padding: 8px 20px;
    border: 2px solid #ff6fa5;
    border-radius: 30px;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.year-filter button.active {
    background: #ff6fa5;
    color: #fff;
    border-color: #ff6fa5;
}
.year-filter button:hover {
    background: #ff6fa5;
    color: #fff;
}
/* 月份导航 */
.month-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}
.month-nav span {
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 20px;
    background: #ff6fa5;
    transition: 0.2s;
}
.month-nav span:hover {
    background: #ff6fa5;
}
.month-nav span.active {
    background: #ffb199;
    color: #fff;
}
/* 活动卡片网格 */
.concert-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.concert-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    padding: 20px;
    transition: 0.3s;
    border-left: 4px solid #ff6fa5;
}
.concert-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(108,92,231,0.15);
}
.concert-card .date {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d3436;
    margin-bottom: 6px;
}
.concert-card .title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3436;
    margin-bottom: 6px;
}
.concert-card .time-location {
    font-size: 0.9rem;
    color: #636e72;
    margin-bottom: 10px;
}
.concert-card .detail-link {
    display: inline-block;
    padding: 6px 16px;
    background: #ff6fa5;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.2s;
}
.concert-card .detail-link:hover {
    background: #ffb199;
}

.concert-card .concert-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.concert-card .concert-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.concert-card:hover .concert-image img {
    transform: scale(1.02);
}
/* 响应式 */
@media (max-width: 600px) {
    .concert-list {
        grid-template-columns: 1fr;
    }
}

/* ===== Footer ===== */
footer {
  background: #1f1f1f;
  color: white;
  text-align: center;
  padding: 20px;
}

/* ========================= */
/* ===== 平板及以上 ===== */
/* ========================= */

@media (min-width: 600px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}
}

/* ========================= */
/* ===== 大屏（PC） ===== */
/* ========================= */

@media (min-width: 768px) {
.navbar{
        flex-direction:column;        /* 👈 变竖排 */
        align-items:center;
    }

    .navbar nav{
        flex-wrap:wrap;              /* 👈 允许换行 */
        justify-content:center;
        margin-top:10px;
    }

    .navbar a{
        margin:6px 10px;             /* 👈 改成上下间距 */
        font-size:14px;
    }

    .logo img{
        height:40px;                 /* 👈 小屏缩小一点 */
    }

}

/* ========================= */
/* ===== 更大屏 ===== */
/* ========================= */

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 20px;
  }
}