.leadership-page {
  background: #f8fafd;
}

.leadership-page .content-hero {
  padding-bottom: 38px;
}

.leadership-content {
  padding: 30px 0 50px;
}

.leadership-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(135px, .5fr));
  gap: 12px;
  margin-bottom: 23px;
}

.leadership-summary>article {
  display: flex;
  min-height: 105px;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 25px rgba(19, 50, 96, .055);
}

.leadership-summary>article:first-child {
  align-items: flex-start;
  background: linear-gradient(135deg, #073d80, #0a67b8);
  color: #fff;
}

.leadership-summary i {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  place-items: center;
  border-radius: 10px;
  background: #edf5ff;
  color: var(--blue);
  font-size: 20px;
}

.leadership-summary>article:first-child i {
  background: rgba(255, 255, 255, .13);
  color: #fff;
}

.leadership-summary article div {
  display: grid;
  gap: 3px;
}

.leadership-summary strong {
  color: #283951;
  font-size: 23px;
  line-height: 1.2;
}

.leadership-summary>article:first-child strong {
  color: #fff;
  font-size: 16px;
}

.leadership-summary span {
  color: #748196;
  font-size: 12px;
  line-height: 1.55;
}

.leadership-summary>article:first-child span {
  color: #c8ddf3;
}

.leadership-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px;
  margin-bottom: 23px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(18, 48, 93, .05);
}

.leader-search {
  display: flex;
  width: min(420px, 100%);
  height: 43px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid #dce5f0;
  border-radius: 9px;
  background: #f9fbfe;
}

.leader-search i {
  color: var(--blue2);
}

.leader-search input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #41516a;
  font-size: 13px;
}

.leader-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.leader-filters button {
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  background: #fff;
  color: #65738a;
  font-size: 12px;
  font-weight: 650;
  transition: .2s;
}

.leader-filters button:hover,
.leader-filters button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.leadership-section {
  margin-bottom: 29px;
}

.leadership-section[hidden],
.leader-card[hidden] {
  display: none !important;
}

.leadership-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}

.leadership-section-head>div>span {
  color: var(--blue2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.leadership-section-head h2 {
  margin: 4px 0 0;
  color: var(--blue);
  font-size: 23px;
  font-weight: 800;
}

.leadership-section-head>span {
  color: #8591a3;
  font-size: 12px;
}

.leader-featured {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  overflow: hidden;
  min-height: 390px;
  border: 1px solid #d9e4f1;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 15px 40px rgba(18, 52, 102, .11);
}

.leader-featured-photo,
.leader-photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #dbe8f5, #edf3f9);
}

.leader-featured-photo::after,
.leader-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(4, 31, 68, .68));
  content: "";
}

.leader-featured-photo img,
.leader-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .35s;
}

.leader-card:hover .leader-featured-photo img,
.leader-card:hover .leader-photo img {
  transform: scale(1.025);
}

.leader-featured-photo>span,
.leader-photo>span {
  position: absolute;
  z-index: 1;
  right: 13px;
  bottom: 12px;
  left: 13px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.leader-featured-body {
  display: flex;
  flex-direction: column;
  padding: 29px 31px;
}

.leader-role {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 16px;
  background: #eaf4ff;
  color: var(--blue2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.leader-featured h2 {
  margin: 11px 0 4px;
  color: #263853;
  font-size: 28px;
  font-weight: 800;
}

.leader-degree {
  color: #7a879a;
  font-size: 13px;
}

.leader-quote {
  position: relative;
  padding: 15px 17px 15px 42px;
  margin: 18px 0;
  border-left: 3px solid var(--blue2);
  border-radius: 0 9px 9px 0;
  background: #f4f8fd;
  color: #54647b;
  font-size: 13px;
  font-style: italic;
  line-height: 1.75;
}

.leader-quote i {
  position: absolute;
  top: 13px;
  left: 14px;
  color: #9bbbdc;
  font-size: 20px;
}

.leader-assignment {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 9px;
  color: #596980;
  font-size: 12px;
  line-height: 1.65;
}

.leader-assignment strong {
  color: #334760;
}

.leader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 13px;
}

.leader-actions :is(button, a) {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid #d9e4f0;
  border-radius: 8px;
  background: #fff;
  color: #596981;
  font-size: 12px;
  font-weight: 700;
}

.leader-actions button:first-child {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.leader-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.leader-grid .leader-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 27px rgba(20, 52, 99, .07);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}

.leader-grid .leader-card:hover {
  transform: translateY(-3px);
  border-color: #bdd4ed;
  box-shadow: 0 15px 34px rgba(20, 52, 99, .12);
}

.leader-photo {
  height: 320px;
}

.leader-card-body {
  padding: 17px;
}

.leader-card-body>.leader-role {
  font-size: 9px;
}

.leader-card-body h3 {
  margin: 9px 0 3px;
  color: #2d3e57;
  font-size: 17px;
  font-weight: 800;
}

.leader-card-body>.leader-degree {
  display: block;
  min-height: 39px;
  font-size: 11px;
  line-height: 1.55;
}

.leader-field {
  display: flex;
  min-height: 58px;
  align-items: flex-start;
  gap: 8px;
  padding-top: 11px;
  margin-top: 12px;
  border-top: 1px dashed #dce4ee;
  color: #66768c;
  font-size: 11px;
  line-height: 1.6;
}

.leader-field i {
  color: var(--blue2);
}

.leader-card-body>button {
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  border: 1px solid #d8e4f1;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  transition: .2s;
}

.leader-card-body>button:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.leader-empty {
  display: grid;
  min-height: 250px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 30px;
  border: 1px dashed #cbd7e6;
  border-radius: 12px;
  background: #fff;
  color: #7b899d;
  text-align: center;
}

.leader-empty[hidden] {
  display: none;
}

.leader-empty i {
  font-size: 34px;
}

.leader-empty h2 {
  margin: 0;
  color: #40516a;
  font-size: 18px;
}

.leader-empty p {
  margin: 0;
  font-size: 13px;
}

.assignment-panel {
  overflow: hidden;
  margin-top: 35px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(18, 52, 101, .07);
}

.assignment-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 23px;
  border-bottom: 1px solid var(--line);
  background: #f7faff;
}

.assignment-panel-head span {
  color: var(--blue2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
}

.assignment-panel-head h2 {
  margin: 4px 0 0;
  color: var(--blue);
  font-size: 21px;
}

.assignment-tabs {
  display: flex;
  gap: 6px;
}

.assignment-tabs button {
  min-height: 37px;
  padding: 0 12px;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  background: #fff;
  color: #63728a;
  font-size: 11px;
  font-weight: 650;
}

.assignment-tabs button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.assignment-pane {
  display: none;
  padding: 20px 23px 23px;
}

.assignment-pane.active {
  display: block;
}

.assignment-table {
  display: grid;
  overflow: hidden;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
}

.assignment-row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 180px;
  min-height: 60px;
  align-items: center;
  border-bottom: 1px solid #e5ebf3;
}

.assignment-row:last-child {
  border-bottom: 0;
}

.assignment-row>div {
  padding: 12px 14px;
  color: #596a81;
  font-size: 12px;
  line-height: 1.6;
}

.assignment-row>div+div {
  border-left: 1px solid #e5ebf3;
}

.assignment-row strong {
  display: block;
  color: #344860;
  font-size: 12px;
}

.assignment-row span {
  color: #8692a3;
  font-size: 10px;
}

.assignment-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #63738a;
  font-size: 13px;
  line-height: 1.75;
}

