/*
 * Original Design Specifications
 * Target: > 1800px
 * Test Resolution: 1920 x 1080
 */
:root {
  /* People Filters */
  --archive-people-people-list-with-filters-flex-direction: column;
  --archive-people-people-list-with-filters-align-items: center;
  --archive-people-filter-results-count-align-self: center;

  /* People Grid */
  --archive-people-preview-list-grid-columns: 3;
  --archive-people-preview-list-column-gap: 5rem;
  --archive-people-preview-image-border-radius: 1.4rem;
  --archive-people-preview-image-aspect-ratio: 0.9;

  /* Preview Caption */
  --archive-people-preview-caption-padding-top: 3rem;
  --archive-people-preview-caption-padding-x: 5.6rem;
  --archive-people-preview-caption-padding-bottom: 2rem;
  --archive-people-preview-caption-line-height: 1.3;

  /* Preview Typography */
  --archive-people-preview-name-font-size: 3.3rem;
  --archive-people-preview-name-font-weight: 400;
  --archive-people-preview-role-font-size: 2rem;
  --archive-people-preview-name-role-gap: 1rem;

  /* Vacancies Call To Action */
  --archive-people-vacancies-call-to-action-inline-display: flex;
  --archive-people-vacancies-call-to-action-at-footer-display: none;
  --archive-people-vacancies-call-to-action-inline-margin-bottom: calc(
    var(--archive-people-preview-caption-padding-bottom) * 2.5
  );

  /* Pagination */
  --archive-people-pagination-margin-top: var(--layout-gap-basis);
  --archive-people-pagination-margin-bottom: 0;
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    /* People Grid */
    --archive-people-preview-list-column-gap: 4rem;
    --archive-people-preview-image-height: 50rem;

    /* Preview Caption */
    --archive-people-preview-caption-padding-top: 2.5rem;
    --archive-people-preview-caption-padding-bottom: 1rem;

    /* Preview Typography */
    --archive-people-preview-name-font-size: 3rem;
    --archive-people-preview-role-font-size: 1.9rem;
  }
}

/*
 * XL Media Query (1280px)
 * Target: 1535px > 1280px
 * Test Resolution: 1280 x 720
 */
@media screen and (max-width: 1535px) {
  :root {
    /* People Grid */
    --archive-people-preview-list-column-gap: 3.5rem;
    --archive-people-preview-image-height: 46rem;

    /* Preview Typography */
    --archive-people-preview-caption-padding-x: 3rem;
    --archive-people-preview-name-font-size: 2.2rem;
    --archive-people-preview-role-font-size: 1.6rem;
    --archive-people-preview-name-role-gap: 0.7rem;
  }
}

/*
 * L Media Query (1024px)
 * Target: 1279px > 1024px
 * Test Resolution: 1024 x 768
 */
@media screen and (max-width: 1279px) {
  :root {
    /* People Filters */
    --archive-people-filter-results-count-align-self: center;

    /* People Grid */
    --archive-people-preview-list-column-gap: 3rem;
    --archive-people-preview-image-height: 42rem;

    /* Preview Typography */
    --archive-people-preview-name-font-size: 2rem;
    --archive-people-preview-role-font-size: 1.7rem;

    /* Vacancies Call To Action */
    --archive-people-vacancies-call-to-action-inline-margin-bottom: 2.5rem;
  }
}

/*
 * M Media Query (768px)
 * Target: 1023px > 768px
 * Test Resolution: 768 x 1024
 */
