/* 國際商機交流會內容區共用樣式：content.template.html 與靜態 index.html 都載入 */
html, body { margin: 0; background: #fff; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

/* Hero：底色 #F2F8FD（與圖片左緣同色）。圖片高度貼齊 hero、靠右完整顯示，
   左側用同色漸層銜接到文字區，寬螢幕兩側不會出現白色空白 */
.hero {
  min-height: clamp(400px, 37.7vw, 560px);
  background:
    linear-gradient(90deg, #F2F8FD calc(50% - 600px), rgba(242,248,253,0.85) calc(50% - 280px), rgba(242,248,253,0) calc(50% + 120px)),
    url('assets/hero/hero-bg.png') right center / auto 100% no-repeat,
    #F2F8FD;
}
@media (max-width: 640px) {
  .hero {
    min-height: 0;
    background:
      linear-gradient(rgba(242,248,253,0.88), rgba(242,248,253,0.7)),
      url('assets/hero/hero-bg.png') 70% center / cover no-repeat,
      #F2F8FD;
  }
}

/* 手機（≤640px）與桌機兩套版面都輸出在 HTML 裡，由 CSS 決定顯示哪一套 */
@media (min-width: 641px) { .v-m { display: none !important; } }
@media (max-width: 640px) { .v-d { display: none !important; } }

/* 字級系統（桌機 / 手機）
   主標 96 / 44 · 場次標題 64 / 32 · 資訊 32 / 20 · 內文 20 / 17 · 補充 16 / 15 · 標籤 13 / 12
   字體：中文 Noto Sans TC，英文與數字 Montserrat，大標題數字 Archivo */
.t-display { font-size: clamp(44px, 7vw, 96px); }
.t-title   { font-size: clamp(36px, 4.6vw, 64px); }
.t-info    { font-size: clamp(20px, 2.4vw, 32px); }
.t-body    { font-size: clamp(17px, 1.4vw, 20px); }
.t-label {
  font-family: Montserrat, 'Noto Sans TC', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2;
}
@media (max-width: 640px) {
  .t-display { font-size: 44px; }
  .t-title   { font-size: 32px; }
  .t-info    { font-size: 20px; }
  .t-body    { font-size: 17px; }
  .t-label   { font-size: 12px; }
}

/* 講者卡片：--card-w 是卡片最寬寬度（一排 5、6 張時為 100%，即平均貼齊內容兩邊；4 張以下 260px）；
   --sp-gap 是卡片間距；兩者由模板依張數設定。
   --cols 是這場一排的張數；螢幕不夠寬時卡片縮小以維持同一排，900px 以下改成平均兩排（--cols2），手機一排 2 張 */
.sp-row { max-width: calc(var(--cols) * var(--card-w) + (var(--cols) - 1) * var(--sp-gap)); }
.sp-card { width: min(var(--card-w), calc((100% - (var(--cols) - 1) * var(--sp-gap)) / var(--cols))); }
@media (max-width: 899px) {
  .sp-row { max-width: calc(var(--cols2) * min(var(--card-w), 211px) + (var(--cols2) - 1) * var(--sp-gap)); }
  .sp-card { width: min(var(--card-w), 211px, calc((100% - (var(--cols2) - 1) * var(--sp-gap)) / var(--cols2))); }
}
@media (max-width: 640px) {
  .sp-row { gap: 10px !important; max-width: none; } /* 蓋過 inline 的 --sp-gap，兩張半寬卡才排得下；手機一律滿版（不受 900 以下的寬度上限限制） */
  .sp-card { width: calc(50% - 5px); }
}

/* 講者卡文字：姓名用內文級、職稱單位用補充級 */
.sp-name { font-size: 20px; line-height: 1.2; }
.sp-meta { font-size: 16px; line-height: 1.4; }
@media (max-width: 640px) {
  .sp-name { font-size: 17px; }
  .sp-meta { font-size: 15px; line-height: 1.5; }
}

/* 報名按鈕 */
.cta-d:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cta:active { transform: translateY(1px); }

/* =====================================================================
   台灣醫療科技展 2026 活動頁系列：共用版面與字級規範（與醫藥韌性研討會、亞太醫療品質年會的 series.css 同一套數值）
   字體  中文 Noto Sans TC｜英文、標籤、數字 Montserrat｜大數字 Archivo
   字重  內文 400｜副標、小數字 500｜標題、姓名、標籤、按鈕 700｜大數字 Archivo 900
   數字  大數字＝標題級（桌機 64、手機 32，本頁的場次日期）用 Archivo 900；其餘時間、序號用 Montserrat Medium 500
   字級  桌機 96 / 64 / 32 / 20 / 16 / 13｜手機 44 / 32 / 20 / 17 / 15 / 12
   版心  內容 1200 寬；桌機兩側至少 32、手機 16
   Hero  桌機高度 560；區塊間距 桌機 120｜手機 60
   內容區是 build.py 渲染出的靜態 HTML（樣式寫在 style 屬性），所以這裡用 !important 覆蓋
   ===================================================================== */
.hero { min-height: 560px; }
.hero > div,
main { max-width: 1264px !important; padding-left: 32px !important; padding-right: 32px !important; }
main { padding-top: 120px !important; padding-bottom: 120px !important; gap: 120px !important; }
/* 場次標題（中文）從 900 改 700；講者姓名從 600 改 700 */
.t-title[style*="Noto Sans TC"] { font-weight: 700 !important; }
.sp-name { font-weight: 700 !important; }
@media (max-width: 640px) {
  .hero { min-height: 0; }
  .hero > div,
  main { padding-left: 16px !important; padding-right: 16px !important; }
  main { padding-top: 60px !important; padding-bottom: 60px !important; gap: 60px !important; }
}
/* 場次時間（小數字）與並排的會場：Montserrat Medium，不用粗體 */
span.t-info[style*="color: rgb(255, 255, 255)"],
span.t-body[style*="color: rgb(255, 255, 255)"][style*="white-space: nowrap"] { font-weight: 500 !important; }

/* 英文版：大標題（主標、場次標題、日期）以外的內容文字都用 Inter。官網 header / footer 不在範圍內 */
html[lang="en"] :is(header.hero, main) :not(h1, h2, .t-title, h1 *, h2 *, .t-title *) {
  font-family: Inter, sans-serif !important;
}

/* hero 下方的場次按鈕：桌機一排 4 個、平板 3 個、手機 2 個；點了捲到該場次（顏色在模板資料 navBg / navFg） */
.hero-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; max-width: 1028px; margin-top: clamp(20px, 2.4vw, 40px); }
.hero-nav-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 74px; box-sizing: border-box; padding: 12px 20px 12px 17px; border-radius: 10px;
  text-decoration: none; transition: transform .2s cubic-bezier(.4,0,.2,1), filter .2s;
}
.hero-nav-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.hero-nav-btn:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.hero-nav-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-nav-name { font-family: 'Noto Sans TC', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.25; }
.hero-nav-sub { font-family: 'Noto Sans TC', sans-serif; font-weight: 500; font-size: 13px; line-height: 1.2; color: #fff; }
.hero-nav-arrow { flex-shrink: 0; }
html[lang="en"] .hero-nav-name { font-size: 16px; }
@media (max-width: 899px) { .hero-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hero-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-nav-btn { min-height: 64px; padding: 10px 12px 10px 14px; gap: 6px; }
  .hero-nav-name { font-size: 16px; }
  html[lang="en"] .hero-nav-name { font-size: 14px; }
  .hero-nav-sub { font-size: 12px; }
  .hero-nav-arrow { width: 18px; height: 18px; }
}
/* 跳到場次時，避開捲動後固定在上方的官網選單 */
html { scroll-behavior: smooth; }
main section[id] { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── hero（依設計稿 Frame 45：2000 寬時為 1:1 尺寸）──
   背景與高度：高度 37.7vw（底圖比例），底圖往右推 18vw，地球偏右、左側留白給文字 */
.hero {
  min-height: clamp(400px, 37.7vw, 754px);
  background:
    linear-gradient(90deg, #F2F8FD calc(50% - 600px), rgba(242,248,253,0.85) calc(50% - 200px), rgba(242,248,253,0) calc(50% + 200px)),
    url('assets/hero/hero-bg.png') right -18vw center / auto 100% no-repeat,
    #F2F8FD;
}
.hero-inner { padding-top: clamp(32px, 5.2vw, 104px); padding-bottom: clamp(36px, 5vw, 100px); }
.hero-tagline { font-family: Montserrat, sans-serif; font-weight: 400; font-size: clamp(17px, 1.5vw, 30px); line-height: 1.25; letter-spacing: 0.01em; color: #000; white-space: pre-line; }
.hero-rule { width: clamp(40px, 3.9vw, 78px); height: 1px; background: #000; margin-top: clamp(12px, 1.15vw, 23px); }
.hero .hero-title { margin: clamp(28px, 3.7vw, 74px) 0 0; font-size: clamp(44px, 6vw, 120px); font-weight: 700; line-height: 1; letter-spacing: 0.005em; color: #000; }
html[lang="en"] .hero .hero-title { font-size: clamp(34px, 4.4vw, 88px); line-height: 1.05; max-width: 14em; }
.hero-sub { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 24px); margin-top: clamp(16px, 2vw, 40px); }
.hero-sub-line { width: clamp(28px, 3vw, 60px); height: clamp(3px, 0.2vw, 4px); background: linear-gradient(90deg, rgb(35,155,241), rgb(105,193,164)); flex-shrink: 0; }
.hero-sub-text { font-family: Montserrat, sans-serif; font-weight: 400; font-size: clamp(11px, 1.05vw, 21px); letter-spacing: 0.32em; text-transform: uppercase; line-height: 1.4; color: #000; }
.hero .hero-nav { margin-top: clamp(24px, 3.7vw, 75px); max-width: 995px; gap: 13px 12px; }
.hero .hero-nav-btn { min-height: 72px; padding: 12px 18px 12px 16px; }
.hero .hero-nav-name { font-size: 17px; }
html[lang="en"] .hero .hero-nav-name { font-size: 15px; }
@media (max-width: 640px) {
  .hero {
    min-height: 0;
    background:
      linear-gradient(rgba(242,248,253,0.88), rgba(242,248,253,0.7)),
      url('assets/hero/hero-bg.png') 70% center / cover no-repeat,
      #F2F8FD;
  }
  .hero-inner { padding-top: 28px; padding-bottom: 36px; }
  .hero .hero-title { margin-top: 24px; font-size: 44px; }
  html[lang="en"] .hero .hero-title { font-size: 34px; }
  .hero-sub-text { letter-spacing: 0.2em; }
  .hero .hero-nav { margin-top: 24px; gap: 10px; }
  .hero .hero-nav-btn { min-height: 64px; padding: 10px 12px 10px 14px; }
  .hero .hero-nav-name { font-size: 16px; }
  html[lang="en"] .hero .hero-nav-name { font-size: 14px; }
}