/* =========================================================
  PEOPLE CARDS — Grid + HZ (Columns/List)
  - All cards keep 10px padding
  - Columns: equal width & equal height rows
  - List: same left-image/right-body logic as Columns
  - Icons tight; meta pinned to bottom
  ========================================================= */

/* ===== Shared (grid + hz) ===== */
.fts-person-card,
.fts-person-card-hz {
  background:#fff;
  box-sizing:border-box;
  gap: 8px;
}

.fts-person-name,
.fts-person-name-hz {
  color:var(--midnight);
  font-family:var(--font-sans);
  font-weight:600 !important;
  font-size:1rem;
  line-height:1.2;
  text-transform:uppercase;
  margin:0 0 4px !important;
}

.fts-person-name a,
.fts-person-name-hz a {
  color:var(--midnight);
}

.fts-person-name a:hover,
.fts-person-name-hz a:hover {
  color:var(--sky) !important;
}

.fts-person-title,
.fts-person-title-hz {
  font-family:var(--font-sans);
  color:var(--slate);
  font-size:0.875rem !important;
  line-height:1.1;
  margin:0 0 6px 0;
}

.fts-major-publication,
.fts-notable-contribution {
  color:var(--denim) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height:1.1;
  margin:0 0 2px 0;
}

.fts-person-school,
.fts-person-school-hz {
  font-family:var(--font-sans);
  color: var(--midnight);
  font-weight:700;
  font-size:0.8125rem !important;
  line-height:1.15;
  margin:0 0 8px 0;
  font-style:italic;
}

.pub-list,
.contrib-list {
  font-size: 0.875rem !important;
}

.pub-list li,
.contrib-list li {
  font-size: 0.875rem !important;
}

/* Contact links (grid + hz) */
.fts-person-bottom a:any-link,
.fts-person-bottom-hz a:any-link,
.fts-inline-contact-info a:any-link {
  font-family:var(--font-sans);
  text-transform:uppercase;
  letter-spacing:0.015em;
  line-height: 1.15em !important;
  font-weight:700;
  font-size:0.7rem; /* slightly smaller */
  color:var(--ocean);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin: 0px !important;
  padding: 0px !important;
}
.fts-person-bottom a svg,
.fts-person-bottom-hz a svg,
.fts-inline-contact-info a svg {
  width:1em;
  height:1em;
}
.fts-person-bottom a:any-link:hover,
.fts-person-bottom-hz a:any-link:hover,
.fts-inline-contact-info a:any-link:hover {
  color:var(--sky) !important;
}
.fts-person-bottom a svg:hover,
.fts-person-bottom-hz a svg:hover,
.fts-inline-contact-info a svg:hover {
  fill:var(--sky) !important;
}

/* Hover: image/name affects name color */
/* GRID: whole-card hover only when it's a card link; also when the NAME itself is linked */
.fts-person-card.is-card-link:hover .fts-person-name { color: var(--sky) !important; cursor: pointer; }
.fts-person-name a:hover,
.fts-person-name a:focus-visible { color: var(--sky); cursor: pointer; }

/* If GRID image is wrapped in a link, allow image-hover to change the name */
.fts-person-img:has(> a):hover + .fts-person-name,
.fts-person-img:has(> a) a:focus-visible + .fts-person-name { color: var(--sky) !important; }

/* HZ (columns/list): only when the image or name is actually linked */
.fts-person-img-hz:has(> a.fts-person-img-link-hz):hover ~ .fts-person-body-hz .fts-person-name-hz,
.fts-person-img-hz:has(> a.fts-person-img-link-hz) a:focus-visible ~ .fts-person-body-hz .fts-person-name-hz,
.fts-person-card-hz:has(.fts-person-name-link-hz):hover .fts-person-name-hz,
.fts-person-name-link-hz:focus-visible .fts-person-name-hz {
  color: var(--sky) !important;
  cursor: pointer; 
}

/* GRID: image hover/focus → name turns sky, only if image or card is linked */
.fts-person-card.is-card-link .fts-person-img:hover + .fts-person-name,
.fts-person-card.is-card-link .fts-person-img:focus-within + .fts-person-name,
.fts-person-img:has(> a):hover + .fts-person-name,
.fts-person-img:has(> a):focus-within + .fts-person-name {
  color: var(--sky) !important;
}

