/* Requires /static/styles.css, linked before this file in reza.html. */

/* ── Personal page ────────────────────────────────────────────────────────
   Everything shared with the landing page (aurora, nav, cards, badges,
   section headings, reveal, footer, .profile-photo / .profile-links /
   .profile-name) is inherited from styles.css. Only the
   selectors unique to this page live here. */

/* ── Hero ─────────────────────────────────────────────────────────────── */

.person-hero {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: 3.5rem;
  align-items: center;
  max-width: 68rem;
  margin: 0 auto;
  padding: 11rem 1.5rem 5rem;
}

/* Own stacking context so the photo's blurred ::after bloom (z-index: -1)
   stays behind the photo instead of dropping behind the page background. */
.person-hero-photo {
  position: relative;
  z-index: 0;
}

.person-hero-body .profile-name {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  margin-bottom: 0.9rem;
}

.person-affiliation {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 34rem;
}

.person-hero .profile-links a:nth-child(4):hover { border-color: rgba(10, 102, 194, 0.5); }

/* ── Shared section shell ─────────────────────────────────────────────── */

.person-section {
  position: relative;
  max-width: 68rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 6rem;
}

.person-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 600px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), rgba(34, 211, 238, 0.3), transparent);
}

/* Sections whose body is a full-width panel rather than a narrow reading column. */
.person-section-wide { max-width: 78rem; }

/* Glass panel around the prose blocks (About, Introducing AuditLM). */
.prose-panel {
  position: relative;
  padding: 2.6rem 3rem;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(15, 17, 35, 0.72), rgba(10, 12, 25, 0.86));
  border: 1px solid var(--card-border);
  box-shadow: 0 24px 70px -40px rgba(79, 70, 229, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

/* Shimmering top border, matching .video-frame / .profile-card */
.prose-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.55), rgba(34, 211, 238, 0.55), transparent);
}

.person-prose {
  max-width: 64rem;
  margin: 0 auto;
}

.person-prose p {
  font-size: 1.06rem;
  line-height: 1.85;
  font-weight: 400;
  /* Brighter than --text-dim: this is body copy people are meant to read, not
     supporting caption text. */
  color: #ccd1e3;
}

/* Opening paragraph doubles as the lead-in. */
.person-prose p:first-child {
  font-size: 1.22rem;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Any two stacked blocks, not just p + p — a pull-quote between two paragraphs
   used to break the adjacency and collapse the gap after it. */
.person-prose > * + * { margin-top: 1.3rem; }

.person-prose em {
  color: var(--cyan);
  font-style: normal;
  font-weight: 600;
}

/* The research question the whole page hangs off, lifted out of the paragraph
   flow so it reads as the thesis rather than as one more cyan phrase. */
.prose-question {
  margin: 1.9rem 0;
  padding: 1.15rem 1.5rem;
  border-left: 2px solid rgba(34, 211, 238, 0.6);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.07), rgba(34, 211, 238, 0));
  font-size: 1.12rem;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Overrides .person-prose p, which would otherwise paint this #ccd1e3. */
  color: #7fe6f7;
}

/* ── Introducing AuditLM: the pipeline ────────────────────────────────── */

/* This panel only introduces the diagram under it. At full .prose-panel weight
   the two stacked boxes competed and the text won, so this variant steps back:
   near-transparent fill, no shadow, faint shimmer. */
.prose-panel-quiet {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  text-align: center;
}

.prose-panel-quiet::before { opacity: 0.35; }

/* Runs the full panel width rather than the 64rem reading column. */
.prose-panel-quiet .person-prose { max-width: none; }

/* Tool names carry the same accents as the lens cards below, so the sentence
   and the figure read as one thing rather than two unrelated blocks. Lightened
   off the card colours, which are tuned for bold headings on a tinted card and
   go muddy at body size against the near-black panel. */
.t-prov,
.t-attr,
.t-infl {
  font-weight: 650;
  font-style: normal;
}

