/* ==========================================================================
   CSDCI - Our Mandate Page Styles (Clean Raw CSS Cards Layout)
   ========================================================================== */

/* Main Container */
.csdci-mandate-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  gap: 60px; /* Spacing between sections */
  background-color: #ffffff;
}

/* Card Container (Row Layout) */
.csdci-mandate-section {
  display: flex;
  align-items: stretch; /* Force columns to equal heights */
  gap: 0;

  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
}

.csdci-mandate-section.csdci-reverse {
  flex-direction: row-reverse;
}

/* Columns */
.csdci-col {
  flex: 0 0 50%;
  width: 50%;
}

/* Content Column (Text Box) */
.csdci-content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 50px 40px;
  text-align: left;
}

/* Alternating Background Colors for Text Column */
/* Odd sections: Research (1st), Affiliation (3rd), Assessment (5th) */
.csdci-mandate-section:nth-child(odd) .csdci-content-col {
  background-color: #6dbfe8;
}

/* Even sections: Standards (2nd), Counselling (4th), Apprenticeship (6th) */
.csdci-mandate-section:nth-child(even) .csdci-content-col {
  background-color: #f2f2f2; /* Light neutral gray matching second image */
}

/* Headings */
.csdci-mandate-heading {
  font-family: "Raleway", Georgia, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #4e2300;
  margin-top: 0;
  margin-bottom: 25px;
  line-height: 1.3;
  text-align: center;
  width: 100%;
}

/* Lists - Remove bullet points and style paragraphs */
.csdci-mandate-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.csdci-mandate-list li {
  font-family: "Raleway", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #222222;
  text-align: left;
  margin: 0;
  list-style-type: none !important;
}

/* For lists inside the blue section, let's keep text color high-contrast */
.csdci-mandate-section:nth-child(odd) .csdci-mandate-list li {
  color: #111111;
}

/* Image Column */
.csdci-image-col {
  display: block;
  position: relative;
  padding: 0;
}

.csdci-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive Styles */
@media (max-width: 991px) {
  .csdci-mandate-heading {
    font-size: 24px;
  }

  .csdci-content-col {
    padding: 40px 30px;
  }
}

@media (max-width: 768px) {
  .csdci-mandate-container {
    padding: 30px 20px;
    gap: 40px;
  }

  .csdci-mandate-section,
  .csdci-mandate-section.csdci-reverse {
    flex-direction: column;
    align-items: stretch;
  }

  .csdci-col {
    flex: 0 0 100%;
    width: 100%;
  }

  .csdci-image-col {
    height: 350px; /* Fixed height for image columns on mobile screen sizes */
  }

  .csdci-content-col {
    padding: 40px 20px;
  }
}