/**
 * Founders block — R7.
 */

.wc-founders {
  padding-block: var(--wc-space-2xl);
  /* Transparent bg so the hero brandmark logo can bleed through and
     read as a continuous atmosphere layer (per design call 2026-05-08).
     The page-level bg (--wc-color-bg) shows through where the logo
     pixels are absent. */
  background: transparent;
  position: relative;
}

.wc-founders__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wc-space-2xl);
  justify-items: center;
  text-align: center;
}

@media (max-width: 720px) {
  .wc-founders__grid {
    grid-template-columns: 1fr;
    gap: var(--wc-space-xl);
  }
}

.wc-founder {
  /* Wider column so two-word names like "Patrick M. Kelly" stay on one
     line under the portrait per R7 comp. */
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wc-founder__photo {
  /* Founders section reduced 15% per 2026-05-08 — peaks now ~357px at
     desktop, ~25% viewport at 1440. */
  width: clamp(220px, 23.8vw, 357px);
  height: clamp(220px, 23.8vw, 357px);
  margin: 0 0 var(--wc-space-md);
  border-radius: var(--wc-radius-circle);
  overflow: hidden;
  /* Glacier-blue circular plate matches recruiter cards (carousel.css). */
  background: color-mix(in srgb, var(--wc-color-glacier) 60%, white);
  box-shadow: var(--wc-shadow-sm);
  position: relative;
}

/* Founder photo as video trigger — button reset + interactive affordance. */
.wc-founder__photo--video {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wc-founder__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transition: opacity var(--wc-transition-base), transform var(--wc-transition-base);
}

.wc-founder__play svg {
  width: 28%;
  height: 28%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.wc-founder__photo--video:hover .wc-founder__play,
.wc-founder__photo--video:focus-visible .wc-founder__play {
  opacity: 1;
  transform: scale(1.06);
}

/* Mobile / touch devices: keep the photo in its plain grayscale rest
   state — no forced play overlay and no forced duotone. The tap on
   the photo still opens the video lightbox via the click handler. */

@media (prefers-reduced-motion: reduce) {
  .wc-founder__photo--video:hover .wc-founder__play,
  .wc-founder__photo--video:focus-visible .wc-founder__play {
    transform: none;
  }
}

.wc-founder__img,
.wc-founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Stopgap halftone read until designer delivers processed PNGs.
     Swap to <filter> SVG or pre-processed images when available. */
  filter: grayscale(1) contrast(1.08);
}

/* Burgundy duotone overlay — paired with the play overlay reveal so a
   hover (or keyboard focus) on a video founder tints the portrait
   burgundy as the affordance lights up. Multiply blend over the
   existing grayscale base gives a clean burgundy tone rather than the
   orange-pink hue-rotate filter chains tend to land on. */
.wc-founder__photo--video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wc-color-brand);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wc-transition-base);
  z-index: 1;
}

.wc-founder__photo--video:hover::before,
.wc-founder__photo--video:focus-visible::before {
  opacity: 0.85;
}

/* (Touch devices no longer force the duotone — see comment above the
   .wc-founder__play touch block. Hover/focus on actual pointer devices
   still reveals the burgundy duotone via the rule a few lines up.) */

/* Type-prefixed selector ties specificity with .wc-page p (0,1,1) so
   the negative bottom margin actually pulls "Bill Willis" / "Patrick M.
   Kelly" flush under the role label. Without the prefix the token
   `.wc-page p` rule was forcing a 1rem gap. */
p.wc-founder__role {
  font-family: var(--wc-font-sans);
  font-size: clamp(0.85rem, 1.45vw, 1.75rem);
  font-weight: var(--wc-fw-bold);
  letter-spacing: var(--wc-tracking-tight);
  color: var(--wc-color-brand);
  margin: 0 0 -0.1em;
  line-height: 1;
}

/* Founder names bumped up + intra-card spacing tightened 2026-05-11
   so each portrait + name + contact reads as a single unit.
   Type-prefixed selector ties specificity with the .wc-page h2
   default (0,1,1). Header copy — tight tracking. */
h2.wc-founder__name {
  font-family: var(--wc-font-sans);
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  font-weight: var(--wc-fw-light);
  letter-spacing: var(--wc-tracking-tight);
  color: var(--wc-color-text);
  line-height: 1;
  /* Tightened further on 2026-05-11 per design review. */
  margin: 0 0 0.05em;
  white-space: nowrap;
}

@media (max-width: 720px) {
  h2.wc-founder__name {
    white-space: normal;
  }
}

.wc-founder__photo {
  /* Tighter margin so role+name+contact lock together visually.
     Trimmed further on 2026-05-11 per design review. */
  margin-bottom: 0.3em;
}

.wc-founder__line {
  /* Contact line bumped 2026-05-11 + tightened spacing within card.
     Header-copy class — keeps tight tracking. Spacing tightened
     further on 2026-05-11 per design review. */
  font-family: var(--wc-font-sans);
  font-size: clamp(0.85rem, 1.25vw, 1.35rem);
  font-weight: var(--wc-fw-semibold);
  letter-spacing: var(--wc-tracking-tight);
  color: var(--wc-color-brand);
  margin: 0 0 0.05em;
  white-space: nowrap;
}

.wc-founder__line a {
  color: inherit;
  text-decoration: none;
  transition: color var(--wc-transition-fast);
}

.wc-founder__line a:hover,
.wc-founder__line a:focus-visible {
  color: var(--wc-color-brand);
  text-decoration: none;
}

.wc-founder__linkedin {
  /* Locks the LinkedIn icon close to the contact line so
     role+name+contact+icon feel like one unit (2026-05-11 review). */
  margin: 0.15em 0 0;
}

.wc-founder__linkedin a {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--wc-color-brand);
  border-radius: var(--wc-radius-sm);
  transition: color var(--wc-transition-fast), background var(--wc-transition-fast);
}

.wc-founder__linkedin a:hover,
.wc-founder__linkedin a:focus-visible {
  color: var(--wc-color-brand-dark);
  background: var(--wc-color-brand-tint);
}

/* Video lightbox dialog (created on demand by video-lightbox.js). */
.wc-video-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 960px);
  width: 100%;
  color: var(--wc-color-text-inverse);
}

.wc-video-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
}

.wc-video-dialog__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: var(--wc-radius-md);
  overflow: hidden;
  box-shadow: var(--wc-shadow-lg);
}

.wc-video-dialog__frame iframe,
.wc-video-dialog__frame video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.wc-video-dialog__close {
  position: absolute;
  top: -44px;
  right: 0;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--wc-color-text-inverse);
  font: inherit;
  font-size: var(--wc-fs-md);
  font-weight: var(--wc-fw-medium);
  cursor: pointer;
  padding: 4px 8px;
}

.wc-video-dialog__close:hover,
.wc-video-dialog__close:focus-visible {
  text-decoration: none;
}