@media screen and (max-width: 1023px) {
  :root {
    /* People Grid */
    --archive-people-preview-list-column-gap: 2.5rem;

    /* Preview Caption */
    --archive-people-preview-caption-padding-x: 1rem;
    --archive-people-preview-caption-padding-top: 1.5rem;
    --archive-people-preview-caption-padding-bottom: 1.5rem;

    /* Preview Typography */
    --archive-people-preview-name-font-size: 1.8rem;
    --archive-people-preview-role-font-size: 1.4rem;
    --archive-people-preview-name-role-gap: 0.5rem;

    /* Vacancies Call To Action */
    --archive-people-vacancies-call-to-action-inline-margin-bottom: 2.5rem;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    /* People Grid */
    --archive-people-preview-list-grid-columns: 2;
    --archive-people-preview-list-column-gap: 1rem;

    /* Preview Caption */
    --archive-people-preview-caption-padding-x: 0rem;
    --archive-people-preview-caption-padding-top: 1rem;
    --archive-people-preview-caption-padding-bottom: 1rem;

    /* Preview Typography */
    --archive-people-preview-name-font-size: 1.4rem;
    --archive-people-preview-name-font-weight: 500;
    --archive-people-preview-role-font-size: 1.2rem;
    --archive-people-preview-name-role-gap: 0.3rem;

    /* Vacancies Call To Action */
    --archive-people-vacancies-call-to-action-inline-display: none;
    --archive-people-vacancies-call-to-action-at-footer-display: flex;

    /* Pagination */
    --archive-people-pagination-margin-bottom: 2.5rem;
  }
}

.archive-people-people-list-with-filters {
  display: flex;
  flex-direction: var(--archive-people-people-list-with-filters-flex-direction);
  align-items: var(--archive-people-people-list-with-filters-align-items);
}

.archive-people-filter-results-count {
  align-self: var(--archive-people-filter-results-count-align-self);
}

.archive-people-preview-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(
    var(--archive-people-preview-list-grid-columns),
    1fr
  );
  column-gap: var(--archive-people-preview-list-column-gap);
  row-gap: calc(var(--archive-people-preview-list-column-gap) * 0.75);
}

.archive-people-preview-image {
  display: block;
  border-radius: var(--archive-people-preview-image-border-radius);
  width: 100%;
  aspect-ratio: var(--archive-people-preview-image-aspect-ratio);
  object-fit: cover;
}

.archive-people-preview-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--archive-people-preview-image-aspect-ratio);
  background-color: var(--theme-color-placeholder);
  border-radius: var(--archive-people-preview-image-border-radius);
}

.archive-people-preview-image,
.archive-people-preview-image-placeholder {
  transition:
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    filter 0.3s ease-in-out;
}

.archive-people-preview-list-item:hover .archive-people-preview-image,
.archive-people-preview-list-item:hover
  .archive-people-preview-image-placeholder {
  transform: scale(1.02);
  box-shadow: 0 10px 20px var(--theme-color-shadow-light);
  filter: brightness(1.05);
}

.archive-people-preview-image-placeholder-icon {
  width: 30%;
  height: 30%;
  fill: var(--theme-color-placeholder-secondary);
}

.archive-people-preview-image-placeholder-icon svg path {
  fill: var(--theme-color-placeholder-secondary);
}

.archive-people-preview-caption {
  padding: var(--archive-people-preview-caption-padding-top)
    var(--archive-people-preview-caption-padding-x)
    var(--archive-people-preview-caption-padding-bottom)
    var(--archive-people-preview-caption-padding-x);
}

.archive-people-preview-name,
.archive-people-preview-role {
  display: block;
  text-align: center;
  line-height: var(--archive-people-preview-caption-line-height);
}

.archive-people-preview-name {
  font-size: var(--archive-people-preview-name-font-size);
  font-weight: var(--archive-people-preview-name-font-weight);
}

.archive-people-preview-role {
  font-size: var(--archive-people-preview-role-font-size);
}

.archive-people-preview-name + .archive-people-preview-role {
  margin-top: var(--archive-people-preview-name-role-gap);
}

.archive-people-vacancies-call-to-action-inline {
  display: var(--archive-people-vacancies-call-to-action-inline-display);
  margin-bottom: var(
    --archive-people-vacancies-call-to-action-inline-margin-bottom
  );
}

.archive-people-vacancies-call-to-action-at-footer {
  display: var(--archive-people-vacancies-call-to-action-at-footer-display);
  margin-bottom: 0;
}

.archive-people-pagination.pagination {
  margin-top: var(--archive-people-pagination-margin-top);
  margin-bottom: var(--archive-people-pagination-margin-bottom);
}