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

  font-family: 'Arial', sans-serif;
  color: var(--color-text-main); /* Default text color for dark background */
  background-color: var(--color-background); /* Body background from shared.css */
}

/* Ensure proper spacing from fixed header */
/* body { padding-top: var(--header-offset); } is handled in shared.css, no need to duplicate here */

.page-sports__hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  padding-top: 10px; /* Small decorative top padding, not --header-offset */
  background-color: var(--color-background);
  overflow: hidden;
}

.page-sports__video-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px; /* Max width for the video container */
  margin: 0 auto;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-10px); /* Adjust slightly upwards */
  z-index: 1;
  box-sizing: border-box;
}

.page-sports__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

.page-sports__hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin-top: 40px;
  color: var(--color-text-main);
}

.page-sports__main-title {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text-main);
  margin-bottom: 20px;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}

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

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

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

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

.page-sports__btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 199, 104, 0.6);
}

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

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

.page-sports__btn-text {
  background: none;
  color: var(--color-primary);
  border: none;
  padding: 8px 15px;
  font-size: 0.9rem;
  text-decoration: underline;
}

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

.page-sports__btn-large {
  padding: 18px 40px;
  font-size: 1.1rem;
}

.page-sports__section {
  padding: 80px 20px;
  text-align: center;
}

.page-sports__dark-section {
  background-color: var(--color-background);
  color: var(--color-text-main);
}

.page-sports__light-bg {
  background-color: #0d1e16; /* A slightly lighter dark green for contrast */
  color: var(--color-text-main);
}

.page-sports__section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 20px;
  line-height: 1.3;
}

.page-sports__section-description {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 900px;
  margin: 0 auto 50px;
}

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

.page-sports__grid-3-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-sports__grid-2-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-sports__card {
  background-color: var(--color-card-bg);
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  color: var(--color-text-main);
}

.page-sports__card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--color-divider);
}

.page-sports__card-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 20px 20px 10px;
}

.page-sports__card-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 20px 20px;
  flex-grow: 1;
}

.page-sports__card .page-sports__btn-text {
  align-self: flex-start;
  margin: 0 20px 20px;
}

.page-sports__advantage-item {
  background-color: var(--color-card-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
}

.page-sports__advantage-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 20px;
}

.page-sports__advantage-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 15px;
}

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

.page-sports__promo-card {
  background-color: var(--color-card-bg);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
}

.page-sports__promo-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.page-sports__promo-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.page-sports__promo-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 15px;
}

.page-sports__promo-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-sports__promo-card .page-sports__btn-primary {
  align-self: flex-start;
}

.page-sports__cta-section {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--color-divider);
}

.page-sports__cta-text {
  font-size: 1.2rem;
  color: var(--color-text-main);
  margin-bottom: 30px;
}

.page-sports__step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-sports__step-item {
  background-color: var(--color-card-bg);
  border-radius: 12px;
  padding: 30px;
  text-align: left;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
}

.page-sports__step-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 15px;
}

.page-sports__step-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 10px;
}

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

.page-sports__tip-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
  margin: 50px auto 0;
  text-align: left;
}

.page-sports__tip-item {
  background-color: var(--color-card-bg);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
}

.page-sports__tip-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 10px;
}

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

.page-sports__faq-list {
  max-width: 900px;
  margin: 50px auto 0;
  text-align: left;
}

.page-sports__faq-item {
  background-color: var(--color-card-bg);
  border-radius: 12px;
  margin-bottom: 15px;
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
}

.page-sports__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-main);
  list-style: none;
}

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

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

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

.page-sports__faq-item[open] .page-sports__faq-toggle {
  content: '−';
}

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

.page-sports__faq-answer p {
  margin-bottom: 10px;
}

.page-sports__faq-answer p:last-child {
  margin-bottom: 0;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .page-sports__hero-section {
    padding: 40px 20px;
    padding-top: 10px;
  }
  .page-sports__main-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }
  .page-sports__hero-description {
    font-size: 1rem;
  }
  .page-sports__section {
    padding: 60px 20px;
  }
  .page-sports__section-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
  }
  .page-sports__grid-3-col, .page-sports__grid-2-col, .page-sports__step-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .page-sports__promo-card {
    flex-direction: column;
  }
  .page-sports__promo-image {
    height: 200px;
  }
}

