/* ICPP 實驗室前台樣式。後台頁面仍使用 style.css，兩者互不影響。 */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --graphite: #5b5e63;
  --marker: #ffe34f;
  --marker-tint: #fff7cc;
  --rule: #e4e4de;
  --night: #0e1d3b;        /* 頁首、首屏、頁尾的深藍，取自教授頭像的底色 */
  --night-text: #dfe5f2;
  --night-soft: #a9b4cc;
  --font: "Chiron GoRound TC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --maxw: 1120px;
  --gutter: clamp(16px, 4vw, 48px);
  --edge: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.75;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

/* 連結像用螢光筆畫過底線 */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--marker);
  text-decoration-thickness: .38em;
  text-underline-offset: -.18em;
  text-decoration-skip-ink: none;
}
a:hover { background: var(--marker); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--marker); }

/* 看起來和一般文字一樣、但可以點的連結 */
.plain-link { text-decoration: none; }
.plain-link:hover { background: none; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--marker); padding: .4em .9em; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 頁首 ── */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 32px;
  padding: 14px var(--edge);
  background: var(--night); color: var(--paper);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 1.1rem; letter-spacing: .02em; text-decoration: none;
}
.brand img { width: 40px; height: 40px; filter: invert(1); mix-blend-mode: screen; }
.brand:hover { background: none; }
.site-header ul { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.site-header nav a { font-weight: 700; font-size: .98rem; text-decoration: none; padding: .15em .1em; }
.site-header nav a:hover { background: var(--marker); color: var(--ink); }

/* ── 首屏：繞過吉祥物的平行光流（動畫在 site.js） ── */
.hero {
  position: relative; overflow: hidden;
  padding: 0 var(--edge);
  background: var(--night); color: var(--paper);
}
.hero-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 4vw, 64px);
}
.hero-text { padding: clamp(56px, 8vw, 112px) 0; }
.hero h1 { font-weight: 900; font-size: clamp(2.3rem, 6.4vw, 4.9rem); line-height: 1.12; letter-spacing: .01em; }
.hero h1 span { display: block; white-space: nowrap; }
.hero-strokes { display: block; width: clamp(150px, 17vw, 220px); height: auto; margin: 22px 0 26px; overflow: visible; }
.hero-strokes path {
  fill: none; stroke: var(--marker); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 240; stroke-dashoffset: 0;
  animation: draw .9s .25s cubic-bezier(.65, 0, .25, 1) backwards; /* 三條線同時畫出：平行處理 */
}
@keyframes draw { from { stroke-dashoffset: 240; } }
.hero-en { font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.3rem); line-height: 1.4; max-width: 24em; margin-bottom: 22px; text-wrap: balance; }
.hero-lede { color: var(--night-text); font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 26em; margin-bottom: 18px; text-wrap: balance; }
.hero-affil { color: var(--night-soft); font-size: 1rem; line-height: 1.7; }
.hero a { color: var(--paper); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.hero a:hover { background: var(--marker); color: var(--ink); }
.hero-cat {
  justify-self: end;
  width: 100%; max-width: 460px;
  padding: clamp(24px, 4vw, 48px) 0;
  filter: invert(1);             /* 黑線白底 → 白線黑底 */
  mix-blend-mode: screen;        /* 黑底消失，只留白色墨線 */
}

/* ── 區塊 ── */
.section {
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(72px, 9vw, 112px) var(--gutter) 0;
}
.section-title {
  display: inline-block;
  margin-bottom: 30px; padding: 0 .1em;
  font-weight: 900; font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1.25;
  background: linear-gradient(transparent 60%, var(--marker) 60%);
}
.empty { color: var(--graphite); }

/* 獲獎與報導 */
.press-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.press-list li {
  display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: baseline;
  gap: 4px 20px; padding: 24px 10px 26px; border-bottom: 1px solid var(--rule);
}
.press-list time { color: var(--graphite); font-variant-numeric: tabular-nums; }
.press-award { font-weight: 900; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.35; }
.press-work { margin-top: 6px; color: var(--graphite); }
.press-link { margin-top: 12px; font-weight: 700; }
.press-link a { text-decoration-thickness: 2px; text-underline-offset: .3em; }   /* 長標題換行時不要變成一大塊黃色 */
.press-link a:hover { background: var(--marker-tint); }

/* 最新消息（目前首頁沒有放，保留樣式） */
.news-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.news-list li { border-bottom: 1px solid var(--rule); }
.news-list a {
  display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 2px 20px;
  padding: 18px 10px; text-decoration: none;
}
.news-list a:hover { background: var(--marker-tint); }
.news-list time { color: var(--graphite); font-variant-numeric: tabular-nums; }
.news-title { font-weight: 700; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 22px; color: var(--graphite); font-size: .95rem; }
.pager a { color: var(--ink); font-weight: 700; }

/* 研究發表 */
.pub-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px; margin-bottom: 30px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.4;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: .3em 1em; cursor: pointer;
}
.chip:hover { background: var(--marker); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.search input {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: .38em 1.1em; width: min(280px, 100%);
}
.search input::placeholder { color: var(--graphite); }
.pub-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 28px;
}
.pub a { display: block; text-decoration: none; }
.pub a:hover { background: none; }
.pub img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); border-radius: 8px; }
.pub-text { display: block; margin-top: 14px; }
.pub-title { font-weight: 700; font-size: 1.08rem; line-height: 1.5; }
.pub a:hover .pub-title { background: var(--marker); }
.pub-cat { display: block; margin-top: 4px; color: var(--graphite); font-size: .9rem; }

