/* ============================================================
   Aurevix Bioscience — 樣式表 (style.css)
   ------------------------------------------------------------
   這個檔案「只負責長相」：顏色、字體、間距、排版。
   讀法：由上而下 = 全域設定 → 共用元件 → 各區塊。
   ============================================================ */


/* ------------------------------------------------------------
   0. 設計變數 (CSS Variables / 自訂屬性)
   把常用的顏色集中在一個地方，之後要改色只改這裡，
   全站就一起變。這是專業做法，叫「設計代幣 (design tokens)」。
   用法：var(--navy)
   ------------------------------------------------------------ */
:root {
  /* 深藍分三個層次，對應設計稿量到的不同深淺 */
  --navy:        #0d2645;   /* 中深藍：focus 圖示、evidence 右面板、深色按鈕 */
  --navy-deep:   #081a34;   /* 最深藍：導覽列、HALIRA 卡片 */
  --navy-mid:    #233353;   /* 中階藍：partner 合作帶（比較亮） */
  --hero-deep:   #0a1d39;   /* Hero 主視覺底色 */
  --coral:       #dd8a6b;   /* 主色調珊瑚橘：按鈕、重點字 */
  --coral-dark:  #cf7a5b;   /* 按鈕 hover 用的深一階 */

  --bg-light:    #f7f7f9;   /* 淺灰區塊底色（programs） */
  --bg-panel:    #eef1f5;   /* 更淺的面板底（evidence 左欄） */

  --text:        #1c2b3a;   /* 主要文字（深） */
  --text-muted:  #64748b;   /* 次要文字（灰） */
  --line:        #e2e8f0;   /* 分隔線/邊框 */

  --white:       #ffffff;

  /* 內容最大寬度：超過就置中留白，避免在大螢幕上被拉太寬 */
  --maxw: 1200px;
  --radius: 6px;
}


/* ------------------------------------------------------------
   1. 全域重置 (Reset) 與基本排版
   * 選擇器代表「所有元素」。把預設邊界歸零、
   讓 padding 不會把寬度撐大 (box-sizing)。
   ------------------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;   /* 寬度含 padding 與 border，算尺寸最直覺 */
}

body {
  font-family: "Segoe UI", "Helvetica Neue", Arial,
               "Microsoft JhengHei", "PingFang TC", sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: var(--white);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* container：每個區塊內容的「置中容器」。
   左右自動留白 (margin auto)，並限制最大寬度。 */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* 區塊共用：上下留白，讓每段之間有呼吸空間 */
.section { padding: 72px 0; }

/* 區塊標題（置中） */
.section-title {
  text-align: center;
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--text);
  font-weight: 700;
}
.section-sub {
  text-align: center;
  color: var(--text-muted);
  margin-top: 8px;
  margin-bottom: 44px;
  font-size: 15px;
}
.section-title.left,
.section-sub.left { text-align: left; }


/* ------------------------------------------------------------
   2. 共用元件：按鈕 (Buttons)
   先做一個 .btn 基底，再用 .btn-xxx 疊上不同顏色。
   這種「基底 + 變體」是最省事的元件寫法。
   ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 13px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;   /* 讓 hover 變化平滑，不會硬跳 */
  white-space: nowrap;
}
.btn-sm { padding: 10px 18px; font-size: 12px; }

.btn-primary { background: var(--coral); color: var(--white); }
.btn-primary:hover { background: var(--coral-dark); }

.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }

.btn-light { background: var(--white); color: var(--text); }
.btn-light:hover { background: #e9edf2; }

.btn-dark { background: var(--navy); color: var(--white); }
.btn-dark:hover { background: var(--navy-deep); }

.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }

/* 深色外框按鈕：用在淺底上（例如 evidence 左欄的 VIEW ALL RESEARCH） */
.btn-outline-dark { background: transparent; color: var(--navy); border-color: #c3ccd6; }
.btn-outline-dark:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }


/* ------------------------------------------------------------
   3. 導覽列 (Header)
   用 Flexbox 讓「Logo — 選單 — 語言」左中右排開。
   justify-content: space-between 是分散對齊的關鍵。
   ------------------------------------------------------------ */
