/* ACMS About page — page-scoped, enqueued only on the About page (see functions.php). */

/* Yellow accent rule bars (hero, Vision and Mission, Study/Research split, Partners head) — was referenced throughout this file but never defined. */
.acms-rule { width: 64px; height: 5px; background: var(--acms-yellow); }
.acms-rule--sm { width: 52px; height: 4px; background: var(--acms-yellow); }

#acms-about-hero,
#acms-about-intro,
#acms-about-vision,
#acms-about-split,
#acms-about-partners-head,
#acms-about-partners,
#acms-about-bottom { margin-bottom: 0 !important; }
#acms-about-hero .et_pb_module,
#acms-about-intro .et_pb_module,
#acms-about-vision .et_pb_module,
#acms-about-split .et_pb_module,
#acms-about-partners-head .et_pb_module,
#acms-about-partners .et_pb_module { margin-bottom: 0; }

/* ---------- PAGE TITLE BAND ---------- */
#acms-about-hero {
  position: relative;
  background: var(--acms-navy);
  overflow: hidden;
  padding: 0 !important;
}
/* Photo+scrim live in a Code module inside the row's column, but need to fill the whole
   section edge-to-edge, not just the 1320px content column. display:contents removes the
   code module's own box (and its position:relative .et_pb_code_inner wrapper) so it doesn't
   become a containing block; since the column itself is left unpositioned, the absolutely
   positioned photo/scrim skip past it and resolve against the section, which IS positioned. */
#acms-about-hero .et_pb_code,
#acms-about-hero .et_pb_code_inner { display: contents; }
/* Divi 5 columns are position:relative by default (unlike a plain div), which I didn't
   account for — that made the column itself the containing block for the absolutely
   positioned photo/scrim, confining them to the 1320px content width instead of the full
   section. Neutralizing it here lets position:absolute skip past the column to the section. */
#acms-about-hero .et_pb_column { position: static; }
#acms-about-hero .acms-about-hero-photo,
#acms-about-hero .acms-about-hero-scrim { position: absolute; inset: 0; z-index: 0; }
#acms-about-hero .acms-about-hero-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Source photo is 2000x1125 but this band renders near 4:1 -- a center crop keeps only the
     middle ~45% of the photo's height. Biased toward the top third so the subject's face (an
     environmental portrait, not a wide landscape shot) stays in frame instead of getting cropped
     down to just shoulders/torso. */
  object-position: 50% 20%;
}
#acms-about-hero .acms-about-hero-scrim {
  background: linear-gradient(90deg, rgba(11,57,79,.9) 0%, rgba(11,57,79,.6) 70%, rgba(11,57,79,.35) 100%);
}
/* Deliberately static, not relative: the photo/scrim must resolve against the SECTION
   (the true background), not this row -- otherwise the image is scoped to "however tall the
   text card is" instead of being an independent full-section background with the text card
   floating on top of it. */
#acms-about-hero > .et_pb_row {
  position: static;
  z-index: 1;
  padding: 56px 60px 64px !important;
}
#acms-about-hero .acms-rule { position: relative; z-index: 1; }
#acms-about-hero .et_pb_column {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
#acms-about-hero .acms-breadcrumb p {
  display: flex; align-items: center; gap: 10px;
  font: 600 13px/1 var(--acms-font);
  letter-spacing: .06em;
  color: var(--acms-hero-muted);
  padding-bottom: 0;
}
#acms-about-hero .acms-breadcrumb a { color: var(--acms-hero-muted); text-decoration: none; }
#acms-about-hero .acms-breadcrumb a:hover { color: var(--acms-white); }
#acms-about-hero .acms-breadcrumb .acms-crumb-current { color: var(--acms-yellow); }
#acms-about-hero h1.et_pb_module_header {
  font: 700 54px/1.1 var(--acms-font);
  color: var(--acms-white);
  padding-bottom: 0;
}
#acms-about-hero .acms-hero-sub p {
  font: 400 19px/1.6 var(--acms-font);
  color: rgba(255,255,255,.9);
  max-width: 700px;
  padding-bottom: 0;
  text-wrap: pretty;
}

