/* Styles for team.html.
   Kept in its own file, outside assets/mobirise/, so that re-exporting the site
   from Mobirise cannot overwrite it. Palette is taken from mbr-additional.css:
   navy #1c3063, accent #345ed0, teal #30d5c7, body grey #7c7d7e. */

/* The navbar is position:fixed, so the first section has to clear it. This uses
   padding rather than margin so the section background fills the offset instead
   of exposing a white band. */
.pq-team {
  padding-top: calc(8rem + 60px);
  padding-bottom: 8rem;
  background-color: #f8f8f8;
}

.pq-team .pq-team-intro {
  max-width: 46rem;
  margin: 0 auto 4.5rem;
  text-align: center;
}

.pq-team .pq-team-intro .mbr-section-title {
  color: #1c3063;
  margin-bottom: 1.5rem;
}

.pq-team .pq-team-intro .mbr-text {
  color: #7c7d7e;
}

.pq-team .pq-group-label {
  display: block;
  text-align: center;
  color: #345ed0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.pq-team .pq-group-label:not(:first-of-type) {
  margin-top: 5rem;
}

/* Card grid */
.pq-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.pq-member {
  flex: 0 1 22rem;
  background: #ffffff;
  border: 2px solid #17171A;
  padding: 2.75rem 2rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pq-member:hover,
.pq-member:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(28, 48, 99, 0.16);
}

/* Monogram stands in for a photograph. Replace .pq-monogram with an <img>
   wrapped in .pq-portrait when headshots are available. */
.pq-monogram {
  width: 6.5rem;
  height: 6.5rem;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  background: #1c3063;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #30d5c7;
}

.pq-portrait {
  width: 6.5rem;
  height: 6.5rem;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #30d5c7;
}

.pq-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pq-member .pq-name {
  color: #17171A;
  margin-bottom: 0.5rem;
}

.pq-member .pq-role {
  color: #345ed0;
  margin-bottom: 0;
}

/* Drop a <p class="pq-bio"> into a card when bio copy is available. */
.pq-member .pq-bio {
  color: #7c7d7e;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.pq-member .pq-link,
.pq-member .pq-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  color: #1c3063;
  border-bottom: 1px solid #30d5c7;
  padding-bottom: 2px;
  text-decoration: none;
}

.pq-member .pq-link:hover,
.pq-member .pq-link:focus,
.pq-member .pq-social:hover,
.pq-member .pq-social:focus {
  color: #345ed0;
}

/* Inline SVG rather than an icon font: the Socicon and FontAwesome brand fonts
   are an unnecessary dependency for a single glyph, and the FontAwesome brands
   font file is not even present in assets/. */
.pq-member .pq-social svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .pq-team {
    padding-top: calc(5rem + 60px);
    padding-bottom: 5rem;
  }

  .pq-member {
    flex: 0 1 100%;
  }
}