/* ==========================================================================
   Block: Team grid
   ========================================================================== */

.awx-team__header {
  max-width: var(--awx-measure);
  margin-inline: auto;
  margin-bottom: var(--awx-space-lg);
  text-align: center;
}

.awx-team__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .awx-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .awx-team__grid {
    /* Three across at desktop, per the brief. */
    grid-template-columns: repeat(3, 1fr);
  }
}

.awx-team__card {
  display: flex;
  flex-direction: column;
}

.awx-team__portrait {
  position: relative;
  overflow: hidden;
  border-radius: var(--awx-radius); /* 6px — was missing, same bug as card-grid */
  aspect-ratio: 402.67 / 441; /* same proportions as card-grid's cards */
  background: var(--surface-rule);
}

.awx-team__portrait-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The gold corner itself (the ::before rotated rectangle) is a shared
   .awx-corner-wedge utility in base.css now, rather than duplicated here —
   see that file for the full reasoning, including the MEASURE note on
   rotation direction/placement being unverified. Its background-color was
   var(--awx-gold-500) directly, a raw brand token flagged under the 1b
   audit — the shared version in base.css already uses var(--surface-accent)
   instead, so this is fixed as a side effect of de-duplicating it. */

/* The blue bar beneath the portrait. --awx-icon-cutout matches the link
   icons' "hole" colour to this bar's own background — see
   awx_social_icon_svg()'s docblock in inc/helpers.php. */
.awx-team__bar {
  --awx-icon-cutout: var(--surface-bg);
  padding: 1.25rem 1.5rem 1.5rem;
}

.awx-team__name {
  margin: 0;
  color: var(--surface-heading);
  font-family: var(--awx-font-display);
  font-size: var(--awx-step-1);
  font-weight: 700;
  text-transform: uppercase;
}

.awx-team__job-title {
  margin: 0.25rem 0 0;
  color: var(--surface-text);
  font-size: var(--awx-step--1);
}

.awx-team__links {
  display: flex;
  gap: var(--awx-space-xs);
  margin-top: var(--awx-space-sm);
}

.awx-team__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: var(--awx-rule) solid rgb(255 255 255 / 0.4);
  border-radius: 999px;
  color: var(--surface-heading);
  transition: border-color var(--awx-transition);
}

.awx-team__links a:hover {
  /* Was var(--awx-gold-500) directly — flagged under the 1b audit. */
  border-color: var(--surface-accent);
}

.awx-team__links svg {
  width: 1rem;
  height: 1rem;
}