/* ==========================================================================
  Faculty Cards (Grid / Columns / List)
   Structure goals
   - GRID: cards centered; CTA ("Faculty Bio") pinned to bottom of card
   - COLUMNS/LIST: image left, text stack right; CTA pinned to bottom, left-aligned
   - Responsive image caps to prevent layout blowups
   ========================================================================== */


/* ========== Base visuals (shared) ========== */

.facultyMember { padding: 10px !important; }

.facultyMembers .facultyMember img {
  display: block;
  border-radius: 0;
  background: #fff;
  height: auto;
  max-width: 220px;
  max-height: 220px;
  margin: 10px !important;
}

/* Name + hover */
.facultyMembers .facultyMember a.facultyImageLink:hover + .facultyData .facultyName,
.facultyMembers .facultyMember a.facultyImageLink:focus-visible + .facultyData .facultyName,
.facultyMembers .facultyMember > img.facultyImage:hover + .facultyData .facultyName,
.facultyMembers .facultyMember > img.facultyImage:focus-visible + .facultyData .facultyName,
.facultyMembers .facultyMember > img:hover + .facultyData .facultyName { color: var(--ocean); }

.facultyMembers .facultyName {
  text-transform: uppercase;
  font-family: var(--font-sans);
  color: var(--midnight);
  font-weight: 600 !important;
  line-height: 1.2;
  font-size: 1rem;
  margin: 0 0 2px 0;
}
.facultyNameLink:hover .facultyName,
.facultyNameLink:focus-visible .facultyName {
  color: var(--ocean);
  text-decoration: none;
}

.facultyMembers .facultyName  a {
  color:var(--midnight);
}

.facultyMembers .facultyName a:hover {
  color:var(--sky) !important;
}

.facultyMembers .facultyTitles {
  font-family: var(--font-sans);
  color: var(--slate);
  font-size: 0.8125rem !important;
  line-height: 1.1;
  margin: 0 0 4px 0;
}
.facultyMembers .facultyTitle { margin-bottom: 6px; }

.facultyMembers .facultySchool {
  font-family: var(--font-sans);
  color: #101820;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.1;
  margin-bottom: 10px;
  font-style: italic;
}

/* CTA link */
.facultyMembers .facultyLink:any-link {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.1 !important;
  font-weight: 700;
  font-size: 14px;
  color: var(--ocean);
  text-decoration: none;
  padding: 0 !important;
  margin: 0 !important;
}


/* =======================================================================
   GRID view (card gallery) — 6 / 3 / 1 columns
   ======================================================================= */

/* Wrapper: equal heights per row via stretch; 10px gutters */
.facultyMembers.display-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  align-items: stretch;
}

/* Card: 6 across ≥992px */
.facultyMembers.display-grid .facultyMember {
  box-sizing: border-box;
  flex: 0 1 calc((100% - 5 * 10px) / 6);
  max-width: calc((100% - 5 * 10px) / 6);
  background: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: auto !important;     /* let the row's tallest card decide */
  padding: 0 !important;           /* grid cards manage their own padding */
}

/* Media area: square with a clean 10px “frame” */
.facultyMembers.display-grid .facultyMember > a.facultyImageLink,
.facultyMembers.display-grid .facultyMember > picture,
.facultyMembers.display-grid .facultyMember > img.facultyImage,
.facultyMembers.display-grid .facultyMember > img {
  display: block;
  width: calc(100% - 20px);
  aspect-ratio: 1 / 1;
  margin: 10px;                    /* 10px on all sides */
  overflow: hidden;
  background: #fff;
}

/* Actual image fills & crops the square (don’t stretch the whole card) */
.facultyMembers.display-grid .facultyMember > a.facultyImageLink > img,
.facultyMembers.display-grid .facultyMember > picture > img,
.facultyMembers.display-grid .facultyMember > img.facultyImage {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  border-radius: 0;
  background: #fff;
  max-height: none !important;
}
/* Also neutralize any global grid img stretching */
.facultyMembers.display-grid .facultyMember img {
  height: auto !important;
  margin: 0 !important;
}

/* Text stack: centered; CTA pins to bottom only when present */
.facultyMembers.display-grid .facultyData {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding: 0 10px 0 10px !important;
}
.facultyMembers .facultyData:has(.facultyLink) .facultyLink { margin-top: auto !important; }

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

/* Mobile: 1 across */
@media (max-width: 575.98px) {
  .facultyMembers.display-grid .facultyMember { flex: 0 1 100%; max-width: 100%; }
}


