/* =========================================================
   06-photo-card.css — FOUNDER PHOTO CARD COMPONENT
   Depends on: 01-tokens.css
   ========================================================= */

.photo-card {
  flex-shrink: 0;
  position: relative;
  width: clamp(200px, 38vw, 272px);
  text-align: center;
}

/* Spinning conic halo */
.photo-card__halo {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%, var(--clr-gold-400) 25%,
    transparent 50%, var(--clr-amber)    75%,
    transparent 100%
  );
  animation: anim-spin-halo var(--dur-slow) linear infinite;
  z-index: 0;
}

/* Gap ring */
.photo-card__ring-gap {
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: var(--clr-bg-900);
  z-index: 1;
}

/* Ambient glow */
.photo-card__glow {
  position: absolute; inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,137,10,.28) 0%, transparent 68%);
  z-index: 0; pointer-events: none;
}

/* Portrait */
.photo-card__img {
  position: relative; z-index: 2;
  width: 100%; aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover; object-position: center 10%;
  border: 3px solid var(--clr-gold-600);
  box-shadow: 0 0 44px rgba(200,137,10,.4), inset 0 0 20px rgba(0,0,0,.5);
}

/* Caption */
.photo-card__caption { position: relative; z-index: 2; margin-top: var(--sp-4); }
.photo-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-base); font-weight: 700;
  color: var(--clr-gold-200); line-height: 1.3;
}
.photo-card__role {
  font-family: var(--font-body);
  font-style: italic; font-size: var(--fs-sm);
  color: var(--clr-muted); margin-top: var(--sp-1);
}
.photo-card__separator {
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-gold-600), transparent);
  margin: var(--sp-3) auto;
}

@keyframes anim-spin-halo { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .photo-card__halo { animation: none; } }