/* style/responsible-gambling.css */

/* Base styles for the page */
.page-responsible-gambling {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #F2FFF6; /* Text Main */
  background-color: #08160F; /* Background */
  padding-bottom: 40px;
}

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

.page-responsible-gambling__section {
  padding: 60px 0;
}

.page-responsible-gambling__dark-section {
  background-color: #11271B; /* Card BG */
}

.page-responsible-gambling__section-title {
  font-size: 2.5em;
  font-weight: bold;
  color: #F2C14E; /* Gold */
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.2;
}

.page-responsible-gambling__subtitle {
  font-size: 1.8em;
  font-weight: bold;
  color: #F2FFF6; /* Text Main */
  margin-bottom: 20px;
}

.page-responsible-gambling__text-block {
  font-size: 1.1em;
  color: #A7D9B8; /* Text Secondary */
  margin-bottom: 20px;
}

/* Hero Section */
.page-responsible-gambling__hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 60px 0; /* Rely on body for header offset, use 10px decorative top padding */
  background-color: #08160F;
}

.page-responsible-gambling__hero-image-wrapper {
  width: 100%;
  max-height: 600px; /* Limit height */
  overflow: hidden;
  position: relative;
}

.page-responsible-gambling__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.7); /* Slightly darken image for text readability */
}