/* =======================================================================
   COLUMNS view (two-up list)
   ======================================================================= */

.facultyMembers.display-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.facultyMembers.display-columns .facultyMember {
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: #fff;
  padding: 10px !important;
}

/* Media column */
.facultyMembers.display-columns .facultyMember > :first-child {
  flex: 0 0 120px;
  width: 120px;
  align-self: stretch;
  margin: 0 !important;
}

/* Fill & crop media */
.facultyMembers.display-columns .facultyMember > :first-child img,
.facultyMembers.display-columns .facultyMember > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none !important;
  margin: 0 !important;
  display: block;
  border-radius: 0;
  background: #fff;
}

/* Right column + bottom-pinned CTA */
.facultyMembers.display-columns .facultyData {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0 0 0;
  text-align: left;
  align-items: flex-start;
}
.facultyMembers.display-columns .facultyLink { margin-top: auto; align-self: flex-start; }


/* =======================================================================
   LIST view (single column, stacked rows)
   ======================================================================= */

.facultyMembers.display-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 !important;
}

.facultyMembers.display-list .facultyMember {
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: #fff;
  min-height: 120px;
  padding: 10px !important;
}
.facultyMembers.display-list .facultyInfo { margin-top: -10px !important; }

/* Media column */
.facultyMembers.display-list .facultyMember > :first-child {
  flex: 0 0 120px;
  width: 120px;
  align-self: stretch;
  margin: 0 !important;
}

/* Fill & crop media */
.facultyMembers.display-list .facultyMember > :first-child img,
.facultyMembers.display-list .facultyMember > img {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  margin: 0 !important;
  display: block;
  border-radius: 0;
  background: #fff;
}

/* Right column + bottom-pinned CTA */
.facultyMembers.display-list .facultyData {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  align-items: flex-start;
  padding: 0;
}
.facultyMembers.display-list .facultyName { margin-top: 15px; }
.facultyMembers.display-list .facultyLink { margin-top: auto; }


/* =======================================================================
   Responsive tweaks
   ======================================================================= */

/* Medium desktop/tablet: shrink media column in columns view; tighten padding */
@media (max-width: 1150px) {
  .facultyMembers.display-columns .facultyMember > :first-child { flex-basis: 100px; width: 100px; }
  .facultyMembers.display-columns .facultyData { padding: 5px; }
}

/* Tablet: two-up columns collapse to one column */
@media (max-width: 850px) {
  .facultyMembers.display-columns { grid-template-columns: 1fr; }

  .facultyMembers.display-grid .facultyMember > a.facultyImageLink > img,
  .facultyMembers.display-grid .facultyMember > picture > img,
  .facultyMembers.display-grid .facultyMember > img.facultyImage {
    max-height: none !important;
    max-width: none !important;
  }
}

/* Mobile: reduce media column width in list/columns rows */
@media (max-width: 768px) {
  .facultyMembers.display-columns .facultyMember > :first-child,
  .facultyMembers.display-list .facultyMember > :first-child { flex-basis: 100px; width: 100px; }
}

/* Desktop safeguard for list view media */
@media (min-width: 769px) {
  .facultyMembers.display-list .facultyMember > :first-child img,
  .facultyMembers.display-list .facultyMember > img { height: 100% !important; max-height: none !important; }
}


/* Mobile: make grid card image full width (edge-to-edge) */
@media (max-width: 575.98px) {
  .facultyMember { padding: 10px !important; }
  .facultyMembers.display-grid .facultyMember > a.facultyImageLink,
  .facultyMembers.display-grid .facultyMember > picture,
  .facultyMembers.display-grid .facultyMember > img.facultyImage,
  .facultyMembers.display-grid .facultyMember > img,
  .facultyMembers.display-grid .facultyMember > .facultyImage {
    width: calc(100% - 20px);  /* full width minus 10px on each side */
    margin: 10px;              /* the white “frame” */
    aspect-ratio: 1 / 1;       /* keep square crop */
    overflow: hidden;
    background: #fff;
  }

  .facultyMembers.display-grid .facultyMember > a.facultyImageLink > img,
  .facultyMembers.display-grid .facultyMember > picture > img,
  .facultyMembers.display-grid .facultyMember > img.facultyImage {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    max-width: none !important;
  }

    /*  Mobile typography  */
   .facultyMembers.facultyName {
    text-transform:uppercase;
    font-family:var(--font-sans);
    color:var(--midnight);
    font-weight:600;
    line-height:1.2;
    font-size:1.125rem;
    margin:0 0 6px !important;
  }

  .facultyMembers.facultyTitle {
    font-family:var(--font-sans);
    color:var(--text-color);
    font-size:1rem;
    line-height:1.1;
    margin:0 0 6px 0;
  }

   .facultyMembers.facultySchool {
    font-family:var(--font-sans);
    color: var(--midnight);
    font-weight:700;
    font-size:1rem;
    line-height:1.1;
    margin:0 0 16px 0;
    font-style:italic;
  }

  /* CTA / meta links (grid + hz) */
  .facultyMembers .facultyLink:any-link {
    font-family:var(--font-sans);
    text-transform:uppercase;
    letter-spacing:0.015em;
    line-height: 1.25em !important;
    font-weight:700;
    font-size:0.8125rem;
    color:var(--ocean);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:4px;
  }

}



