/* =============================================================================
   BUAMS AI new-ui — COMPANY PAGES (About, Team, Contact)
   Spec: /frontend_design.md §K.11

   Shares the hero, breadcrumb, capability grid, program grid and CTA with
   landing.css and platform.css, which these pages load first. Only what is
   unique to the company pages lives here (spec §L).
   ============================================================================= */

/* ── Shared hero block ────────────────────────────────────────────────────── */
.bui-about-hero {
  max-width: 760px;
  margin-top: var(--bui-space-8);
}

.bui-about-hero .bui-hero-actions {
  margin-top: var(--bui-space-6);
}

/* ── Two column split (About: copy + focus list) ──────────────────────────── */
.bui-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
  gap: var(--bui-space-12);
}

.bui-split .bui-section-lede + .bui-section-lede {
  margin-top: var(--bui-space-4);
}

.bui-focus-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bui-space-3);
  padding: 0;
  list-style: none;
}

.bui-focus-item {
  display: flex;
  align-items: center;
  gap: var(--bui-space-3);
  min-width: 0;
  padding: var(--bui-space-4);
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-md);
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-semibold);
  color: var(--bui-ink-900);
  overflow-wrap: anywhere;
}

.bui-focus-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--bui-primary-100);
  border-radius: var(--bui-radius-md);
  color: var(--bui-primary-700);
}

@media (max-width: 991.98px) {
  .bui-split { grid-template-columns: minmax(0, 1fr); gap: var(--bui-space-8); }
}

@media (max-width: 575.98px) {
  .bui-focus-list { grid-template-columns: minmax(0, 1fr); }
}

/* Program tiles on the dark band need light-on-dark treatment */
.bui-program-dark {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}

.bui-program-dark .bui-program-abbr { color: #fff; }
.bui-program-dark .bui-program-name { color: rgba(255, 255, 255, .72); }

/* ── Team ─────────────────────────────────────────────────────────────────── */
.bui-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bui-space-5);
}

.bui-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: var(--bui-space-6);
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  text-align: center;
  transition: border-color var(--bui-transition), box-shadow var(--bui-transition);
}

.bui-member:hover {
  border-color: var(--bui-primary-200);
  box-shadow: var(--bui-shadow-md);
}

.bui-member-photo {
  width: 108px;
  height: 108px;
  margin-bottom: var(--bui-space-4);
}

.bui-member-photo img,
.bui-member-initial {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  /* A ring rather than a hard border, so a photo with a light background does
     not appear to float on the card. */
  box-shadow: 0 0 0 3px var(--bui-primary-100);
}

.bui-member-initial {
  display: grid;
  place-items: center;
  background: var(--bui-primary-100);
  color: var(--bui-primary-700);
  font-size: 2rem;
  font-weight: var(--bui-fw-heavy);
}

.bui-member-name {
  font-size: var(--bui-text-h3);
  font-weight: var(--bui-fw-bold);
  color: var(--bui-ink-900);
  overflow-wrap: anywhere;
}

.bui-member-role {
  margin-top: 2px;
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-semibold);
  letter-spacing: .02em;
  color: var(--bui-primary-700);
  overflow-wrap: anywhere;
}

.bui-member-bio {
  flex: 1 1 auto;
  margin-top: var(--bui-space-3);
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

.bui-member-social {
  display: flex;
  gap: var(--bui-space-2);
  margin-top: var(--bui-space-4);
  padding: 0;
  list-style: none;
}

.bui-member-social a {
  display: grid;
  place-items: center;
  width: var(--bui-touch-min);
  height: var(--bui-touch-min);
  background: var(--bui-surface-2);
  border: 1px solid var(--bui-line);
  border-radius: 50%;
  color: var(--bui-ink-500);
  transition: background-color var(--bui-transition), color var(--bui-transition);
}

.bui-member-social a:hover {
  background: var(--bui-primary-700);
  border-color: var(--bui-primary-700);
  color: #fff;
  text-decoration: none;
}

.bui-member-social a:focus-visible {
  outline: 2px solid var(--bui-primary-700);
  outline-offset: 2px;
}

@media (max-width: 1199.98px) { .bui-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px)  { .bui-team-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.bui-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: start;
  gap: var(--bui-space-8);
}

.bui-contact-card .bui-card-body {
  padding: var(--bui-space-8);
}

/* Honeypot. Visually gone but still in the DOM and still submittable, which is
   what the server side check depends on. display:none would let some bots skip
   it, and would stop it being posted at all in a few browsers. */
.bui-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bui-contact-list,
.bui-reason-list {
  display: flex;
  flex-direction: column;
  gap: var(--bui-space-4);
  padding: 0;
  list-style: none;
}

.bui-contact-list li,
.bui-reason-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--bui-space-3);
  min-width: 0;
}

.bui-contact-icon,
.bui-reason-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--bui-primary-100);
  border-radius: var(--bui-radius-md);
  color: var(--bui-primary-700);
}

.bui-contact-label,
.bui-reason-title {
  display: block;
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bui-ink-500);
}

.bui-reason-title {
  font-size: var(--bui-text-sm);
  letter-spacing: normal;
  text-transform: none;
  color: var(--bui-ink-900);
}

.bui-contact-list a {
  font-size: var(--bui-text-body);
  font-weight: var(--bui-fw-semibold);
  color: var(--bui-primary-700);
  overflow-wrap: anywhere;
}

.bui-reason-body {
  display: block;
  margin-top: 2px;
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-snug);
  color: var(--bui-ink-500);
}

@media (max-width: 991.98px) {
  .bui-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .bui-contact-card .bui-card-body { padding: var(--bui-space-5); }
}