/* ===========================
   Faculty Cards (People-style)
   =========================== */

/* ---------- Vars & wrapper ---------- */
.facultyMembers{
  --gap: 10px;
  --pad-x: 10px;

  --name-size:   clamp(0.90rem, 0.75vw, 1.05rem);
  --title-size:  clamp(0.78rem, 0.62vw, 0.90rem);
  --school-size: clamp(0.70rem, 0.55vw, 0.80rem);

  /* Meta rows (contacts/extras) text sizing */
  --contact-size: clamp(0.72rem, 0.60vw, 0.78rem);

  /* Vertical rhythm for meta rows */
  --row-gap: 0px;
  --row-min: calc(1.1em + 0.35rem);

  --font: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --ocean: #007FA3;
  --sky:   #00AEC7;
  --ink:   #101820;
  --card-border: rgba(214,210,196,.35);
  --card-border-hover: rgba(214,210,196,.65);
}

/* ---------- Card container ---------- */
.facultyMembers .facultyMember{
  background:#fff;
  border-radius:0;
  overflow:hidden;
  box-shadow: inset 0 0 0 1px var(--card-border), 0 6px 18px rgba(0,0,0,.06);
}

/* Collapse truly empty wrappers */
.facultyMembers .facultyMeta:empty,
.facultyMembers .facultyContacts:empty,
.facultyMembers .facultyExtras:empty,
.facultyMembers .facultyData > :empty{ display:none !important; }

/* Helpers to hide containers with no interactive children (modern) */
.facultyMembers .facultyContacts:not(:has(a)){ display:none !important; }
.facultyMembers .facultyExtras:not(:has(a, .fts-view-bio-btn)){ display:none !important; }

/* ======================================================
   GRID layout (cards) — equal height, centered alignment
   ====================================================== */
.facultyMembers.display-grid{
  --contact-size: clamp(0.72rem, 0.60vw, 0.78rem);
  display:flex; flex-wrap:wrap; gap: var(--gap);
  justify-content:left; align-items:stretch;
}

/* Default (≥992px): 6 across */
.facultyMembers.display-grid .facultyMember{
  box-sizing:border-box;
  flex: 0 1 calc((100% - 5 * var(--gap)) / 6);
  max-width: calc((100% - 5 * var(--gap)) / 6);
  width: calc((100% - 5 * var(--gap)) / 6);

  /* Equal-height card: [image][content/meta fills][(no separate footer)] */
  display:grid;
  grid-template-rows: auto 1fr auto;

  text-align:center;
  padding: 6px var(--pad-x) 8px var(--pad-x);
}

/* 3 across */
@media (max-width: 991px) and (min-width: 576px){
  .facultyMembers.display-grid .facultyMember{
    flex: 0 1 calc((100% - 2 * var(--gap)) / 3);
    max-width: calc((100% - 2 * var(--gap)) / 3);
  }
}
/* 1 across */
@media (max-width: 575.98px){
  .facultyMembers.display-grid .facultyMember{
    flex: 0 1 100%;
    max-width: 100%;
  }
}

/* Image (square, top-center focal) */
.facultyMembers.display-grid .facultyImage{
  grid-row: 1;
  width:100%; aspect-ratio: 1/1; display:block; height:auto;
  object-fit:cover; object-position: 50% 0;
  margin: 0 0 8px 0 !important; border:0; border-radius:0;
}

/* Body stack; meta block sits at bottom */
.facultyMembers.display-grid .facultyData{
  grid-row: 2 / span 2;
  display:flex; flex-direction:column; align-items:center;
  gap: 4px; min-width:0; padding:0 var(--pad-x);
}

/* Typography (grid) */
.facultyMembers.display-grid .facultyName a{
  margin:0 !important; padding:0 !important; line-height:1.2 !important;
  color: #101820!important; font-weight:600 !important;
  text-transform:uppercase; letter-spacing:.03em;
  font-family: var(--font); font-size: var(--name-size) !important;
  text-decoration:none; transition: color .2s ease;
}
.facultyMembers.display-grid .facultyName a:hover{ color: var(--sky) !important; }

/* Works whether name is link or spans */
.facultyMembers .facultyImageLink:hover + .facultyData .facultyName a,
.facultyMembers .facultyImageLink:hover + .facultyData .facultyName .fac_first_name,
.facultyMembers .facultyImageLink:hover + .facultyData .facultyName .fac_last_name {
  color: var(--sky) !important;
}

