@charset "UTF-8";
/**
 * Shared member card
 *
 * Vertical layout matching the BuddyPress members directory: a large
 * circular avatar breaking the top edge of the card, then name, company,
 * title, and the company logo pinned to the bottom.
 *
 * The avatar is pulled up out of the card with a negative margin, so the
 * card must NOT clip overflow and needs top margin of its own to stop the
 * portrait colliding with whatever sits above it.
 *
 * Two variants:
 *   .crea-card--default  used in grids
 *   .crea-card--leader   larger avatar and name, used above a roster
 *
 * @package creaunited_2020
 */
.crea-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: calc(150px / 2);
  padding: 0 1.25rem 1.75rem;
  background-color: var(--crea-surface, #fff);
  border: 1px solid var(--crea-surface-rule, #e4e7ec);
  border-radius: 16px;
  text-decoration: none;
  color: var(--crea-surface-ink, #1d2430);
  transition: border-color 0.2s ease, transform 0.2s ease;
  /* Two classes, because the theme underlines links from a descendant
   * selector that beats a single class on specificity. */
}
.crea-card-grid .crea-card, .crea-card:hover, .crea-card:focus, .crea-card:visited {
  text-decoration: none;
  color: var(--crea-surface-ink, #1d2430);
}
.crea-card:hover {
  border-color: #b9c0cc;
  transform: translateY(-2px);
}
.crea-card:focus-visible {
  outline: 2px solid var(--crea-focus, #1d4266);
  outline-offset: 2px;
}
.crea-card {
  /* ---------------------------------------------------------------
   * Avatar — half of it sits above the card
   * ------------------------------------------------------------ */
}
.crea-card__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin-top: calc(150px / -2);
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background-color: #eef0f3;
  overflow: hidden;
}
.crea-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.crea-card__initials {
  font-size: 2.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--crea-surface-ink-faint, #78808d);
}
.crea-card {
  /* ---------------------------------------------------------------
   * Text
   * ------------------------------------------------------------ */
}
.crea-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.crea-card__name {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--crea-surface-ink, #1d2430);
}
.crea-card__company {
  margin-top: 0.625rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--crea-surface-ink-soft, #3d4550);
}
.crea-card__title {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--crea-surface-ink-faint, #78808d);
}
.crea-card {
  /* ---------------------------------------------------------------
   * Company logo, pinned to the bottom so cards in a row align
   * ------------------------------------------------------------ */
}
.crea-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  margin-top: auto;
  padding-top: 1.5rem;
}
.crea-card__logo img {
  max-width: 80%;
  max-height: 100%;
  object-fit: contain;
}
.crea-card {
  /* ---------------------------------------------------------------
   * Leader variant
   * ------------------------------------------------------------ */
}
.crea-card--leader {
  margin-top: calc(180px / 2);
  padding-bottom: 2rem;
}
.crea-card--leader .crea-card__avatar {
  width: 180px;
  height: 180px;
  margin-top: calc(180px / -2);
}
.crea-card--leader .crea-card__initials {
  font-size: 3.25rem;
}
.crea-card--leader .crea-card__name {
  font-size: 1.375rem;
}

/* -------------------------------------------------------------------
 * Grid wrappers
 *
 * Row gap is small because each card already carries half an avatar of
 * top margin. Column gap is the real spacing.
 * ---------------------------------------------------------------- */
.crea-card-grid {
  display: grid;
  column-gap: 1.5rem;
  row-gap: 1.25rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 576px) {
  .crea-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .crea-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .crea-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .crea-card-grid--leaders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .crea-card-grid--leaders {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.crea-card-grid {
  /* Hidden by a filter rather than absent from the page. */
}
.crea-card-grid .crea-card.is-hidden {
  display: none;
}

/* The first row of cards hangs an avatar above itself, so the label
 * above needs clearance the section-label margin alone cannot give. */
.crea-card-section-label {
  margin: 0 0 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--crea-rule, #e4e7ec);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crea-ink-faint, #78808d);
}