/* ═══════════════════════════════════════════════════════════════
   AGLF — Premium Programme Speaker Card
   Elevates .programme-speaker avatar + meta to editorial premium.
   Keeps existing Django backend, no model changes.
   Uses AGLF tokens: --color-*, --font-*, --radius-*
   Shadows remain disabled via no-shadows.css — uses borders only.
   ═══════════════════════════════════════════════════════════════ */

/* ── List ────────────────────────────────────────────────────── */
.programme-speakers {
  gap: 12px !important;
  margin-top: 16px !important;
}

/* ── Row — premium container ───────────────────────────────── */
.programme-speaker {
  position: relative;
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border: 1px solid var(--color-line) !important;
  border-radius: 12px !important;
  background: var(--color-bg) !important;
  transition: border-color 180ms ease, background 180ms ease;
}

.programme-speaker:hover {
  border-color: color-mix(in srgb, var(--color-forest-soft) 22%, var(--color-line)) !important;
  background: color-mix(in srgb, var(--color-surface) 86%, var(--color-bg)) !important;
}

[data-theme="dark"] .programme-speaker {
  background: color-mix(in srgb, var(--color-surface) 72%, var(--color-bg)) !important;
  border-color: var(--color-line) !important;
}

[data-theme="dark"] .programme-speaker:hover {
  border-color: color-mix(in srgb, var(--color-action) 24%, var(--color-line)) !important;
}

/* ── Avatar — larger, premium, bordered ─────────────────────── */
.programme-speaker-avatar {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--color-surface) !important;
  border: 1.5px solid var(--color-line) !important;
  color: var(--color-forest-soft) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  isolation: isolate;
}

.programme-speaker-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  pointer-events: none;
  opacity: .6;
}

[data-theme="dark"] .programme-speaker-avatar {
  background: var(--map-surface) !important;
  border-color: color-mix(in srgb, var(--color-line) 80%, transparent) !important;
}

[data-theme="dark"] .programme-speaker-avatar::after {
  border-color: rgba(255,255,255,.08);
}

.programme-speaker-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: none !important;
  transition: transform 420ms var(--ease-out);
}

.programme-speaker:hover .programme-speaker-avatar img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .programme-speaker-avatar img {
    transition: none !important;
    transform: none !important;
  }
}

/* Monogram — editorial, not generic */
.programme-speaker-monogram {
  font: 600 .82rem/1 var(--font-display) !important;
  letter-spacing: .02em !important;
  color: var(--color-ink) !important;
  width: 100%;
  height: 100%;
  display: grid !important;
  place-items: center;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--color-action) 12%, transparent), transparent 55%),
    var(--map-surface) !important;
  text-transform: uppercase;
}

/* ── Meta — hierarchy ───────────────────────────────────────── */
.programme-speaker-meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.programme-speaker-name {
  color: var(--color-ink) !important;
  font: 600 1.02rem/1.25 var(--font-display) !important;
  letter-spacing: -.015em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.programme-speaker-link {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  transition: color 180ms ease;
}

.programme-speaker-link:hover {
  color: var(--color-forest-soft) !important;
}

.programme-speaker-role {
  color: var(--color-ink) !important;
  font: 400 .86rem/1.4 var(--font-body) !important;
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.programme-speaker-org {
  color: var(--color-forest-soft) !important;
  font: 500 .62rem/1.4 var(--font-mono) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .92;
}

/* Subtle “view profile” affordance on hover — editorial arrow */
.programme-speaker::after {
  content: "↗";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  font: 400 .82rem/1 var(--font-mono);
  color: var(--color-forest-soft);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms var(--ease-out);
  pointer-events: none;
}

.programme-speaker:hover::after {
  opacity: .9;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 640px) {
  .programme-speaker {
    padding: 10px 12px !important;
    gap: 12px !important;
  }
  .programme-speaker-avatar {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
  .programme-speaker::after {
    display: none;
  }
  .programme-speaker-name {
    font-size: .96rem !important;
  }
}