.facultyMembers.display-grid .facultyTitles{
  margin:0 !important; padding:0 !important; line-height:1.2 !important;
  font-family: var(--font); font-size: var(--title-size) !important;
}
.facultyMembers.display-grid .facultyTitle{ margin-top: 4px !important; }

.facultyMembers.display-grid .facultySchool{
  margin-top:2px !important; padding:0 !important; line-height:1.2em !important;
  color:var(--ink); font-weight:600 !important; font-style:italic; letter-spacing:.015em;
  font-family: var(--font); font-size: var(--school-size) !important;
}

/* ---------- Meta rows (shared) ---------- */
.facultyMembers .facultyMeta{
  margin-top:auto;
  display:grid;
  grid-auto-flow: row;
  grid-auto-rows: minmax(var(--row-min), auto);
  row-gap: var(--row-gap);
  align-items:center;
}

/* Contacts (each line is a grid row) */
.facultyMembers .facultyContacts{
  display:grid;
  grid-auto-flow: row;
  grid-auto-rows: minmax(var(--row-min), auto);
  row-gap: var(--row-gap);
  justify-items:center; text-align:center;
  margin-top: 4px;
}
.facultyMembers.display-columns .facultyContacts,
.facultyMembers.display-list    .facultyContacts{
  justify-items:start; text-align:left;
}

/* Unified meta link styling (Email/Phone/Calendar/Website) */
.facultyMembers .facultyContact a,
.facultyMembers .facultyExtras a,
.facultyMembers.display-list .facultyInlineMeta .f-inline-item{
  display:inline-flex; align-items:center; gap:6px;
  color: var(--ocean); text-decoration:none;
  font-family: var(--font);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size: var(--contact-size) !important; line-height:1.1 !important;
  margin:0 !important; padding:0 !important;
  transition: color .2s ease;
}
.facultyMembers .facultyContact a:hover,
.facultyMembers .facultyExtras a:hover,
.facultyMembers.display-list .facultyInlineMeta .f-inline-item:hover{
  color: var(--sky);
}

/* Icon normalization (all meta icons the same size & baseline) */
.facultyMembers .facultyContact svg,
.facultyMembers .facultyExtras a svg,
.facultyMembers.display-list .facultyInlineMeta .f-inline-item svg{
  width:1em; height:1em; flex:0 0 1em; display:block; transform:none !important;
}
.facultyMembers .facultyContact a:hover svg path,
.facultyMembers .facultyExtras a:hover svg path,
.facultyMembers.display-list .facultyInlineMeta .f-inline-item:hover svg path{
  fill: var(--sky) !important;
}

/* EXTRAS row (Website/Calendar/Social) */
.facultyMembers .facultyExtras{
  display:flex; flex-wrap:wrap; gap: 6px 10px; /* subtle, even spacing */
  align-items:center;
  font-family: var(--font);
  text-transform:uppercase; letter-spacing:.06em; font-weight:600; line-height:1.1;
  font-size: var(--contact-size) !important;
  margin:0 !important; padding:0 !important;
}
.facultyMembers.display-grid .facultyExtras{ justify-content:center; }
.facultyMembers.display-columns .facultyExtras,
.facultyMembers.display-list    .facultyExtras{ justify-content:flex-start; }

/* Hover accent (grid) */
.facultyMembers.display-grid .facultyMember:hover{
  box-shadow: inset 0 0 0 1px var(--card-border-hover), 0 2px 8px rgba(16,24,32,.06);
}

/* ==============================
   COLUMNS + LIST (horizontal)
   ============================== */
.facultyMembers.display-columns{
  --contact-size: clamp(0.88rem, 0.75vw, 1.00rem);
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
}
.facultyMembers.display-list{
  --contact-size: clamp(0.88rem, 0.75vw, 1.00rem);
  display:flex; flex-direction:column; gap: var(--gap);
}

/* Horizontal cards */
.facultyMembers.display-columns .facultyMember,
.facultyMembers.display-list    .facultyMember{
  display:flex; align-items:stretch; gap: 12px;
  padding: 10px var(--pad-x); text-align:left;
  overflow:hidden; position:relative; min-width:0;
  box-shadow: inset 0 0 0 1px var(--card-border);
}

/* Image left column */
.facultyMembers.display-columns .facultyImage,
.facultyMembers.display-list    .facultyImage{
  position:relative;
  flex: 0 0 clamp(140px, 24vw, 200px);
  width: clamp(140px, 24vw, 200px);
  max-width: 200px;
  align-self: stretch;
  overflow:hidden; margin: 0 !important; border:0; border-radius:0;
  display:block; height:100%;
  object-fit:cover; object-position: 50% 0;
}

