/* ACMS Roster pages (Staff / Research Associates / Students / Alumni / Visiting Researchers) —
   shared template CSS, enqueued on all five pages (see functions.php). */

.acms-rule { width: 64px; height: 5px; background: var(--acms-yellow); }
.acms-rule--sm { width: 52px; height: 4px; }

#acms-roster-hero,
#acms-roster-intro,
#acms-roster-grid-sec,
#acms-roster-strip { margin-bottom: 0 !important; }
#acms-roster-hero .et_pb_module,
#acms-roster-intro .et_pb_module,
#acms-roster-grid-sec .et_pb_module,
#acms-roster-strip .et_pb_module { margin-bottom: 0; }

/* ---------- PAGE TITLE BAND ---------- */
#acms-roster-hero { position: relative; background: var(--acms-navy); overflow: hidden; padding: 0 !important; }
#acms-roster-hero .et_pb_code,
#acms-roster-hero .et_pb_code_inner { display: contents; }
#acms-roster-hero .et_pb_column { position: static; }
#acms-roster-hero .acms-hero-photo,
#acms-roster-hero .acms-hero-scrim { position: absolute; inset: 0; z-index: 0; }
#acms-roster-hero .acms-hero-photo { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
#acms-roster-hero .acms-hero-scrim { background: linear-gradient(90deg, rgba(11,57,79,.92) 0%, rgba(11,57,79,.62) 70%, rgba(11,57,79,.35) 100%); }
#acms-roster-hero > .et_pb_row { position: relative; z-index: 1; padding: 56px 60px 64px !important; }
#acms-roster-hero .et_pb_column { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
#acms-roster-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-roster-hero .acms-breadcrumb a { color: var(--acms-hero-muted); text-decoration: none; }
#acms-roster-hero .acms-breadcrumb a:hover { color: var(--acms-white); }
#acms-roster-hero .acms-crumb-current { color: var(--acms-yellow); }
#acms-roster-hero h1.et_pb_module_header { font: 700 54px/1.1 var(--acms-font); color: var(--acms-white); padding-bottom: 0; }
#acms-roster-hero .acms-hero-sub p { font: 400 19px/1.6 var(--acms-font); color: rgba(255,255,255,.9); max-width: 760px; padding-bottom: 0; text-wrap: pretty; }

/* ---------- INTRO ---------- */
#acms-roster-intro { padding-top: 72px !important; }
#acms-roster-intro > .et_pb_row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: start; }
#acms-roster-intro > .et_pb_row > .et_pb_column { width: auto !important; margin: 0 !important; }
#acms-roster-intro .acms-lead p { font: 600 21px/1.65 var(--acms-font); color: var(--acms-navy); padding-bottom: 0; text-wrap: pretty; }
#acms-roster-intro .acms-body p { font: 400 17px/1.75 var(--acms-font); color: var(--acms-body); padding-bottom: 0; }

/* ---------- FILTER/COUNT ROW + GRID ---------- */
#acms-roster-grid-sec { padding: 56px 60px 96px !important; }
#acms-roster-count {
  border-bottom: 1px solid var(--acms-line);
  padding-bottom: 24px;
  margin-bottom: 36px;
}
/* #acms-roster-count is now rendered directly by the [acms_roster] shortcode's own
   output (a real element id, not a Divi column id as before), so it's styled directly
   rather than via a wrapping .et_pb_code_inner selector. */
#acms-roster-count {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.acms-roster-filters { display: contents; }
.acms-roster-filters button {
  border: 1px solid #d7e0e6; background: var(--acms-white); color: var(--acms-navy);
  font: 700 14px/1 var(--acms-font); letter-spacing: .03em;
  padding: 11px 20px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.acms-roster-filters button:hover { border-color: var(--acms-navy); }
.acms-roster-filters button.is-active { background: var(--acms-yellow); border-color: var(--acms-yellow); color: var(--acms-brown); }
.acms-roster-count-spacer { flex: 1; }
.acms-roster-count-label {
  font: 700 14px/1 var(--acms-font); letter-spacing: .1em; text-transform: uppercase; color: var(--acms-muted);
}

.acms-roster-people-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px; background: var(--acms-line); border: 1px solid var(--acms-line);
}
.acms-roster-people-grid a.acms-person-card {
  background: var(--acms-white); text-decoration: none;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease;
}
.acms-roster-people-grid a.acms-person-card:hover { box-shadow: 0 10px 26px rgba(21,89,122,.14); }
.acms-person-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--acms-img-bg); }
.acms-person-tag { position: absolute; top: 0; left: 0; background: var(--acms-yellow); color: var(--acms-brown); font: 800 11px/1 var(--acms-font); letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; }
.acms-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acms-person-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.acms-person-name { font: 700 18px/1.3 var(--acms-font); color: var(--acms-navy); }
.acms-person-role { font: 400 14px/1.5 var(--acms-font); color: var(--acms-muted); flex: 1; }
.acms-person-cta { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--acms-font); letter-spacing: .08em; text-transform: uppercase; color: var(--acms-brown); padding-top: 6px; }

.acms-roster-empty {
  border: 1px dashed var(--acms-border); background: #f8fafb;
  padding: 44px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.acms-roster-empty .acms-empty-label { font: 800 12px/1 var(--acms-font); letter-spacing: .14em; text-transform: uppercase; color: var(--acms-brown); }
.acms-roster-empty .acms-empty-body { font: 400 16px/1.7 var(--acms-font); color: var(--acms-body); max-width: 620px; }

/* ---------- CROSS-LINK STRIP ---------- */
/* Padding lives on the SECTION (wash background, real breathing room, matches the prototype's
   72/60/80 wrapper padding) -- not on the row. The row carries only the grid+grout styling
   (a 2px gap + 1px border in the grey line color, meant to read as a thin hairline between the
   two cards). Divi's own undeclared default padding on both the section and the row was left
   unset before, so the grey grout color bled across a whole default-sized padding box instead
   of staying confined to a thin line -- looked like the cards were floating inside their own
   separate grey-boxed container instead of directly on the wash section. */
#acms-roster-strip { background: var(--acms-wash); border-top: 1px solid var(--acms-line); padding: 72px 60px 80px !important; }
#acms-roster-strip > .et_pb_row {
  display: grid; gap: 2px; background: var(--acms-line); border: 1px solid var(--acms-line);
  padding: 0 !important;
}
#acms-roster-strip.acms-strip-uneven > .et_pb_row { grid-template-columns: 1.4fr 1fr; }
#acms-roster-strip.acms-strip-even > .et_pb_row { grid-template-columns: 1fr 1fr; }
#acms-roster-strip .et_pb_column { background: var(--acms-white); padding: 44px; margin: 0 !important; width: auto !important; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
#acms-roster-strip h2.et_pb_module_header { font: 700 30px/1.3 var(--acms-font); color: var(--acms-navy); padding-bottom: 0; }
#acms-roster-strip .acms-body { flex: 1; }
#acms-roster-strip .acms-body p { font: 400 17px/1.75 var(--acms-font); color: var(--acms-body); padding-bottom: 0; }
#acms-roster-strip .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-roster-strip .et_pb_button:hover { background: var(--acms-yellow-hover) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #acms-roster-intro > .et_pb_row { grid-template-columns: 1fr; gap: 48px; }
  #acms-roster-strip.acms-strip-uneven > .et_pb_row,
  #acms-roster-strip.acms-strip-even > .et_pb_row { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  #acms-roster-hero h1.et_pb_module_header { font-size: 38px; }
}

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