/* HZ (columns/list): image hover/focus → name turns sky, only if a link exists */
.fts-person-card-hz:has(.fts-person-name-link-hz) .fts-person-img-hz:hover ~ .fts-person-body-hz .fts-person-name-hz,
.fts-person-card-hz:has(.fts-person-name-link-hz) .fts-person-img-hz:focus-within ~ .fts-person-body-hz .fts-person-name-hz,
.fts-person-img-hz:has(> a.fts-person-img-link-hz):hover ~ .fts-person-body-hz .fts-person-name-hz,
.fts-person-img-hz:has(> a.fts-person-img-link-hz):focus-within ~ .fts-person-body-hz .fts-person-name-hz {
  color: var(--sky) !important;
}


/* Tight inline bar for email/phone/calendar */
.facultyInlineContact {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;   /* space between links */
  row-gap: 6px;       /* wrap spacing on small screens */
  margin: 4px 0 0 0;  /* small top space from info block */
  padding: 0;
}

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

.facultyInlineContact a:any-link:hover { color: var(--sky); }

/* If you add icons later, they’ll align cleanly */
.facultyInlineContact a svg,
.facultyInlineContact a i {
  width: 1em;
  height: 1em;
  line-height: 1;
  flex: 0 0 auto;
}


/* ==============================================================
   GRID (vertical cards) — 6 / 3 / 1 columns and classic “Seminary” visuals
   ============================================================== */

.fl-person-cards-group {
  display:flex;
  flex-wrap:wrap;
  gap:10px !important;
  justify-content:flex-start;
  align-items:stretch;
}

/* 6 across ≥992px */
.fts-person-cards-person {
  display: flex;  
  box-sizing:border-box;
  flex:0 1 calc((100% - 5 * 10px) / 6);
  max-width:calc((100% - 5 * 10px) / 6);
}

/* 4 across 992–1080px */
@media (max-width: 1080px) and (min-width: 992px) {
  .fts-person-cards-person {
    flex:0 1 calc((100% - 4 * 10px) / 4);
    max-width:calc((100% - 4 * 10px) / 4);
  }
}

/* 3 across 576–991px */
@media (max-width: 991px) and (min-width: 576px) {
  .fts-person-cards-person {
    flex:0 1 calc((100% - 2 * 10px) / 3);
    max-width:calc((100% - 2 * 10px) / 3);
  }
}

/* 1 across ≤575.98px */
@media (max-width: 575.98px) {
  .fts-person-cards-person { flex:0 1 100%; max-width:100%; }
}

/* Grid card internals */
.fts-person-card {
  display:flex;
  box-sizing:border-box;
  flex-direction:column;
  align-items:center;
  text-align:center;
  /* min-height:320px; */
  padding:0 10px 10px 10px !important;
}

.fl-person-cards-wrap.equal-heights .fts-person-card {
  min-height: 320px;
}

/* Hide only truly empty cards (no image, no name) on the live site */
body:not(.fl-builder-edit) .fts-person-cards-person.fts-person-card.no-meta.no-title.no-email.no-calendar.no-phone.is-card-link:not(:has(.fts-person-img)):not(:has(.fts-person-name)) {
  display: none;
}

.fts-person-top { 
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  text-align: center;
}

/* Base image: square, cover */
.fl-builder-content .fts-person-img {
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  margin:0 0 8px 0 !important;
  background:#fff;
}
.fts-person-img img.fts-person-photo {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:auto;
  object-position:50% 0 !important;
  border-radius:0;
  background:#fff;
}

/* Grid image — keep 1:1 squares in grid view */
.fl-person-cards-wrap:not(.display-columns):not(.display-list) .fts-person-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin:10px !important;
  background:#fff;
}

/* Do NOT override height/width here; keep square sizing */
.fl-person-cards-wrap:not(.display-columns):not(.display-list) .fts-person-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #fff;
  object-fit: cover;
  object-position: 50% 0;
  max-width: none;
  max-height: none;
}

/* Keep some room under the image in grid */
.fl-person-cards-wrap:not(.display-columns):not(.display-list) .fts-person-img .fts-person-photo {
  margin-bottom:10px;
}