/* Right content column */
.facultyMembers.display-columns .facultyData,
.facultyMembers.display-list    .facultyData{
  flex: 1 1 auto;
  display:flex; flex-direction:column; gap: 0;
  min-width:0; padding: 0 10px 0 0;
}

/* Typography (columns/list) */
.facultyMembers.display-columns .facultyName,
.facultyMembers.display-list    .facultyName{
  margin:0 !important; padding:0 !important; line-height:1.2 !important;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-family: var(--font);
  font-size: clamp(1.05rem, 1.0vw, 1.35rem) !important;
  color: #101820 !important;
}
.facultyMembers.display-columns .facultyTitles,
.facultyMembers.display-list    .facultyTitles{
  margin-top:2px !important; padding:0 !important; line-height:1.2 !important;
  font-family: var(--font);
  font-size: clamp(0.95rem, 0.85vw, 1.15rem) !important;
  color: var(--ink);
}
.facultyMembers.display-columns .facultySchool,
.facultyMembers.display-list    .facultySchool{
  margin-top:4px !important; padding:0 !important; line-height:1.2 !important;
  font-weight:500 !important; font-style:italic; letter-spacing:.015em;
  font-family: var(--font);
  font-size: clamp(0.8125rem, 0.75vw, 1.00rem) !important;
  color: var(--ink);
}

/* Bottom block alignment */
.facultyMembers.display-columns .facultyMeta,
.facultyMembers.display-list    .facultyMeta{
  align-items: center;
  justify-items: start;
}
.facultyMembers.display-columns .facultyContacts,
.facultyMembers.display-list    .facultyContacts{
  justify-items:start; text-align:left;
}

/* Responsive stack for columns/list */
@media (max-width: 991px){
  .facultyMembers.display-columns .facultyMember,
  .facultyMembers.display-list    .facultyMember{
    flex-direction:column; gap: var(--gap); padding: 10px var(--pad-x);
  }
  .facultyMembers.display-columns .facultyImage,
  .facultyMembers.display-list    .facultyImage{
    flex: 0 0 auto; width: 100% !important; max-width: 100% !important;
    height: auto !important; aspect-ratio: 1 / 1 !important;
    object-fit: cover !important; object-position: 50% 0 !important;
  }
  .facultyMembers.display-columns .facultyData,
  .facultyMembers.display-list    .facultyData{ padding: 0; }
}

/* =======================
   LIST view: inline meta
   ======================= */
.facultyMembers.display-list .facultyData{ display:flex; flex-direction:column; }

.facultyMembers.display-list .facultyInlineMeta{
  margin-top:auto; display:flex; flex-wrap:wrap; gap: 8px 24px; align-items:center;
  font-family: var(--font); font-weight:600; text-transform:uppercase; letter-spacing:.075em;
  line-height:1.1; font-size: var(--contact-size); color: var(--ocean);
}
.facultyMembers.display-list .facultyInlineMeta .f-inline-item{ white-space:nowrap; }

/* -------------- Guards against stray margins/padding -------------- */
.facultyMembers .facultyMeta > *,
.facultyMembers .facultyContacts > *,
.facultyMembers .facultyExtras   > *{ margin:0 !important; padding:0 !important; }

/* Slightly tighter row min across the board if desired */
.facultyMembers{ --row-min: calc(1.1em + 0.25rem); }

/* Name link defaults & interactions shared for all layouts */
.facultyMembers .facultyName a{ color: var(--ink); text-decoration:none; transition: color .2s ease; }
.facultyMembers .facultyName a:hover,
.facultyMembers .facultyName a:focus{ color: var(--sky); outline: none; }

