/* Professional card. Site-wide standard, see parts/components/pro-card.php.
 *
 * THREE SIZES. Use these, do not add one-off professional tiles.
 *
 *            layout       photo           name       role       office
 *   --sm     horizontal   96 wide         16 / 22    13 / 20    13 / 20
 *   --md     vertical     ~200 (fluid)    18 / 24    13 / 18    hidden by default
 *   --lg     vertical     ~280 (fluid)    20 / 26    14 / 20    13 / 20
 *
 *   sm  key contacts, bio sidebars, any list beside body copy
 *   md  capability professionals carousel, office pages
 *   lg  professionals directory grid
 *
 * Shared by all three:
 *   Photo frame is 0.8 (200 x 250 in the 2022 file). The ratio lives on the
 *   frame, not the image, so a missing photo keeps its slot.
 *   Tint from choose_header_bg_clr. Headshots are cut out, so it shows through.
 *   Default and `blue`: navy with the blue glow from the 2022 file. `grey`: #BFC7D6.
 *   No photo: silhouette on the tint.
 *   Name is the only link. Stretched ::after, focus ring around the whole card.
 *   Hover: title role in links.css. No image hover effects.
 *
 * Type is ink on white or the light section grays, 14.6:1 or better.
 * Role was 12px in the 2022 file, raised to 13 for legibility.
 */

.hlb-pro-card {
  --hlb-pro-name:     500 18px/24px var(--hlb-font-body);
  --hlb-pro-role:     400 13px/18px var(--hlb-font-body);
  --hlb-pro-office:   400 13px/20px var(--hlb-font-body);
  --hlb-pro-text-gap: 16px;

  position: relative;
  text-align: left;
}

.hlb-pro-card--sm {
  --hlb-pro-name:     500 16px/22px var(--hlb-font-body);
  --hlb-pro-role:     400 13px/20px var(--hlb-font-body);

  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}

.hlb-pro-card--lg {
  --hlb-pro-name:     500 20px/26px var(--hlb-font-body);
  --hlb-pro-role:     400 14px/20px var(--hlb-font-body);
  --hlb-pro-text-gap: 18px;
}

/* Photo. */
.hlb-pro-card__photo {
  position: relative;
  aspect-ratio: 0.8;
  overflow: hidden;
  background-color: var(--hlb-navy);
  background-image: radial-gradient(116% 92.8% at 50% 92.7%, rgba(0, 98, 137, 0.5) 0%, rgba(0, 98, 137, 0) 100%);
}

.hlb-pro-card__photo--grey {
  background-color: #BFC7D6;
  background-image: none;
}

.hlb-pro-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.hlb-pro-card__placeholder {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 55%;
  transform: translateX(-50%);
  fill: rgba(255, 255, 255, 0.2);
}

/* Text. Doubled class beats Uncode's heading and link rules. */
.hlb-pro-card__body {
  margin-top: var(--hlb-pro-text-gap);
}

.hlb-pro-card--sm .hlb-pro-card__body {
  margin-top: 2px;
}

.hlb-pro-card .hlb-pro-card__name {
  margin: 0;
  padding: 0;
  font: var(--hlb-pro-name);
  letter-spacing: 0;
  text-transform: none;
  color: var(--hlb-ink);
}

/* Link color and hover line: title role, links.css. */
.hlb-pro-card .hlb-pro-card__name a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.hlb-pro-card .hlb-pro-card__name a:focus-visible {
  outline: none;
}

.hlb-pro-card .hlb-pro-card__name a:focus-visible::after {
  outline: 2px solid var(--hlb-navy);
  outline-offset: 3px;
}

.hlb-pro-card .hlb-pro-card__role,
.hlb-pro-card .hlb-pro-card__office {
  margin: 4px 0 0;
  color: var(--hlb-ink);
}

.hlb-pro-card .hlb-pro-card__role {
  font: var(--hlb-pro-role);
}

.hlb-pro-card .hlb-pro-card__office {
  font: var(--hlb-pro-office);
}