/* --- Modern Team Section CSS (v3) --- */


/* NEW:
  This media query tells the browser: 
  "If the screen is 768px wide or wider, use a 2-column grid."
  This is much more reliable than auto-fit.
*/
@media (min-width: 768px) {
  .wp-block-group.team-grid-container {
    grid-template-columns: 1fr 1fr;
  }
}

/* 2. This styles each individual team member card */
.wp-block-group.team-member-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 32px;
  text-align: center; /* This centers the Image and Heading */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
  border: 1px solid #f0f0f0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 0;
}

.wp-block-group.team-member-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* 3. This styles the team member image */
.wp-block-group.team-member-card .wp-block-image img {
  /* CHANGE: Increased image size from 150px to 180px.
    Feel free to change this number!
  */
  width: 250px !important;
  height: 250px !important;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  display: inline-block;
}

/* 4. This styles the team member's name */
.wp-block-group.team-member-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  margin-top: 0;
  margin-bottom: 15px; /* Added a bit more space */
}

/* 5. This styles the description text */
.wp-block-group.team-member-card p {
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
  /* CHANGE: Added !important to force the text-align to be 
    left, which is better for reading paragraphs.
  */
  text-align: left !important;
}

/* --- End of Team Section CSS --- */





/* --- Modern "About" Page CSS (v4 - Fixed) --- */

/* 1. Hides the small, redundant "About" title */
.page .entry-header {
  display: none;
}

/* 2. Creates the white "sheet" container */
.wp-block-group.page-content-wrapper {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 40px;
  max-width: 1100px;
  margin: 30px auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
}

/* 3. Main Page Title (H1) */
/* THIS IS THE FIX: The ">" (direct child) selector
   targets ONLY the main title and won't touch
   headings inside the columns. */
.page-content-wrapper > .wp-block-heading:first-of-type {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8rem; /* The big size */
  font-weight: 700;
  margin-bottom: 30px;
}

/* 4. Subheadings (e.g., "The Challenge") */
/* THIS IS THE OTHER FIX: This rule specifically targets
   ONLY the headings inside your columns. */
.page-content-wrapper .wp-block-columns .wp-block-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.8rem; /* The correct H3 size */
  font-weight: 600;
  color: #222;
  margin-bottom: 15px;
}

/* 5. Body Paragraphs */
.page-content-wrapper p {
  font-family: 'Lato', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 20px;
}

/* 6. Column Spacing */
.page-content-wrapper .wp-block-columns {
  gap: 40px;
}

/* 7. The Key Value Callout Box */
.wp-block-group.about-value-prop {
  background-color: #f4f8ff;
  border-radius: 12px;
  padding: 30px;
  margin-top: 20px;
  margin-bottom: 30px;
  border: 1px solid #e0e9f8;
}

/* 8. Text inside the callout box */
.wp-block-group.about-value-prop p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1a3a6d;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 0;
}