/* =========================================================
   case-study.css — 项目详情页共用
   (searchai / schooloftechnology / hideshow / foodwaster / faculty)
   需要在 common.css 之后引入
   ========================================================= */

/* ---- project detail view ---- */
.detail-view { padding:70px 8px 60px; }
.detail-back { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--muted); margin-bottom:36px; }
.detail-back:hover { color:var(--accent); }
.detail-eyebrow { font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:14px; }
.detail-view h1 { font-size:clamp(36px,6vw,64px); letter-spacing:-.04em; margin:0 0 16px; line-height:1; }
.detail-view .lede { font-size:17px; color:var(--muted); max-width:640px; line-height:1.7; margin-bottom:44px; }
.proto-link {
  display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff;
  padding:12px 20px; border-radius:999px; font-size:13px; font-weight:600; margin-top:6px;
  transition:background .2s ease;
}
.proto-link:hover { background:var(--ink); }

/* ---- timeline detail page ---- */
.detail-narrow { max-width:800px; margin:0 auto; }
.tl-divider-full { height:1px; background:var(--line); margin:0 0 56px; }
/* 所有 id 以 toc- 开头的章节（替代每页手写的 #toc-xxx 列表） */
[id^="toc-"] { scroll-margin-top: 24px; }
.tl-hero {
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px;
  padding-bottom:36px;
}
.tl-hero .lede { font-size:17px; color:var(--muted); line-height:1.7; margin:14px 0 22px; }
.tl-hero-media { width:clamp(140px,20vw,220px); }
.tl-hero-media img { width:100%; height:auto; display:block; filter:drop-shadow(0 16px 24px rgba(20,30,22,.16)); }
@media (max-width:700px){ .tl-hero{ grid-template-columns:1fr; } .tl-hero-media{ display:none; } }

.tl-meta-groups { display:flex; flex-wrap:wrap; gap:26px; }
.tl-meta-group .g-label {
  display:block; font-size:12px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--muted); margin-bottom:7px; font-weight:700;
}
.tl-chips { display:flex; flex-wrap:wrap; gap:8px; }
.tl-chips span {
  font-size:13px; border:1px solid var(--line); border-radius:999px; padding:7px 14px;
  color:var(--muted); background:var(--paper);
}
.tl-chips span b { color:var(--ink); font-weight:700; }

.inline-link { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.inline-link:hover { opacity:.7; }

.tl-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:6px 0 40px; }
.tl-overview-card { border:1px solid var(--line); border-radius:18px; padding:20px; background:var(--paper); }
.tl-overview-card .ov-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); font-weight:700; margin-bottom:8px; }
.tl-overview-card h4 { margin:0 0 8px; font-size:17px; letter-spacing:-.02em; }
.tl-overview-card p { margin:0; font-size:13px; color:var(--muted); line-height:1.55; }
@media (max-width:700px){ .tl-overview{ grid-template-columns:1fr; } }

.tl-gallery { display:flex; flex-wrap:wrap; gap:12px; margin:14px 0 16px; }
.tl-gallery figure { margin:0; flex:1 1 260px; max-width:340px; }
.tl-gallery img { width:100%; height:auto; border-radius:12px; border:1px solid var(--line); display:block; object-fit:cover; cursor:zoom-in; transition:.2s ease; }
.tl-gallery img:hover { box-shadow:0 12px 24px rgba(0,0,0,.12); transform:translateY(-2px); }
.tl-gallery figcaption { font-size:13px; color:var(--muted); margin-top:6px; text-align:center; }
.tl-gallery figcaption a { color:var(--muted); text-decoration:underline; }
.tl-gallery figcaption a:hover { color:var(--accent); }

/* ---- lightbox ---- */
#lightbox-overlay { position:fixed; inset:0; background:rgba(18,18,16,.92); display:none; align-items:center; justify-content:center; z-index:9999; padding:28px; cursor:zoom-out; }
#lightbox-overlay.active { display:flex; }
#lightbox-overlay img { max-width:94vw; max-height:90vh; border-radius:8px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
#lightbox-overlay .lb-close { position:absolute; top:20px; right:28px; color:#fff; font-size:28px; line-height:1; opacity:.8; cursor:pointer; }
#lightbox-overlay .lb-close:hover { opacity:1; }