.t-prov { color: var(--cyan); }
.t-attr { color: #c084fc; }
.t-infl { color: #818cf8; }

.person-prose strong {
  color: #fff;
  font-weight: 650;
}

/* ── Research interests ───────────────────────────────────────────────── */

/* Sits under the About panel, so it reads as a sub-part rather than a new
   top-level section with its own nav entry. */
.subsection-heading {
  /* Bottom margin is smaller than the top because the underline below adds
     its own 0.75rem of visual weight underneath the text. */
  margin: 3.5rem 0 1.2rem;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text);
}

/* Matches .pipeline-heading::after in styles.css — same gradient, same
   dimensions, so the two h3-level headings on this page read as siblings. */
.subsection-heading::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  margin: 0.75rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--indigo), var(--cyan), var(--violet));
  background-size: 200% auto;
  animation: shimmer 6s linear infinite;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.25);
}

.interest-grid {
  display: grid;
  /* 20rem min keeps this at 3 columns on the wide section, so the six cards
     land as a clean 3 x 2 rather than 4 + 2. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.2rem;
}

.interest-card {
  padding: 1.6rem 1.5rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15, 17, 35, 0.8), rgba(10, 12, 25, 0.9));
  border: 1px solid var(--card-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.4s ease,
              opacity 0.7s ease;
}

.interest-card:hover {
  transform: translateY(-5px);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 18px 44px -20px rgba(99, 102, 241, 0.45);
}

.interest-card h3 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.interest-card p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-faint);
}

/* ── Publications ─────────────────────────────────────────────────────── */

.pub-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pub-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.4rem 1.5rem;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1),
              border-color 0.35s ease,
              background 0.35s ease,
              opacity 0.7s ease;
}

.pub-item:hover {
  transform: translateX(5px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(34, 211, 238, 0.28);
}

.pub-year {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cyan);
  padding-top: 0.15rem;
}

.pub-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.pub-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  transition: color 0.3s ease;
}

.pub-item:hover .pub-title { color: #fff; }

.pub-authors {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.pub-authors strong { color: var(--text); font-weight: 600; }

.pub-venue {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.pub-item .badges { margin-top: 0.25rem; }

/* Collapsed state: only the newest few rows, with the last one fading out so
   it reads as "there is more" rather than as the end of the list. */
.pub-list.is-collapsed .pub-item:nth-child(n + 4) { display: none; }

.pub-list.is-collapsed .pub-item:nth-child(3) {
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}

.pub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.4rem auto 0;
  padding: 0.6rem 1.3rem;
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

/* The button is a flex item of nothing, so center it on its own row. */
.pub-list + .pub-toggle { display: flex; width: fit-content; }

.pub-toggle:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(34, 211, 238, 0.35);
}

.pub-toggle-chevron { transition: transform 0.35s ease; }
.pub-toggle.is-open .pub-toggle-chevron { transform: rotate(180deg); }

.pub-more {
  margin-top: 2rem;
  text-align: center;
}

.pub-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  transition: gap 0.3s ease;
}

.pub-more a:hover { gap: 0.8rem; }

/* ── Introducing AuditLM ──────────────────────────────────────────────── */

.intro-cta {
  margin-top: 2.8rem;
  text-align: center;
}

/* .topnav-cta is hidden below 860px for the nav; as a page button it stays. */
.intro-cta .topnav-cta {
  display: inline-flex;
  font-size: 1.02rem;
  font-weight: 600;
  padding: 1.05rem 2.4rem;
  border-radius: 999px;
  box-shadow: 0 18px 50px -18px rgba(99, 102, 241, 0.75);
}

.intro-cta .topnav-cta:hover {
  box-shadow: 0 22px 60px -16px rgba(99, 102, 241, 0.9);
}

/* ── Narrow screens ───────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .person-hero {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    text-align: center;
    padding: 8rem 1.5rem 4rem;
  }
  .person-hero-photo .profile-photo {
    width: 12rem;
    margin: 0 auto;
  }
  .person-hero .profile-links { justify-content: center; }
  .person-affiliation { margin-inline: auto; }

  .person-section { padding: 4rem 1.25rem 4.5rem; }
  .prose-panel { padding: 1.8rem 1.4rem; border-radius: 18px; }
  .subsection-heading { margin-top: 2.6rem; }

  .pub-item {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .pub-item:hover { transform: none; }
}