/* /nn/ staff pages: agent.astro + agents/* (owned by the staff agent) */

/* The template's stats grid used display-xl for big fabricated numbers.
   The working-rules grid holds short phrases instead, so size them to fit
   on one line and never break mid-word. */
.agent-details-stats-card {
  min-width: 0;
}
.agent-details-stats-card .display-xl.staff-rule {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
@media (max-width: 479px) {
  .agent-details-stats-card .display-xl.staff-rule {
    font-size: 1.25rem;
  }
}

/* Roster and hero art: flat SVG cards replace the template webps.
   Applies to both inline SVGs and imgs pointing at /nn/art/. */
.staff-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  background-color: #fff;
}
img.staff-art {
  object-fit: contain;
}
.agent-02-image-wrapper,
.agent-details-image-wrapper {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agent-details-image-wrapper {
  border-color: #e4e9f5;
}

/* Staff filter tabs: below the desktop breakpoint the template switched the
   tab row to overflow: scroll with no affordance, which clipped "Watchers"
   and hid "Website" and "Builds" at 390px. Wrap instead of clipping. */
@media (max-width: 991px) {
  .agent-02-tabs-menu {
    flex-wrap: wrap;
    overflow: visible;
  }
}

/* Character badge: each roster card pairs the agent's face with the panel
   that shows what it produces. */
.agent-02-image-wrapper { position: relative; }
.la-staff-face { position: absolute; left: 14px; bottom: 14px; width: 54px; height: 54px; border-radius: 50%; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(35, 42, 80, .45); z-index: 2; }
.la-staff-face img { width: 100%; height: 100%; object-fit: cover; display: block; }