/* ---------------------------------------------------------------------------
   Custom site styles that the al-folio theme does not provide.

   Lives outside assets/css/ on purpose: purgecss only rewrites
   _site/assets/css/*.css, so nothing here can be stripped by mistake.
   --------------------------------------------------------------------------- */

/* --- theme-generated headings that ship lower-case ------------------------ */
h2 > a[href$="/news/"],
h2 > a[href$="/blog/"] {
  text-transform: capitalize;
}

/* --- social icons, moved out of the page footer into the profile column --- */
.profile .more-info .profile-socials {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.7rem;
  font-size: 1.4rem;
}

.profile .more-info .profile-socials a i::before {
  color: var(--global-text-color);
  transition: all 0.2s ease-in-out;
}

.profile .more-info .profile-socials a:hover i::before {
  color: var(--global-theme-color);
}

/* --- project list: one horizontal row per project ------------------------- */
.projects-list {
  clear: both; /* the profile picture floats right, above this */
  margin-top: 2rem;
}

.proj-section {
  margin-bottom: 3rem;
}

.proj-section-title {
  margin-bottom: 0.2rem;
  font-weight: 700;
}

.proj-section-note {
  margin-bottom: 0.5rem;
  color: var(--global-text-color-light);
  font-size: 0.9rem;
}

.proj-row {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.75rem;
  align-items: start;
  padding: 1.75rem 0;
  border-top: 1px solid var(--global-divider-color);
}

.proj-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--global-divider-color);
  border-radius: 6px;
}

.proj-media a:hover img {
  border-color: var(--global-theme-color);
}

.proj-body > * {
  margin-bottom: 0.4rem;
}

.proj-body > *:last-child {
  margin-bottom: 0;
}

.proj-title {
  margin-bottom: 0.15rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
}

.proj-title a {
  color: var(--global-text-color);
}

.proj-title a:hover {
  color: var(--global-theme-color);
  text-decoration: none;
}

.proj-paper {
  color: var(--global-text-color-light);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.45;
}

/* synthesized italics look wrong on CJK, so only the English title slants */
.proj-paper .lang-zh {
  font-style: normal;
}

.proj-authors {
  font-size: 0.9rem;
  line-height: 1.5;
}

.proj-authors strong {
  font-weight: 700;
}

.proj-authors-note {
  color: var(--global-text-color-light);
  font-size: 0.8rem;
}

.proj-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.proj-pill {
  border: 1px solid var(--global-divider-color);
  border-radius: 1rem;
  padding: 0.05rem 0.6rem;
  font-size: 0.75rem;
  line-height: 1.6;
}

/* every entry carries exactly one accented pill: where it was published, or
   "under review" when the venue cannot be named yet */
.proj-venue {
  border-color: var(--global-theme-color);
  color: var(--global-theme-color);
}

.proj-role {
  color: var(--global-text-color-light);
  white-space: nowrap;
}

.proj-when {
  color: var(--global-text-color-light);
  font-size: 0.85rem;
}

.proj-desc {
  font-size: 0.95rem;
  line-height: 1.6;
}

.proj-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.proj-link {
  border: 1px solid var(--global-divider-color);
  border-radius: 4px;
  padding: 0.1rem 0.6rem;
  color: var(--global-text-color);
  font-size: 0.85rem;
  transition: all 0.2s ease-in-out;
}

.proj-link:hover {
  border-color: var(--global-theme-color);
  color: var(--global-theme-color);
  text-decoration: none;
}

@media (max-width: 767px) {
  .proj-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}