/* =========================================================
   Team Images — white profile cards + bio modal

   Cards use the light half of the site's design language (Program Info / Eligibility Checker
   questions): white surface, 18px radius, hairline border, soft shadow, navy ink, teal accent.
   The hover lift and amber focus ring match the Program Grid.
   The bio modal mirrors Program Info's application modal (.tb-pnav__modal-card): 22px radius,
   navy overlay, round close button, scrolling on an inner element.
   HubSpot gives us no shared stylesheet, so these values are duplicated on purpose.

   Card layout is hardcoded here, not read from Design Manager fields — see the note at the
   top of ti-module.html for which fields that leaves inert.
   ========================================================= */

/* =========================
   Grid: 2 / 3 / 4 / 5 up, rows centred so a short last row sits in the middle.
   Keep the breakpoints in step with `sizes` in ti-module.html.
   ========================= */
.hs-image__grid__container .hs-image__grid__list {
  --tg-gap: 1rem;
  --tg-cols: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tg-gap);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 641px)  { .hs-image__grid__container .hs-image__grid__list { --tg-cols: 3; } }
@media (min-width: 900px)  { .hs-image__grid__container .hs-image__grid__list { --tg-cols: 4; } }
@media (min-width: 1100px) { .hs-image__grid__container .hs-image__grid__list { --tg-cols: 5; } }

.hs-image__grid__container .hs-image__grid__list__item {
  --tg-basis: calc((100% - (var(--tg-cols) - 1) * var(--tg-gap)) / var(--tg-cols));
  flex: 0 0 var(--tg-basis);
  max-width: var(--tg-basis);
  display: flex;               /* lets every card in a row stretch to the tallest one */
  margin: 0;
  padding: 0;
  border: 0 !important;        /* theme adds a border/shadow to list items */
  box-shadow: none !important;
}

/* The lightbox trigger is a <button> wrapping the whole card. Strip every theme button style
   so it behaves as a plain block; the card itself carries the look. */
.hs-image__grid__container .hs-image__grid__list__item__button,
.hs-image__grid__container .hs-image__grid__list__item__button:hover,
.hs-image__grid__container .hs-image__grid__list__item__button:active {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-transform: none;
  cursor: pointer;
}
.hs-image__grid__container .hs-image__grid__list__item__link {
  display: flex;
  width: 100%;
  border-radius: 18px;
  text-decoration: none;
}
.hs-image__grid__container .hs-image__grid__list__item__button:focus-visible,
.hs-image__grid__container .hs-image__grid__list__item__link:focus-visible {
  outline: 3px solid #ffaa00;
  outline-offset: 2px;
}

/* =========================
   Card
   ========================= */
.hs-image__grid__container .hs-image__grid__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(11, 18, 32, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hs-image__grid__container .hs-image__grid__list__item:hover .hs-image__grid__card,
.hs-image__grid__container .hs-image__grid__list__item:focus-within .hs-image__grid__card {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}

/* Square photo. Older mobile Safari has no aspect-ratio, so the padding box gives it height
   there and the image is absolutely positioned either way. */
.hs-image__grid__container .hs-image__grid__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: #e3e8ec;   /* shows while the photo loads */
}
@supports not (aspect-ratio: 1 / 1) {
  .hs-image__grid__container .hs-image__grid__photo {
    height: 0;
    padding-top: 100%;
  }
}
.hs-image__grid__container .hs-image__grid__photo > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;  /* headshots: favour the face if a photo is cropped */
  border-radius: 0;
}

/* =========================
   Caption
   ========================= */
.hs-image__grid__container .hs-image__grid__caption {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .85rem .75rem 1rem;
  text-align: center;
  line-height: 1.25;
}

/* Colours stated explicitly rather than inherited: a theme rule on the link or button beats
   inheritance (same lesson as .pg-title in the Program Grid). */
