/* ==========================================================================
   FTS: Adjunct Cards
   --------------------------------------------------------------------------
   Adjunct member grid: image + name.

   - Uses existing Fuller Design System tokens.
   - Keeps only component-specific layout variables local.
   - Supports 6 / 3 / 1 column responsive layout.
========================================================================== */


/* Grid wrapper ----------------------------------------------------------- */

.adjunctMembers {
  --adjunct-gap: var(--fts-stack-sm);
  --adjunct-card-pad: var(--fts-stack-sm);
  --adjunct-name-size: var(--font-size-body);

  display: flex;
  flex-wrap: wrap;
  gap: var(--adjunct-gap);
  justify-content: flex-start;
  align-items: stretch;
}


/* Card ------------------------------------------------------------------ */

/* Default ≥992px: 6 across. */

.adjunctMembers .adjunctCard {
  box-sizing: border-box;
  flex: 0 1 calc((100% - 5 * var(--adjunct-gap)) / 6);
  max-width: calc((100% - 5 * var(--adjunct-gap)) / 6);
  width: calc((100% - 5 * var(--adjunct-gap)) / 6);

  display: grid;
  grid-template-rows: auto 1fr;

  padding: var(--adjunct-card-pad);
  overflow: hidden;

  background: var(--color-surface);
  border-radius: var(--radius-0);
  box-shadow:
    inset 0 0 0 1px var(--color-border),
    var(--shadow-1);

  text-align: center;

  transition:
    box-shadow var(--fts-btn-transition) ease,
    transform var(--fts-btn-transition) ease;
}

.adjunctMembers .adjunctCard:hover,
.adjunctMembers .adjunctCard:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--color-accent-hover),
    var(--shadow-1);
}


/* Tablet: 3 across. */

@media (max-width: 991px) and (min-width: 576px) {
  .adjunctMembers .adjunctCard {
    flex: 0 1 calc((100% - 2 * var(--adjunct-gap)) / 3);
    max-width: calc((100% - 2 * var(--adjunct-gap)) / 3);
    width: calc((100% - 2 * var(--adjunct-gap)) / 3);
  }
}


/* Mobile: 1 across. */

@media (max-width: 575.98px) {
  .adjunctMembers .adjunctCard {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
}


/* Image ----------------------------------------------------------------- */

.adjunctMembers .adjunctImageLink {
  display: block;
  text-decoration: none;
}

.adjunctMembers .adjunctImage {
  display: block;
  grid-row: 1;

  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;

  margin: 0 0 6px !important;
  border: 0;
  border-radius: var(--radius-0);

  object-fit: cover;
  object-position: 50% 0;
}

.adjunctMembers .adjunctImage.is-fallback {
  filter: grayscale(10%);
}


/* Body ------------------------------------------------------------------ */

.adjunctMembers .adjunctData {
  grid-row: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.adjunctMembers .adjunctData p {
  margin: 0 !important;
}

.adjunctMembers p:empty {
  display: none !important;
  height: 0 !important;
}


/* Name ------------------------------------------------------------------ */

.adjunctMembers .adjunctName {
  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--font-family-body);
  font-size: var(--adjunct-name-size);
  font-weight: var(--weight-bold) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;

  color: var(--color-text);
}

.adjunctMembers .adjunctName a:any-link {
  color: var(--color-text) !important;
  font: inherit;
  line-height: inherit !important;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;

  transition: color var(--fts-btn-transition) ease;
}

.adjunctMembers .adjunctName a:hover,
.adjunctMembers .adjunctName a:focus-visible {
  color: var(--color-link-hover) !important;
  text-decoration: none;
}


/* Image hover/focus lights the name ------------------------------------- */

.adjunctMembers .adjunctCard:has(.adjunctImageLink:hover) .adjunctName a,
.adjunctMembers .adjunctCard:has(.adjunctImageLink:focus-visible) .adjunctName a,
.adjunctMembers .adjunctCard:has(.adjunctImage:hover) .adjunctName a {
  color: var(--color-link-hover) !important;
}


/* Focus states ----------------------------------------------------------- */

.adjunctMembers .adjunctImageLink:focus-visible,
.adjunctMembers .adjunctName a:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}


/* Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .adjunctMembers .adjunctCard,
  .adjunctMembers .adjunctName a:any-link {
    transition: none;
  }
}