.assignment-note i {
  color: var(--blue2);
  font-size: 20px;
}

.leader-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 15px;
  box-shadow: 0 24px 65px rgba(4, 29, 67, .24);
}

.leader-modal .modal-header {
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  background: #f6f9fd;
}

.leader-modal .modal-title {
  color: var(--blue);
  font-size: 17px;
  font-weight: 800;
}

.leader-modal-profile {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
}

.leader-modal-profile>img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  object-position: center top;
  border-radius: 11px;
  background: #e7edf5;
}

.leader-modal-role {
  color: var(--blue2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.leader-modal-profile h2 {
  margin: 6px 0 2px;
  color: #293a53;
  font-size: 24px;
  font-weight: 800;
}

.leader-modal-profile>div>span {
  color: #7a8799;
  font-size: 12px;
}

.leader-modal-info {
  display: grid;
  gap: 9px;
  margin-top: 17px;
}

.leader-modal-info div {
  display: grid;
  grid-template-columns: 115px minmax(0, 1fr);
  gap: 9px;
  color: #596a81;
  font-size: 12px;
  line-height: 1.65;
}

.leader-modal-info strong {
  color: #354961;
}

.leader-modal-bio {
  padding: 15px;
  margin-top: 18px;
  border-radius: 9px;
  background: #f5f8fc;
  color: #596a81;
  font-size: 12px;
  line-height: 1.75;
}

@media (max-width: 1199px) {
  .leadership-summary {
    grid-template-columns: 1.5fr repeat(3, .5fr);
  }

  .leader-featured {
    grid-template-columns: 290px minmax(0, 1fr);
  }

  .leader-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .leadership-summary {
    grid-template-columns: 1fr 1fr;
  }

  .leadership-summary>article:first-child {
    grid-column: 1 / -1;
  }

  .leadership-summary>article:last-child {
    grid-column: 1 / -1;
  }

  .leader-featured {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .leader-grid {
    grid-template-columns: 1fr 1fr;
  }

  .assignment-row {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .assignment-row>div:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid #e5ebf3;
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .leadership-content {
    padding: 19px 0 35px;
  }

  .leadership-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .leader-search {
    width: 100%;
  }

  .leader-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .leader-featured {
    grid-template-columns: 1fr;
  }

  .leader-featured-photo {
    height: 350px;
  }

  .leader-featured-body {
    padding: 21px;
  }

  .leader-featured h2 {
    font-size: 23px;
  }

  .leader-assignment {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .leader-grid {
    grid-template-columns: 1fr 1fr;
  }

  .assignment-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .assignment-tabs {
    width: 100%;
  }

  .assignment-tabs button {
    flex: 1;
  }

  .assignment-row {
    grid-template-columns: 1fr;
  }

  .assignment-row>div+div,
  .assignment-row>div:last-child {
    border-top: 1px solid #e5ebf3;
    border-left: 0;
  }

  .leader-modal-profile {
    grid-template-columns: 1fr;
  }

  .leader-modal-profile>img {
    width: min(240px, 100%);
    height: 270px;
    margin: auto;
  }
}

@media (max-width: 520px) {
  .leadership-summary {
    grid-template-columns: 1fr 1fr;
  }

  .leadership-summary>article {
    min-height: 90px;
    padding: 13px;
  }

  .leadership-summary>article:first-child,
  .leadership-summary>article:last-child {
    grid-column: 1 / -1;
  }

  .leader-filters {
    grid-template-columns: 1fr;
  }

  .leader-grid {
    grid-template-columns: 1fr;
  }

  .leader-photo {
    height: 320px;
  }

  .leader-featured-photo {
    height: 320px;
  }

  .leadership-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .assignment-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .leader-modal-info div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}