/* Gerald Mboowa — unified About layout
   Scoped to the About page. No global navbar, article or publication overrides.
   Uses the existing al-folio light/dark theme variables. */

/* The al-folio "about" layout prints the page title independently.
   Our hero renders the only visible name. */
body:has(.gm-unified-about) .post-header > h1.post-title,
body:has(.gm-unified-about) .post-header > .post-title {
  display: none !important;
}

/* Widen only the About page content, not the navigation. */
@media (min-width: 992px) {
  body:has(.gm-unified-about) main.container,
  body:has(.gm-unified-about) .container.mt-5 {
    max-width: 1100px !important;
  }
}

.gm-unified-about {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 3rem;
  color: var(--global-text-color, inherit);
}

/* Centered identity on all screen sizes; no floated image. */
.gm-unified-hero {
  text-align: center;
  padding: 1rem 0 0;
  margin: 0 auto 2rem;
}
.gm-unified-photo {
  display: block;
  box-sizing: border-box;
  width: 228px;
  height: 228px;
  max-width: 55vw;
  aspect-ratio: 1;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 4px solid var(--global-bg-color, #fff);
  box-shadow: 0 0 0 1px var(--global-divider-color, #d9d9dc),
              0 6px 22px rgba(0,0,0,.10);
}
.gm-unified-name {
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0 0 .55rem;
  color: var(--global-text-color, inherit);
}
.gm-unified-name strong { font-weight: 800; }
.gm-unified-tagline {
  color: var(--global-text-color, inherit);
  opacity: .78;
  letter-spacing: .02em;
  font-size: .98rem;
  margin: 0 auto 1.35rem;
}
.gm-unified-tagline span { padding: 0 .35rem; opacity: .5; }
.gm-unified-intro {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.055rem;
  line-height: 1.78;
  text-align: center;
  hyphens: none;
}

/* Portfolio card, scoped to this page only. */
.gm-unified-about .gm-pipeline-portfolio {
  position: static !important;
  top: auto !important;
  clear: none !important;
  max-width: none;
  margin: 1.65rem 0 2.25rem !important;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--global-divider-color, #d8d8dd);
  background: var(--global-card-bg-color, var(--global-bg-color, #fff));
  color: var(--global-text-color, inherit);
  border-radius: 16px;
}
.gm-unified-about .gm-pipeline-heading { margin: 0 0 1.45rem; }
.gm-unified-about .gm-pipeline-eyebrow {
  display: block;
  margin-bottom: .35rem;
  text-transform: uppercase;
  color: var(--global-theme-color, #b000a3);
  letter-spacing: .09em;
  font-size: .7rem;
  font-weight: 800;
}
.gm-unified-about .gm-pipeline-heading h2 {
  font-size: clamp(1.55rem, 3vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 .45rem;
  color: var(--global-text-color, inherit);
}
.gm-unified-about .gm-pipeline-heading p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  opacity: .78;
}
.gm-unified-about .gm-pipeline-group + .gm-pipeline-group {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--global-divider-color, #d8d8dd);
}
.gm-unified-about .gm-pipeline-group h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 750;
  color: var(--global-text-color, inherit);
}
.gm-unified-about .gm-pipeline-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--global-theme-color, #b000a3);
}
.gm-unified-about .gm-pipeline-count {
  margin-left: auto;
  font-weight: 500;
  font-size: .76rem;
  opacity: .7;
  white-space: nowrap;
}
.gm-unified-about .gm-pipeline-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.gm-unified-about .gm-pipeline-links a {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  padding: .6rem .9rem;
  min-height: 42px;
  box-sizing: border-box;
  font-size: .95rem;
  line-height: 1.25;
  font-weight: 750;
  border: 1px solid var(--global-divider-color, #d8d8dd);
  border-radius: 9px;
  background: var(--global-bg-color, #fff);
  color: var(--global-theme-color, #b000a3);
  text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.gm-unified-about .gm-pipeline-links a:hover,
.gm-unified-about .gm-pipeline-links a:focus-visible {
  border-color: var(--global-theme-color, #b000a3);
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.gm-unified-about .gm-pipeline-links a:focus-visible {
  outline: 2px solid var(--global-theme-color, #b000a3);
  outline-offset: 2px;
}
.gm-unified-about .gm-pipeline-arrow { font-size: .85em; opacity: .7; }

/* Editorial content. Keep the research narrative intact. */
.gm-unified-about .gm-research-title {
  font-size: clamp(1.6rem, 3vw, 1.95rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 2.15rem 0 1.15rem;
  color: var(--global-text-color, inherit);
}
.gm-unified-about .gm-research-copy {
  font-size: 1.02rem;
  line-height: 1.8;
  overflow-wrap: break-word;
}
.gm-unified-about .gm-research-copy p { margin: 0 0 1.2rem; text-align: left; }

/* Compact navigation without changing its structure globally. */
@media (max-width: 767px) {
  body:has(.gm-unified-about) nav.navbar {
    background: var(--global-bg-color, #fff) !important;
    border-bottom: 1px solid var(--global-divider-color, #d8d8dd);
    z-index: 1030;
  }
  .gm-unified-about { padding-bottom: 2rem; }
  .gm-unified-hero { padding-top: .4rem; margin-bottom: 1.5rem; }
  .gm-unified-photo { width: 174px; height: 174px; max-width: 55vw; margin-bottom: 1rem; }
  .gm-unified-name { font-size: clamp(2rem, 7vw, 2.4rem); }
  .gm-unified-tagline { font-size: .82rem; margin-bottom: 1rem; }
  .gm-unified-intro { font-size: 1rem; line-height: 1.7; text-align: left; }
  .gm-unified-about .gm-pipeline-portfolio {
    padding: 1.1rem;
    margin: 1.25rem 0 1.9rem !important;
  }
  .gm-unified-about .gm-pipeline-links a {
    font-size: .91rem;
    padding: .53rem .72rem;
    min-height: 42px;
  }
  .gm-unified-about .gm-research-copy { font-size: 1rem; line-height: 1.72; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-unified-about .gm-pipeline-links a { transition: none; }
  .gm-unified-about .gm-pipeline-links a:hover { transform: none; }
}

/* ABOUT PAGE — final text alignment refinements */
@media (min-width: 768px) {
  .gm-unified-about .gm-research-copy p {
    text-align: justify !important;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 1.8;
  }
  .gm-unified-about .gm-unified-intro {
    text-align: center !important;
    hyphens: none;
  }
}
@media (max-width: 767px) {
  .gm-unified-about .gm-research-copy p,
  .gm-unified-about .gm-unified-intro {
    text-align: left !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    line-height: 1.7;
  }
}


/* ============================================================
   ABOUT PAGE: ALIGN SELECTED PUBLICATIONS WITH RESEARCH CONTENT
   The main theme defaults to .container { max-width: 800px }.
   Our About layout uses a wider centered column, while the theme
   renders Selected Publications outside .gm-unified-about.
   Match the two sections without altering publication card styles.
   ============================================================ */

/* Only when the unified About page exists. */
body:has(.gm-unified-about) .publications {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Use the same left edge for all three primary page sections. */
body:has(.gm-unified-about) .gm-unified-about,
body:has(.gm-unified-about) .gm-unified-about .gm-pipeline-portfolio,
body:has(.gm-unified-about) .gm-unified-about .gm-research-title,
body:has(.gm-unified-about) .gm-unified-about .gm-research-copy {
  box-sizing: border-box;
}

/* On phones, retain the natural fluid width and the theme's padding. */
@media (max-width: 767px) {
  body:has(.gm-unified-about) .publications {
    max-width: 100%;
  }
}

/* ============================================================
   VERIFIED SELECTED PUBLICATIONS HEADING ALIGNMENT
   _layouts/about.html renders this heading as:
   article > div.clearfix (contains .gm-unified-about) + h2
   The heading is NOT a direct child of .post and is NOT inside
   .publications. Match the same centered 900px content column.
   ============================================================ */
@media (min-width: 768px) {
  body:has(.gm-unified-about) .post article > h2:has(> a[href*="/publications/"]) {
    box-sizing: border-box;
    width: 100%;
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }
}

/* On smaller screens the heading follows the available article width. */
@media (max-width: 767px) {
  body:has(.gm-unified-about) .post article > h2:has(> a[href*="/publications/"]) {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}