/* =======================================================================
   Collapse empty/whitespace-only rows (all views & breakpoints)
   ======================================================================= */

.facultyMembers .facultyName:empty,
.facultyMembers .facultyTitles:empty,
.facultyMembers .facultyTitle:empty,
.facultyMembers .facultySchool:empty,
.facultyMembers .facultyInfo:empty { display: none !important; }

.facultyMembers .facultyName:not(:has(*)):empty,
.facultyMembers .facultyTitles:not(:has(*)):empty,
.facultyMembers .facultyTitle:not(:has(*)):empty,
.facultyMembers .facultySchool:not(:has(*)):empty,
.facultyMembers .facultyInfo:not(:has(*)):empty { display: none !important; }

/* If the whole meta stack ends up empty, remove its space entirely */
.facultyMembers .facultyData:empty,
.facultyMembers .facultyData:not(:has(*)) { display: none !important; }

/* Normalize spacing in the stack so collapsing items don’t leave stray gaps */
.facultyMembers .facultyData {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;                    /* allow shrink as children collapse */
  padding: 0 10px 0 10px !important;
}
.facultyMembers .facultyData > * { margin: 0 !important; }


/* =======================================================================
   Inline contact links (tight spacing for email/phone/calendar)
   ======================================================================= */

.facultyInlineContact {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;                  /* tighter horizontal space */
  row-gap: 4px;                     /* small wrap spacing on small screens */
  margin: 4px 0 0 0;
  padding: 0;
}

/* If rendered as a list, strip bullets/margins/padding */
.facultyInlineContact,
.facultyInlineContact ul,
.facultyInlineContact ol { list-style: none; margin: 0 !important; padding: 0 !important; }
.facultyInlineContact li { margin: 0 !important; padding: 0 !important; }

.facultyInlineContact a:any-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;                         /* icon ↔ label */
  line-height: 1.15;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none;
  color: var(--ocean);
  font: inherit;
}
.facultyInlineContact a:any-link:hover { color: var(--sky); }

/* Icons align cleanly with text */
.facultyInlineContact a svg,
.facultyInlineContact a i {
  width: 1em;
  height: 1em;
  line-height: 1;
  flex: 0 0 auto;
}


/* =============================================================
   MOBILE: make COLUMNS and LIST look like GRID (≤575.98px)
   ============================================================= */
@media (max-width: 575.98px) {

  /* Turn rows into stacked cards */
  .facultyMembers.display-columns .facultyMember,
  .facultyMembers.display-list .facultyMember {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 !important;          /* match grid cards */
    padding-top: 10px !important;
    gap: 0 !important;               /* image frame handles spacing */
  }

  /* Remove fixed media column widths from desktop */
  .facultyMembers.display-columns .facultyMember > :first-child,
  .facultyMembers.display-list .facultyMember > :first-child {
    flex: 0 0 auto;
    width: auto;
    align-self: auto;
    margin: 0 !important;
  }

  /* Media box: same 10px white “frame” + square crop as grid */
  .facultyMembers.display-columns .facultyMember > a.facultyImageLink,
  .facultyMembers.display-columns .facultyMember > picture,
  .facultyMembers.display-columns .facultyMember > img.facultyImage,
  .facultyMembers.display-columns .facultyMember > img,
  .facultyMembers.display-list .facultyMember > a.facultyImageLink,
  .facultyMembers.display-list .facultyMember > picture,
  .facultyMembers.display-list .facultyMember > img.facultyImage,
  .facultyMembers.display-list .facultyMember > img {
    display: block;
    width: calc(100% - 20px);
    margin: 10px;                    /* the 10px “border” */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
  }

  /* Actual image fills & crops the square */
  .facultyMembers.display-columns .facultyMember > a.facultyImageLink > img,
  .facultyMembers.display-columns .facultyMember > picture > img,
  .facultyMembers.display-columns .facultyMember > img.facultyImage,
  .facultyMembers.display-list .facultyMember > a.facultyImageLink > img,
  .facultyMembers.display-list .facultyMember > picture > img,
  .facultyMembers.display-list .facultyMember > img.facultyImage {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    max-width: none !important;
    border-radius: 0;
    background: #fff;
  }

  /* Text stack: center + same side padding as grid */
  .facultyMembers.display-columns .facultyData,
  .facultyMembers.display-list .facultyData {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    padding: 0 10px 0 10px !important;
  }

  /* Pin CTA only if present; center it */
  .facultyMembers.display-columns .facultyData:has(.facultyLink) .facultyLink,
  .facultyMembers.display-list .facultyData:has(.facultyLink) .facultyLink {
    margin-top: auto !important;
    align-self: center;
  }

  /* Optional: slightly larger mobile name sizing (fix selector) */
  .facultyMembers .facultyName {
    font-size: 1rem;
    margin-bottom: 6px !important;
  }
}