@media (max-width: 768px) {
  .page-sports__hero-section {
    padding: 30px 15px;
    padding-top: 10px !important;
  }
  .page-sports__hero-content {
    margin-top: 20px;
  }
  .page-sports__main-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }
  .page-sports__hero-description {
    font-size: 0.95rem;
  }
  .page-sports__cta-buttons {
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding: 0 15px;
  }
  .page-sports__btn-primary,
  .page-sports__btn-secondary,
  .page-sports__btn-text,
  .page-sports__btn-large {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-sports__video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }
  .page-sports__video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-sports__section,
  .page-sports__card,
  .page-sports__container,
  .page-sports__advantage-item,
  .page-sports__promo-card,
  .page-sports__step-item,
  .page-sports__tip-item,
  .page-sports__faq-item {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

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

  .page-sports__card-image,
  .page-sports__promo-image {
    height: 180px;
  }

  .page-sports__section-description {
    margin-bottom: 30px;
  }

  .page-sports__faq-question {
    font-size: 1.1rem;
  }
  .page-sports__faq-toggle {
    font-size: 1.5rem;
  }
}

/* CSS for color contrast safety (dark background, light text) */
.page-sports {
  color: var(--color-text-main); /* #F2FFF6 */
}

.page-sports__dark-section {
  background-color: var(--color-background); /* #08160F */
  color: var(--color-text-main); /* #F2FFF6 */
}

.page-sports__light-bg {
  background-color: #0d1e16; /* A slightly lighter dark green for contrast */
  color: var(--color-text-main); /* #F2FFF6 */
}

.page-sports__card,
.page-sports__advantage-item,
.page-sports__promo-card,
.page-sports__step-item,
.page-sports__tip-item,
.page-sports__faq-item {
  background-color: var(--color-card-bg); /* #11271B */
  color: var(--color-text-main); /* #F2FFF6 */
}

.page-sports__main-title,
.page-sports__section-title,
.page-sports__card-title,
.page-sports__advantage-title,
.page-sports__promo-title,
.page-sports__step-title,
.page-sports__faq-question {
  color: var(--color-text-main); /* #F2FFF6 */
}

.page-sports__hero-description,
.page-sports__section-description,
.page-sports__card-text,
.page-sports__advantage-text,
.page-sports__promo-text,
.page-sports__step-text,
.page-sports__tip-text,
.page-sports__faq-answer {
  color: var(--color-text-secondary); /* #A7D9B8 */
}

.page-sports__step-number,
.page-sports__faq-toggle,
.page-sports__btn-secondary {
  color: var(--color-primary); /* #11A84E */
}

.page-sports__btn-primary {
  color: var(--color-text-main); /* #F2FFF6 */
}

/* Ensure content images meet minimum size requirements and no filter */
.page-sports img {
  min-width: 200px;
  min-height: 200px;
  filter: none; /* Absolutely no filter */
}

/* Ensure content area images do not have small fixed sizes in CSS */
.page-sports__card-image,
.page-sports__promo-image,
.page-sports__advantage-icon {
  /* These are already set to larger sizes and object-fit cover/contain */
  /* No fixed small width/height like 80px */
}

.page-sports__card-image {
  width: 100%;
  height: 200px; /* Example fixed height, can be auto with aspect ratio for more flexibility */
  object-fit: cover;
}

.page-sports__promo-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.page-sports__advantage-icon {
  width: 100px; /* This is an icon, but still above 200px overall size is preferred for content images */
  height: 100px;
  /* Re-evaluating this based on "minimum size must be at least 200x200 pixels".
     Advantage icons should be larger or removed if they are too small. 
     For now, I'll keep them at 100x100px assuming they are decorative *within* a larger block, 
     but if they are standalone, they must be >=200px. 
     The prompt states 'All images must be content display images, not decorative small icons' 
     and 'Any width or height less than 200 pixels is forbidden'. 
     Therefore, the 100x100px icons are problematic. I will increase their size to 200x200px.
  */
  width: 200px; /* Adjusted to meet minimum 200x200px requirement */
  height: 200px; /* Adjusted to meet minimum 200x200px requirement */
  margin: 0 auto 20px; /* Center if now larger */
}