.site-header {
  background: var(--navy-deep);   /* 導覽列用最深的藍 */
  position: sticky;   /* 捲動時吸附在最上方 */
  top: 0;
  z-index: 50;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--white); }
.brand-mark { color: var(--coral); font-size: 22px; }
.brand-text strong { display: block; font-size: 18px; letter-spacing: 3px; line-height: 1; }
.brand-text small { display: block; font-size: 9px; letter-spacing: 4px; color: #9db4cf; }

.main-nav { display: flex; gap: 26px; }
.main-nav a {
  color: #dfe7f0;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.main-nav a:hover { color: var(--white); border-color: var(--coral); }

.lang-switch { display: flex; align-items: center; gap: 8px; color: #9db4cf; font-size: 13px; }
.lang-switch a.active { color: var(--white); font-weight: 600; }


/* ------------------------------------------------------------
   4. 主視覺 (Hero)
   position: relative 當「定位基準」，
   讓右側 DNA 佔位圖 (hero-media) 用 absolute 疊在背景。
   ------------------------------------------------------------ */
.hero {
  position: relative;
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--hero-deep) 55%, #16335c 100%);
  color: var(--white);
  overflow: hidden;
}
.hero-inner {
  position: relative;
  z-index: 2;               /* 文字在圖上面 */
  padding: 96px 32px 110px;
}
.hero-copy { max-width: 560px; }

.hero-title {
  font-size: 62px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 1px;
}
/* 「THE FRONTIER」用漸層文字：先鋪漸層底色，
   再把文字裁成底色的形狀 (background-clip: text)。 */
.hero-title .accent {
  /* 暖→冷漸層：左端暖珊瑚粉 → 右端冷淡藍銀，中間自然過渡成灰紫。
     THE FRONTIER 與 OF LIFE 各自套一個此 span，所以每一行都會
     從左到右完整跑一次「暖→冷」，對齊參考圖。 */
  background: linear-gradient(90deg, #e3a9a2 0%, #d3c4d1 45%, #c3d7ec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { margin: 26px 0 32px; font-size: 17px; color: #d6e2f0; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* 右側 DNA 圖的位置（目前是佔位漸層，之後換 background-image 成真圖） */
.hero-media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 55%;
  background:
    radial-gradient(circle at 70% 40%, rgba(221,138,107,0.28), transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(60,130,200,0.35), transparent 60%);
  z-index: 1;
}


/* ------------------------------------------------------------
   5. 核心領域 (Scientific Focus)
   用 CSS Grid 切三欄。Grid 適合「排整齊的格子」。
   repeat(3, 1fr) = 三等分。
   ------------------------------------------------------------ */
.focus { background: var(--white); }
.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.focus-item { display: flex; gap: 16px; }
.focus-icon {
  flex: 0 0 56px;   /* 固定寬 56px、不縮放 */
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.focus-body h3 { font-size: 16px; letter-spacing: 0.5px; margin-bottom: 6px; }
.focus-body > p { color: var(--text-muted); font-size: 14px; margin-bottom: 12px; }
.focus-body ul li {
  font-size: 13px; color: var(--text-muted);
  padding-left: 14px; position: relative; line-height: 1.9;
}
.focus-body ul li::before {   /* 用 ::before 做小圓點，不用真的 bullet */
  content: "•";
  position: absolute; left: 0;
  color: var(--coral);
}


/* ------------------------------------------------------------
   6. 重點開發計畫 (Programs) — 三張大卡
   ------------------------------------------------------------ */
.programs { background: var(--bg-light); }
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.program-card {
  /* 整張卡片 = 背景圖區（目前用品牌色佔位）。
     ★ 之後換真圖：在各卡的 background 疊上圖片，例如
       background: linear-gradient(rgba(8,26,52,.55), rgba(8,26,52,.55)), url("images/halira.jpg") center/cover;
       前面那層半透明色是「遮罩(scrim)」，把圖片壓暗、讓白字讀得清楚。 */
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 380px;
}
/* 文字直接疊在卡片上：從左上開始，按鈕靠左下（靠 program-desc 撐開把按鈕頂到底部） */
.program-content { padding: 30px 26px; flex: 1; display: flex; flex-direction: column; }
.program-content h3 { font-size: 26px; letter-spacing: 1px; }
.program-content h3 sup { font-size: 12px; }
.program-tag { font-size: 13px; margin: 6px 0 14px; opacity: 0.9; }
.program-desc { font-size: 14px; line-height: 1.7; margin-bottom: 22px; flex: 1; }
.program-content .btn { align-self: flex-start; }

/* 三張卡各自的配色（對應設計圖） */
.program-halira   { background: var(--navy-deep); color: var(--white); }  /* 最深藍 */
.program-solviva  { background: #405536; color: var(--white); }      /* 偏灰森林綠 */
.program-cellevia { background: #d8c9dd; color: #3a2f42; }           /* 淡紫 */


/* ------------------------------------------------------------
   7. 科學與技術 (Tech) — 四張小卡
   auto-fit + minmax：欄數會依螢幕寬度自動增減，是 RWD 常用技巧。
   ------------------------------------------------------------ */
.tech { background: var(--white); }
.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.tech-card {
  /* 整張卡片 = 背景圖區。目前沒有圖，先用淺色漸層佔位。
     ★ 之後換真圖只要把下面這行 background 換成：
       background: url("images/molecular.jpg") center/cover no-repeat;
     文字的位置(padding)不用動，會自動疊在圖的左上角。 */
  background: linear-gradient(135deg, #dde4ed 0%, #c4d0de 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 200px;
  padding: 22px 20px;
  overflow: hidden;
}
/* 文字疊在卡片左上角。標題不限寬(維持一行)，只把說明文字限寬，
   讓右下方留給未來的圖案(molecule/細胞) */
.tech-body h3 { font-size: 14px; letter-spacing: 0.5px; margin-bottom: 10px; color: var(--navy); }
.tech-body p { font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 80%; }


/* ------------------------------------------------------------
   8. 研發流程 (Pipeline) — 六步驟 + 箭頭
   用 Flexbox 橫向排，箭頭是清單裡的一個項目。
   ------------------------------------------------------------ */
.pipeline { background: var(--white); }
.pipeline-steps {
  list-style: none;   /* <ol> 預設會自動編號，這裡關掉視覺編號，保留語意順序 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pipe-step { flex: 1; min-width: 120px; max-width: 160px; text-align: center; }
.pipe-icon {
  width: 70px; height: 70px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.pipe-step h4 { font-size: 13px; letter-spacing: 0.5px; margin-bottom: 6px; }
.pipe-step p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.pipe-arrow {
  align-self: center;
  color: #b8c4d2; font-size: 22px;
  padding-bottom: 40px;   /* 讓箭頭對齊圓圈中央高度 */
}


/* ------------------------------------------------------------
   9. 科學・數據・證據 (Evidence) — 深藍三欄
   grid-template-columns 用不同比例：文字欄較窄、圖較寬。
   ------------------------------------------------------------ */
/* 設計稿：整段淺底，左欄淺底深字、右欄才是深藍面板白字 */
.evidence { background: var(--bg-panel); color: var(--text); }
.evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.1fr;
  gap: 30px;
  align-items: stretch;
}
/* 左欄：淺底深字 */
.evidence-left h2 { font-size: 24px; letter-spacing: 1px; margin-bottom: 12px; color: var(--navy); }
.evidence-lead { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }
.evidence-list li {
  font-size: 14px; padding: 8px 0 8px 24px;
  border-bottom: 1px solid var(--line);   /* 淺底上改用淺灰分隔線 */
  position: relative; color: var(--text);
}
.evidence-list li::before { content: "▣"; position: absolute; left: 0; color: var(--coral); }
.evidence-left .btn { margin-top: 22px; }

/* 中欄：顯微鏡圖佔位（淺色照片感） */
.evidence-media {
  border-radius: var(--radius);
  background: linear-gradient(135deg, #cdd8e4, #aebfd2);
  min-height: 230px;
}
/* 右欄：深藍面板白字（設計稿只有這一塊是深色） */
.evidence-right {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px;
}
.evidence-right h3 { font-size: 20px; letter-spacing: 1px; margin-bottom: 12px; }
.evidence-right > p { font-size: 14px; color: #cddaea; margin-bottom: 18px; }
.value-list li { font-size: 14px; padding: 7px 0 7px 24px; position: relative; }
.value-list li::before { content: "◈"; position: absolute; left: 0; color: var(--coral); }


/* ------------------------------------------------------------
   10. 最新消息 (News) — 五張卡
   ------------------------------------------------------------ */
.news { background: #ffffff; }   /* 設計稿是白底 */
.news-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 34px;
}
.news-head .section-sub { margin-bottom: 0; }
.news-viewall { color: var(--coral); font-size: 13px; font-weight: 600; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.news-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  padding-bottom: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.news-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); transform: translateY(-3px); }
.news-media { height: 110px; background: linear-gradient(135deg, #d3deea, #aec2d8); }
.news-cat {
  display: inline-block; margin: 14px 16px 8px;
  font-size: 10px; letter-spacing: 1px; font-weight: 700;
  color: var(--coral);
}
.news-card h4 { font-size: 13px; line-height: 1.5; margin: 0 16px 10px; font-weight: 600; }
.news-card time { font-size: 12px; color: var(--text-muted); margin: 0 16px; }


/* ------------------------------------------------------------
   11. 合作邀請 (Partner) — 深藍橫幅
   ------------------------------------------------------------ */
.partner { background: linear-gradient(120deg, #1d2d4a 0%, var(--navy-mid) 100%); color: var(--white); }
.partner-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.partner-copy h2 { font-size: 26px; letter-spacing: 1px; }
.partner-copy p { color: #cddaea; margin-top: 8px; font-size: 15px; }

.partner-options { display: flex; gap: 34px; flex-wrap: wrap; }
.partner-opt { text-align: center; font-size: 12px; color: #dfe7f0; }
.partner-icon {
  width: 46px; height: 46px; margin: 0 auto 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}


/* ------------------------------------------------------------
   12. 頁尾 (Footer)
   ------------------------------------------------------------ */
.site-footer { background: #0a1726; color: #b6c4d6; }   /* 頁尾用最暗、偏黑的深藍 */
.footer-top {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 40px;
}
.footer-slogan { font-size: 12px; margin: 14px 0 16px; color: #8fa4bd; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #cdd8e6;
}
.footer-social a:hover { background: var(--coral); color: var(--white); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.footer-col h5 {
  color: var(--white); font-size: 12px; letter-spacing: 1px;
  margin-bottom: 14px;
}
.footer-col a { display: block; font-size: 12px; color: #93a6bd; padding: 4px 0; }
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px; padding-bottom: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 11px; color: #7f92aa; flex-wrap: wrap; gap: 10px;
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a:hover { color: var(--white); }


/* ------------------------------------------------------------
   13. 響應式 (RWD) — 螢幕變窄時的調整
   @media 是「條件式樣式」：只有當條件成立才套用。
   這裡示範兩個斷點：平板 (≤900px) 與手機 (≤600px)。
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .main-nav { display: none; }          /* 平板以下先把主選單藏起來 */
  .hero-media { opacity: 0.35; width: 100%; }
  .hero-title { font-size: 46px; }

  .focus-grid,
  .programs-grid,
  .tech-grid,
  .news-grid,
  .evidence-grid { grid-template-columns: 1fr 1fr; }  /* 改成兩欄 */

  .footer-top { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .partner-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .section { padding: 48px 0; }
  .hero-title { font-size: 38px; }

  .focus-grid,
  .programs-grid,
  .tech-grid,
  .news-grid,
  .evidence-grid { grid-template-columns: 1fr; }      /* 全部變單欄 */

  .footer-cols { grid-template-columns: 1fr 1fr; }
  .pipeline-steps { flex-direction: column; align-items: center; }
  .pipe-arrow { transform: rotate(90deg); padding: 0; }  /* 箭頭轉成向下 */
}