/* =============================================================
   SOCIAL PROOF — Phase 5: instructor cards + testimonial extras
   Theme-aware via design tokens. Instructor grid used on both
   /community and /programs/training (shared partial).
   ============================================================= */

/* ── Instructor grid ─────────────────────────────────────────── */
.mentor-grid {
  display: grid;
  grid-template-columns: 1fr;               /* mobile: 1 col */
  gap: var(--space-6);
}
@media (min-width: 768px)  { .mentor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mentor-grid { grid-template-columns: repeat(3, 1fr); } }

.mentor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.mentor-card:hover,
.mentor-card:focus-within {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.mentor-card__photo {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  margin-bottom: var(--space-4);
}
.mentor-card__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background: var(--color-accent);
}

.mentor-card__name {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--color-text-dark);
  margin-bottom: var(--space-1);
}
.mentor-card__role {
  font-size: var(--font-size-sm);
  color: var(--color-text-medium);
  margin-bottom: var(--space-4);
}

.mentor-card__topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.mentor-card__topics li {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  background: rgba(27, 110, 243, 0.10);
  border: 1px solid rgba(27, 110, 243, 0.22);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.mentor-card__bio {
  font-size: var(--font-size-sm);
  color: var(--color-text-medium);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-5);
}

.mentor-card__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
}
.mentor-card__linkedin:hover,
.mentor-card__linkedin:focus-visible { color: var(--color-accent-hover); text-decoration: underline; }

/* ── Testimonial extras (extend partials/testimonial-carousel) ── */
.tcarousel__journey {
  font-size: var(--font-size-sm);
  color: var(--color-text-medium);
  margin-top: var(--space-3);
}
.tcarousel__journey-to { font-weight: var(--font-weight-semibold); color: var(--color-text-dark); }

.tcarousel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
/* Company logos show as their owners drew them. They used to be
   desaturated and dimmed until hover, which meant a partner's brand
   was only ever seen correctly by someone with a mouse. */
.tcarousel__company-logo {
  height: 26px;
  width: auto;
}
.tcarousel__linkedin {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}
.tcarousel__linkedin:hover,
.tcarousel__linkedin:focus-visible { color: var(--color-accent-hover); text-decoration: underline; }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mentor-card,
  .tcarousel__company-logo { transition: none; }
  .mentor-card:hover,
  .mentor-card:focus-within { transform: none; }
}

/* ── Partner marquee ─────────────────────────────────────────────
   Two identical sets side by side inside one track. The track
   animates to translateX(-50%) — exactly one set's width — so the
   moment it finishes, the second set is sitting where the first
   began and the loop is invisible.
   ------------------------------------------------------------- */
.pmarquee {
  flex: 1;
  min-width: 0;                 /* lets it shrink inside the flex strip */
  overflow: hidden;
  /* Fades the logos out at both edges instead of clipping them dead */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.pmarquee__track {
  display: flex;
  /* Two sets, so the track is twice the strip. That makes the -50% in
     the keyframes equal exactly one set width: the second copy lands
     precisely where the first started and the loop has no jump. Using
     max-content here instead would make the sets' own 100% circular. */
  width: 200%;
  animation: pmarquee-scroll 15s linear infinite;
}
.pmarquee__set {
  /* Each set spans the whole strip, so the logo inside it has the full
     width to travel and the following copy stays one width behind.
     That is what makes it read as a single logo crossing, rather than a
     row of logos sliding along together. */
  flex: 0 0 50%;              /* half the 200% track = one strip width */
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-8);
  margin: 0;
  list-style: none;
}
.pmarquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sized to match the reference: 180px on a phone, growing to 280px on
     a desktop. The logo art is dark navy and orange on white, so it sits
     on a white card rather than directly on the dark strip, where the
     jpeg's own white box would have looked like a mistake. */
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 4 / 3;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
}
.pmarquee__logo {
  /* contain, not cover: a logo must never be cropped to fill its box */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Full opacity: a partner's logo is their brand, and dimming it to
     0.85 changed the colours they chose. */
  opacity: 1;
}
.pmarquee__item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Pausing on hover lets someone actually read a logo they spotted */
.pmarquee:hover .pmarquee__track,
.pmarquee:focus-within .pmarquee__track { animation-play-state: paused; }

@keyframes pmarquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Motion is decorative here, so it stops entirely when asked. The row
   stays scrollable by hand so no logo becomes unreachable. */
@media (prefers-reduced-motion: reduce) {
  .pmarquee__track { animation: none; }
  .pmarquee { overflow-x: auto; }
}

/* On a phone the label and the marquee shared one 358px row, leaving the
   logos about 166px — roughly two of them, behind a fade. Stacking gives
   the marquee the full width, which is the whole point of a marquee. */
@media (max-width: 640px) {
  .partner-strip {
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-6);
  }
  .partner-strip__label { text-align: center; }
  .pmarquee { width: 100%; flex: none; }
}