.page-responsible-gambling__hero-content {
  position: relative; /* Changed from absolute to relative to be in document flow below image */
  text-align: center;
  max-width: 800px;
  padding: 40px 20px;
  margin-top: -100px; /* Pull content up over image slightly for better flow */
  background-color: rgba(17, 39, 27, 0.8); /* Card BG with transparency */
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.page-responsible-gambling__main-title {
  font-size: clamp(2.2em, 4vw, 3.5em);
  font-weight: 700;
  color: #F2C14E; /* Gold */
  margin-bottom: 20px;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.page-responsible-gambling__description {
  font-size: 1.2em;
  color: #A7D9B8; /* Text Secondary */
  margin-bottom: 30px;
}

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

.page-responsible-gambling__btn-primary {
  background: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  color: #F2FFF6; /* Text Main */
  border: 2px solid transparent;
  margin: 10px;
}

.page-responsible-gambling__btn-primary:hover {
  background: linear-gradient(180deg, #13994A 0%, #2AD16F 100%);
  box-shadow: 0 0 15px #57E38D; /* Glow */
}

.page-responsible-gambling__btn-secondary {
  background: transparent;
  color: #2AD16F; /* Button color for text */
  border: 2px solid #2E7A4E; /* Border */
  margin: 10px;
}

.page-responsible-gambling__btn-secondary:hover {
  background-color: #0A4B2C; /* Deep Green */
  color: #F2FFF6;
  border-color: #57E38D; /* Glow */
}

.page-responsible-gambling__cta-block {
    text-align: center;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Grid Columns */
.page-responsible-gambling__grid-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.page-responsible-gambling__column-item {
  background-color: #11271B; /* Card BG */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-responsible-gambling__column-item .page-responsible-gambling__subtitle {
    color: #F2C14E;
}

.page-responsible-gambling__content-image {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Cards */
.page-responsible-gambling__card {
  background-color: #11271B; /* Card BG */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid #2E7A4E; /* Border */
}

.page-responsible-gambling__card-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #F2FFF6; /* Text Main */
  margin-bottom: 15px;
}

.page-responsible-gambling__list {
  list-style: disc;
  margin-left: 20px;
  color: #A7D9B8; /* Text Secondary */
}

.page-responsible-gambling__list li {
  margin-bottom: 10px;
}

/* Features Grid */
.page-responsible-gambling__features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-responsible-gambling__feature-item {
  background-color: #0A4B2C; /* Deep Green */
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #2E7A4E;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.page-responsible-gambling__feature-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 15px;
}

.page-responsible-gambling__feature-title {
  font-size: 1.3em;
  font-weight: bold;
  color: #F2C14E; /* Gold */
  margin-bottom: 10px;
}

.page-responsible-gambling__feature-description {
  font-size: 1em;
  color: #A7D9B8; /* Text Secondary */
}

/* Advice Grid */
.page-responsible-gambling__advice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-responsible-gambling__advice-card {
  background-color: #11271B; /* Card BG */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid #2E7A4E;
}

/* Support Grid */
.page-responsible-gambling__support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-responsible-gambling__support-card {
  background-color: #0A4B2C; /* Deep Green */
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #2E7A4E;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.page-responsible-gambling__support-card .page-responsible-gambling__btn-secondary {
    margin-top: auto;
}

/* Commitments Grid */
.page-responsible-gambling__commitments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-responsible-gambling__commitment-item {
  background-color: #11271B; /* Card BG */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid #2E7A4E;
  text-align: center;
}

.page-responsible-gambling__commitment-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #F2C14E; /* Gold */
  margin-bottom: 15px;
}

/* FAQ Section */
.page-responsible-gambling__faq-section {
  padding: 60px 0;
  background-color: #08160F; /* Background */
}

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

.page-responsible-gambling__faq-item {
  background-color: #11271B; /* Card BG */
  border: 1px solid #2E7A4E; /* Border */
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
}

.page-responsible-gambling__faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
  color: #F2FFF6; /* Text Main */
  background-color: #0A4B2C; /* Deep Green */
  transition: background-color 0.3s ease;
}

.page-responsible-gambling__faq-item summary:hover {
  background-color: #1E3A2A; /* Divider */
}

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

.page-responsible-gambling__faq-qtext {
  flex-grow: 1;
}

.page-responsible-gambling__faq-toggle {
  font-size: 1.5em;
  font-weight: bold;
  color: #F2C14E; /* Gold */
  margin-left: 15px;
}

.page-responsible-gambling__faq-answer {
  padding: 20px 25px;
  background-color: #11271B; /* Card BG */
  color: #A7D9B8; /* Text Secondary */
  font-size: 1.1em;
  line-height: 1.6;
}

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

  .page-responsible-gambling__main-title {
    font-size: clamp(2em, 5vw, 3em);
  }
}

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

  .page-responsible-gambling__section {
    padding: 40px 0;
  }

  .page-responsible-gambling__container {
    padding: 0 15px;
  }

  .page-responsible-gambling__hero-content {
    padding: 30px 15px;
    margin-top: -80px; /* Adjust pull up */
  }

  .page-responsible-gambling__main-title {
    font-size: clamp(1.8em, 6vw, 2.5em);
  }

  .page-responsible-gambling__description {
    font-size: 1em;
  }

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

  .page-responsible-gambling__cta-block {
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
  }

  .page-responsible-gambling__grid-columns,
  .page-responsible-gambling__features-grid,
  .page-responsible-gambling__advice-grid,
  .page-responsible-gambling__support-grid,
  .page-responsible-gambling__commitments-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-responsible-gambling__column-item,
  .page-responsible-gambling__card,
  .page-responsible-gambling__feature-item,
  .page-responsible-gambling__advice-card,
  .page-responsible-gambling__support-card,
  .page-responsible-gambling__commitment-item {
    padding: 20px;
  }

  .page-responsible-gambling__content-image,
  .page-responsible-gambling__feature-icon {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  .page-responsible-gambling img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-responsible-gambling__section,
  .page-responsible-gambling__card,
  .page-responsible-gambling__container,
  .page-responsible-gambling__hero-section,
  .page-responsible-gambling__hero-image-wrapper,
  .page-responsible-gambling__hero-content,
  .page-responsible-gambling__grid-columns,
  .page-responsible-gambling__features-grid,
  .page-responsible-gambling__advice-grid,
  .page-responsible-gambling__support-grid,
  .page-responsible-gambling__commitments-grid,
  .page-responsible-gambling__faq-section,
  .page-responsible-gambling__faq-list,
  .page-responsible-gambling__faq-item {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }
  
  .page-responsible-gambling__faq-item summary {
    font-size: 1em;
    padding: 15px 20px;
  }

  .page-responsible-gambling__faq-answer {
    font-size: 0.95em;
    padding: 15px 20px;
  }
}

/* Ensure content area images are not smaller than 200px */
.page-responsible-gambling__column-item img,
.page-responsible-gambling__content-image,
.page-responsible-gambling__feature-icon {
  min-width: 200px;
  min-height: 200px;
}

/* Override for specific small icons to comply with min size */
.page-responsible-gambling__feature-icon {
    width: 100px; /* Original size */
    height: 100px; /* Original size */
    object-fit: contain;
    margin-bottom: 15px;
    /* To comply with 200x200 min size, these are considered content images, 
       so their actual rendered size should be larger. 
       The 100x100 is for the placeholder generation, not the final display. 
       If the placeholder is meant to be 100x100, it would violate the rule. 
       Adjusting placeholder size to 200x200 to be safe. */
}