/* ==========================================================================
   2026 ITRI ICT TechDay — style.css
   ========================================================================== */

:root{
  --navy-950:#05061a;
  --navy-900:#080a24;
  --navy-800:#0d1130;
  --purple-600:#6a30ff;
  --purple-500:#9e30ff;
  --cyan-400:#00d4ff;
  --cyan-300:#4de8ff;
  --orange-1:#ff8a00;
  --orange-2:#ff4d00;
  --gray-100:#eef0f5;
  --gray-300:#c9cdd8;
  --ink-900:#101223;
  --white:#ffffff;
  --container:1200px;
  --font-cjk:'Roboto','Noto Sans TC', sans-serif;
  --font-display:'Archivo Black','Roboto','Noto Sans TC', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-cjk);
  color:var(--ink-900);
  background:#000;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

.section-title{
  text-align:center;
  font-size:40px;
  font-weight:900;
  font-style:italic;
  color:var(--white);
  position:relative;
  padding-bottom:22px;
  margin-bottom:40px;
}
.section-title::after{
  content:'';
  position:absolute;
  left:50%; bottom:10px;
  transform:translateX(-50%);
  width:180px; height:3px;
  background:linear-gradient(90deg,var(--cyan-400),var(--purple-600));
}
.section-title.dark{ color:var(--ink-900); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:relative; top:0; left:0; right:0; z-index:200;
  background:rgba(0,0,0,.55);
  transition:background .3s;
}
.site-header.fixed{ position:fixed; }
.site-header.scrolled{ background:rgba(0,0,0,.9); }
.header-inner{
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
}
.logo img{ height:44px; width:auto; }
.main-nav ul{ display:flex; align-items:center; gap:26px; }
.main-nav a{ font-size:17px; color:var(--white); white-space:nowrap; transition:color .25s; }
.main-nav a:hover{ color:var(--cyan-300); }
.has-dropdown{ position:relative; }
.chev{ font-size:11px; font-style:normal; }
.dropdown{
  position:absolute; top:100%; left:-77px; margin-top:10px;
  background:var(--navy-900); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; min-width:160px; padding:8px 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all .2s;
}
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:8px 16px; font-size:14px; }
.dropdown a:hover{ background:rgba(255,255,255,.06); }
.dropdown li{ width: 100%;}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:32px; background:none; border:0; padding:0;
}
.nav-toggle span{ display:block; width:100%; height:2px; background:#fff; transition:all .3s; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  height: 800px;
  padding:60px 0 43px;
  background:url(../images/kv_bg.jpg) center top / cover no-repeat, var(--navy-950);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-video-wrap{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.hero-video-wrap video{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* object-fit:cover always fills the element's actual rendered box —
     no vw/vh/cqw cover-formula math needed like the old iframe approach,
     and no mismatch possible however .hero's own height is defined. */
  object-fit:cover;
  pointer-events:none;
  /* Stay invisible until script.js adds .is-ready (fired once the video
     is actually PLAYING) — hides any brief load delay behind the .hero
     background image instead of a black flash. */
  opacity:0;
  transition:opacity .8s ease;
}
.hero-video-wrap video.is-ready{ opacity:1; }
.hero-inner{ position:relative; z-index:2; width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.hero-kv-title{ width:100%; max-width:1100px; height:auto; }
.hero-kv-title.kv-desktop{ display:block; }
.hero-kv-title.kv-mobile{ display:none; }

.hero-inner{
  animation:heroFadeUp 1.1s cubic-bezier(.2,.65,.2,1) both;
}
@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(34px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ==========================================================================
   Scroll reveal (dynamic load-in on scroll)
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.2,.65,.2,1), transform .7s cubic-bezier(.2,.65,.2,1);
  will-change:opacity, transform;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal.reveal-scale{ transform:translateY(20px) scale(.96); }
.reveal.reveal-scale.in-view{ transform:translateY(0) scale(1); }

.about-cards .flip-card.reveal:nth-child(1){ transition-delay:.05s; }
.about-cards .flip-card.reveal:nth-child(2){ transition-delay:.15s; }
.about-cards .flip-card.reveal:nth-child(3){ transition-delay:.25s; }
.about-cards .flip-card.reveal:nth-child(4){ transition-delay:.35s; }

.speaker-grid .speaker-item.reveal:nth-child(1){ transition-delay:.05s; }
.speaker-grid .speaker-item.reveal:nth-child(2){ transition-delay:.12s; }
.speaker-grid .speaker-item.reveal:nth-child(3){ transition-delay:.19s; }
.speaker-grid .speaker-item.reveal:nth-child(4){ transition-delay:.26s; }

.traffic-info .info-block.reveal:nth-child(1){ transition-delay:.05s; }
.traffic-info .info-block.reveal:nth-child(2){ transition-delay:.13s; }
.traffic-info .info-block.reveal:nth-child(3){ transition-delay:.21s; }
.traffic-info .info-block.reveal:nth-child(4){ transition-delay:.29s; }

@media (prefers-reduced-motion:reduce){
  .hero-inner{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about{
  padding:100px 0 90px;
  background:url(../images/sec1.jpg) center/cover no-repeat, #05061a;
}
.about-text{
  max-width:920px; margin:0 auto 14px; text-align:center;
  color:#fff; font-size:20px; line-height:1.9;
}
.about-cards{
  margin-top:50px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.flip-card{
  position:relative; width:100%; aspect-ratio:470/500;
  cursor:default; perspective:1400px; outline:none;
}
.flip-card-inner{
  position:relative; width:100%; height:100%;
  transition:transform .8s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card:focus-visible .flip-card-inner,
.flip-card.is-flipped .flip-card-inner{
  transform:rotateY(180deg);
}
.flip-card-face{
  position:absolute; inset:0;
  border-radius:20px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.flip-card-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.flip-card-back{ transform:rotateY(180deg); }

/* ==========================================================================
   Speakers
   ========================================================================== */
.speakers{
  padding:90px 0 100px;
  background:url(../images/sec2.jpg) center/cover no-repeat, var(--gray-100);
}
.speaker-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
  justify-items:center; padding:6px 4px 10px;
}
.speaker-item{ width:220px; text-align:center; cursor:pointer; }
.speaker-item img{
  width:180px; height:180px; border-radius:50%; object-fit:cover;
  margin:0 auto 16px;
}
.spk-name{ font-size:22px; font-weight:700; color:var(--ink-900); margin-bottom:4px; }
.spk-title{ font-size:15px; color:#4a4d5c; margin-bottom:14px; }
.spk-btn{
  border:0; border-radius:999px; padding:8px 20px; font-size:14px; color:#fff;
  background:linear-gradient(90deg,var(--purple-600),var(--purple-500));
  transition:opacity .2s;
}
.spk-btn:hover{ opacity:.8; }

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,8,25,.72);
  display:none; align-items:center; justify-content:center;
  z-index:500; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:#fff; border-radius:16px; max-width:640px; width:100%;
  max-height:86vh; overflow-y:auto; padding:36px; position:relative;
}
.modal-close{
  position:absolute; top:14px; right:18px; border:0; background:none;
  font-size:28px; line-height:1; color:#888; cursor:pointer;
}
.modal-top{ display:flex; align-items:center; gap:20px; margin-bottom:22px; }
.modal-top img{ width:110px; height:110px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.modal-name{ font-size:24px; font-weight:700; margin-bottom:6px; }
.modal-role{ color:#555; font-size:15px; }
.modal-bio{ font-size:15px; color:#3a3d4a; line-height:1.9; white-space:pre-line; }

/* ==========================================================================
   Agenda
   ========================================================================== */
.agenda{
  position:relative;
  padding:90px 0 0;
  background:url(../images/sec3.jpg) center top no-repeat, #000;
}

.agenda-days{
  display:flex; flex-wrap:wrap; gap:56px;
  margin-bottom:34px;
}
.agenda-days-solo{ justify-content:center; }
.agenda-days-solo .agenda-day{ display:flex; align-items:center; gap:28px; }
.agenda-days-solo .day-head{ margin-bottom:0; }
.agenda-days-band{
  background:url(../images/sec3.jpg) center top / cover no-repeat, #000;
  padding-top:56px;
  padding-bottom:30px;
}
.agenda-day{ flex:0 1 auto; min-width:0; }
.day-head{ margin-bottom:18px; }
.day-head img{ height:68px; width:auto; }
.day-groups{ display:flex; flex-wrap:wrap; gap:26px; }
.tab-group{ flex:0 0 auto; }
.tab-label{ display:block; color:#fff; font-size:13px; margin-bottom:10px; }
.tab-buttons{ display:flex; flex-wrap:nowrap; gap:10px; }

/* Per-day accent colors, sampled from the approved design mockups */
.agenda-day.day1{ --accent-a:#00A0FF; --accent-b:#00A0FF; }
.agenda-day.day2{ --accent-a:#5642FF; --accent-b:#B971FF; }
.agenda-panel.day1{ --link:#00A0FF; }
.agenda-panel.day2{ --link:#874BFF; }

.tab-btn{
  border:1px solid rgba(255,255,255,.3); background:rgba(10,4,25,.4); color:#fff;
  border-radius:10px; padding:13px 20px; font-size:17px; white-space:nowrap;
  transition:all .25s;
}
.tab-btn:hover{ border-color:#fff; }
.tab-btn.active{
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
  border-color:transparent; color:#fff;
}

.agenda-panels{ background:#fff; }
.agenda-panels-inner{ max-width:var(--container); margin:0 auto; padding: 30px 0 }
.agenda-item{
  display:flex; gap:26px; padding:18px 28px; border-bottom:1px solid #eceef4;
  align-items:center;
}
.agenda-item:last-child{ border-bottom:0; }
.agenda-time{ flex:0 0 130px; font-weight:700; color:#000; font-size:20px; }
.agenda-session{ flex:1; min-width:0; display:flex; align-items:center; gap:24px; }
.session-title{ flex:0 0 150px; font-weight:700; color:#000; font-size:20px; }
.session-title:has(+ .talk-list){ color:var(--link,#00A0FF); }
.session-title.accent{ color:var(--link,#00A0FF); }
.agenda-item.highlight{
  background:linear-gradient(90deg,#0066FF,#00D1FF);
}
.agenda-item.highlight .agenda-time,
.agenda-item.highlight .session-title{ color:#fff; }
.session-speaker{ flex:1; min-width:0; color:#222; font-size:20px; font-weight: bold; }
.note-sub{ font-size:15px; color:#222; }
.talk-list{ flex:1; min-width:0; display:flex; flex-direction:column; gap:22px; }
.talk-list li{ display:flex; flex-direction:column; gap:2px; }

/* Day1 上午場 (data-panel="1") 專用：標題與講者改為上下堆疊，僅此表格套用 */
.agenda-panel[data-panel="1"] .agenda-session{ flex-direction:column; align-items:flex-start; gap:6px; }
.agenda-panel[data-panel="1"] .session-title{ flex:none; width:100%; }
.agenda-panel[data-panel="1"] .session-speaker{ flex:none; width:100%; }
.talk-name{ color:var(--link,#00A0FF); font-size:20px; font-weight:bold;  }
.talk-speaker{ color:#222; font-size:20px; font-weight: bold; }

.agenda-cta-band{ background:#000; padding:60px 24px; text-align:center; }
.agenda-note{
  text-align:center; color:#fff; font-size:16px; line-height:1.9;
}
.btn-img{ display:inline-block; margin-top:26px; transition:transform .2s; }
.btn-img:hover{ transform:translateY(-2px); }
.btn-img img{
  height:56px; width:auto; display:block; margin:0 auto;
  transform-origin:center;
  animation:fixBtnPulse 1.8s ease-in-out infinite;
}

/* ==========================================================================
   Venue
   ========================================================================== */
.venue{
  padding:70px 0 90px;
  background:url(../images/sec4.jpg) center/cover no-repeat, #0d0620;
}
.venue-placeholder{ border-radius:14px; overflow:hidden; }

/* ==========================================================================
   Traffic
   ========================================================================== */
.traffic-block{ margin-top:70px; }
.traffic-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.traffic-map{ border-radius:14px; overflow:hidden; height:360px; background:#111; }
.traffic-map iframe{ width:100%; height:100%; }
.info-block{ margin-bottom:26px; }
.info-block:last-child{ margin-bottom:0; }
.info-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.info-head img{ width:26px; height:26px; }
.info-head b{ color:#9e30ff; font-size:18px; }
.info-block p{ color:#fff; font-size:16px; margin:0; padding-left:32px; }
.traffic-cta{ text-align:center; margin-top:40px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:#eef0f5; }
.footer-links{ text-align:center; padding:44px 20px 30px; }
.footer-title{
  display:inline-block; font-weight:700; font-size:20px; color:#1c2140;
  padding-bottom:12px; border-bottom:2px solid #4a3aff; margin-bottom:20px;
}
.footer-nav{ display:flex; justify-content:center; gap:36px; flex-wrap:wrap; }
.footer-nav a{ color:#144199; font-size:15px; }
.footer-nav a.sec{ color:#00aaea; }
.footer-nav a:hover{ text-decoration:underline; }
.footer-logos{ background:#000; padding:22px 24px; text-align:center; }
.footer-logos img{ max-width:1200px; width:100%; margin:0 auto; height:auto; }

/* ==========================================================================
   Floating CTA buttons
   ========================================================================== */
.fix-btn{ position:fixed; z-index:150; }
.fix-btn.pc{ right:26px; bottom:30px; width:96px; }
.fix-btn.mb{ display:none; left:0; right:0; bottom:0; width:100%; }
.fix-btn img{ width:100%; }
.fix-btn.pc img{
  transform-origin:center;
  animation:fixBtnPulse 1.8s ease-in-out infinite;
}
@keyframes fixBtnPulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .about-cards{ grid-template-columns:repeat(2,1fr); }
  .speaker-grid{ grid-template-columns:repeat(2,1fr); }
  .agenda-days{ grid-template-columns:1fr; gap:30px; }
  .traffic-grid{ grid-template-columns:1fr; }
  .traffic-map{ height:320px; }
}

@media (max-width: 860px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:var(--navy-900); padding:100px 30px 30px;
    transform:translateX(100%); transition:transform .35s; overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:0; }
  .main-nav ul > li{ width:100%; border-bottom:1px solid rgba(255,255,255,.08); }
  .main-nav a{ display:block; padding:16px 0; font-size:16px; }
  .has-dropdown .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; display:none;
    background:rgba(255,255,255,.04); margin-top:0; border:0;
  }
  .has-dropdown.open .dropdown{ display:block; }
  .nav-toggle{ display:flex; }

  .hero{ height: auto; background-image:url(../images/mb_kv_bg.jpg); min-height: 0; padding: 60px 0 40px; }
  .hero-kv-title{ width:92%; max-width:420px; }
  .hero-kv-title.kv-desktop{ display:none; }
  .hero-kv-title.kv-mobile{ display:block; }
  .section-title{ font-size:28px; }
  .about-cards{ grid-template-columns:1fr 1fr; gap:14px; }
  .about-text{ font-size:15px; padding:0 4px; }

  .speaker-grid{ gap:18px; }
  .speaker-item{ width:150px; }
  .speaker-item img{ width:120px; height:120px; }

  .agenda-days{ flex-direction:column; gap:40px; align-items:center; }
  .agenda-day{ display:flex; flex-direction:column; align-items:center; width:100%; }
  .day-head{ margin-bottom:18px; }
  .day-groups{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:16px; width:100%; }
  .tab-group{ flex:0 1 auto; width:auto; min-width:0; text-align:center; }
  .tab-buttons{ display:flex; flex-wrap:wrap; gap:10px; width:auto; justify-content:center; }
  .tab-btn{ white-space:normal; font-size:15px; }

  .agenda-item{ padding:16px; gap:10px; flex-direction:column; align-items:flex-start; }
  .agenda-time{ flex:none; }
  .agenda-session{ flex-direction:column; align-items:flex-start; gap:8px; width:100%; }
  .session-title{ flex:none; }

  .fix-btn.pc{ display:none; }
  .fix-btn.mb{ display:block; }
  body{ padding-bottom:74px; }

  /* ==========================================================================
     手機版：修改 6G與衛星通訊、無人載具、AI應用-智慧製造、AI應用-智慧生活 議程樣式
     ========================================================================== */
  
  /* 移除原本的底線，並重設 padding 以便讓時間背景色滿版 */
  .agenda-panel:not([data-panel="1"]) .agenda-item {
    border-bottom: none;
    padding: 0 0 24px 0; /* 移除左右 padding，保留下方間距 */
  }

  /* 時間加上灰色底 (#dbdcdc) 並滿版 */
  .agenda-panel:not([data-panel="1"]) .agenda-time {
    background-color: #dbdcdc;
    width: 100%;
    padding: 12px 16px; /* 補回左右 padding */
    margin-bottom: 12px;
  }

  /* 將議程內容區塊推回對齊 */
  .agenda-panel:not([data-panel="1"]) .agenda-session {
    padding: 0 16px;
  }

  /* 標題欄改為黑底反白字 (預設色塊) */
  .agenda-panel:not([data-panel="1"]) .session-title {
    background-color: #222; /* 企業專題等原黑字改為黑底 */
    color: #fff;            /* 原黑字反白 */
    display: inline-block;
    padding: 4px 12px;
    width: auto;            /* 覆寫原本的 100% 寬度 */
    flex: none;
  }

  /* 若為原本藍色字/紫色字 (有子講題列表的項目)，改為對應的藍色底/紫色底 */
  .agenda-panel:not([data-panel="1"]) .session-title:has(+ .talk-list),
  .agenda-panel:not([data-panel="1"]) .session-title.accent {
    background-color: var(--link); /* 原本已定義好 Day1 藍色 / Day2 紫色的 CSS 變數 */
    color: #fff;                   /* 原藍/紫色字反白 */
  }
}

@media (max-width: 480px){
  .hero-kv-title{ width:92%; max-width:360px; }
}