.hs-image__grid__container .hs-image__grid__caption__name {
  color: #0b1220;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Same teal pill as the role in the bio modal header. 12px radius rather than 999px so a
   long role that wraps onto two lines still looks deliberate. */
.hs-image__grid__container .hs-image__grid__caption__role {
  display: inline-block;
  margin-top: .45rem;
  padding: .15rem .6rem;
  border-radius: 12px;
  background: rgba(0, 128, 128, 0.10);
  color: #006666;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.45;
}

/* "Read bio" — margin-top:auto pins it to the bottom, so it lines up across a row even when
   one role wraps and its neighbours do not. */
.hs-image__grid__container .hs-image__grid__cue {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: auto;
  padding-top: .7rem;
  color: #008080;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.hs-image__grid__container .hs-image__grid__cue__arrow {
  transition: transform .2s ease;
}
.hs-image__grid__container .hs-image__grid__list__item:hover .hs-image__grid__cue {
  color: #028f6d;
}
.hs-image__grid__container .hs-image__grid__list__item:hover .hs-image__grid__cue__arrow {
  transform: translateX(3px);
}

/* Phones: cards are ~165px wide */
@media (max-width: 640px) {
  .hs-image__grid__container .hs-image__grid__caption {
    padding: .7rem .55rem .8rem;
  }
  .hs-image__grid__container .hs-image__grid__caption__name {
    font-size: .95rem;
  }
  .hs-image__grid__container .hs-image__grid__caption__role {
    font-size: .7rem;
  }
}

/* =========================
   Optional hover-message overlay (module field), over the photo only
   ========================= */
.hs-image__grid__container .hs-image__grid__photo > .hs-image__grid__item__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.hs-image__grid__item__overlay {
  display: grid;
  place-items: center;
  transition: 0.2s ease;
}
.hs-image__grid__item__overlay__content,
.hs-image__grid__item__overlay__content * {
  text-align: center;
}

/* =========================
   Bio modal
   basicLightbox renders into <body>, outside the module container, so these rules cannot be
   scoped under .hs-image__grid__container. The backdrop class is added in ti-module.js.
   ========================= */
.basicLightbox.hs-image__grid__lightbox-backdrop {
  background: rgba(11, 18, 32, 0.62);
}

/* The placeholder, not a wrapper of ours: basicLightbox moves our nodes into it and throws the
   wrapper away (see renderLightboxElement in ti-module.js). Its transform makes it the
   containing block for the absolutely positioned close button. */
.hs-image__grid__lightbox-backdrop .basicLightbox__placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: #0b1220;
}

/* The card clips, the inner element scrolls — same reason as Program Info's modal: on Windows
   the classic scrollbar paints an opaque square track that chops the rounded corners off. */
.hs-image__grid__lightbox__content {
  display: flex;
  flex-direction: column;
  width: min(640px, calc(100vw - 28px));
  max-height: min(calc(86vh - 56px), 800px);  /* leaves room for the arrows underneath */
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 30px 90px rgba(0,0,0,0.35);
}

/* min-height:0 is load-bearing: without it the flex child refuses to shrink and the card grows
   past max-height instead of scrolling. */
.hs-image__grid__lightbox__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 26px 26px 22px;
}

/* Header: photo, name, role */
.hs-image__grid__lightbox__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 52px 18px 0;      /* right padding keeps the name clear of the close button */
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(11, 18, 32, 0.12);
}
.hs-image__grid__lightbox__avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 30%;
  border: 3px solid rgba(0, 128, 128, 0.18);
}
/* Size and colour stated so the theme's h2 cannot win */
.hs-image__grid__lightbox__name {
  margin: 0 0 4px;
  color: #0b1220;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.hs-image__grid__lightbox__role {
  display: inline-block;
  margin: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 128, 128, 0.10);
  color: #006666;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.hs-image__grid__lightbox__body :where(h1, h2, h3) {
  margin-top: 0;
}
.hs-image__grid__lightbox__body p {
  color: rgba(11, 18, 32, 0.82);
  line-height: 1.6;
  margin: 0 0 0.9em;
}
.hs-image__grid__lightbox__body p:last-child {
  margin-bottom: 0;
}

/* Image-only fallback (no bio) */
.hs-image__grid__lightbox__image {
  border-radius: 22px;
}

/* Close — round, top right of the card */
.hs-image__grid__lightbox__button--close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(11, 18, 32, 0.14);
  background: rgba(255,255,255,0.9);
  color: #0b1220;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.hs-image__grid__lightbox__button--close:focus-visible {
  outline: 3px solid #ffaa00;
  outline-offset: 2px;
}

/* Prev/next — under the card, styled as the Program Grid's carousel arrows */
.hs-image__grid__lightbox__nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.hs-image__grid__lightbox__button {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(11, 18, 32, 0.16);
  background: #fff;
  color: #0b1220;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor: pointer;
}
.hs-image__grid__lightbox__button:focus-visible {
  outline: 3px solid #ffaa00;
  outline-offset: 2px;
}
.hs-image__grid__lightbox__button svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

/* Hide helper for when there is no prev/next */
.hs-image__grid__lightbox__button--hide {
  display: none;
}

@media (max-width: 600px) {
  .hs-image__grid__lightbox__scroll {
    padding: 20px 18px 18px;
  }
  .hs-image__grid__lightbox__avatar {
    width: 56px;
    height: 56px;
  }
  .hs-image__grid__lightbox__name {
    font-size: 20px;
  }
}