/* ============================================================
   Lumen3D — About page
   ============================================================
   Self-contained styling for about.html. Loaded AFTER tools.css
   (and version-queried) so it always wins and never serves stale.
   Organic / fluid language: soft brand-gradient glows, gradient
   monograms & numbers, generously rounded cards.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-12);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: -45% -10% auto -10%;
  height: 150%;
  background:
    radial-gradient(55% 60% at 15% 0%, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 70%),
    radial-gradient(50% 55% at 88% 8%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.about-hero .container { position: relative; z-index: 1; }
.about-hero h1 {
  margin: var(--space-3) 0;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.about-hero .hero-subtitle {
  max-width: 720px;
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* shared section-title centering for about */
.about-section-head {
  max-width: 640px;
  margin: 0 auto var(--space-8);
  text-align: center;
}
.about-section-head h2 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
.about-section-head p { margin-top: var(--space-2); color: var(--text-muted); }

/* ── Creator + scientific-context feature cards ───────────── */
.about-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 880px) { .about-feature-grid { grid-template-columns: 1fr; } }

.about-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-surface-2) 55%, transparent), var(--bg-surface));
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.about-feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-default);
  box-shadow: var(--shadow-lg);
}
.about-feature-card > h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}
.about-feature-card > p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.creator-head { display: flex; align-items: center; gap: var(--space-4); }
.creator-monogram {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #FFFFFF;
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.creator-name { margin: 0; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.01em; }
.creator-role {
  margin-top: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.ai-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ai-tools-label {
  width: 100%;
  margin-bottom: 2px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-base) 65%, transparent);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
}
.ai-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.about-github-btn {
  align-self: flex-start;
  margin-top: auto;
  height: 44px;
}

.thesis-cite {
  position: relative;
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--border-subtle));
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-accent) 7%, var(--bg-base));
}
.thesis-cite::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
}
.thesis-label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
.thesis-cite blockquote {
  margin: 0;
  font-style: italic;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}
.thesis-cite figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.thesis-doi {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
}
.thesis-doi:hover { text-decoration: underline; }

.data-provenance {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.data-provenance strong { color: var(--text-primary); }

/* ── Institutions ─────────────────────────────────────────── */
.institutions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.institution-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 258px;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: center;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.institution-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-default);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}
.logo-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 96px;
  padding: var(--space-4);
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.logo-plate img {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.logo-plate.plate-ulb img { max-height: 74px; }
.institution-monogram {
  width: 100%;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #FFFFFF;
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  letter-spacing: 0.06em;
}

/* ── Catalog stat strip ───────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}
/* author `display` beats the UA [hidden] rule, so restore it explicitly */
.stat-strip[hidden] { display: none; }
.stat-card {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--bg-surface);
  text-align: center;
}
.stat-num {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.stat-empty {
  margin: 0 auto;
  max-width: 520px;
  padding: var(--space-5);
  border: 1px dashed var(--border-default);
  border-radius: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ── Quick-access cards ───────────────────────────────────── */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
}
.quick-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  background: var(--bg-surface);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.quick-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}
.quick-card:hover .qc-go { gap: 10px; }
.qc-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.qc-icon i { width: 22px; height: 22px; }
.quick-card h3 { margin: 0; font-size: var(--text-md); }
.quick-card p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.qc-go {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  transition: gap var(--transition-fast);
}
.qc-go i { width: 16px; height: 16px; }

/* ── Citation ─────────────────────────────────────────────── */
.cite-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 880px) { .cite-grid { grid-template-columns: 1fr; } }

.cite-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  background: var(--bg-surface);
  overflow: hidden;
}
.cite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-surface-2) 40%, transparent);
}
.cite-head h3 { margin: 0; font-size: var(--text-base); }
.cite-body { padding: var(--space-5); }
.cite-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
.copy-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.copy-btn i { width: 15px; height: 15px; }
.copy-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.copy-btn.copied { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-subtle); }

.bibtex-toggle {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.bibtex-toggle:hover { color: var(--color-accent); }
.bibtex-block { display: none; margin-top: var(--space-3); }
.bibtex-block.open { display: block; }
.bibtex-block pre {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-base);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  overflow-x: auto;
}

/* ── Contact ──────────────────────────────────────────────── */
.about-contact {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--bg-surface);
}
.about-contact > p { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.contact-list li i { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-accent); }
.contact-list a { color: var(--color-accent); }
.contact-list a:hover { text-decoration: underline; }