/* Hovering the image also turns the name sky */
.facultyMembers .facultyImageLink{ display:block; text-decoration:none; }
.facultyMembers .facultyImageLink:hover + .facultyData .facultyName a,
.facultyMembers .facultyImageLink:focus + .facultyData .facultyName a{ color: var(--sky); }
.facultyMembers .facultyImageLink:focus-visible{
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/* ===== Columns layout: stack meta vertically, no wrapping ===== */
.facultyMembers.display-columns .facultyMeta{
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: minmax(var(--row-min), auto);
  row-gap: 6px;
  align-items: start;
}

/* Contacts (email + phone) stacked */
.facultyMembers.display-columns .facultyContacts{
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: minmax(var(--row-min), auto);
  row-gap: 6px;
  justify-items: start;
  text-align: left;
}

/* Extras (calendar + website) stacked */
.facultyMembers.display-columns .facultyExtras{
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: minmax(var(--row-min), auto);
  row-gap: 6px;
  justify-items: start;
}

/* No wrapping for labels in columns view */
.facultyMembers.display-columns .facultyContacts a,
.facultyMembers.display-columns .facultyExtras a{ white-space: nowrap; }


/* ---- Fix: email line has extra spacing vs. others ---- */

/* 1) Prevent wrapping (wrapping makes the row taller) */
.facultyMembers .facultyContacts a {
  white-space: nowrap;
}

/* 2) Normalize the anchor box so it matches the others exactly */
.facultyMembers .facultyContact a {
  line-height: 1;              /* tighter, consistent box */
  min-height: var(--row-min);  /* keep row heights uniform */
  gap: 6px;                    /* identical icon/text gap */
  font-weight: 600;            /* same weight as others */
}

/* 3) Make sure no stray margins/padding sneak in */
.facultyMembers .facultyContact,
.facultyMembers .facultyContact > * {
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Icons: identical size & no baseline wobble */
.facultyMembers .facultyContact svg {
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  display: block;              /* removes baseline extra space */
  transform: none !important;
}

/* 5) If your LIST inline bar shows the full address, keep it on one line too */
.facultyMembers.display-list .facultyInlineMeta .f-inline-email {
  white-space: nowrap;
}



/* =========================
   Tight, equal meta rows
   ========================= */

/* 0) No wrapping anywhere in meta links (prevents row growth) */
.facultyMembers .facultyContacts a,
.facultyMembers .facultyExtras a {
  white-space: nowrap;
}

/* 1) Make every row a fixed, equal “track” height and center contents */
.facultyMembers .facultyContacts,
.facultyMembers .facultyExtras {
  /* one row per item, identical min-height, no vertical gaps */
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: minmax(var(--row-min), min-content);
  row-gap: 0 !important;
}

/* Columns view previously had 6px row-gap—remove it */
.facultyMembers.display-columns .facultyContacts,
.facultyMembers.display-columns .facultyExtras {
  row-gap: 0 !important;
}

/* 2) Each item inside the grid behaves like a single tight row */
.facultyMembers .facultyContacts > .facultyContact,
.facultyMembers .facultyExtras > a,
.facultyMembers .facultyExtras > .facultyCalendar,
.facultyMembers .facultyExtras > .facultySite {
  display: flex;
  align-items: center;
  min-height: var(--row-min);
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Unify link styling (weight + line box + spacing) */
.facultyMembers .facultyContact a,
.facultyMembers .facultyExtras a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;                 /* prevents taller line boxes */
  min-height: var(--row-min);     /* matches the grid track */
  font-weight: 600;               /* same weight for all */
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Normalize icons (identical size, no baseline wobble) */
.facultyMembers .facultyContact svg,
.facultyMembers .facultyExtras a svg {
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  display: block;                 /* removes baseline extra space */
  transform: none !important;
}

/* 5) Guardrails: no stray margins inside rows */
.facultyMembers .facultyMeta > *,
.facultyMembers .facultyContacts > *,
.facultyMembers .facultyExtras   > * {
  margin: 0 !important;
  padding: 0 !important;
  margin-top: auto !important;
}

/* (optional) If you want a hair of breathing room between the
   Contacts block and the Extras block, control it here, not per-row */
.facultyMembers .facultyContacts + .facultyExtras {
  margin-top: 2px; /* tweak to taste (0–4px) */
}

/* ========= GRID VIEW FIX: equal rows + perfect centering ========= */

/* 1) Meta area in grid view: uniform tracks, centered content */
.facultyMembers.display-grid .facultyMeta{
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: minmax(var(--row-min), min-content);
  row-gap: 0;
  align-items: center;     /* center items within their row */
  justify-items: center;   /* center each row block horizontally */
    margin-top: auto !important;

}

/* 2) Contacts & Extras blocks: identical, no internal gap, centered */
.facultyMembers.display-grid .facultyContacts,
.facultyMembers.display-grid .facultyExtras{
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: minmax(var(--row-min), min-content);
  row-gap: 0;
  justify-items: center;   /* center each row */
  text-align: center;
  margin-top: 0;           /* remove the extra 4px from grid view */
}

/* 3) Each line (email/phone/calendar/website) = one centered row */
.facultyMembers.display-grid .facultyContacts > .facultyContact,
.facultyMembers.display-grid .facultyExtras > *{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--row-min);
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Links inside rows: identical line boxes so rows match exactly */
.facultyMembers.display-grid .facultyContact a,
.facultyMembers.display-grid .facultyExtras a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;                 /* prevents taller line boxes */
  min-height: var(--row-min);     /* matches track height */
  white-space: nowrap;            /* prevents wrapping growth */
  font-weight: 600;               /* same weight everywhere */
  margin: 0 !important;
  padding: 0 !important;
}

/* 5) Icon normalization in grid view */
.facultyMembers.display-grid .facultyContact svg,
.facultyMembers.display-grid .facultyExtras a svg{
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  display: block;                 /* remove baseline wobble */
  transform: none !important;
}

/* ===== Merge contacts + extras into one seamless grid (no gaps) ===== */

/* 0) Keep the meta area pinned to the bottom and evenly spaced */
.facultyMembers.display-grid .facultyMeta,
.facultyMembers.display-columns .facultyMeta{
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: minmax(var(--row-min), min-content);
  row-gap: 0;                 /* no seam between the two groups */
  align-items: center;
  justify-items: center;
  margin-top: 8px;
}

/* Columns view stays left-aligned but still one stack */
.facultyMembers.display-columns .facultyMeta{
  align-items: start;
  justify-items: start;
  margin-top: auto !important;
}

/* 1) Flatten the two wrapper blocks so their children share the same grid */
.facultyMembers.display-grid .facultyContacts,
.facultyMembers.display-grid .facultyExtras,
.facultyMembers.display-columns .facultyContacts,
.facultyMembers.display-columns .facultyExtras{
  display: contents;          /* removes the “group gap” without changing HTML */
}

/* 2) Nuke any margins that could re-introduce seams */
.facultyMembers.display-grid .facultyContacts,
.facultyMembers.display-grid .facultyExtras,
.facultyMembers.display-columns .facultyContacts,
.facultyMembers.display-columns .facultyExtras{
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Each line (email/phone) wrapper becomes a grid row */
.facultyMembers .facultyContact{
  display: flex;
  align-items: center;
  justify-content: center;    /* centered in grid view */
  min-height: var(--row-min);
  margin: 0 !important;
  padding: 0 !important;
}

/* Columns view: left-align those rows */
.facultyMembers.display-columns .facultyContact{ justify-content: flex-start; }

/* 4) Links (email/phone/calendar/website) share identical line boxes */
.facultyMembers .facultyContact a,
.facultyMembers .facultyExtras a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;             /* prevents a taller email row */
  min-height: var(--row-min);
  white-space: nowrap;
  font-weight: 600;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5) Icon normalization */
.facultyMembers .facultyContact svg,
.facultyMembers .facultyExtras a svg{
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  display: block;             /* removes baseline wobble */
  transform: none !important;
}

/* 6) Grid-specific centering of the now-flattened rows */
.facultyMembers.display-grid .facultyContact,
.facultyMembers.display-grid .facultyExtras a{
  justify-content: center;
  text-align: center;
}

/* 7) If Bio button appears in Extras, keep it visually consistent or hide here */
/* .facultyMembers.display-grid .facultyExtras .fts-view-bio-btn{
  display: inline-flex;
  align-items: center;
  min-height: var(--row-min);
  font-weight: 600;
} */

/* Remove default <p> margin under the name in GRID view */
.facultyMembers.display-grid .facultyName{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* Optional: keep a tiny, explicit rhythm above the title/school if needed */
.facultyMembers.display-grid .facultyName + .facultyTitles{ margin-top: 0px !important; line-height: 1.2em !important; }
.facultyMembers.display-grid .facultyTitles + .facultySchool{ margin-top: 2px !important; }

/* (If any theme styles re-introduce paragraph margins inside the data column) */
.facultyMembers.display-grid .facultyData p{ margin: 0 !important; }


/* Equal-height header (name/title/school) in GRID view */
.facultyMembers.display-grid .facultyInfo{
  /* Fallback = auto; JS will set --equal-info to the tallest */
  min-height: var(--equal-info, auto);
  display: flex;
  flex-direction: column;
  align-items: center;   /* keep centered like the rest of grid */
  gap: 4px;
}


/* Let JS set an equal min-height per row in grid view */
.facultyMembers.display-grid .facultyInfo{
  min-height: 0; /* will be overridden inline by JS */
}