/* ---------- INTRO ---------- */
#acms-about-intro > .et_pb_row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: start;
}
#acms-about-intro > .et_pb_row > .et_pb_column { width: auto !important; margin: 0 !important; }
#acms-about-intro-copy { display: flex; flex-direction: column; gap: 26px; }
#acms-about-intro-copy .acms-lead p {
  font: 600 24px/1.55 var(--acms-font);
  color: var(--acms-navy);
  padding-bottom: 0;
  text-wrap: pretty;
}
#acms-about-intro-copy .acms-body p {
  font: 400 17px/1.75 var(--acms-font);
  color: var(--acms-body);
  padding-bottom: 0;
}
#acms-about-stats-col {
  display: flex; flex-direction: column;
  border-top: 3px solid var(--acms-yellow);
}
#acms-about-stats-col > .et_pb_module:nth-child(odd) p {
  font: 700 34px/1 var(--acms-font);
  color: var(--acms-navy);
  padding: 22px 0 4px;
}
#acms-about-stats-col > .et_pb_module:nth-child(even) p {
  font: 700 13px/1.4 var(--acms-font);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--acms-brown);
  padding: 0 0 22px;
  border-bottom: 1px solid var(--acms-line);
}

/* ---------- VISION AND MISSION ---------- */
#acms-about-vision {
  background: var(--acms-wash);
  border-top: 1px solid var(--acms-line);
}
#acms-about-vision > .et_pb_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
#acms-about-vision > .et_pb_row > .et_pb_column { width: auto !important; margin: 0 !important; }
#acms-about-vision-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--acms-img-bg); }
/* Same circular-sizing bug as the Home Study image, one level deeper: the percentage-height
   chain (column -> .et_pb_image -> .et_pb_image_wrap -> img) breaks at whichever ancestor
   still has an auto height, since a percentage height against an auto-height parent computes
   to auto instead of resolving. Every link in the chain needs an explicit height:100%. */
#acms-about-vision-img .et_pb_image,
#acms-about-vision-img .et_pb_image_wrap { display: block; width: 100%; height: 100%; }
#acms-about-vision-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#acms-about-vision-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
#acms-about-vision-copy h2.et_pb_module_header { font: 700 42px/1.2 var(--acms-font); color: var(--acms-navy); padding-bottom: 0; }
#acms-about-vision-copy .acms-pullquote p {
  font: 600 21px/1.6 var(--acms-font);
  color: var(--acms-navy);
  border-left: 4px solid var(--acms-yellow);
  padding: 0 0 0 24px;
  margin: 0;
  text-wrap: pretty;
}
#acms-about-vision-copy .acms-body p { font: 400 17px/1.75 var(--acms-font); color: var(--acms-body); padding-bottom: 0; }

/* ---------- STUDY + RESEARCH SPLIT ---------- */
#acms-about-split > .et_pb_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--acms-line);
  border: 1px solid var(--acms-line);
}
#acms-about-split .et_pb_column {
  background: var(--acms-white);
  padding: 48px 44px;
  margin: 0 !important;
  width: auto !important;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
#acms-about-split h2.et_pb_module_header { font: 700 32px/1.3 var(--acms-font); color: var(--acms-navy); padding-bottom: 0; }
#acms-about-split .acms-body { flex: 1; }
#acms-about-split .acms-body p { font: 400 17px/1.75 var(--acms-font); color: var(--acms-body); padding-bottom: 0; }
#acms-about-split .et_pb_button {
  background: var(--acms-yellow) !important;
  color: var(--acms-brown) !important;
  font: 700 16px/1 var(--acms-font) !important;
  padding: 15px 32px !important;
  border-radius: 0 !important;
  border: none !important;
}
#acms-about-split .et_pb_button:hover { background: var(--acms-yellow-hover) !important; }

