/* ABOUT PAGE LAYOUT
   Uses variables + typography from base.css
*/

/* Overall section rhythm */
#about-intro,
#about-history,
#about-vision-mission,
#about-values,
#about-objectives,
#about-affiliations,
#about-banking-partner {
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}

#about-intro p,
#about-history p,
#about-objectives p {
  max-width: 800px;
}

/* Intro / headings */
#about-intro h1 {
  font-size: var(--font-size-h1);
  margin-bottom: var(--space-md);
}

#about-intro,
#about-history {
  max-width: 900px;
}

/* Vision & Mission two-column cards */
.about-two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.about-box {
  background: var(--bg-white);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.about-box h3 {
  margin-bottom: var(--space-sm);
  color: var(--ciawu-blue);
}

/* Core Values grid */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.value-card {
  background: var(--bg-white);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.value-card h3 {
  margin-bottom: var(--space-xs);
  color: var(--ciawu-blue);
  font-size: var(--font-size-md);
}

/* Objectives list */
.objectives-list {
  margin-top: var(--space-md);
  padding-left: var(--space-lg);
  max-width: 800px;
}

.objectives-list li {
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

.objectives-list strong {
  color: var(--ciawu-blue);
}

/* Responsive tweaks */
@media (min-width: 720px) {
  .about-two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* About page affiliation logos: small, consistent */
#about-affiliations .affiliation-logo-box {
  width: 40px;        /* slightly smaller box */
  height: 40px;
}

#about-affiliations .affiliation-logo-box img {
  max-width: 65%;     /* shrink inside the box */
  max-height: 65%;
  object-fit: contain;
  display: block;
}