/* Sober AF -- Board: saf_board_member single-template chrome (S-08).
 *
 * The Tier-D hybrid front end does NOT enqueue the dormant `sober-af`
 * theme's components.css, so the `.saf-board-*` markup emitted by
 * sober-af-board/includes/class-saf-board-single.php renders unstyled
 * unless this plugin ships the CSS. Enqueued on
 * is_singular('saf_board_member'). Tokens resolve from tokens.css
 * (enqueued globally by the child theme). See memory:
 * tier-d-old-theme-css-not-enqueued.
 *
 * No bare `.saf-btn` here ON PURPOSE -- the LinkedIn CTA uses the
 * self-named `.saf-board-linkedin` class so it can never leak onto the
 * global JTC footer "Say hi" <button> (which is also class="saf-btn").
 * See memory: per-cpt-css-saf-btn-footer-leak. THE risk for S-08
 * because the OLD template uses `.saf-btn .saf-btn--ghost` directly.
 */

/* ------------------------------------------------------------------ *
 * GAP 1 -- [saf_board_photo]: the headshot tile leading the body-left
 * column. The image is COVER-cropped (the photo is a headshot, crop is
 * intentional -- contrast with the sponsor logo which uses `contain`).
 * The monogram fallback fills the same square box so the column never
 * reads as an empty void.
 * ------------------------------------------------------------------ */

.saf-board-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--saf-gap-4);
  /* Linen tint (not bare white) so the box reads as a deliberate
   * portrait tile rather than an unstyled void when the monogram
   * fallback shows. Matches the sponsor + award tile language. */
  background: var(--saf-linen);
  border: 1px solid var(--saf-border);
  border-radius: 12px;
  overflow: hidden;
}

.saf-board-photo__img {
  display: block;
  width: 100%;
  height: 100%;
  /* COVER, not contain: headshot crop is the OLD theme's intent
   * (see single-saf_board_member.php). Same call as awards. */
  object-fit: cover;
}

.saf-board-photo__monogram {
  font-family: var(--saf-font-sans);
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  /* Brand brick rather than OLD's near-invisible grey -- the monogram
   * reads as a deliberate portrait placeholder. Decorative
   * (aria-hidden), so it carries no contrast requirement. */
  color: var(--saf-brick-red);
}

/* ------------------------------------------------------------------ *
 * GAP 2 -- [saf_board_linkedin]: the outbound LinkedIn CTA in the
 * sidebar. Ghost button (charcoal outline, fills on hover) ported from
 * the OLD theme's `.saf-btn--ghost` -- scoped to .saf-board-linkedin
 * so the global footer "Say hi" .saf-btn is unaffected.
 * ------------------------------------------------------------------ */

.saf-board-linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--saf-gap-2);
  min-height: 44px; /* improvement over OLD: WCAG 2.5.5 touch target */
  margin-top: var(--saf-gap-2);
  padding: 0.6rem 1.4rem;
  background: transparent;
  color: var(--saf-charcoal);
  font-family: var(--saf-font-sans);
  font-weight: 700;
  font-size: var(--saf-text-base);
  text-decoration: none;
  border: 2px solid var(--saf-charcoal);
  border-radius: var(--saf-radius-pill);
  transition:
    background var(--saf-transition),
    color var(--saf-transition),
    transform var(--saf-transition);
}

.saf-board-linkedin:hover,
.saf-board-linkedin:focus-visible {
  background: var(--saf-charcoal);
  color: var(--saf-linen);
  transform: translateY(-1px);
}