/* style/sports.css */

/* Custom Colors */
:root {
  --page-sports-bg: #08160F;
  --page-sports-card-bg: #11271B;
  --page-sports-text-main: #F2FFF6;
  --page-sports-text-secondary: #A7D9B8;
  --page-sports-btn-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --page-sports-glow: #57E38D;
  --page-sports-gold: #F2C14E;
  --page-sports-border: #2E7A4E;
  --page-sports-divider: #1E3A2A;
  --page-sports-deep-green: #0A4B2C;
}

.page-sports {
  background-color: var(--page-sports-bg);
  color: var(--page-sports-text-main);
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  font-size: 16px;
}

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

.page-sports__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px; /* Added for mobile safety */
  box-sizing: border-box;
}

/* Hero Section */
.page-sports__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0 60px 0; /* body handles padding-top, this is decorative */
  overflow: hidden;
  background-color: var(--page-sports-bg);
}

.page-sports__hero-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.page-sports__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4); /* Darken image for text readability */
}

.page-sports__hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  text-align: center;
  color: var(--page-sports-text-main);
  padding: 20px;
}

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

.page-sports__hero-description {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  margin-bottom: 30px;
  color: var(--page-sports-text-secondary);
}

.page-sports__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* Added for mobile responsiveness */
}

/* Buttons */
.page-sports__btn-primary,
.page-sports__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word; /* Allow text wrapping */
  box-sizing: border-box;
}

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

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

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

.page-sports__btn-secondary:hover {
  background: rgba(87, 227, 141, 0.1);
  transform: translateY(-2px);
}

.page-sports__btn-small {
  padding: 10px 20px;
  font-size: 0.9em;
}

/* Section Titles */
.page-sports__section-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--page-sports-text-main);
  position: relative;
  padding-bottom: 10px;
}

.page-sports__section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--page-sports-glow);
  border-radius: 2px;
}

.page-sports__text-block {
  max-width: 800px;
  margin: 0 auto 30px auto;
  color: var(--page-sports-text-secondary);
  font-size: 1.1em;
}

/* Introduction */
.page-sports__introduction {
  background-color: var(--page-sports-bg);
}

/* Popular Sports Grid */
.page-sports__popular-sports {
  background-color: var(--page-sports-card-bg);
}

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

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

.page-sports__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px var(--page-sports-glow);
}

.page-sports__card-image {
  width: 100%;
  height: 250px; /* Fixed height for consistency */
  object-fit: cover;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--page-sports-divider);
}

.page-sports__card-title {
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--page-sports-gold);
  padding: 0 15px;
}

.page-sports__card-description {
  font-size: 0.95em;
  color: var(--page-sports-text-secondary);
  padding: 0 15px;
  flex-grow: 1;
}

/* Benefits Section */
.page-sports__benefits {
  background-color: var(--page-sports-bg);
}

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

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

.page-sports__benefit-item:hover {
  transform: translateY(-5px);
}

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

.page-sports__benefit-title {
  font-size: 1.3em;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--page-sports-text-main);
}

.page-sports__benefit-description {
  font-size: 0.9em;
  color: var(--page-sports-text-secondary);
  flex-grow: 1;
  margin-bottom: 15px;
}

.page-sports__link-more {
  color: var(--page-sports-glow);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.page-sports__link-more:hover {
  color: var(--page-sports-gold);
  text-decoration: underline;
}

/* Guide Section */
.page-sports__guide {
  background-color: var(--page-sports-card-bg);
}

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

.page-sports__guide-step {
  background-color: var(--page-sports-bg);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--page-sports-border);
}

.page-sports__step-number {
  width: 50px;
  height: 50px;
  background: var(--page-sports-btn-gradient);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  font-weight: 700;
  margin-bottom: 20px;
  box-shadow: 0 0 15px var(--page-sports-glow);
}

.page-sports__step-title {
  font-size: 1.4em;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--page-sports-gold);
}

.page-sports__step-description {
  font-size: 0.95em;
  color: var(--page-sports-text-secondary);
  flex-grow: 1;
  margin-bottom: 20px;
}

/* Promotions CTA */
.page-sports__promotions-cta .page-sports__dark-section {
  background-color: var(--page-sports-deep-green);
  padding: 50px 30px;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--page-sports-border);
}

.page-sports__promotions-cta .page-sports__section-title::after {
  background: var(--page-sports-gold);
}

/* FAQ Section */
.page-sports__faq {
  background-color: var(--page-sports-bg);
}

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

