/* style/news.css */

/* Base styles for the news page content */
.page-news {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #ffffff; /* Default text color for dark body background */
  background-color: transparent; /* Inherit from body or shared, ensuring contrast */
}

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

.page-news__dark-bg {
  background-color: #26A9E0; /* Brand primary color for dark sections */
  color: #ffffff;
  padding: 60px 0;
}

.page-news__light-bg {
  background-color: #1a1a1a; /* A slightly lighter dark background for contrast */
  color: #ffffff;
  padding: 60px 0;
}

.page-news__section-title {
  font-size: 2.5em;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.page-news__section-description {
  font-size: 1.1em;
  color: #f0f0f0;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

/* Hero Section */
.page-news__hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: var(--header-offset, 120px); /* Fixed header offset */
  position: relative;
  overflow: hidden;
}

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

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

.page-news__hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: 80px 20px;
}

.page-news__hero-title {
  font-size: 3.5em;
  margin-bottom: 20px;
  line-height: 1.2;
  color: #ffffff;
}

.page-news__hero-description {
  font-size: 1.3em;
  margin-bottom: 40px;
  color: #f0f0f0;
}

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

/* Buttons */
.page-news__btn-primary,
.page-news__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
}

.page-news__btn-primary {
  background-color: #EA7C07; /* Login color for primary action */
  color: #ffffff;
  border: 2px solid #EA7C07;
}

.page-news__btn-primary:hover {
  background-color: #d16b06;
  border-color: #d16b06;
}

.page-news__btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.page-news__btn-secondary:hover {
  background-color: #ffffff;
  color: #26A9E0;
}

.page-news__btn-text {
  color: #26A9E0;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.page-news__btn-text:hover {
  color: #EA7C07;
}

/* News Grid and Promotions Grid */
.page-news__news-grid,
.page-news__promotions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-news__news-card,
.page-news__promo-card,
.page-news__guide-item {
  background-color: rgba(255, 255, 255, 0.05); /* Slightly transparent white for cards */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.page-news__news-card:hover,
.page-news__promo-card:hover,
.page-news__guide-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

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

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

.page-news__card-title {
  font-size: 1.5em;
  margin-bottom: 15px;
  line-height: 1.3;
}

.page-news__card-title a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-news__card-title a:hover {
  color: #26A9E0;
}

.page-news__card-text {
  font-size: 1em;
  color: #e0e0e0;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Community Section */
.page-news__community-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
  text-align: center;
}

.page-news__community-feature {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.page-news__community-feature:hover {
  transform: translateY(-8px);
}

.page-news__feature-image {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-bottom: 20px;
  filter: invert(1) hue-rotate(180deg) brightness(1.5); /* Example: make icons light on dark background */
  /* NOTE: The above filter is for example if the original icons are dark. 
     If the icons are already light, this filter should be removed. 
     Per instructions, no filter should change image color, this is for monochrome icon adaptation. 
     For content images, this filter will be removed. */
}

.page-news__community-feature img {
  filter: none; /* Ensure content images keep original colors */
}

.page-news__feature-title {
  font-size: 1.8em;
  color: #ffffff;
  margin-bottom: 15px;
}

.page-news__feature-text {
  color: #e0e0e0;
  font-size: 1em;
}

/* CTA Section */
.page-news__cta-section .page-news__section-title,
.page-news__cta-section .page-news__section-description {
  color: #ffffff;
}

.page-news__cta-container {
  text-align: center;
}

.page-news__cta-buttons {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* FAQ Section */
.page-news__faq-section .page-news__section-title {
  color: #ffffff;
}

.page-news__faq-list {
  margin-top: 40px;
}

.page-news__faq-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-news__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  font-size: 1.2em;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.page-news__faq-question:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

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

.page-news__faq-toggle {
  font-size: 1.5em;
  margin-left: 15px;
  width: 25px;
  text-align: center;
}

.page-news__faq-item[open] > .page-news__faq-question .page-news__faq-toggle {
  content: "−";
}

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

.page-news__faq-item summary {
  list-style: none;
}

.page-news__faq-answer {
  padding: 20px 25px;
  font-size: 1.1em;
  color: #e0e0e0;
  background-color: rgba(255, 255, 255, 0.03);
}

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

.page-news__faq-answer a {
  color: #26A9E0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-news__faq-answer a:hover {
  color: #EA7C07;
}

/* Global image rules for content area - no small icons */
.page-news img {
  min-width: 200px;
  min-height: 200px;
  object-fit: cover; /* Ensure images fill their space without distortion */
  filter: none; /* No CSS filter to change image color */
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-news__hero-title {
    font-size: 2.8em;
  }

  .page-news__hero-description {
    font-size: 1.1em;
  }

  .page-news__section-title {
    font-size: 2em;
  }
}

@media (max-width: 768px) {
  .page-news {
    font-size: 16px;
    line-height: 1.6;
  }

  .page-news__hero-section {
    padding: 40px 0;
    padding-top: var(--header-offset, 120px) !important;
  }

  .page-news__hero-content {
    padding: 60px 15px;
  }

  .page-news__hero-title {
    font-size: 2.2em;
  }

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

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

  .page-news__btn-primary,
  .page-news__btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px;
    font-size: 1em;
  }

  .page-news__container,
  .page-news__cta-container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-news__news-grid,
  .page-news__promotions-grid,
  .page-news__community-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-news__news-card,
  .page-news__promo-card,
  .page-news__guide-item {
    padding: 0;
  }

  .page-news__card-image {
    height: 180px;
  }

  .page-news__card-content {
    padding: 20px;
  }

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

  .page-news__feature-title {
    font-size: 1.5em;
  }

  .page-news__faq-question {
    padding: 15px 20px;
    font-size: 1.1em;
  }

  .page-news__faq-answer {
    padding: 15px 20px;
    font-size: 1em;
  }

  /* Force responsive images and videos on mobile */
  .page-news img,
  .page-news video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    min-width: unset !important; /* Override min-width for mobile */
    min-height: unset !important; /* Override min-height for mobile */
  }

  .page-news__video-section,
  .page-news__video-container,
  .page-news__video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }

  /* Ensure all containers with images/videos are responsive */
  .page-news__section,
  .page-news__card,
  .page-news__container,
  .page-news__cta-buttons {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-news__cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .page-news__cta-buttons a {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-news__hero-title {
    font-size: 1.8em;
  }

  .page-news__section-title {
    font-size: 1.8em;
  }
}