/* Card frame */
.card {
  min-width: 200px;
  border-radius: 0 !important;
  cursor: pointer;
  overflow: hidden; /* ensures bio expansion stays inside card */
}
html[data-theme="dark"] .card {
  border: 1px solid #4a90e2 !important;
}

/* Image */
.card-img-top {
  display: block;
  width: 100%;
  margin: 0; /* override mb-3 if needed */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  filter: grayscale(100%) contrast(110%) brightness(95%);
  flex-shrink: 0;
  transform-origin: top left;
  background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
  transition:
    transform 0.8s cubic-bezier(0.4,0,0.2,1),
    border-radius 0.8s ease;
}
html[data-theme="dark"] .card-img-top {
  background: linear-gradient(135deg, #2b2b2b, #3a3a3a);
}
.card.expanded .card-img-top {
  transform: scale(0.25);
  border-radius: 50%;
}

/* Header text */
.card-header-text {
  padding: 0 1.5rem;
  text-align: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.card.expanded .card-header-text,
.card.expanded .card-bio-short {
  opacity: 0;
}

/* Body */
.card-body {
  position: relative; /* allows overlay positioning */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  height: 100%;
  padding: 0;
}

/* Short bio (visible by default, fades out on expand) */
.card-bio-short {
  padding: 0 0.5rem;
  flex: 1;
  overflow-y: auto;
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* Bio layer (hidden by default, fades in underneath) */
.card-bio-layer {
  position: absolute;
  inset: 0; /* shorthand for top/right/bottom/left:0 */
  padding: 8rem 0.5rem 0 0.5rem; /* top padding clears shrunk image */
  overflow-y: auto;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.8s ease;
  transition-delay: 0s; /* collapse: fade out immediately */
}
.card.expanded .card-bio-layer {
  opacity: 1;
  transition-delay: 0.3s; /* expand: fade in after image shrink starts */
}

.image-wrapper {
  position: relative; /* anchor for overlay */
  display: inline-block; /* shrink to image size */
}

.card-expand-indicator {
  position: absolute;
  top: 0.5rem;   /* place near bottom of image */
  right: 0.5rem;    /* place near right edge */
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  pointer-events: none; /* doesn’t block clicks */
  opacity: 1;
  transition: opacity 0.3s ease;
}

.card:hover .card-expand-indicator {
  opacity: 1; /* brighten on hover */
}

.card-expand-indicator::before {
  content: "{+}";   /* default state */
  font-size: 0.9rem;
  font-family: 'JetBrains Mono';
}

/* when card has .expanded, swap to minus */
.card.expanded .card-expand-indicator::before {
  content: "{-}";
  font-family: 'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace;
}