/* ==========================================================================
   FACULTY — Hover → name turns SKY when NAME or IMAGE is hovered
   (Grid + Columns + List)
   Place AFTER all earlier faculty rules.
   ========================================================================== */

/* Baseline: keep name link midnight unless hovered */
.facultyMembers .facultyName a:any-link,
.facultyMembers .facultyName a:visited {
  color: var(--midnight) !important;
  text-decoration: none;
}

/* Name itself hovered/focused → sky */
.facultyMembers .facultyName a:hover,
.facultyMembers .facultyName a:focus-visible {
  color: var(--sky) !important;
}

/* ---------- GRID ---------- */
/* Override your earlier “ocean” image-hover rule */
.facultyMembers .facultyMember a.facultyImageLink:hover + .facultyData .facultyName,
.facultyMembers .facultyMember a.facultyImageLink:focus-visible + .facultyData .facultyName,
.facultyMembers .facultyMember > img.facultyImage:hover + .facultyData .facultyName,
.facultyMembers .facultyMember > img.facultyImage:focus-visible + .facultyData .facultyName,
.facultyMembers .facultyMember > img:hover + .facultyData .facultyName,
.facultyMembers .facultyMember > picture:hover + .facultyData .facultyName {
  color: var(--sky) !important;
}

/* Robust version (works even if extra wrappers are used) */
.facultyMembers.display-grid .facultyMember:has( a.facultyImageLink:hover ) .facultyName,
.facultyMembers.display-grid .facultyMember:has( a.facultyImageLink:focus-within ) .facultyName,
.facultyMembers.display-grid .facultyMember:has( picture:hover ) .facultyName,
.facultyMembers.display-grid .facultyMember:has( img.facultyImage:hover ) .facultyName,
.facultyMembers.display-grid .facultyMember:has( img:hover ) .facultyName {
  color: var(--sky) !important;
}

/* ---------- COLUMNS & LIST ---------- */
/* When the media column (first child) is hovered/focused, light the name */
.facultyMembers.display-columns .facultyMember > :first-child:hover + .facultyData .facultyName,
.facultyMembers.display-columns .facultyMember > :first-child:focus-within + .facultyData .facultyName,
.facultyMembers.display-list    .facultyMember > :first-child:hover + .facultyData .facultyName,
.facultyMembers.display-list    .facultyMember > :first-child:focus-within + .facultyData .facultyName {
  color: var(--sky) !important;
}

/* Robust :has() variants for nested links/pictures/images in the first column */
.facultyMembers.display-columns .facultyMember:has( > :first-child a:hover ) .facultyName,
.facultyMembers.display-columns .facultyMember:has( > :first-child a:focus-within ) .facultyName,
.facultyMembers.display-columns .facultyMember:has( > :first-child picture:hover ) .facultyName,
.facultyMembers.display-columns .facultyMember:has( > :first-child img:hover ) .facultyName,
.facultyMembers.display-list    .facultyMember:has( > :first-child a:hover ) .facultyName,
.facultyMembers.display-list    .facultyMember:has( > :first-child a:focus-within ) .facultyName,
.facultyMembers.display-list    .facultyMember:has( > :first-child picture:hover ) .facultyName,
.facultyMembers.display-list    .facultyMember:has( > :first-child img:hover ) .facultyName {
  color: var(--sky) !important;
}

/* If you also wrap the NAME in a helper link container */
.facultyNameLink:hover .facultyName,
.facultyNameLink:focus-visible .facultyName {
  color: var(--sky) !important;
}