/* =============================================
   Projects Showcase — Dark-theme styles
   ============================================= */

/* ---- Category filter buttons ---- */
.projects-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.projects-filter__btn {
  padding: 0.35rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid #263241;
  border-radius: 20px;
  background: #131822;
  color: #aeb7c4;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.projects-filter__btn:hover {
  border-color: #8fb4ff;
  color: #8fb4ff;
}

.projects-filter__btn.active {
  background: #8fb4ff;
  color: #0d0f12;
  border-color: #8fb4ff;
  font-weight: 600;
}

/* ---- Tag cloud ---- */
.projects-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 1.25rem;
}

.projects-tag__btn {
  padding: 0.2rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 400;
  border: 1px solid #1e2736;
  border-radius: 12px;
  background: transparent;
  color: #7f8794;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.projects-tag__btn:hover {
  border-color: #5a8ad4;
  color: #b4ccff;
}

.projects-tag__btn.active {
  background: #1a2a44;
  color: #b4ccff;
  border-color: #5a8ad4;
  font-weight: 500;
}

/* ---- Projects grid ---- */
.projects-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- Project card ---- */
.project-card {
  background: #0f1216;
  border: 1px solid #263241;
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.project-card:hover {
  border-color: #3a5070;
  box-shadow: 0 2px 16px rgba(143, 180, 255, 0.06);
}

/* Card header row */
.project-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.project-card__icon {
  font-size: 1.3rem;
  color: #8fb4ff;
  flex-shrink: 0;
}

.project-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
}

.project-card__status {
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.project-card__status--active {
  background: #15332a;
  color: #4ade80;
  border: 1px solid #22543d;
}

.project-card__status--completed {
  background: #1a2035;
  color: #8fb4ff;
  border: 1px solid #263241;
}

.project-card__period {
  color: #7f8794;
  white-space: nowrap;
}

/* Card body */
.project-card__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #d9e0ea;
  margin: 0.2rem 0 0.4rem 0;
  line-height: 1.35;
}

.project-card__institution {
  font-size: 0.7rem;
  color: #7f8794;
  margin: 0 0 0.15rem 0;
  line-height: 1.4;
}

.project-card__institution i {
  width: 0.95rem;
  text-align: center;
  margin-right: 0.2rem;
  color: #5a6a80;
}

.project-card__location {
  color: #5e6a7a;
}

.project-card__collaborators {
  font-size: 0.68rem;
  color: #6a7585;
  margin: 0 0 0.35rem 0;
  line-height: 1.4;
}

.project-card__collaborators i {
  width: 0.95rem;
  text-align: center;
  margin-right: 0.2rem;
  color: #5a6a80;
}

.project-card__excerpt {
  font-size: 0.72rem;
  color: #aeb7c4;
  line-height: 1.5;
  margin: 0.3rem 0 0.6rem 0;
}

/* Tags on card */
.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.project-card__tag {
  padding: 0.12rem 0.45rem;
  font-size: 0.6rem;
  border-radius: 8px;
  background: #151d2b;
  color: #7f8fb0;
  border: 1px solid #1e2a3a;
}

/* ---- Expandable details ---- */
.project-card__details {
  border-top: 1px solid #1e2736;
  margin-top: 0.6rem;
  padding-top: 0.7rem;
}

.project-card__section {
  margin-bottom: 0.8rem;
}

.project-card__section h4 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #8fb4ff;
  margin: 0 0 0.35rem 0;
}

.project-card__section h4 i {
  margin-right: 0.3rem;
  font-size: 0.7rem;
}

.project-card__section h5 {
  font-size: 0.68rem;
  font-weight: 500;
  color: #aeb7c4;
  margin: 0.4rem 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.project-card__section p {
  font-size: 0.7rem;
  color: #aeb7c4;
  line-height: 1.5;
  margin: 0 0 0.3rem 0;
}

.project-card__section p a {
  color: #8fb4ff;
}

.project-card__section p a:hover {
  color: #b4ccff;
  text-decoration: underline;
}

.project-card__section p em {
  color: #7f8794;
  font-size: 0.66rem;
}

/* Highlights list */
.project-card__highlights {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-card__highlights li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.7rem;
  color: #aeb7c4;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

.project-card__highlights li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #4ade80;
  font-size: 0.65rem;
}

/* Publications list */
.project-card__publist {
  padding-left: 1.2rem;
  margin: 0;
}

.project-card__publist li {
  font-size: 0.68rem;
  color: #9aa3b0;
  line-height: 1.5;
  margin-bottom: 0.35rem;
}

.project-card__publist li a {
  color: #8fb4ff;
}

.project-card__publist li a:hover {
  color: #b4ccff;
  text-decoration: underline;
}

.project-card__impact {
  display: inline-block;
  padding: 0.08rem 0.35rem;
  font-size: 0.58rem;
  font-weight: 600;
  border-radius: 6px;
  background: #1a2a44;
  color: #8fb4ff;
  margin-left: 0.25rem;
  vertical-align: middle;
}

/* Expand/collapse toggle */
.project-card__toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: #5a8ad4;
  font-size: 0.68rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}

.project-card__toggle:hover {
  color: #8fb4ff;
}

.project-card__toggle-icon {
  font-size: 0.6rem;
  transition: transform 0.25s ease;
}

/* ---- Empty state ---- */
.projects-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  color: #5e6a7a;
  text-align: center;
  gap: 0.5rem;
}

.projects-empty i {
  font-size: 1.5rem;
  color: #3a4a60;
}

.projects-empty p {
  font-size: 0.75rem;
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 540px) {
  .project-card {
    padding: 0.9rem 1rem;
  }
  .project-card__title {
    font-size: 0.82rem;
  }
  .projects-filter__btn {
    font-size: 0.68rem;
    padding: 0.3rem 0.7rem;
  }
  .projects-tag__btn {
    font-size: 0.6rem;
  }
}