/**
 * About page — ported 1:1 from app/(site)/about/about.module.css.
 * Module root classes are scoped under .p-about (page root); every other module
 * class becomes `.p-about .foo`. Covers the "What we stand for" commitments grid,
 * the "What makes ICONS different" check-icon points, and the leadership monogram
 * PersonCards. The FullBleedHero / TextImageRow / CtaBand bands are shared
 * sections and keep their own stylesheets.
 */

.p-about .block {
  background: color-mix(in srgb, var(--c-green) 5%, var(--c-paper));
}

.p-about .blockTitle {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  color: var(--c-midnight);
}

.p-about .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 640px) {
  .p-about .grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 960px) {
  .p-about .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-about .card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.5rem, 3vw, 1.75rem);
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.p-about .iconTile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-green) 12%, var(--c-surface-raised));
  color: var(--c-green);
}
.p-about .cardTitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--c-midnight);
}
.p-about .cardBody {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

/* ── What makes ICONS different — check-icon points ──────────────────── */
.p-about .different {
  margin-bottom: clamp(3.5rem, 8vw, 6rem);
}
.p-about .differentHead {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.p-about .checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 720px) {
  .p-about .checks {
    grid-template-columns: 1fr 1fr;
  }
}
.p-about .check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: clamp(1.1rem, 2.4vw, 1.4rem) clamp(1.2rem, 2.6vw, 1.5rem);
  background: color-mix(in srgb, var(--c-green) 6%, var(--c-paper));
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--c-text);
  text-wrap: pretty;
}
.p-about .checkIcon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.1em;
  border-radius: var(--r-pill);
  background: var(--c-green);
  color: #fff;
}

/* ── Leadership — monogram people cards ──────────────────────────────── */
.p-about .leadHead {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.p-about .leadGroup {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.p-about .leadRole {
  margin: 0 0 var(--s-4);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.p-about .people {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 2vw, 1.1rem);
}
@media (min-width: 560px) {
  .p-about .people {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 960px) {
  .p-about .people {
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-about .person {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.p-about .avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-green) 14%, var(--c-surface-raised));
  color: var(--c-green);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: 0.02em;
}
.p-about .personText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.p-about .personName {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.2;
  color: var(--c-midnight);
}
.p-about .personRole {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.p-about .leadLink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: var(--fw-semibold);
  color: var(--c-green);
  text-decoration: none;
}
.p-about .leadLink:hover {
  text-decoration: underline;
}