/* Scoped styles for Research & Publications pages */
.pub-page .pub-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin-bottom: 16px;
}

.pub-page .pub-media {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.pub-page .pub-slideshow {
  width: 100%;
  height: 160px;
  position: relative;
}
.pub-page .pub-slideshow .slide {
  position: absolute;
  inset: 0;
  display: none;
}
.pub-page .pub-slideshow .slide.active { display: block; }
.pub-page .pub-slideshow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--surface);
}
.pub-page .no-image {
  display: grid;
  place-items: center;
  height: 160px;
  color: var(--muted);
}

/* removed empty ruleset: .pub-page .pub-info */
.pub-page .pub-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 6px;
}
.pub-page .pub-title { font-weight: 700; }
.pub-page .pub-year { color: var(--muted); font-weight: 600; }
.pub-page .authors { color: var(--text); margin: 4px 0; }
.pub-page .venue { color: var(--muted); margin-bottom: 8px; }

.pub-page .action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.pub-page .btn.ghost { border: 1px solid var(--border); }
.pub-page .btn.ghost.disabled { cursor: not-allowed; opacity: .5; }

.pub-page .collapsible {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface-2);
  margin-top: 8px;
}

.pub-page pre { white-space: pre-wrap; cursor: copy; }

/* Hint for click-to-copy inside BibTeX box */
.pub-page .collapsible .copy-hint {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  color: var(--muted);
}

/* Optional tidy styles for user intro above publication lists */
.pub-page .user-intro { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; margin: 12px 0; }
.pub-page .user-intro .photo { border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; color: #7c8aa6; }
.pub-page .user-intro .photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.pub-page .user-intro .placeholder { width: 70px; height: 70px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; }
.pub-page .user-intro .name { margin: 0; }
.pub-page .user-intro .affiliation { color: var(--muted); }

/* Segmented role tabs and name chips */
.pub-page .segmented { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.pub-page .segmented a { padding:8px 12px; border:1px solid var(--border); border-radius:12px; text-decoration:none; color: var(--text); background: var(--surface); font-weight:600; }
.pub-page .segmented a:hover { background: var(--surface-2); }
.pub-page .segmented a.active { border-color: var(--primary); background: #dbeafe; box-shadow: 0 0 0 2px #bfdbfe inset; }
.pub-page .name-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pub-page .name-chips .chip { background: var(--surface-2); border:1px solid var(--border); color: var(--text); }

/* Filter/search bar for research page */
.pub-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
  align-items: center;
}
.pub-filters .filter-item .control {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
}

.section-nav .chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.section-nav .chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  text-decoration: none;
  font-size: 0.9rem;
}
.section-nav .chip:hover { background: #f9fafb; }
/* Active state highlight for selected research area chips */
.section-nav .chip.active {
  border-color: var(--primary);
  background: #dbeafe; /* light primary tint */
  box-shadow: 0 0 0 2px #bfdbfe inset;
}

/* Match name chips active styling for clarity when filtering by user */
.pub-page .name-chips .chip.active {
  border-color: var(--primary);
  background: #dbeafe;
  box-shadow: 0 0 0 2px #bfdbfe inset;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .pub-filters {
    grid-template-columns: 1fr;
  }
}

.pub-page .pub-filters .control { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); }
.pub-page .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 900px) {
  .pub-page .pub-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .pub-page .pub-filters { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pub-page .pub-card { grid-template-columns: 1fr; }
  .pub-page .pub-slideshow { height: 140px; }
}

/* Research page header: place sub-tabs beside the heading and emphasize */
.research-page .page-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.research-page .page-header h1 { margin: 0; }
.research-page .page-header .segmented { display: flex; flex-wrap: wrap; gap: 10px; }
.research-page .page-header .segmented a {
  padding: 10px 16px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  text-decoration: none;
  background: #eef2ff; /* light primary tint */
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 0 0 2px #bfdbfe inset;
}
.research-page .page-header .segmented a:hover { background: #e0e7ff; }
.research-page .page-header .segmented a.active {
  background: #dbeafe;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px #bfdbfe inset;
}
@media (max-width: 700px) {
  .research-page .page-header .container { flex-direction: column; align-items: flex-start; }
}

/* Research page area header */
.research-page .area-header { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: center; margin: 12px 0 16px; }
.research-page .area-image { border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.research-page .area-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.research-page .area-image .placeholder { width: 240px; height: 160px; display: grid; place-items: center; font-weight: 700; color: #7c8aa6; }
.research-page .area-text { display: grid; gap: 2px; }
.research-page .area-text .section-title { margin: 0; }
.research-page .area-text .lead { color: var(--muted); margin: 2px 0 2px; }
.research-page .area-text .area-details { text-align: justify; hyphens: auto; margin: 0; }

/* Ongoing/Selected project card styles on Research page (match profile) */
.research-page .ongoing-projects { margin-top: 20px; }
.research-page .ongoing-projects h3 { margin: 0 0 12px; }
.research-page .ongoing-projects .pub-card.no-media { grid-template-columns: 1fr; }
.research-page .ongoing-projects .ref-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.research-page .ongoing-projects .ref-title { font-weight: 700; }
.research-page .ongoing-projects .ref-meta { color: var(--muted); font-style: italic; }
.research-page .ongoing-projects .view-details::after { content: '▼'; margin-left: 6px; font-size: 12px; color: var(--muted); transition: transform .18s ease; }
.research-page .ongoing-projects .view-details.active::after { transform: rotate(180deg); }
.research-page .ongoing-projects .collapsible { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface-2); margin-top: 8px; animation: slideFadeIn .18s ease; }
@keyframes slideFadeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }
.research-page .ongoing-projects .details-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.research-page .ongoing-projects .image-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.research-page .ongoing-projects .image-row.large .thumb { width: 100%; height: 280px; object-fit: contain; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }

@media (max-width: 700px) {
  .research-page .ongoing-projects .image-row.large .thumb { height: 200px; }
}

@media (max-width: 700px) {
  .research-page .area-header { grid-template-columns: 1fr; }
  .research-page .area-image .placeholder { width: 100%; }
}