/* 成員 */
.lead { display: flex; align-items: center; gap: 22px; margin-bottom: 40px; }
.lead img { flex: none; width: 112px; height: 112px; border-radius: 50%; border: 2px solid var(--ink); }
.lead-role { color: var(--graphite); }
.lead-name { font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.3; }
.roster {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); column-gap: 28px;
  border-top: 2px solid var(--ink);
}
.roster li { padding: 16px 4px 18px; border-bottom: 1px solid var(--rule); }
.m-name { display: block; font-weight: 700; font-size: 1.15rem; }
.m-role { display: block; color: var(--graphite); font-size: .95rem; }

/* 實驗室日常 */
.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 28px;
}
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.gallery figcaption { margin-top: 10px; color: var(--graphite); font-size: .95rem; }

/* ── 頁尾 ── */
.site-footer {
  margin-top: clamp(88px, 10vw, 128px);
  padding: 52px var(--edge) 44px;
  background: var(--night); color: var(--paper);
}
.site-footer p + p { margin-top: 6px; }
.footer-name { font-weight: 900; font-size: 1.3rem; }
.site-footer a { text-decoration-color: var(--marker); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.site-footer a:hover { background: var(--marker); color: var(--ink); }
.site-footer .footer-copy { margin-top: 24px; color: var(--night-soft); font-size: .9rem; }

/* ── 單篇頁面（消息、研究發表） ── */
.page {
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) 0;
}
.article { max-width: 40em; }
.back { margin-bottom: 30px; font-size: .95rem; }
.article-date { display: block; color: var(--graphite); font-variant-numeric: tabular-nums; }
.article h1 { margin: 6px 0 26px; font-weight: 900; font-size: clamp(1.8rem, 3.8vw, 2.6rem); line-height: 1.3; }
.article-image { margin-bottom: 26px; border-radius: 8px; }
.article-body { font-size: 1.06rem; line-height: 1.85; }
.article-meta { margin-bottom: 20px; color: var(--graphite); }
.article-cta { margin-top: 26px; font-weight: 700; }

/* ── 手機 ── */
@media (max-width: 760px) {
  /* 手機：貓在上、文字在下，光流在貓周圍那一圈繞行 */
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-cat { order: -1; justify-self: center; max-width: 210px; padding: 36px 0 4px; }
  .hero-text { padding: 20px 0 52px; }
}
@media (max-width: 560px) {
  .site-header { gap: 8px 24px; padding-top: 12px; padding-bottom: 12px; }
  .site-header ul { gap: 4px 16px; }
  .site-header nav a { font-size: .92rem; }
  .nav-extra { display: none; }   /* 「智能醫學影像辨識平台」在手機上簡稱，四個連結排成一行 */
  .news-list a, .press-list li { grid-template-columns: 1fr; }
  .press-list li { padding: 20px 4px 22px; }
  .lead img { width: 88px; height: 88px; }
  .pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .pub-title { font-size: 1rem; }
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  /* 照片牆改成左右滑的相簿 */
  .gallery {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px;
  }
  .gallery li { flex: 0 0 80%; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-strokes path { animation: none; }
}