/* ---- benchmark grid ---- */
.tl-bench-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px 26px; margin:16px 0 4px; }
.tl-bench-group .bg-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); font-weight:700; margin-bottom:10px; }
.tl-bench-pair { display:flex; gap:6px; }
.tl-bench-item { flex:1; margin:0; min-width:0; }
.tl-bench-item.solo { max-width:200px; }
.tl-bench-item .thumb { aspect-ratio:4/3; overflow:hidden; border-radius:10px; border:1px solid var(--line); background:var(--line); }
.tl-bench-item .thumb img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; transition:.2s ease; }
.tl-bench-item .thumb img:hover { transform:scale(1.04); }
.tl-bench-item figcaption { font-size:13px; color:var(--muted); margin-top:5px; text-align:center; }
.tl-bench-group .bg-note { font-size:13px; color:var(--muted); line-height:1.5; margin:10px 0 0; }
@media (max-width:700px){ .tl-bench-grid{ grid-template-columns:1fr; gap:26px; } }

/* ---- timeline ---- */
.timeline { position:relative; padding:20px 0 10px; }
.timeline::before {
  content:''; position:absolute; left:22px; top:6px; bottom:30px; width:2px;
  background:var(--line);
}
.tl-row {
  display:grid; grid-template-columns:44px 1fr; align-items:start; margin-bottom:6px;
  opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;
}
.tl-row.in-view { opacity:1; transform:translateY(0); }
.tl-dot {
  grid-column:1; width:44px; height:44px; border-radius:50%;
  background:var(--paper); border:2px solid var(--accent); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
  position:relative; z-index:2;
}
.tl-card { grid-column:2; text-align:left; padding:2px 0 56px 22px; }
.tl-step-label { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.tl-card h3 { font-size:21px; margin:0 0 10px; letter-spacing:-.02em; }
.tl-card p { font-size:15px; color:var(--muted); line-height:1.7; margin:0 0 14px; }
.tl-row .tl-card ul { margin:0 0 14px; padding:0; list-style:none; color:var(--muted); font-size:15px; line-height:1.8; }
.tl-row .tl-card .tl-img {
  border:1.5px dashed var(--line); border-radius:16px; padding:26px; text-align:center;
  color:var(--muted); font-size:12px; background:var(--paper);
}
.tl-row.final .tl-card {
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:22px;
  margin:10px 0 0 22px;
}
.tl-row.final .tl-dot { background:var(--accent); border-color:var(--accent); color:#fff; }
@media (max-width:500px){
  .timeline::before { left:18px; }
  .tl-dot { width:36px; height:36px; font-size:12px; }
  .tl-row { grid-template-columns:36px 1fr; }
  .tl-card { padding:2px 0 40px 16px; }
  .tl-row.final .tl-card { margin-left:16px; padding:18px; }
}

/* ---- sub-headings inside timeline cards ---- */
.tl-card h4 { font-size:15.5px; margin:26px 0 8px; letter-spacing:-.01em; color:var(--ink); }
.tl-card h4:first-of-type { margin-top:20px; }
.tl-card b { font-weight:700; }

/* ---- floating project table-of-contents ---- */
.project-toc {
  position: absolute;
  left: calc(50vw - 640px);
  display: none;
  flex-direction: column;
  gap: 2px;
  width: 202px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 22px;
  background: var(--nav);
  box-shadow: 0 14px 32px rgba(0,0,0,.11);
  backdrop-filter: blur(18px);
  z-index: 20;
}
.project-toc a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 14px;
  font-size: 13px; color: var(--muted); font-weight: 500;
  line-height: 1.3; transition: .2s ease;
}
.project-toc a:hover { color: var(--ink); }
.project-toc a .toc-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--line);
  flex: none; transition: .2s ease;
}
.project-toc a.active { color: var(--ink); background: rgba(31,74,52,.08); font-weight: 700; }
.project-toc a.active .toc-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(31,74,52,.15); }
@media (min-width: 1400px) {
  .project-toc { display: flex; }
}