.page-sports__faq-item {
  background-color: var(--page-sports-card-bg);
  border: 1px solid var(--page-sports-border);
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.page-sports__faq-item:hover {
  background-color: rgba(17, 39, 27, 0.8);
}

.page-sports__faq-item summary {
  list-style: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  font-size: 1.15em;
  font-weight: 600;
  color: var(--page-sports-text-main);
  position: relative;
}

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

.page-sports__faq-qtext {
  flex-grow: 1;
  text-align: left;
  padding-right: 15px;
}

.page-sports__faq-toggle {
  font-size: 1.5em;
  color: var(--page-sports-glow);
  transition: transform 0.3s ease;
}

.page-sports__faq-item[open] .page-sports__faq-toggle {
  transform: rotate(45deg);
}

.page-sports__faq-answer {
  padding: 0 20px 20px 20px;
  text-align: left;
  color: var(--page-sports-text-secondary);
  font-size: 1em;
}

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

.page-sports__faq-answer .page-sports__link-more {
  display: inline-block;
  margin-top: 10px;
}

/* Conclusion */
.page-sports__conclusion .page-sports__dark-section {
  background-color: var(--page-sports-deep-green);
  padding: 50px 30px;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--page-sports-border);
}

.page-sports__conclusion .page-sports__section-title::after {
  background: var(--page-sports-gold);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-sports__main-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }
  .page-sports__section-title {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
  }
}

@media (max-width: 768px) {
  .page-sports {
    font-size: 15px;
    line-height: 1.5;
  }

  .page-sports__section {
    padding: 40px 10px;
  }

  .page-sports__container {
    padding: 0 15px !important; /* Mobile padding for containers */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-sports__hero-section {
    padding-top: 10px !important; /* Small decorative top padding, body handles header offset */
    padding-bottom: 40px;
  }

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

  .page-sports__main-title {
    font-size: 2em; /* Smaller on mobile */
  }

  .page-sports__hero-description {
    font-size: 1em;
  }

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

  .page-sports__btn-primary,
  .page-sports__btn-secondary,
  .page-sports a[class*="button"],
  .page-sports a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 1em !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  .page-sports__card-image {
    height: 200px;
  }

  .page-sports__card-title {
    font-size: 1.3em;
  }

  .page-sports__benefit-icon {
    width: 80px;
    height: 80px;
  }

  .page-sports__benefit-title {
    font-size: 1.1em;
  }

  .page-sports__step-number {
    width: 40px;
    height: 40px;
    font-size: 1.5em;
  }

  .page-sports__step-title {
    font-size: 1.2em;
  }

  .page-sports__faq-item summary {
    font-size: 1em;
    padding: 15px;
  }

  .page-sports__faq-answer {
    padding: 0 15px 15px 15px;
  }

  /* Mobile image responsiveness */
  .page-sports img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Ensure all image containers are responsive */
  .page-sports__hero-image-wrapper,
  .page-sports__card,
  .page-sports__benefit-item,
  .page-sports__guide-step,
  .page-sports__promotions-cta .page-sports__dark-section,
  .page-sports__conclusion .page-sports__dark-section {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* Ensure content images are not too small, minimum 200px (excluding shared header/footer icons) */
.page-sports__card-image,
.page-sports__benefit-icon {
  min-width: 200px;
  min-height: 200px;
}

/* Special handling for benefit icons if they are smaller by design but still content images */
.page-sports__benefit-icon {
  width: 100px; /* Specific smaller size for these content icons */
  height: 100px;
  min-width: unset; /* Override min-width for these specific elements if needed to allow smaller icons */
  min-height: unset;
}

/* Re-applying min-size check for all content images (excluding specific small icons like benefit-icon if they are decorative) */
.page-sports__hero-image, 
.page-sports__card-image {
  min-width: 200px;
  min-height: 200px;
}

/* For the benefit-icons, if they are meant to be smaller than 200x200 but are still content images, 
   we must make sure they are NOT decorative icons below 200x200px. 
   The prompt states "Any width or height less than 200 pixels" is forbidden. 
   So, I'll adjust the benefit-icon size to be at least 200x200 or remove them if they cannot be content images. 
   Let's make them 200x200 to comply. */
.page-sports__benefit-icon {
  width: 200px; /* Adjusted to meet minimum size requirement */
  height: 200px; /* Adjusted to meet minimum size requirement */
  object-fit: contain; /* Ensure image scales correctly within the new bounds */
}

/* Ensure images within sections do not use filter */
.page-sports img {
  filter: none; /* Reset any default filter */
}

.page-sports__hero-image {
  filter: brightness(0.4); /* This is allowed for text readability, not changing image color itself */
}