/* Rules shared by the ranking page and the leader profile, which load
   different design stylesheets. Kept out of both so those stay
   byte-identical to the mockups and can be re-synced. */
/* When a ranking supplies its own banner artwork, that artwork already carries
   the title, so the design's overlay heading would repeat it. The heading is
   removed from sight without being removed from the document — search engines
   and screen readers still get it. Not display:none, which would hide it from
   both. */
.page_wrap .top_banner .banner_sronly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Headshots arrive at whatever ratio the editor had — this ranking alone mixes
   1:1 and 3:4 — and the design's CSS sets only width, so each card sized to its
   own image. Cards in a flex row stretch to the tallest, so the rows came out
   ragged with a different gap above every name. Pinning the box to the design's
   3:4 makes every card identical whatever gets uploaded.
   Anchored to the top because these are portraits: if anything is trimmed it
   should be below the subject, never their head. */
.page_wrap .section2 .custom_container .teambox .imgbox {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #fff;
}
.page_wrap .section2 .custom_container .teambox .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* With the image box pinned, the only thing left that could make one card
   taller than another is the text wrapping. The company line is secondary, so
   it is held to one line and elided; the name may take two before it is capped,
   since truncating a person's name is worse than an uneven row. */
/* Both lines of the name are reserved whether or not the second is used, so a
   card is the same height no matter how long the name is or how narrow the
   column gets. Clamping alone still left the grid ragged on mobile, where the
   longer names wrap and the shorter ones do not. */
.page_wrap .section2 .custom_container .teambox .textbox h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}
.page_wrap .section2 .custom_container .teambox .textbox p {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}