/* People cards — horizontal (image-left) like books/movies, people palette:
   #EE6A59 coral · #3A3F58 navy · #F9AC67 peach · #ECE6CD cream */
.person-card {
  height: auto;
  min-height: 100px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 10px;
  gap: 0;
  animation: fadeIn 0.5s ease-in-out;

  background: linear-gradient(145deg, #3A3F58 0%, #2b2e44 60%, #23263a 100%);
  border: 2px solid #EE6A59;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.35),
    0 0 15px rgba(238, 106, 89, 0.18);
}

.person-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(238, 106, 89, 0.38);
}

/* subtle texture overlay */
.person-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background:
    radial-gradient(circle at 20% 80%, rgba(236, 230, 205, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(249, 172, 103, 0.04) 1px, transparent 1px);
  pointer-events: none;
  z-index: 1;
}

.person-image-container {
  width: 170px;
  min-width: 170px;
  height: auto;
  min-height: 150px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2b2e44, #23263a);
  border: 4px solid #EE6A59;
  box-shadow: 0 0 8px rgba(238, 106, 89, 0.35);
  z-index: 2;
  align-self: stretch;
}

.person-image {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.person-card:hover .person-image { transform: scale(1.03); }

.person-content {
  flex: 1;
  padding: 15px;
  padding-bottom: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  z-index: 2;
}

.person-content h3 {
  margin: 0 0 5px 0;
  color: #ECE6CD;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.person-occupation {
  color: #F9AC67;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.person-content .description {
  margin: 8px 0;
  color: #d8d3bd;
  font-size: 0.9em;
  line-height: 1.4;
  flex: 1;
}

.person-content .description.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.person-meta {
  margin-top: auto;
  border-top: 1px solid rgba(238, 106, 89, 0.3);
  padding-top: 10px;
}

.person-meta span {
  display: block;
  margin-bottom: 4px;
  color: #d8d3bd;
  font-size: 0.85em;
}

.person-meta span strong {
  color: #EE6A59;
  font-weight: 600;
  margin-right: 6px;
}

.person-meta.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

/* ---- "Online" age badge: prominent, right under the title area ---- */
.person-age-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ECE6CD;
  background: rgba(238, 106, 89, 0.14);
  border: 1px solid rgba(249, 172, 103, 0.65);
  border-radius: 999px;
  padding: 4px 12px 4px 8px;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 0 10px rgba(238, 106, 89, 0.18);
}

.person-age-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #37e08b;
  box-shadow: 0 0 8px rgba(55, 224, 139, 0.9);
  flex: 0 0 auto;
  position: relative;
}

.person-age-badge:not(.dead):not(.ref-age) .person-age-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(55, 224, 139, 0.55);
  animation: personPulse 1.8s ease-out infinite;
}

/* Reference-person age: "X was age A–B" — peach, calm, clearly separate */
.person-age-badge.ref-age {
  background: rgba(249, 172, 103, 0.12);
  border: 1px dashed rgba(249, 172, 103, 0.7);
  box-shadow: none;
  font-weight: 500;
}

.person-age-badge.ref-age .person-age-dot {
  background: #F9AC67;
  box-shadow: 0 0 6px rgba(249, 172, 103, 0.8);
}

.person-age-badge.dead {
  color: #c9c4ae;
  border-color: rgba(236, 230, 205, 0.3);
  background: rgba(236, 230, 205, 0.07);
  box-shadow: none;
  font-weight: 500;
}

.person-age-badge.dead .person-age-dot {
  background: #8a97a3;
  box-shadow: none;
}

.person-age-badge.dead .person-age-dot::after { display: none; }

@keyframes personPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Location type chips (B/D/N) — tuned for navy */
.person-loc-type {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}
.person-loc-type.loc-B { background: rgba(55,224,139,0.18); color: #7dffb8; border: 1px solid rgba(55,224,139,0.5); }
.person-loc-type.loc-D { background: rgba(238,106,89,0.18); color: #ff9d8d; border: 1px solid rgba(238,106,89,0.55); }
.person-loc-type.loc-N { background: rgba(249,172,103,0.16); color: #ffd2a3; border: 1px solid rgba(249,172,103,0.55); }

/* Tier section dividers (backend match_tier 0/1/2) — minimal group labels */
.people-tier-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 2px 12px;
}
.people-tier-divider span {
  color: #F9AC67;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.people-tier-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(238, 106, 89, 0.55), transparent);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive — shrink the portrait like book/movie cards do */
@media (max-width: 1024px) {
  .person-image-container { width: 130px; min-width: 130px; }
  .person-content { padding: 12px; }
}
@media (max-width: 768px) {
  .person-image-container { width: 100px; min-width: 100px; min-height: 110px; border-width: 3px; }
  .person-image { min-height: 110px; }
  .person-content { padding: 10px; }
  .person-content h3 { font-size: 1.05em; }
  .person-content .description { font-size: 0.85em; }
  .person-age-badge { font-size: 0.78em; }
}
@media (max-width: 480px) {
  .person-image-container { width: 80px; min-width: 80px; min-height: 90px; }
  .person-image { min-height: 90px; }
  .person-content h3 { font-size: 0.95em; }
}