/* ---------- NETWORKS AND PARTNERS ---------- */
#acms-about-partners-head .et_pb_column { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; }
#acms-about-partners-head {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 88px !important;
  padding-bottom: 44px !important;
  background: var(--acms-wash);
  border-top: 1px solid var(--acms-line);
}
#acms-about-partners { border-top: none !important; }
#acms-about-partners-head > .et_pb_row { padding: 0 !important; }
#acms-about-partners-head h2.et_pb_module_header { font: 700 42px/1.2 var(--acms-font); color: var(--acms-navy); padding-bottom: 0; }
#acms-about-partners-head .acms-body p { font: 400 18px/1.7 var(--acms-font); color: var(--acms-body); padding-bottom: 0; }
#acms-about-partners { background: var(--acms-wash); border-top: 1px solid var(--acms-line); padding-bottom: 96px !important; }
/* Grid, not flex: with 8 items in 3 columns, flex would stretch the last row's 2 leftover
   items to fill the row. Grid leaves the 8th cell genuinely empty, matching the design. */
#acms-about-partners .et_pb_row { display: grid; grid-template-columns: repeat(3, 1fr); }
#acms-about-partners .et_pb_column.acms-partner-logo {
  background: var(--acms-white);
  border: 1px solid var(--acms-line);
  min-height: 220px;
  padding: 40px 44px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 !important;
  width: auto !important;
}
#acms-about-partners .acms-partner-logo .et_pb_image,
#acms-about-partners .acms-partner-logo .et_pb_image_wrap { width: auto !important; max-width: 100% !important; }
#acms-about-partners .acms-partner-logo img { max-height: 180px; max-width: 300px; width: auto; height: auto; object-fit: contain; }

/* ---------- CLOSING IMAGE ---------- */
/* Divi's own default section (~50px) AND row (~25px) padding were both left undeclared here,
   each showing a flat navy strip above/below the photo instead of the image running flush to
   the section's own edges and spanning its full height. Zero both explicitly. */
#acms-about-bottom { background: var(--acms-navy); padding: 0 !important; }
#acms-about-bottom > .et_pb_row { padding: 0 !important; }
#acms-about-bottom .et_pb_column { padding: 0 !important; }
#acms-about-bottom img { width: 100%; height: auto; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #acms-about-intro > .et_pb_row,
  #acms-about-vision > .et_pb_row { grid-template-columns: 1fr; gap: 48px; }
  #acms-about-split > .et_pb_row { grid-template-columns: 1fr; }
  #acms-about-partners .et_pb_row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  #acms-about-hero h1.et_pb_module_header { font-size: 38px; }
  #acms-about-partners .et_pb_row { grid-template-columns: 1fr; }
}

/* 'Wits University / School of Social Sciences' stat block -- Divi's own bodyFont.lineHeight
   (1.9em) attribute silently no-ops (computed line-height came back exactly == font-size, i.e.
   1.0), same class of Divi-attribute-doesn't-apply bug documented elsewhere on this project.
   Forced via plain CSS on the stable auto-generated instance class instead. */
#acms-about-stats-col .acms-about-stat-lineheight-fix p { line-height: 1.3 !important; }

/* Divi's own default ~50px section padding was stacking on top of the grid's own 48px column
   padding for extra unwanted space -- but the design DOES want deliberate breathing room here
   (88px/96px, prototype's own wrapper padding), just not Divi's inconsistent default on top of
   it. Zero the section, put the real design-intent padding explicitly on the row instead --
   without this the two-card grid stretches edge-to-edge instead of floating with white space
   around it like the design. */
/* The grid+grout styling below (background:var(--acms-line) + border, on the ROW) is only
   meant to create the thin 2px hairline gap BETWEEN the two cards, matching the design's inner
   grid wrapper -- but the row was also carrying the page's 88/60/96 breathing-room padding,
   so that grey grout color was bleeding across the entire padded area instead of staying
   confined to a thin line around the cards. Fix: padding moves to the SECTION (white,
   surrounds everything), row goes back to zero padding so its grey background only shows
   through the actual 2px gap + 1px border immediately around the two columns. */
#acms-about-split { padding: 88px 60px 96px !important; }
#acms-about-split > .et_pb_row { padding: 0 !important; }

/* HERO-HEIGHT-CONSISTENCY */
#acms-about-hero { min-height: 339px !important; }