/*
 * 15-project.css — Project pages (templates/project.html)
 * ─────────────────────────────────────────────────────────
 * A paper-page layout: centred header (venue, title, authors, link buttons),
 * a body slightly wider than a blog post, and section labels in place of big
 * headings. The body's blocks (teaser, sliders, figures) are in 07-blocks.css.
 */

.project {
  --project-width: 860px;
  max-width:       calc(var(--project-width) + 2 * var(--sp-6));
  margin-inline:   auto;
  padding:         var(--sp-12) var(--sp-6) var(--sp-20);
}


/* ══ Header ══════════════════════════════════════════════════════════════════ */

.project-header {
  text-align:    center;
  margin-bottom: var(--sp-10);
}

.project-venue {
  display:        inline-block;
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  letter-spacing: 0.05em;
  color:          var(--color-text-muted);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-sm);
  padding:        0.3rem 0.75rem;
  margin-bottom:  var(--sp-6);
}

.project-title {
  font-family:    var(--font-display);
  font-size:      clamp(2.4rem, 6vw, 4.2rem);
  font-weight:    400;
  line-height:    1.1;
  letter-spacing: -0.015em;
  color:          var(--color-text);
  margin-bottom:  var(--sp-6);
}

.project-authors,
.project-affiliations {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             0.25rem 1.5rem;
}
.project-authors {
  font-size:     var(--text-md);
  margin-bottom: var(--sp-2);
}
.project-authors a,
.project-authors span {
  color:           var(--color-text-muted);
  text-decoration: none;
  white-space:     nowrap;
}
.project-authors a:hover { color: var(--color-accent); }
.project-affiliations {
  font-size:     var(--text-sm);
  color:         var(--color-text-faint);
  margin-bottom: var(--sp-8);
}


/* ── Link buttons and dropdowns ── */
.project-links {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--sp-2);
}
.project-links .btn { font-size: var(--text-sm); }
.project-links .btn .icon { flex-shrink: 0; }

/* Dropdowns are plain <details>: no script needed to open them */
.btn-menu { position: relative; }
.btn-menu summary { list-style: none; cursor: pointer; }
.btn-menu summary::-webkit-details-marker { display: none; }
.btn-menu .chevron { transition: transform var(--transition); }
.btn-menu[open] .chevron { transform: rotate(180deg); }

.btn-menu-items {
  position:      absolute;
  top:           calc(100% + 6px);
  left:          0;
  z-index:       20;
  min-width:     100%;
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-md);
  overflow:      hidden;
  text-align:    left;
}
.btn-menu-items a {
  display:         block;
  padding:         0.55rem 1rem;
  font-size:       var(--text-sm);
  font-weight:     500;
  color:           var(--color-text-muted);
  text-decoration: none;
  white-space:     nowrap;
}
.btn-menu-items a + a { border-top: 1px solid var(--color-border); }
.btn-menu-items a:hover {
  background: var(--color-accent-tint);
  color:      var(--color-accent);
}


/* ══ Body ════════════════════════════════════════════════════════════════════ */

/* Section headings read as small labels with a rule, like a paper page */
.project-body h2 {
  display:        flex;
  align-items:    center;
  gap:            var(--sp-3);
  margin:         var(--sp-16) 0 var(--sp-6);
  padding:        0;
  border:         none;
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-text-faint);
}
.project-body h2::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}
.project-body h3 {
  font-size:  var(--text-lg);
  margin-top: var(--sp-10);
}
.project-body > p,
.project-body > ul,
.project-body > ol { color: var(--color-text-muted); }
.project-body > p { max-width: 68ch; }


/* ══ Footer ══════════════════════════════════════════════════════════════════ */

.project-footer {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-4);
  margin-top:      var(--sp-16);
  padding-top:     var(--sp-6);
  border-top:      1px solid var(--color-border);
}


/* ══ Responsive ══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .project { padding-top: var(--sp-8); }
  .project-authors { gap: 0.25rem 1rem; font-size: var(--text-base); }
}