/*

Project:       CPMA Interim Website CSS
Author:        Dmitri Bekasov
Version:       260114 (January 14, 2026)
Notes:         Specific styles to About > Leadership page

*/

.leader-list {
  display: flex;
  flex-flow: column nowrap;
  list-style: none;
  padding: 0;
  margin: var(--spacing--gap-3) 0 0 0;
  width: min(100%, 90rem);
  row-gap: var(--spacing--gap-3);
}
.leader-list--toggle {
  cursor: pointer;
  position: relative;
  transition: color var(--motion--standard);
}
.leader-list--toggle:focus-visible {
  outline: 0.125rem solid transparent;
}
.leader-list--item {
  background-color: var(--pigment--tint-2);
  border-radius: 0.5rem;
  padding-block: var(--spacing--gap-2);
  transition: background-color var(--motion--standard);
}
.leader-list--item:has(.leader-list--toggle:hover),
.leader-list--item:has(.leader-list--toggle:focus-visible) {
  background-color: var(--pigment--tint-0);
}
.leader-list--toggle:hover,
.leader-list--toggle:focus-visible {
  color: var(--pigment--ink-tanzanite);
}
.leader-list--item .leader-list--toggle::after {
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: min((100vw - (260vw / 3)) / 2, 6rem);
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  content: "";
  -webkit-mask-image: var(--icon-16--add);
  mask-image: var(--icon-16--add);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--pigment--ink-obsidian);
  transition: background-color var(--motion--standard);
}
.leader-list--item.is-open .leader-list--toggle::after {
  -webkit-mask-image: var(--icon-16--remove);
  mask-image: var(--icon-16--remove);
}
.leader-list--item:has(.leader-list--toggle:hover) .leader-list--toggle::after,
.leader-list--item:has(.leader-list--toggle:focus-visible) .leader-list--toggle::after {
  background: var(--pigment--ink-tanzanite);
}
.leader-list--heading {
  padding-right: 3rem;
}
.leader-list--content {
  padding-left: min(20vw / 3, 6rem);
  column-gap: min(20vw / 3, 6rem);
  overflow: clip;
  height: 0;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: height var(--motion--standard), opacity var(--motion--standard), transform var(--motion--standard);
}
.leader-list--content.is-animating {
  will-change: height, opacity, transform;
}
.leader-list--item.is-open > .leader-list--content {
  opacity: 1;
  transform: translateY(0);
}
.leader-list--bio {
  width: 36rem;
}
.leader-list--bio .ct-text:first-child {
  margin-top: 0;
}
.leader-list--bio,
.leader-list--picture {
  padding-top: var(--spacing--gap-3);
}
.leader-list--picture figure {
  width: 12rem;
}
@media screen and (max-width: 90rem) {
  .leader-list--item {
    border-radius: 0;
  }
}
@media screen and (max-width: 60rem) {
  .leader-list--bio {
    width: calc(80vw - 12rem);
  }
}
@media screen and (max-width: 52.5rem) {
  .leader-list--intro {
    flex-direction: column-reverse;
  }
  .col--book > :first-child {
    margin-top: 1lh;
  }
}
@media screen and (max-width: 37.5rem) {
  .module--standard.leader-list--content {
    flex-flow: column-reverse;
    padding-inline: var(--spacing--fluid-mobile);
    justify-content: center;
    row-gap: 0;
  }
  .leader-list--bio,
  .leader-list--picture {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .leader-list--content {
    transition: none;
    transform: none;
  }
}