/* =========================================
   People Card (HZ) — Single Card Layout
   Photo LEFT (full height, max 200px) | Body RIGHT
   2 cols by default, single column at ≤991px
   ========================================= */

/* Global spacing token */
:root { --stack-gap-hz: 12px; }

/* -----------------------------------------
   OPTIONAL: Group wrapper (multi-card layout)
   • 2 cards per row by default
   • Single column at ≤991px
   ----------------------------------------- */
.fl-person-cards-group-hz{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-gap-hz, 10px);
}

/* -----------------------------
   Card wrapper (full-width white)
   ----------------------------- */
.fl-person-card-single-hz{
  /* Layout tokens */
  --gap: 12px;
  --inner-pad-x: 10px;

  /* Typography */
  --name-size:   clamp(1.05rem, 1.0vw, 1.35rem);
  --title-size:  clamp(0.95rem, 0.85vw, 1.15rem);
  --school-size: clamp(0.90rem, 0.80vw, 1.08rem);
  --meta-size:   clamp(0.88rem, 0.75vw, 1.02rem);
  --btn-size:    clamp(0.88rem, 0.75vw, 1.00rem);

  background:#fff;              /* white spans full card width */
  width: 100%;
  display: block;
  box-sizing: border-box;
  /* No margin needed when using group gap */
  margin: 0;
}

/* -----------------------------
   Inner row (image | body)
   ----------------------------- */
/* Use flex so the left column can stretch to the card’s height */
.fl-person-card-single-hz .fts-person-cards-person-hz{
  display: flex;
  align-items: stretch;               /* both columns same height */
  gap: var(--gap);
  background: transparent;            /* wrapper handles white */
  padding: 10px var(--inner-pad-x);
  text-align:left;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-width: 0;
}

/* -----------------------------
   LEFT column (image)
   • Max 200px wide on desktop
   • Fills full card height (no bottom gap)
   ----------------------------- */
.fl-person-card-single-hz .fts-person-img-hz{
  position: relative;                               /* for absolute fill */
  flex: 0 0 clamp(140px, 24vw, 200px);
  width: clamp(140px, 24vw, 200px);
  max-width: 200px;
  align-self: stretch;                               /* match card height */
  overflow: hidden;
  margin: 0 !important;
  background:#fff;
}

/* If the IMG is wrapped in a link, make the link fill the box */
.fl-person-card-single-hz .fts-person-img-hz > a.fts-person-img-link-hz{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

/* Linked image fills the box */
.fl-person-card-single-hz .fts-person-img-hz > a.fts-person-img-link-hz > img.fts-person-photo-hz{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:50% 0 !important;     /* top-center focal point */
}

/* If there’s NO link wrapper, make the IMG itself fill the box */
.fl-person-card-single-hz .fts-person-img-hz > img.fts-person-photo-hz{
  position: absolute;
  inset: 0;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:50% 0 !important;
}

/* -----------------------------
   RIGHT column (body)
   ----------------------------- */
.fl-person-card-single-hz .fts-person-body-hz{
  flex: 1 1 auto;
  display:flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* Text stack — match vertical card styling */
.fl-person-card-single-hz .fts-person-name-hz,
.fl-person-card-single-hz .fts-person-title-hz,
.fl-person-card-single-hz .fts-person-school-hz{
  margin:0 !important;
  padding:0 !important;
  line-height:1.2 !important;
}
.fl-person-card-single-hz .fts-person-name-hz{
  color:#101820; font-weight:700; text-transform:uppercase;
  font-size:var(--name-size) !important;
}
.fl-person-card-single-hz .fts-person-title-hz{
  margin-top:4px !important; letter-spacing:.015em;
  font-size:var(--title-size) !important;
}
.fl-person-card-single-hz .fts-person-school-hz{
  margin-top:6px !important; color:#101820; font-weight:500 !important; font-style:italic;
  letter-spacing:.015em; font-size:var(--school-size) !important;
}

/* Name & image link styles */
.fts-person-name-hz a{
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.fts-person-name-hz a:hover,
.fts-person-name-hz a:focus{
  color: #00AEC7;
  text-decoration: none;
}
.fts-person-img-link-hz{
  display: block;
  line-height: 0;
}
.fts-person-link-hz:focus-visible{
  outline: 2px solid #00AEC7;
  outline-offset: 2px;
}

/* Desktop/large: enforce a minimum image height */
.fl-person-card-single-hz .fts-person-img-hz{
  min-height: 180px !important;
}

/* Its absolutely-positioned child should still fill the box */
.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{
  height: 100%;
}

/* On stacked layout, drop the min-height so aspect-ratio can take over */
@media (max-width: 991px){
  .fl-person-card-single-hz .fts-person-img-hz{
    min-height: 0;
  }
}

/* -----------------------------
   EXTRAS (Major Publications / Notable Contributions)
   ----------------------------- */
.fl-person-card-single-hz .fts-person-extras-hz{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:.75rem;
  min-width:0;
}
.fl-person-card-single-hz .fts-person-section-hz{ min-width:0; }
.fl-person-card-single-hz .fts-section-title-hz{
  margin:0 0 .25rem 0;
  font-weight:600;
  letter-spacing:.075em;
  font-size: var(--title-size);
  color:#005776;
}
.fl-person-card-single-hz .major-publication{
  font-style: italic !important;
}

/* Lists inside extras (either real lists from the editor, or normalized ones) */
.fl-person-card-single-hz .fts-list-wrap-hz ul,
.fl-person-card-single-hz .fts-list-wrap-hz ol,
.fl-person-card-single-hz .fts-list-hz{
  margin: 0;
  padding-left: 1.1rem;
}
.fl-person-card-single-hz .fts-list-wrap-hz li,
.fl-person-card-single-hz .fts-list-hz li{
  margin:.125rem 0;
  line-height:1.25;
  word-break:break-word;
  font-size: var(--school-size);
}
.fl-person-card-single-hz .fts-list-wrap-hz a,
.fl-person-card-single-hz .fts-list-hz a{
  color:#007FA3; text-decoration:none; font-weight:700; letter-spacing:.02em;
}
.fl-person-card-single-hz .fts-list-wrap-hz a:hover,
.fl-person-card-single-hz .fts-list-hz a:hover{
  color:#00AEC7; text-decoration:underline;
}

/* -----------------------------
   Tablet & down (≤991px): stack card
   ----------------------------- */
@media (max-width: 991px){
  .fl-person-card-single-hz .fts-person-cards-person-hz{
    flex-direction: column;
    gap: 10px;                /* slightly larger than phone */
  }
  /* Square image on stacked layout */
  .fl-person-card-single-hz .fts-person-img-hz{
    flex: 0 0 auto;
    width: 100% !important;
    align-self: auto;
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* -----------------------------
   Border variant (optional)
   ----------------------------- */
.fl-person-cards-wrap-hz.card-border-hz .fts-person-cards-person-hz{
  --fts-card-border-color: rgba(214,210,196,.35);
  --fts-card-border-hover: rgba(214,210,196,.65);
  box-shadow: inset 0 0 0 1px var(--fts-card-border-color);
}
.fl-person-cards-wrap-hz.card-border-hz .fts-person-cards-person-hz:hover{
  box-shadow: inset 0 0 0 1px var(--fts-card-border-hover), 0 2px 8px rgba(16,24,32,.06);
}
.fl-person-cards-wrap-hz.card-border-hz.is-very-light-hz .fts-person-cards-person-hz{
  --fts-card-border-color: rgba(214,210,196,.5);
  --fts-card-border-hover: rgba(214,210,196,.75);
}