.top-bar {
  background-color: skyblue;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  position: relative; /* 添加这行 */
  z-index: 10;         /* 保证浮层显示在最上层 */
}

.top-inner {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  height: 60px;
}

.nav-buttons {
  display: flex;
  gap: 20px;
  position: relative;
}

.nav-buttons a,
.dropbtn {
  color: black;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  font-family: sans-serif;
}

/* 鼠标悬停时样式 */
.nav-buttons a:hover,
.dropbtn:hover {
  color: blue;
  text-decoration: underline;
}
.dropbtn {
  font-size: 20px;
  font-weight: bold;
  padding: 6px 0;
  cursor: pointer;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;          /* 关键：从文档流中脱离 */
  top: 100%;                   /* 紧贴下方展开 */
  left: 0;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1000;               /* 保证浮在其它元素上 */
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  display: block;
  padding: 10px 16px;
  color: black;
  text-decoration: none;
  font-size: 20px;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* 教练介绍容器：两张卡片并排显示 */
.intro-container {
  width: 80%;
  margin: 50px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  flex-wrap: nowrap;  /* 禁止换行 */
}

.intro-header {
  width: 80%;
  margin: 40px auto 0 auto;
  display: flex;
  justify-content: space-between;
}

.coach-title {
  width: 80%;
  text-align: left;
  font-size: 30px;
  font-weight: bold;
  color: #0077cc;
  margin-bottom: 10px;
}


/* 每一个教练卡片 */
.intro-card {
  background-color: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  width: 48%; /* 保证两张卡片能并排 */
  padding: 20px;
  box-sizing: border-box;
}

/* 教练照片 */
.intro-card img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 20px;
}

/* 简介文字 */
.intro-text h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #333;
}

.intro-text p {
  margin: 0;
  font-size: 16px;
  color: #555;
}



.intro-message {
  width: 80%;
  margin: 4px auto 30px auto;
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: left;
}

.intro-message h2 {
  font-size: 28px;
  color: #0077cc;
  margin-bottom: 20px;
  text-align: center;
}


.coach-label {
  font-size: 20px;
  font-weight: bold;
  color: #0077cc;
  margin-bottom: 10px;
  text-align: center;
}

.dropdown {
  position: relative;
  display: inline-block;
}

/* 主按钮 */
.dropbtn {
  font-size: 20px;
  font-weight: bold;
  padding: 6px 0;
  cursor: pointer;
}

/* ========== 页脚样式 ========== */
.site-footer {
  background-color: #1a2230;
  color: white;
  padding: 40px 0;
  margin-top: 60px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 80%;
  margin: 0 auto;
  gap: 40px;
}

.footer-section h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.footer-section p {
  margin: 0;
  font-size: 15px;
}


/* Clean dropdown behavior: hidden by default, shown on hover */
.dropdown-content {
  display: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media (max-width: 768px) {

  /* ...你原来的内容不动... */

  /* 关键：别把 1V1 这种短标签拆成竖排 */
  .coach-tag {
    white-space: nowrap;
    word-break: keep-all;
  }

  /* 关键：名字太长时允许换行/换行后标签自然到下一行 */
  .name-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* 可选：让标签自己也能换到下一行，而不是被压成很窄 */
  .coach-tags {
    flex-wrap: wrap;
  }

  /* 你现在的 .badge 这段可以删掉，或者改成 .coach-tag */
}