/* Pin the meta block to the bottom of the card */
.fts-person-bottom {
  display: grid;
  gap: 2px;
  margin-top: auto !important;
  padding: 0 !important;
}

/* Grid text/CTA stack; pin bottom */
.fl-person-cards-wrap:not(.display-columns):not(.display-list) .fts-person-body {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-width:0; flex:1 1 auto;
  padding:10px 10px 0px 10px !important;
}
.fl-person-cards-wrap:not(.display-columns):not(.display-list) .fts-person-bottom {
  display:grid;
  margin-top:auto !important;
  align-self:center; 
  gap:2px;
  padding:0 10px 10px 10px;
}

.fts-person-card:has(.fts-person-bottom > *) .fts-person-bottom {
  margin-top: auto !important;
}

.fts-person-card:not(:has(.fts-person-bottom > *)) .fts-person-bottom {
  display: none !important;
}

/* Collapse empty text rows (name/title/school/etc.) */
.fts-person-name:empty,
.fts-person-title:empty,
.fts-person-school:empty,
.pub-list:empty,
.contrib-list:empty {
  display: none !important;
}

/* If your template sometimes outputs whitespace-only nodes */
.fts-person-name:not(:has(*)):empty,
.fts-person-title:not(:has(*)):empty,
.fts-person-school:not(:has(*)):empty {
  display: none !important;
}


/* =============================================================================
   HZ (Columns/List) — target *-hz classes; equal height; meta pinned to bottom
   ============================================================================= */

/* ====== COLUMNS (two-up) ====== */
.fl-person-cards-wrap-hz.display-columns-hz .fl-person-cards-group-hz {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:flex-start;
}

/* M screens (tablet ~ Bootstrap md): collapse to a single column */
@media (max-width: 991.98px) and (min-width: 576px) {
  .fl-person-cards-wrap-hz.display-columns-hz .fl-person-cards-group-hz {
    grid-template-columns: 1fr !important;
  }
}

/* Equal height: stretch the item and the inner card/row */
.fl-person-cards-wrap-hz.display-columns-hz .fl-person-card-single-hz { height:auto; }
.fl-person-cards-wrap-hz.display-columns-hz .fts-person-cards-person-hz { height:auto; }

.fl-person-cards-wrap-hz.display-columns-hz .fts-person-card-hz {
  height:auto;                  /* allow card to grow only as needed */
  min-height:120px;             /* prefer ~1:1 ratio with 120px image width */
  display:flex;
  align-items:stretch;          /* image column still spans full card height */
  gap:12px;
  background:#fff;
  padding:10px !important;
}

/* Left image column: fixed width; fill & crop; no margins */
.fl-person-cards-wrap-hz.display-columns-hz .fts-person-img-hz {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;           /* <- force 1:1 box */
  margin: 0 !important;
  overflow: hidden;
  background: #fff;
}

.fl-person-cards-wrap-hz.display-columns-hz .fts-person-photo-hz {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 0;
  background: #fff;
}

/* Right body: vertical stack; pin meta to bottom; tight gap */
.fl-person-cards-wrap-hz.display-columns-hz .fts-person-body-hz {
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  padding:4px 0 0 0 !important;
  text-align:left !important;
  align-items:flex-start !important;
}
.fl-person-cards-wrap-hz.display-columns-hz .fts-person-bottom-hz {
  margin-top:auto !important;
  display:grid;
  gap:0px;          /* tighter vertical space */
}
.fl-person-cards-wrap-hz.display-columns-hz .fts-person-bottom-hz > * { margin:0 !important; }

/* Responsive: collapse 2-up to 1-up at tablet, shrink image a bit earlier */
@media (max-width: 1150px) {
  .fl-person-cards-wrap-hz.display-columns-hz .fts-person-img-hz { flex-basis:100px; width:100px; }
  .fl-person-cards-wrap-hz.display-columns-hz .fts-person-body-hz { padding:5px 0 0 0; }
}
@media (max-width: 850px) {
  .fl-person-cards-wrap-hz.display-columns-hz .fl-person-cards-group-hz {
    grid-template-columns:1fr;
    height:100% !important;
    max-height:none !important;
 }
}


