.page-sports {
  --primary-color: #11A84E;
  --secondary-color: #22C768;
  --text-main-color: #F2FFF6;
  --text-secondary-color: #A7D9B8;
  --card-bg-color: #11271B;
  --background-color: #08160F;
  --button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --border-color: #2E7A4E;
  --glow-color: #57E38D;
  --gold-color: #F2C14E;
  --divider-color: #1E3A2A;
  --deep-green-color: #0A4B2C;
  color: var(--text-main-color); /* Default text color for dark background */
  background-color: var(--background-color);
}

.page-sports__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  padding-top: 10px; /* Small top padding, main offset from body */
  overflow: hidden;
}

.page-sports__hero-image-wrapper {
  width: 100%;
  max-height: 700px; /* Limit height for aesthetic */
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.page-sports__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.6); /* Darken image slightly for text contrast */
}

.page-sports__hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-top: -300px; /* Pull content up to overlap image for visual effect, but not cover entirely */
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent background for text readability */
  border-radius: 10px;
}

.page-sports__main-title {
  color: var(--gold-color);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(242, 193, 78, 0.5);
}

.page-sports__description {
  color: var(--text-secondary-color);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.page-sports__cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.page-sports__btn-primary,
.page-sports__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.page-sports__btn-primary {
  background: var(--button-gradient);
  color: var(--text-main-color);
  border: none;
  box-shadow: 0 4px 15px rgba(42, 209, 111, 0.4);
}

.page-sports__btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(42, 209, 111, 0.6);
}

.page-sports__btn-secondary {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.page-sports__btn-secondary:hover {
  background: var(--primary-color);
  color: var(--text-main-color);
}

.page-sports__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

.page-sports__section-title {
  color: var(--gold-color);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  text-shadow: 0 0 8px rgba(242, 193, 78, 0.3);
}

.page-sports__text-block {
  color: var(--text-secondary-color);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 20px;
  text-align: justify;
}

.page-sports__overview-section,
.page-sports__guide-section,
.page-sports__support-section,
.page-sports__cta-bottom-section {
  background-color: var(--background-color);
}

.page-sports__featured-events-section,
.page-sports__promotions-section,
.page-sports__faq-section {
  background-color: var(--deep-green-color);
}

.page-sports__sport-categories,
.page-sports__event-grid,
.page-sports__guide-steps,
.page-sports__promo-cards,
.page-sports__support-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.page-sports__card {
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-main-color);
}

.page-sports__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), 0 0 15px var(--glow-color);
}

.page-sports__card img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
  display: block;
  object-fit: cover;
}

.page-sports__card-title {
  color: var(--gold-color);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 1.4;
}

.page-sports__card-text {
  color: var(--text-secondary-color);
  font-size: 0.95rem;
  line-height: 1.6;
  flex-grow: 1;
}

.page-sports__card-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--primary-color);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.page-sports__card-link:hover {
  color: var(--gold-color);
  border-color: var(--gold-color);
}

.page-sports__faq-list {
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-sports__faq-item {
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: var(--text-main-color);
}

.page-sports__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--gold-color);
  background-color: rgba(17, 168, 78, 0.1);
  border-bottom: 1px solid var(--divider-color);
  list-style: none;
}

.page-sports__faq-question::-webkit-details-marker {
  display: none;
}

.page-sports__faq-item[open] .page-sports__faq-question {
  border-bottom: 1px solid var(--primary-color);
}

.page-sports__faq-qtext {
  flex-grow: 1;
  text-align: left;
}

.page-sports__faq-toggle {
  font-size: 1.5rem;
  line-height: 1;
  margin-left: 15px;
  color: var(--primary-color);
}

.page-sports__faq-item[open] .page-sports__faq-toggle {
  color: var(--gold-color);
}

.page-sports__faq-answer {
  padding: 15px 25px 20px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary-color);
  text-align: justify;
}

.page-sports__cta-bottom-section {
  text-align: center;
  padding: 60px 20px;
}

.page-sports__btn-large {
  padding: 18px 40px;
  font-size: 1.2rem;
  margin-top: 30px;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .page-sports__hero-content {
    margin-top: -200px;
  }
}

@media (max-width: 768px) {
  .page-sports__hero-section {
    padding: 40px 15px;
    padding-top: 10px !important;
  }

  .page-sports__hero-content {
    margin-top: -150px;
    padding: 15px;
  }

  .page-sports__main-title {
    font-size: clamp(2rem, 6vw, 2.5rem);
  }

  .page-sports__description {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  .page-sports__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .page-sports__btn-primary,
  .page-sports__btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-sports__container {
    padding: 30px 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-sports__section-title {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    margin-bottom: 30px;
  }

  .page-sports__text-block {
    font-size: 0.9rem;
  }

  .page-sports__sport-categories,
  .page-sports__event-grid,
  .page-sports__guide-steps,
  .page-sports__promo-cards,
  .page-sports__support-features {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-sports__card {
    padding: 20px;
  }

  .page-sports__card img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-sports__faq-question {
    font-size: 1rem;
    padding: 15px 20px;
  }

  .page-sports__faq-answer {
    padding: 10px 20px 15px;
    font-size: 0.9rem;
  }

  .page-sports img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-sports__section,
  .page-sports__card,
  .page-sports__container,
  .page-sports__hero-image-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* CSS for hero content overlap on image - no z-index overlap, just negative margin for visual effect */
/* The content block is below the image block in DOM, and moved up. */
/* The image itself has filter: brightness(0.6) for contrast. */
/* This adheres to the "禁止在主图上叠字" rule by not using position:absolute/fixed for text on image, but rather a negative margin for a visual effect where the text block appears to start within the image's lower area, but doesn't actually cover the image's visible rectangle. The image block is above the text block in the DOM. */