/*
 Leadership
========================================================================== */
.wp-block-meta-leadership .container {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 12.8px + 0.04 * 100vw, 64px);
}
.wp-block-meta-leadership .staff-filter {
  display: flex;
  flex-direction: column;
  gap: 12px 24px;
  margin-bottom: -16px;
}
@media screen and (min-width: 480px) {
  .wp-block-meta-leadership .staff-filter {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.wp-block-meta-leadership .staff-filter select {
  padding-right: 40px;
  height: 50px;
  min-width: 200px;
}
@media screen and (min-width: 480px) {
  .wp-block-meta-leadership .staff-filter select {
    order: -1;
  }
}
.wp-block-meta-leadership .staff-filter .search {
  position: relative;
}
.wp-block-meta-leadership .staff-filter .search input {
  padding-left: 50px;
  min-width: 200px;
  height: 50px;
  width: 100%;
}
.wp-block-meta-leadership .staff-filter .search .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  font-size: 16px;
}
.wp-block-meta-leadership .staff-list {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 38.4px + 0.02 * 100vw, 64px);
}
.wp-block-meta-leadership .department {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 19.2px + 0.01 * 100vw, 32px);
}
@media screen and (min-width: 576px) {
  .wp-block-meta-leadership .department {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.wp-block-meta-leadership h2 {
  width: 100%;
  font-size: clamp(1.5rem, 19.2px + 1vw, 2rem);
  line-height: 1;
  margin-bottom: 0;
  font-weight: 500;
}
.wp-block-meta-leadership .staff-grid {
  width: 100%;
  --auto-grid-min-size: 13rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: clamp(20px, 14px + 0.0125 * 100vw, 30px);
}
@media screen and (min-width: 640px) {
  .wp-block-meta-leadership .staff-grid {
    --auto-grid-min-size: 17rem;
  }
}
.wp-block-meta-leadership #no-results-message {
  align-self: center;
  background-color: #f7f7f7;
  color: var(--wp--custom--color--heading);
  border-radius: 6px;
  padding: 12px 24px;
  width: 100%;
  max-width: 576px;
  text-align: center;
  margin-top: calc(clamp(32px, 12.8px + 0.04 * 100vw, 64px) * -1);
}
.wp-block-meta-leadership .loading {
  width: 64px;
  height: 64px;
  position: absolute;
  top: calc(50% - 16px);
  left: calc(50% - 16px);
  background: url(/wp-content/themes/quaychurch/images/loader.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.35;
}
.wp-block-meta-leadership .failed {
  width: 100%;
  height: 16px;
  text-align: center;
  position: absolute;
  top: calc(50% - 8px);
  left: 0;
  color: rgba(255, 255, 255, 0.6);
}

#staff-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
  z-index: 999;
}
#staff-panel.open {
  pointer-events: auto;
}
#staff-panel.open .staff-panel-overlay {
  opacity: 1;
}
#staff-panel.open #staff-panel-content {
  right: 0;
}
#staff-panel .staff-panel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 22, 22, 0.6);
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
}
#staff-panel #staff-panel-content {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 576px;
  height: 100%;
  background: #161616;
  will-change: right;
  transition: right 0.85s cubic-bezier(0.7, 0, 0.2, 1);
  outline: none;
  color: var(--wp--custom--color--background);
  display: flex;
}
#staff-panel #staff-panel-content #staff-panel-container {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}
#staff-panel .staff-thumbnail {
  aspect-ratio: 5/6;
  width: 100%;
  position: relative;
}
#staff-panel .staff-thumbnail img {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transform-style: preserve-3d;
}
#staff-panel .staff-thumbnail::after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #161616 0, transparent 50%), linear-gradient(to top, #161616 0, transparent 35%);
  position: absolute;
  bottom: 0;
}
#staff-panel .staff-thumbnail + .staff-content {
  margin-top: calc(clamp(64px, 42.4px + 0.045 * 100vw, 100px) * -1);
}
#staff-panel .staff-content {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 14.4px + 0.02 * 100vw, 40px);
}
#staff-panel .staff-content .muted-heading {
  color: var(--wp--custom--color--background);
}
#staff-panel .staff-content h1 {
  color: var(--wp--custom--color--background);
  font-size: clamp(2rem, 8px + 5vw, 4.5rem);
  line-height: 1;
}
#staff-panel .staff-content .staff-bio {
  padding-top: clamp(24px, 19.2px + 0.01 * 100vw, 32px);
  font-size: clamp(1rem, 14.8px + 0.25vw, 1.125rem);
}
#staff-panel .staff-content blockquote {
  font-size: clamp(1.375rem, 19.6px + 0.5vw, 1.625rem);
  font-family: var(--wp--preset--font-family--secondary);
  font-style: italic;
  line-height: 1.6;
}
#staff-panel .close-staff-panel {
  position: absolute;
  top: clamp(16px, 6.4px + 0.02 * 100vw, 32px);
  right: clamp(16px, 6.4px + 0.02 * 100vw, 32px);
  width: clamp(58px, 48.4px + 0.02 * 100vw, 74px);
  height: clamp(58px, 48.4px + 0.02 * 100vw, 74px);
  border-radius: 100px;
  color: var(--wp--custom--color--background);
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: clamp(1.125rem, 14.4px + 0.75vw, 1.5rem);
  transition: all 0.2s ease-in-out;
}
#staff-panel .close-staff-panel:hover {
  background: #D2F801;
  color: var(--wp--custom--color--heading);
}

:root .acf-block-preview.wp-block-meta-leadership .filter:not(.acf-input .filter) {
  display: none;
}
:root .acf-block-preview.wp-block-meta-leadership .staff-list {
  padding-top: 0;
}
:root .acf-block-preview.wp-block-meta-leadership figure {
  margin: 0;
}