/* ====== LIST (one-up rows) — same horizontal logic as columns ====== */
.fl-person-cards-wrap-hz.display-list-hz .fl-person-cards-group-hz {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 !important;
}

.fl-person-cards-wrap-hz.display-list-hz .fl-person-card-single-hz { height:auto; }

/* LIST HZ card: content drives height, but keep a square-ish minimum */
.fl-person-cards-wrap-hz.display-list-hz .fts-person-card-hz {
  display: flex;
  align-items: stretch;
  gap: 4px;
  background: #fff;
  min-height: 140px;
  padding: 10px !important;
  height: auto;
}

/* LIST HZ image column: fixed width, stretches with card height */
.fl-person-cards-wrap-hz.display-list-hz .fts-person-img-hz {
  flex: 0 0 140px;
  width: 140px;
  align-self: stretch;
  margin: 0 !important;
  overflow: hidden;
  background: #fff;
}

/* LIST HZ photo: always fill the image column */
.fl-person-cards-wrap-hz.display-list-hz .fts-person-photo-hz {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 0;
  max-height: none !important;
  border-radius: 0;
  background: #fff;
}


/* Right body + pinned meta (inline bar pinned) */
.fl-person-cards-wrap-hz.display-list-hz .fts-person-body-hz {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
  text-align:left;
  align-items:flex-start;
  padding:10px;
}

/* If you’re using inline meta in list, pin the inline bar */
.fl-person-cards-wrap-hz.display-list-hz .fts-inline-contact-info {
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:0px 16px !important;
}

/* If you keep the stacked bottom wrapper in list, pin and tighten */
.fl-person-cards-wrap-hz.display-list-hz .fts-person-bottom-hz {
  margin-top:auto;
  display:grid;
  gap:4px;
}
.fl-person-cards-wrap-hz.display-list-hz .fts-person-bottom-hz > * { margin:0 !important; }

/* Mobile: smaller image column */
@media (max-width: 768px) {
  .fl-person-cards-wrap-hz.display-list-hz .fts-person-img-hz { 
    flex-basis:100px;
    width:100px;
  }
}

/* Desktop safeguard: ensure fills/crops */
@media (min-width: 769px) {
  .fl-person-cards-wrap-hz.display-list-hz .fts-person-photo-hz {
    height:100% !important;
    max-height:none !important;
  }
}


/* =============================================================================
   MOBILE VIEWS FOR ALL CARDS (≤575.98px)
   ============================================================================= */
