/* People theme — #EE6A59 coral · #3A3F58 navy · #F9AC67 peach · #ECE6CD cream */

/* ---------- Button rows (mirrors history) ---------- */
.flex-row-people-btns, .people-expanded-buttons-row,
.history-expanded-buttons-row {
  display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 16px; margin-bottom: 8px;
}
.people-expanded-buttons-row .wikipedia-btn, .people-expanded-buttons-row .set-time-btn {
  margin-top: 0; margin-left: 0; display: flex; align-items: center; gap: 6px; font-size: 1em; line-height: 1.2;
}

/* ---------- Expanded people card (same geometry as history, people palette) ---------- */
.expanded-card.expanded.people-expanded {
  background: linear-gradient(145deg, #3A3F58 0%, #2b2e44 55%, #23263a 100%);
  border: clamp(2px, 0.2vw, 4px) solid #EE6A59;
  box-shadow: 0 clamp(0.7rem, 1.5vw, 2rem) clamp(1.8rem, 3vw, 4rem) rgba(0,0,0,0.8), 0 0 clamp(1rem, 2vw, 3rem) rgba(238,106,89,0.3);
}
.expanded-card.expanded.people-expanded::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),
    radial-gradient(circle at 40% 40%, rgba(238,106,89,0.05) 2px, transparent 2px);
  pointer-events: none; z-index: 1;
}
.expanded-card.expanded.people-expanded::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, rgba(238,106,89,0.05) 0%, transparent 25%, transparent 75%, rgba(249,172,103,0.05) 100%);
  pointer-events: none; border-radius: var(--border-radius); z-index: 1;
}
.expanded-card.expanded.people-expanded .left-section { background: rgba(0,0,0,0.25); border-right: clamp(1px,0.1vw,2px) solid rgba(238,106,89,0.4); position: relative; z-index: 2; }
.expanded-card.expanded.people-expanded .right-section { position: relative; z-index: 2; }
.expanded-card.expanded.people-expanded .meta-container span { border-bottom: clamp(1px,0.05vw,2px) solid rgba(238,106,89,0.3); color: #d8d3bd; padding-bottom: 4px; margin-bottom: 6px; }
.expanded-card.expanded.people-expanded .meta-container span strong { color: #EE6A59; font-weight: 600; }
.expanded-card.expanded.people-expanded h3 { color: #ECE6CD; text-shadow: 0 0 clamp(0.3rem,1vw,0.8rem) rgba(238,106,89,0.4); font-weight: 600; }
.expanded-card.expanded.people-expanded .description { color: #d8d3bd; line-height: 1.6; }
.expanded-card.expanded.people-expanded .person-occupation { color: #F9AC67; }

/* Wikipedia button — people palette */
.expanded-card.expanded.people-expanded .wikipedia-btn {
  background: linear-gradient(145deg, #EE6A59, #c4503f); border: 2px solid #F9AC67; color: #ECE6CD;
  padding: clamp(0.4rem,1vw,0.6rem) clamp(0.8rem,2vw,1.2rem); border-radius: clamp(0.2rem,0.4vw,0.6rem);
  font-size: clamp(0.8rem,1.4vw,1rem); font-weight: 600; cursor: pointer; transition: all 0.3s ease;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; position: relative; z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
.expanded-card.expanded.people-expanded .wikipedia-btn:hover { background: linear-gradient(145deg, #F9AC67, #EE6A59); color: #fff; transform: translateY(-1px); }

/* Set Time button — people palette (same shape as history's) */
.expanded-card.expanded.people-expanded .set-time-btn {
  background: linear-gradient(145deg, #3A3F58, #23263a);
  border: 2px solid #F9AC67;
  color: #ECE6CD;
  padding: clamp(0.45rem, 1vw, 0.7rem) clamp(1rem, 2vw, 1.4rem);
  border-radius: clamp(0.25rem, 0.5vw, 0.7rem);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  font-family: inherit; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; margin-left: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.08) inset;
  position: relative; z-index: 10; outline: none;
}
.expanded-card.expanded.people-expanded .set-time-btn:hover {
  background: linear-gradient(145deg, #EE6A59, #c4503f);
  border-color: #ECE6CD; color: #fff; transform: translateY(-1px) scale(1.03);
}
.expanded-card.expanded.people-expanded .set-time-btn:active { transform: translateY(0) scale(0.98); }
.expanded-card.expanded.people-expanded .set-time-btn.time-set,
.expanded-card.expanded.people-expanded .set-time-btn[aria-pressed="true"] {
  background: linear-gradient(145deg, #3a8b3a, #1e5f2d); border: 2px solid #4ac86b; color: #f4ffe4;
}

.expanded-card.expanded.people-expanded .image-container.person-image-container {
  border: var(--image-border-width) solid #EE6A59;
  box-shadow: 0 0 clamp(0.4rem,0.8vw,1rem) rgba(238,106,89,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  background: linear-gradient(135deg, #2b2e44, #23263a);
}
.expanded-card.expanded.people-expanded .locations-heading h4 { color: #ECE6CD; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.expanded-card.expanded.people-expanded .location-item { color: #d8d3bd; border-bottom: 1px solid rgba(238,106,89,0.2); cursor: pointer; transition: color 0.2s ease; }
.expanded-card.expanded.people-expanded .location-item:hover { color: #ECE6CD; background: rgba(238,106,89,0.12); }
.expanded-card.expanded.people-expanded .highlight-locations-btn { background: linear-gradient(145deg, #EE6A59, #c4503f); border: 1px solid #F9AC67; color: #ECE6CD; font-weight: 500; }
.expanded-card.expanded.people-expanded .highlight-locations-btn:hover { background: linear-gradient(145deg, #F9AC67, #EE6A59); color: #fff; }
.expanded-card.expanded.people-expanded .close-btn { color: #ECE6CD; background: rgba(238,106,89,0.2); border: 1px solid rgba(238,106,89,0.4); }
.expanded-card.expanded.people-expanded .close-btn:hover { background: rgba(238,106,89,0.4); color: #fff; }

/* History button on a people expanded card → people colors */
.expanded-card.expanded.people-expanded .history-btn,
.expanded-card[data-type="people"] .history-btn {
  background: rgba(238, 106, 89, 0.6);
  box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(238, 106, 89, 0.4);
}
.expanded-card.expanded.people-expanded .history-btn:hover,
.expanded-card[data-type="people"] .history-btn:hover {
  background: rgba(238, 106, 89, 0.9);
  box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(238, 106, 89, 0.8);
}

/* ---------- People button (👥): same geometry as history button, sits right below it ---------- */
.people-btn {
  position: absolute;
  top: calc(var(--button-size) * 4 + var(--card-padding) * 5);
  right: var(--card-padding);
  width: var(--button-size);
  height: var(--button-size);
  background: rgba(147, 51, 234, 0.6);
  color: #fff;
  border: clamp(1px, 0.1vw, 2px) solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  z-index: 25;
  transition: all 0.2s ease;
  box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(147, 51, 234, 0.4);
  opacity: 1;
}
.people-btn:hover {
  background: rgba(147, 51, 234, 0.9);
  transform: scale(1.1);
  box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(147, 51, 234, 0.8);
}
/* Same per-type colors as the history button */
.expanded-card[data-type="movie"] .people-btn { background: rgba(155, 77, 95, 0.6); box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(155, 77, 95, 0.4); }
.expanded-card[data-type="movie"] .people-btn:hover { background: rgba(155, 77, 95, 0.9); box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(155, 77, 95, 0.8); }
.expanded-card[data-type="game"] .people-btn { background: rgba(25, 104, 117, 0.6); box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(25, 104, 117, 0.4); }
.expanded-card[data-type="game"] .people-btn:hover { background: rgba(25, 104, 117, 0.9); box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(25, 104, 117, 0.8); }
.expanded-card[data-type="book"] .people-btn { background: rgba(176, 141, 87, 0.6); box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(176, 141, 87, 0.4); }
.expanded-card[data-type="book"] .people-btn:hover { background: rgba(176, 141, 87, 0.9); box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(176, 141, 87, 0.8); }
.expanded-card[data-type="tvshow"] .people-btn { background: rgba(61, 90, 254, 0.6); box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(61, 90, 254, 0.4); }
.expanded-card[data-type="tvshow"] .people-btn:hover { background: rgba(61, 90, 254, 0.9); box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(61, 90, 254, 0.8); }
.expanded-card[data-type="history"] .people-btn { background: rgba(139, 105, 20, 0.6); box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(139, 105, 20, 0.4); }
.expanded-card[data-type="history"] .people-btn:hover { background: rgba(139, 105, 20, 0.9); box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(139, 105, 20, 0.8); }
.expanded-card[data-type="people"] .people-btn,
.expanded-card.expanded.people-expanded .people-btn { background: rgba(238, 106, 89, 0.6); box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(238, 106, 89, 0.4); }
.expanded-card[data-type="people"] .people-btn:hover,
.expanded-card.expanded.people-expanded .people-btn:hover { background: rgba(238, 106, 89, 0.9); box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(238, 106, 89, 0.8); }
.action-buttons-row .people-btn { position: static; width: 44px; height: 44px; }

/* ---------- People panel: same geometry as history panel, people theme ---------- */
#people-panel {
  position: fixed;
  top: 50% !important;
  background: transparent;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  transform: translateY(-50%) !important;
  pointer-events: none;
}
#people-panel.active { opacity: 1; visibility: visible; pointer-events: auto; }

/* Mobile: fill the expanded card exactly like .history-panel does */
.expanded-card.expanded #people-panel {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  display: block !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}
.expanded-card.expanded #people-panel .people-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

.people-container {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  background: #23263a;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 30px rgba(0,0,0,0.8);
  border: 2px solid #EE6A59;
  animation: historyFadeIn 0.5s forwards;
}
#people-panel .history-header {
  border-bottom: 1px solid rgba(238, 106, 89, 0.25);
  background: rgba(238, 106, 89, 0.1);
}
#people-panel .history-header h3 {
  color: #ECE6CD;
  text-shadow: 0 0 10px rgba(238, 106, 89, 0.35);
}
#people-panel .history-filter-btn.active {
  background: rgba(238, 106, 89, 0.2);
  border-color: #EE6A59;
  color: #F9AC67;
}
#people-panel .load-more-btn {
  background: rgba(238, 106, 89, 0.1);
  border: 1px solid rgba(238, 106, 89, 0.35);
  color: #ECE6CD;
}
#people-panel .load-more-btn:hover {
  background: rgba(238, 106, 89, 0.22);
  border-color: #EE6A59;
}
#people-panel .history-content::-webkit-scrollbar-thumb { background: rgba(238, 106, 89, 0.35); }
#people-panel .history-content::-webkit-scrollbar-thumb:hover { background: rgba(238, 106, 89, 0.55); }
.people-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; z-index: 10001; }
.people-close:hover { background: rgba(255,255,255,0.4); }
.people-filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.people-filter-btn { background: rgba(238,106,89,0.12); border: 1px solid rgba(238,106,89,0.5); color: #ECE6CD; border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 0.85em; }
.people-filter-btn.active, .people-filter-btn:hover { background: rgba(238,106,89,0.35); color: #fff; }

/* Darker panel background when opened from a people card so the cards pop */
#people-panel[data-original-card^="people"] .people-container {
  background: #141625;
}
#people-panel[data-original-card^="people"] .history-header {
  background: rgba(238, 106, 89, 0.07);
}

/* ---------- People item cards inside the panel: same size/layout as history-item-cards ---------- */
.person-item-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: all 0.25s cubic-bezier(0.2, 1, 0.3, 1);
  cursor: pointer;
  padding: 0;
  animation: fadeIn 0.5s ease-in-out;
  background: linear-gradient(145deg, #3A3F58 0%, #2b2e44 55%, #23263a 100%);
  border: 2px solid #EE6A59;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 0 8px rgba(238,106,89,0.10);
  min-height: 140px;
  max-width: 100%;
  box-sizing: border-box;
  gap: 24px;
  margin-bottom: 18px;
}
.person-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22), 0 0 12px rgba(238,106,89,0.16);
}
.person-item-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.02) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(249,172,103,0.02) 1px, transparent 1px);
  pointer-events: none; z-index: 1;
}
.person-item-card .person-image-container {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  min-width: 120px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2b2e44, #23263a);
  border: 2px solid #EE6A59;
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.13);
  z-index: 2;
  margin: 18px 0 18px 18px;
  align-self: center;
}
.person-item-card .person-image {
  width: 100%; height: 100%; min-height: 0;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-radius: 4px;
  display: block;
}
.person-item-card:hover .person-image { transform: scale(1.04); }
.person-item-card .person-content { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 2; min-width: 0; }
.person-item-card .person-content h3 { margin: 0 0 4px 0; color: #ECE6CD; font-size: 1.05em; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.4); line-height: 1.2; }
.person-item-card .person-occupation { color: #F9AC67; font-size: 0.78em; margin-bottom: 4px; }
.person-item-card .description-container { margin-bottom: 4px; }
.person-item-card .description { margin: 4px 0 6px 0; color: #d8d3bd; font-size: 0.85em; line-height: 1.4; flex: 1; }
.person-item-card .description.truncated { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.person-item-card .person-meta { margin-top: auto; border-top: 1px solid rgba(238,106,89,0.2); padding-top: 6px; }
.person-item-card .person-meta span { display: block; margin-bottom: 2px; color: #d8d3bd; font-size: 0.78em; }
.person-item-card .person-meta span strong { color: #EE6A59; font-weight: 600; margin-right: 4px; }
.person-item-card .person-age-badge { font-size: 0.76em; margin-top: 6px; padding: 3px 10px 3px 7px; }

/* ---------- Opened people card inside the panel: people skin over history geometry ---------- */
#people-panel .history-expanded-view {
  background: linear-gradient(145deg, #3A3F58 0%, #2b2e44 55%, #23263a 100%);
}
#people-panel .history-expanded-view::before {
  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.03) 1px, transparent 1px),
    radial-gradient(circle at 40% 40%, rgba(238,106,89,0.04) 2px, transparent 2px);
}
#people-panel .history-expanded-view::after {
  background: linear-gradient(45deg, rgba(238,106,89,0.04) 0%, transparent 25%, transparent 75%, rgba(249,172,103,0.04) 100%);
}
#people-panel .history-expanded-close { background: rgba(238,106,89,0.85); color: #ECE6CD; border: 1px solid rgba(238,106,89,0.5); }
#people-panel .history-expanded-close:hover { background: #EE6A59; color: #fff; }
#people-panel .history-expanded-left { background: rgba(0,0,0,0.25); border-right: clamp(1px,0.1vw,2px) solid rgba(238,106,89,0.4); }
#people-panel .history-expanded-image-container { border-color: #EE6A59; background: linear-gradient(135deg, #2b2e44, #23263a); box-shadow: 0 0 clamp(0.4rem,0.8vw,1rem) rgba(238,106,89,0.4), inset 0 1px 0 rgba(255,255,255,0.1); }
#people-panel .history-expanded-image { filter: none; }
#people-panel .history-expanded-meta span { color: #d8d3bd; border-bottom-color: rgba(238,106,89,0.3); }
#people-panel .history-expanded-meta span strong { color: #EE6A59; }
#people-panel .history-expanded-right h3 { color: #ECE6CD; text-shadow: 0 0 clamp(0.3rem,1vw,0.8rem) rgba(238,106,89,0.4); }
#people-panel .history-expanded-description { color: #d8d3bd; background: rgba(238,106,89,0.08); border: 1px solid rgba(238,106,89,0.2); }
#people-panel .history-expanded-view .wikipedia-btn {
  background: linear-gradient(145deg, #EE6A59, #c4503f); border: 2px solid #F9AC67; color: #ECE6CD;
}
#people-panel .history-expanded-view .wikipedia-btn:hover { background: linear-gradient(145deg, #F9AC67, #EE6A59); border-color: #ECE6CD; color: #fff; }
#people-panel .history-expanded-view .set-time-btn {
  background: linear-gradient(145deg, #3A3F58, #23263a); border: 2px solid #F9AC67; color: #ECE6CD;
}
#people-panel .history-expanded-view .set-time-btn:hover { background: linear-gradient(145deg, #EE6A59, #c4503f); border-color: #ECE6CD; color: #fff; }
#people-panel .history-expanded-view .set-time-btn.time-set,
#people-panel .history-expanded-view .set-time-btn[aria-pressed="true"] {
  background: linear-gradient(145deg, #3a8b3a, #1e5f2d); border: 2px solid #4ac86b; color: #f4ffe4;
}
#people-panel .history-expanded-right::-webkit-scrollbar-thumb { background: rgba(238,106,89,0.35); }

/* Responsive — mirror history-item-card breakpoints */
@media (max-width: 1400px) {
  .person-item-card .person-image-container { width: 100px; height: 100px; min-width: 100px; min-height: 100px; margin: 12px 0 12px 12px; }
  .person-item-card { min-height: 110px; gap: 18px; }
}
@media (max-width: 1024px) {
  .person-item-card .person-image-container { width: 80px; height: 80px; min-width: 80px; min-height: 80px; margin: 8px 0 8px 8px; }
  .person-item-card { min-height: 90px; gap: 12px; }
}
@media (max-width: 768px) {
  .person-item-card .person-image-container { width: 60px; height: 60px; min-width: 60px; min-height: 60px; margin: 4px 0 4px 4px; }
  .person-item-card .person-content { padding: 7px 8px; }
  .person-item-card { min-height: 70px; gap: 8px; }
}
@media (max-width: 480px) {
  .person-item-card .person-image-container { width: 40px; height: 40px; min-width: 40px; min-height: 40px; margin: 2px 0 2px 2px; }
  .person-item-card .person-content h3 { font-size: 0.95em; }
  .person-item-card .description { font-size: 0.75em; }
  .person-item-card { min-height: 50px; gap: 4px; }
}

/* ---------- Video + Similar buttons on people expanded cards → people coral ----------
   Mirrors the history-golden overrides in cards-video.css / cards-expanded.css,
   so the ▶ / ◈ buttons match the 🏛 / 👥 buttons on people cards. */
.expanded-card[data-type="people"] .similar-items-btn,
.expanded-card.expanded.people-expanded .similar-items-btn {
  background: rgba(238, 106, 89, 0.6);
  box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(238, 106, 89, 0.4);
}
.expanded-card[data-type="people"] .similar-items-btn:hover,
.expanded-card.expanded.people-expanded .similar-items-btn:hover {
  background: rgba(238, 106, 89, 0.9);
  box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(238, 106, 89, 0.8);
}
.expanded-card[data-type="people"] .video-player-btn,
.expanded-card.expanded.people-expanded .video-player-btn {
  background: rgba(238, 106, 89, 0.6);
  box-shadow: 0 0 clamp(0.3rem, 1vw, 0.8rem) rgba(238, 106, 89, 0.4);
}
.expanded-card[data-type="people"] .video-player-btn:hover,
.expanded-card.expanded.people-expanded .video-player-btn:hover {
  background: rgba(238, 106, 89, 0.9);
  box-shadow: 0 0 clamp(0.5rem, 1.5vw, 1.2rem) rgba(238, 106, 89, 0.8);
}

/* ---------- People video sections (mirror history golden block in cards-video.css) ---------- */
.expanded-card.expanded.people-expanded .video-sections-container {
  margin-top: 20px;
  width: 100%;
  padding-bottom: 20px;
  border-top: 1px solid rgba(238, 106, 89, 0.3);
  padding-top: 10px;
}
.expanded-card.expanded.people-expanded .video-section {
  margin-bottom: 15px;
  border-top: 1px solid rgba(238, 106, 89, 0.3);
}
.expanded-card.expanded.people-expanded .section-heading {
  background-color: rgba(238, 106, 89, 0.1);
}
.expanded-card.expanded.people-expanded .section-heading h4 {
  color: #EE6A59;
  text-shadow: 0 0 5px rgba(238, 106, 89, 0.3);
}
.expanded-card.expanded.people-expanded .toggle-icon {
  color: #EE6A59;
}
.expanded-card.expanded.people-expanded .video-wrapper iframe {
  border: 3px solid rgba(238, 106, 89, 0.3);
}
.expanded-card.expanded.people-expanded .pin-video-btn {
  background: rgba(238, 106, 89, 0.6);
  box-shadow: 0 0 10px rgba(238, 106, 89, 0.4);
}
.expanded-card.expanded.people-expanded .pin-video-btn:hover {
  background: rgba(238, 106, 89, 0.9);
  box-shadow: 0 0 15px rgba(238, 106, 89, 0.8);
}

/* People video player panel border (mirror history golden rule in cards-video.css) */
.video-player-panel[data-original-card^="people"] .video-player-container {
  border: 2px solid #EE6A59;
}

/* People videos inside the people-panel expanded view (mirror history-panel.css video rules) */
#people-panel .history-expanded-view .video-sections-container {
  margin-top: 16px;
  width: 100%;
  border-top: 1px solid rgba(238, 106, 89, 0.3);
  padding-top: 10px;
}
#people-panel .history-expanded-view .video-section {
  margin-bottom: 12px;
  border-top: 1px solid rgba(238, 106, 89, 0.3);
}
#people-panel .history-expanded-view .section-heading {
  background-color: rgba(238, 106, 89, 0.1);
}
#people-panel .history-expanded-view .section-heading h4 {
  color: #EE6A59;
}
#people-panel .history-expanded-view .toggle-icon {
  color: #EE6A59;
}
#people-panel .history-expanded-view .video-wrapper iframe {
  border: 3px solid rgba(238, 106, 89, 0.3);
}