@media (max-width: 575.98px) {

  /* Always keep 10px padding on cards */
  .fts-person-card,
  .fl-person-card-single-hz,
  .fts-person-cards-person-hz { 
    box-sizing: border-box;
    gap: 8px !important;
  }

  /* ---------------- GRID (non-hz) ---------------- */
  /* Make the image area square and scale the photo */
  .fts-person-img {
    width: 100%;
    max-width: 500px !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0 auto 8px !important;
    background: #fff;
  }
  .fts-person-img img.fts-person-photo {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 0 !important;
  }
  .fl-person-cards-wrap:not(.display-columns):not(.display-list) .fts-person-photo { 
    width:100%;
    height:auto;
    max-width:500px;
    max-height:500px;
  }

  /* ---------------- HZ (columns/list) ---------------- */
  /* Stack the row vertically on mobile */
  .fl-person-card-single-hz .fts-person-cards-person-hz {
    display: flex;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
    min-width: 0;
    text-align: left !important;
  }

  /* Square, scalable image box for HZ */
  .fl-person-cards-wrap-hz:is(.display-list-hz, .display-columns-hz)
  .fl-person-card-single-hz .fts-person-img-hz {
    flex: 0 0 auto !important;
    width: 100% !important;
    flex-basis: auto !important;
    max-width: 500px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: auto !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    background: #fff;
    position: relative !important;
  }

  /* Fill & crop whether linked or bare <img> */
  .fl-person-card-single-hz .fts-person-img-hz > a.fts-person-img-link-hz,
  .fl-person-card-single-hz .fts-person-img-hz > img.fts-person-photo-hz {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 0 !important;
    max-width:500px !important;
    max-height:500px !important;
  }

  /* Ensure the actual media fills the square and is not absolutely positioned */
  .fl-person-cards-wrap-hz:is(.display-list-hz, .display-columns-hz)
  .fl-person-card-single-hz .fts-person-img-hz > a.fts-person-img-link-hz,
  .fl-person-cards-wrap-hz:is(.display-list-hz, .display-columns-hz)
  .fl-person-card-single-hz .fts-person-img-hz > img.fts-person-photo-hz {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 0 !important;
    max-width: none !important;
    max-height: none !important;
  }

  /* Body stays a vertical stack; pin meta to bottom */
  .fl-person-card-single-hz .fts-person-body-hz {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .fl-person-card-single-hz .fts-person-bottom,
  .fl-person-card-single-hz .fts-person-bottom-hz,
  .fl-person-card-single-hz .fts-inline-contact-info {
    display: flex;
    flex-direction: column;
    margin-top: auto !important;
    line-height: 1.5em !important;
    padding-top: 8px !important;
  }
  .fts-person-bottom a:any-link,
  .fts-person-bottom-hz a:any-link,
  .fts-inline-contact-info a:any-link {
    line-height: 1.15em!important;
    margin: 4px 0px !important;
    font-size: 0.75rem; /* smaller on mobile as well */
  }

  /* ---------------- Mobile typography (grid + hz) ---------------- */
  .fts-person-name, .fts-person-name-hz {
    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;
  }

  .fts-person-title, .fts-person-title-hz {
    font-family:var(--font-sans);
    color:var(--text-color);
    font-size:1rem;
    line-height:1.1;
    margin:0 0 6px 0;
  }

  .fts-person-school, .fts-person-school-hz {
    font-family:var(--font-sans);
    color: var(--midnight);
    font-weight:700;
    font-size:0.9375rem;
    line-height:1.1;
    margin:0 0 16px 0;
    font-style:italic;
  }

  .fts-person-bottom a svg,
  .fts-person-bottom-hz a svg,
  .fts-inline-contact-info a svg {
    width:1em;
    height:1em;
  }
}


/* ==========================================================================
   HOVER → NAME TURNS SKY (only when a link is present)
   ========================================================================== */

/* GRID */
.fts-person-card.is-card-link:hover .fts-person-name,
.fts-person-card.is-card-link:hover .fts-person-name a {
  color: var(--sky) !important;
  cursor: pointer;
}

.fts-person-img:has(> a):hover + .fts-person-name,
.fts-person-img:has(> a):hover + .fts-person-name a,
.fts-person-img:has(> a):focus-within + .fts-person-name,
.fts-person-img:has(> a):focus-within + .fts-person-name a {
  color: var(--sky) !important;
}

/* HZ (Columns/List) — image is linked */
.fts-person-img-hz:has(> a.fts-person-img-link-hz):hover ~ .fts-person-body-hz .fts-person-name-hz,
.fts-person-img-hz:has(> a.fts-person-img-link-hz):hover ~ .fts-person-body-hz .fts-person-name-hz a,
.fts-person-img-hz:has(> a.fts-person-img-link-hz):focus-within ~ .fts-person-body-hz .fts-person-name-hz,
.fts-person-img-hz:has(> a.fts-person-img-link-hz):focus-within ~ .fts-person-body-hz .fts-person-name-hz a {
  color: var(--sky) !important;
}

/* HZ (Columns/List) — name is linked */
.fts-person-card-hz:has(.fts-person-name-link-hz):hover .fts-person-name-hz,
.fts-person-card-hz:has(.fts-person-name-link-hz):hover .fts-person-name-hz a {
  color: var(--sky) !important;
  cursor: pointer;
}

/* ==========================================================================
   NAME LINK DEFAULTS → MIDNIGHT (beat global link colors)
   ========================================================================== */
.fts-person-name a:any-link,
.fts-person-name-hz a:any-link {
  color: var(--midnight) !important;
  text-decoration: none;
}
.fts-person-name a:visited,
.fts-person-name-hz a:visited {
  color: var(--midnight) !important;
}

/* keep your existing hover/focus rules (sky) */
.fts-person-name a:hover,
.fts-person-name a:focus-visible,
.fts-person-name-hz a:hover,
.fts-person-name-hz a:focus-visible {
  color: var(--sky) !important;
}