/**
 * Computex 2026 Landing Page — 頁面專屬 CSS
 * 對應 PHP：/views/computex2026_v2025.php
 * Hero 模式：A（main 無 padding-top；nav 透明疊在上方）
 *
 * ⚠ 所有頁面 selector 都以 main 為根，避免汙染全站
 * ⚠ z-index 全部 ≤ 4，不蓋 nav (z-index:5) 跟 mega menu (z-index:7)
 *
 * [字型備註] Glow Sans TC/SC/J 全套 27 個 woff2 + 27 個 @font-face
 *   宣告未掛載（Glow Sans 有 cmap/glyph bug：約→樽、立/見/來 缺字，
 *   無法生產用）。woff2 原始檔保留在 backup zip，未來想針對個別元素
 *   opt-in 用 Glow 風格：放回 /assets/fonts/、補 @font-face、
 *   元素 font-family inline 'Glow Sans TC' 即可
 */

/* ============================================================
   Poppins — EN 主字型（設計師指定）
   只在 #page_content.computex2026 scope 內 var() 引用，其他頁面不受影響
   ============================================================ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Poppins-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Poppins-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Poppins-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
}

/* ============================================================
   #page_content.computex2026 — 全頁 scope（字型 + 色票 + 外觀）
   ============================================================
   字型策略
     - basic_v2025.css 全站 --font-family-primary 預設用 Roboto
       這頁設計師指定 EN 用 Poppins，所以在 #page_content.computex2026
       scope 內覆寫此變數，nav / footer / 其他頁面不受影響
     - CJK fallback chain 全照規範（Noto Sans TC/SC → 系統 PingFang / YaHei...）
   色票策略
     - 全部用 --cpx-* 自訂變數（這頁專用，命名借用規範 BEM 風格）
     - 不需要 dark mode
   外觀
     - 全頁漸層背景（白 → 中灰 → 中藍）
     - max-width 1280 / margin 0 auto 置中
     - 不加 padding-top（Hero 模式 A，從頁頂出血、nav 透明疊在上面）
   ============================================================ */
#page_content.computex2026 {
  /* 字型：覆寫規範 Roboto → Poppins，CJK fallback chain 照舊 */
  --font-family-primary: 'Poppins', 'Noto Sans TC', 'Noto Sans SC',
    -apple-system, BlinkMacSystemFont,
    'PingFang TC', 'PingFang SC',
    'Microsoft JhengHei', '微軟正黑體',
    'Microsoft YaHei', '微軟雅黑',
    'Hiragino Sans GB', sans-serif;

  /* 色票：Neutral 階 */
  --cpx-neutral-10: #f8f9fd;
  --cpx-neutral-20: #e4eaee;
  --cpx-neutral-40: #c9d1d8;
  --cpx-neutral-60: #9ca5b1;
  --cpx-neutral-90: #535a6d;
  /* 色票：Primary 階（品牌藍） */
  --cpx-primary-light:   #c3e2fe;
  --cpx-primary-default: #76afe0;
  --cpx-primary-dark:    #2877b5;
  /* 通用文字白 */
  --cpx-text: #f8f9fd;
  background: linear-gradient(180deg,
    #f8f9fd 0%,
    #c9d1d8 52%,
    #76afe0 100%);
  position: relative;
  font-family: var(--font-family-primary);
}

#page_content.computex2026 section:not(.cpx-hero):not(.cpx-footer-cta) {
  max-width: 1280px;
}

/* ZHTW / ZHCN scope 下，CJK 字型優先順序微調（蓋掉上方繼承） */
body[data-lang="ZHTW"] #page_content.computex2026 {
  --font-family-primary: 'Poppins', 'Noto Sans TC', 'Noto Sans SC',
    -apple-system, BlinkMacSystemFont,
    'PingFang TC', 'PingFang SC',
    'Microsoft JhengHei', '微軟正黑體',
    'Microsoft YaHei', '微軟雅黑',
    'Hiragino Sans GB', sans-serif;
}
body[data-lang="ZHCN"] #page_content.computex2026 {
  --font-family-primary: 'Poppins', 'Noto Sans SC', 'Noto Sans TC',
    -apple-system, BlinkMacSystemFont,
    'PingFang SC', 'PingFang TC',
    'Microsoft YaHei', '微軟雅黑',
    'Microsoft JhengHei', '微軟正黑體',
    'Hiragino Sans GB', sans-serif;
}

/* ============================================================
   通用 wrapper（main 自身的 z-index 跟 position）
   ============================================================ */
#page_content.computex2026 main {
  position: relative;
  z-index: 2;
}

/* ============================================================
   .booking-btn（重用之前做好的 Primary / Secondary）
   ============================================================ */
main .cpx-booking-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border: 0;
  border-radius: 100px;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
main .cpx-booking-btn--primary {
  background: var(--cpx-primary-dark);
  color: #fff;
}
main .cpx-booking-btn--primary:hover {
  color: #fff;
  background: linear-gradient(180deg, var(--cpx-primary-light) 0%, var(--cpx-primary-default) 50%, var(--cpx-primary-dark) 100%);
}
main .cpx-booking-btn--primary:active {
  background: var(--cpx-primary-default);
  transform: scale(0.96);
}
main .cpx-booking-btn--secondary {
  background: #fff;
  color: var(--cpx-primary-dark);
}
main .cpx-booking-btn--secondary:hover {
  background: linear-gradient(180deg, var(--cpx-primary-light) 0%, var(--cpx-primary-default) 50%, var(--cpx-primary-dark) 100%);
  color: #fff;
}
main .cpx-booking-btn--secondary:active {
  background: var(--cpx-primary-default);
  color: #fff;
  transform: scale(0.96);
}

/* ============================================================
   .cpx-arrow Icons（重用之前做好的）
   ============================================================ */
main .cpx-arrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

/* double-arrow（白色雙 V 呼吸） */
main .cpx-arrow--double {
  color: #fff;
  padding: 4px;
  animation: cpx-arrow-blink 1.6s ease-in-out infinite;
}
@keyframes cpx-arrow-blink {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 0.20; }
}

/* colorful-double-arrow（三 V 色階流動） */
main .cpx-arrow--colorful {
  padding: 4px;
}
main .cpx-arrow--colorful svg {
  animation: cpx-arrow-flow 1.4s ease-in-out infinite;
}
main .cpx-arrow--colorful svg:nth-child(1) { animation-delay: 0s; }
main .cpx-arrow--colorful svg:nth-child(2) { animation-delay: 0.2s; }
main .cpx-arrow--colorful svg:nth-child(3) { animation-delay: 0.4s; }
@keyframes cpx-arrow-flow {
  0%   { color: var(--cpx-primary-dark); }
  25%  { color: var(--cpx-primary-default); }
  50%  { color: var(--cpx-primary-light); }
  75%  { color: var(--cpx-neutral-20); }
  100% { color: var(--cpx-primary-dark); }
}

/* clickable modifier — Section 01 箭頭點了會 smooth scroll */
main .cpx-arrow--clickable {
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}
main .cpx-arrow--clickable:hover { transform: translateY(2px); }
main .cpx-arrow--clickable:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 6px;
}

/* triangle-arrow（深藍三角呼吸） */
main .cpx-arrow--triangle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--cpx-primary-dark);
  animation: cpx-arrow-fade 1.6s ease-in-out infinite;
}
@keyframes cpx-arrow-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ============================================================
   SECTION 01 — Hero
   ============================================================ */
main .cpx-hero {
  width: 100%;
  min-height: 674px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 80px 64px;  /* PC：top 加 56px（從 64 → 120）避免內容貼到 header */
  /* Hero 背景：真實 banner 圖（藍白絲帶造型） */
  background-image: url('/assets/images/computex2026/section1_hero_desktop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 漸層遮罩：讓文字區（中央）更清楚，邊緣與背景銜接更柔和 */
main .cpx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(118, 175, 224, 0.1) 70%,
    rgba(118, 175, 224, 0.2) 100%);
  z-index: 0;
}

main .cpx-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

main .cpx-hero__title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

main .cpx-hero__subtitle {
  font-family: var(--font-family-primary);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.4;
  color: var(--cpx-primary-dark);
}

main .cpx-hero__title {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 68px;
  line-height: 1.4;
  color: var(--cpx-primary-dark);
}

main .cpx-hero__info {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: var(--cpx-neutral-90);
  white-space: nowrap;
}
/* PC/Tablet 顯示單行版；Mobile 顯示雙行版（內容不同，依 CSV）*/
main .cpx-hero__info--mobile { display: none; }

main .cpx-hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

main .cpx-hero__buttons {
  display: flex;
  gap: 24px;
}

/* ============================================================
   SECTION 02 — 產品卡（重用之前做好的 .cpx-card）
   ============================================================ */
main .cpx-products {
  padding: 72px 80px;
  display: flex;
  gap: 24px;
  justify-content: center;
}

main .cpx-card {
  width: 352px;
  height: 318px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.cpx-card__back,
main .cpx-card__front {
  box-sizing: border-box;
  width: 100%;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--cpx-text);
  overflow: hidden;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 0;
  position: relative;
  transition:
    flex-grow    0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding      0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow   0.4s ease,
    opacity      0.6s ease;
}

/* 玻璃反光三角形 */
.cpx-card__back::before,
main .cpx-card__front::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 80%);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
  z-index: 0;
}
.cpx-card__back > *,
main .cpx-card__front > * {
  position: relative;
  z-index: 1;
}

/* Front 卡 */
main .cpx-card__front {
  flex-grow: 1;
  padding: 40px 20px;
  gap: 16px;
  background: linear-gradient(180deg, var(--cpx-primary-default) 0%, var(--cpx-primary-dark) 100%);
  box-shadow: 0 0 6px 4px rgba(118, 175, 224, 0.2);
  opacity: 1;
}
/* Front 漸層邊框 */
main .cpx-card__front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(135deg,
    rgba(248, 249, 253, 0.6) 0%,
    rgba(228, 234, 238, 0.6) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.6s ease;
  opacity: 1;
}

/* Back 卡 */
main .cpx-card__back {
  flex-grow: 0;
  padding: 0 20px;
  gap: 8px;
  background: var(--cpx-primary-dark);
  box-shadow: 0 0 6px 4px rgba(118, 175, 224, 0);
  opacity: 0;
  align-items: flex-start;
  text-align: left;
}

/* Hover */
main .cpx-card:hover .cpx-card__front {
  flex-grow: 0;
  padding: 0 20px;
  box-shadow: 0 0 6px 4px rgba(118, 175, 224, 0);
  opacity: 0;
}
main .cpx-card:hover .cpx-card__front::after {
  opacity: 0;
}
main .cpx-card:hover .cpx-card__back {
  flex-grow: 1;
  padding: 40px 20px;
  box-shadow: 0 0 6px 4px rgba(118, 175, 224, 0.2);
  opacity: 1;
}

/* 卡片內部文字 */
main .cpx-card__icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cpx-text);
}
main .cpx-card__spec-large {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  color: var(--cpx-text);
}
/* connector "to" 在英文模式縮小，CJK 模式跟 1/4 同字級 */
main .cpx-card__spec-large .small { font-size: inherit; }
body[data-lang="EN"] main .cpx-card__spec-large .small { font-size: 36px; }
main .cpx-card__spec-sub {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
  color: var(--cpx-text);
}
main .cpx-card__title-only {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  color: var(--cpx-text);
}
main .cpx-card__product-name {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  color: var(--cpx-text);
}
main .cpx-card__divider {
  width: 100%;
  height: 1px; border: 0;
  background: var(--cpx-text);
  opacity: 0.6;
}
main .cpx-card__desc {
  font-family: var(--font-family-primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: var(--cpx-text);
}

/* ============================================================
   SECTION 03 — 形象影片
   ============================================================ */
main .cpx-video-section {
  padding: 64px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
main .cpx-video-section__title {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.4;
  color: var(--cpx-primary-dark);
  text-align: center;
}
main .cpx-video-section__video {
  width: 720px;
  height: 405px;
  background: linear-gradient(135deg, #2877b5, #535a6d);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
main .cpx-video-section__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
main .cpx-video-section__video iframe[data-pending-video="true"][src=""] {
  display: none;  /* 還沒填影片網址時隱藏 iframe */
}
main .cpx-video-section__video iframe[data-pending-video="true"][src=""] ~ .cpx-video-section__placeholder {
  display: flex;  /* 沒影片時顯示提示 */
}
main .cpx-video-section__placeholder {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 24px;
}
main .cpx-video-section__placeholder small { opacity: 0.7; font-size: 12px; }

/* ============================================================
   SECTION 04 — 預約系統
   ============================================================ */
main .cpx-booking-section {
  padding: 64px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
main .cpx-booking-section__title {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.4;
  color: var(--cpx-primary-dark);
  text-align: center;
}
main .cpx-booking-section__cal {
  width: 100%;
  max-width: 880px;
  min-height: 620px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(40, 119, 181, 0.15);
  overflow: hidden;
  /* Cal.com 元件會自己撐高度，這邊只給最低值避免 layout shift */
}

/* ============================================================
   SECTION 05 — 地圖 + 展覽資訊
   ============================================================ */
main .cpx-info-section {
  padding: 64px 80px;
  display: flex;
  gap: 64px;
  align-items: center;
}
main .cpx-info-section__map {
  flex: 1;
  aspect-ratio: 760 / 490;
  background-image: url('/assets/images/computex2026/section5_map.jpg');
  background-size: cover;
  background-position: center;
  /* 依用戶要求：地圖不要圓角 */
  position: relative;
  overflow: hidden;
}
main .cpx-info-section__map::before {
  /* 不再需要佔位文字 */
  content: "";
  display: none;
}
main .cpx-info-section__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}
main .cpx-info-section__location {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
}
main .cpx-info-section__location h2 { margin-left: 0;}
main .cpx-info-section__heading {
  font-family: var(--font-family-primary);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
}
main .cpx-info-section__address {
  display: flex;
  gap: 8px;
  align-items: center;
}
main .cpx-info-section__address-icon {
  width: 24px; height: 24px;
  color: var(--cpx-primary-dark);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
main .cpx-info-section__address-icon svg {
  width: 100%; height: 100%; display: block;
}
main .cpx-info-section__address a {
  font-family: var(--font-family-primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: var(--cpx-primary-dark);
  text-decoration: underline;
}
main .cpx-info-section__time {
  padding-left: 32px;
  font-family: var(--font-family-primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: #fff;
  letter-spacing: 0.5px;
  margin-left: 0;
}
main .cpx-info-section__time p { margin: 0; }
main .cpx-info-section__booth {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
}
main .cpx-info-section__booth-text {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
}
/* 第二個三角朝左 */
main .cpx-info-section__booth .cpx-arrow--triangle:last-child {
  transform: scaleX(-1);
}

/* ============================================================
   SECTION 06 — Footer CTA
   ============================================================ */
main .cpx-footer-cta {
  padding: 72px 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
main .cpx-footer-cta::before {
  /* 真實背景圖 imgSection06 */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/computex2026/section6_cta_desktop.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
main .cpx-footer-cta__title {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  color: var(--cpx-primary-dark);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
main .cpx-footer-cta .cpx-booking-btn {
  position: relative;
  z-index: 1;
}

/* ============================================================
   ================== 響應式：Tablet ≤ 1180px ===================
   ============================================================ */
@media screen and (max-width: 1180px) {

  /* Demo nav 縮減 */

/* Section 01 Hero 字級 */
  main .cpx-hero {
    min-height: 920px;
    padding: 64px 40px;
    background-image: url('/assets/images/computex2026/section1_hero_tablet.jpg');
  }
  main .cpx-hero__subtitle { font-size: 32px; }
  main .cpx-hero__title { font-size: 68px; }
  main .cpx-hero__info { font-size: 24px; }

  /* ----- Section 02 Carousel (Tablet) -----
     桌面是 3 卡並排各 hover；tablet 變 carousel：
       - 卡片 desktop 尺寸 (352×318) absolute 定位
       - center 在中、left/right 縮小 + 漸層淡化
       - 點側卡 → 該卡輪轉到 center
       - 點 center → toggle flip (front ↔ back)
       - 全域 flip state 記憶於 [data-flip]
       - 5 秒自動輪轉（4K/60Hz → 1 to 4）
  */
  main .cpx-products {
    position: relative;
    height: 360px;
    padding: 72px 0;
    overflow: hidden;
    /* 取消 desktop flex */
    display: block;
    margin-top: 72px;
  }
  main .cpx-products .cpx-card {
    position: absolute;
    top: 50%; left: 50%;
    width: 352px; height: 318px;
    transition:
      transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      opacity   0.4s ease;
    will-change: transform;
  }
  .cpx-products[data-pos="0"] .cpx-card[data-card="1"],
  .cpx-products[data-pos="1"] .cpx-card[data-card="3"],
  main .cpx-products[data-pos="2"] .cpx-card[data-card="2"] {
    /* 在 center */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; z-index: 3;
  }
  .cpx-products[data-pos="0"] .cpx-card[data-card="3"],
  .cpx-products[data-pos="1"] .cpx-card[data-card="2"],
  main .cpx-products[data-pos="2"] .cpx-card[data-card="1"] {
    /* 在 left */
    transform: translate(calc(-50% - 280px), -50%) scale(0.85);
    opacity: 0.7; z-index: 2;
  }
  .cpx-products[data-pos="0"] .cpx-card[data-card="2"],
  .cpx-products[data-pos="1"] .cpx-card[data-card="1"],
  main .cpx-products[data-pos="2"] .cpx-card[data-card="3"] {
    /* 在 right */
    transform: translate(calc(-50% + 280px), -50%) scale(0.85);
    opacity: 0.7; z-index: 2;
  }

  /* 側卡漸層淡化 overlay（在 front 內層上面，蓋住整張） */
  main .cpx-products .cpx-card::after {
    content: ''; position: absolute; inset: 6px;
    border-radius: 20px;
    background: linear-gradient(180deg,
      rgba(118, 175, 224, 0.5) 0%,
      rgba(118, 175, 224, 0.15) 35%,
      rgba(118, 175, 224, 0.15) 65%,
      rgba(118, 175, 224, 0.5) 100%);
    pointer-events: none;
    z-index: 4;  /* 蓋在玻璃反光跟漸層邊框上 */
    opacity: 1;
    transition: opacity 0.4s ease;
  }
  /* center 卡片無 overlay */
  .cpx-products[data-pos="0"] .cpx-card[data-card="1"]::after,
  .cpx-products[data-pos="1"] .cpx-card[data-card="3"]::after,
  main .cpx-products[data-pos="2"] .cpx-card[data-card="2"]::after {
    opacity: 0;
  }

  /* tablet/mobile 用 [data-flip] 控制 center/front 卡的 front↔back */
  /* 取消 desktop 的 :hover 觸發（觸控裝置 hover 無效，但 mouse 縮窗仍會觸發，明確覆寫）*/
  main .cpx-card:hover .cpx-card__front {
    flex-grow: 1; padding: 40px 20px;
    box-shadow: 0 0 6px 4px rgba(118, 175, 224, 0.2);
    opacity: 1;
  }
  main .cpx-card:hover .cpx-card__front::after { opacity: 1; }
  main .cpx-card:hover .cpx-card__back {
    flex-grow: 0; padding: 0 20px;
    box-shadow: 0 0 6px 4px rgba(118, 175, 224, 0);
    opacity: 0;
  }

  /* center 卡片在 back state 顯示 back 面 */
  .cpx-products[data-flip="back"][data-pos="0"] .cpx-card[data-card="1"] .cpx-card__front,
  .cpx-products[data-flip="back"][data-pos="1"] .cpx-card[data-card="3"] .cpx-card__front,
  main .cpx-products[data-flip="back"][data-pos="2"] .cpx-card[data-card="2"] .cpx-card__front {
    flex-grow: 0; padding: 0 20px;
    box-shadow: 0 0 6px 4px rgba(118, 175, 224, 0);
    opacity: 0;
  }
  .cpx-products[data-flip="back"][data-pos="0"] .cpx-card[data-card="1"] .cpx-card__front::after,
  .cpx-products[data-flip="back"][data-pos="1"] .cpx-card[data-card="3"] .cpx-card__front::after,
  main .cpx-products[data-flip="back"][data-pos="2"] .cpx-card[data-card="2"] .cpx-card__front::after {
    opacity: 0;
  }
  .cpx-products[data-flip="back"][data-pos="0"] .cpx-card[data-card="1"] .cpx-card__back,
  .cpx-products[data-flip="back"][data-pos="1"] .cpx-card[data-card="3"] .cpx-card__back,
  main .cpx-products[data-flip="back"][data-pos="2"] .cpx-card[data-card="2"] .cpx-card__back {
    flex-grow: 1; padding: 40px 20px;
    box-shadow: 0 0 6px 4px rgba(118, 175, 224, 0.2);
    opacity: 1;
  }

  /* Section 03 影片 */
  main .cpx-video-section { padding: 72px 40px; }
  main .cpx-video-section__title { font-size: 32px; }
  main .cpx-video-section__video { width: 720px; max-width: 100%; }

  /* Section 04 booking */
  main .cpx-booking-section { padding: 64px 40px; }
  main .cpx-booking-section__title { font-size: 32px; }
  main .cpx-booking-section__cal { max-width: 720px; }

  /* Section 05 location（改為垂直堆疊）*/
  main .cpx-info-section {
    flex-direction: column;
    padding: 64px 80px;
    gap: 32px;
    align-items: center;
  }
  main .cpx-info-section__map {
    width: 540px; max-width: 100%;
    flex: none;
    aspect-ratio: 540 / 348;
    order: 1;
  }
  main .cpx-info-section__heading { font-size: 32px; }
  main .cpx-info-section__text { align-items: center; }
  main .cpx-info-section__location { 
    align-items: center; 
    margin-left: auto;
  }
  main .cpx-info-section__location h2{
    margin-left: auto;
  }
  .cpx-info-section__time-list p,
  main .cpx-info-section__time { text-align: center; font-size: 20px; margin-left: auto; padding-left: 0;}
  main .cpx-info-section__booth { font-size: 24px; margin-left: auto; order: 2;}

  /* Section 06 CTA */
  main .cpx-footer-cta { padding: 72px 40px; }
  main .cpx-footer-cta::before {
    background-image: url('/assets/images/computex2026/section6_cta_tablet.jpg');
  }
  main .cpx-footer-cta__title { font-size: 32px; white-space: normal; text-align: center; }
}

/* ============================================================
   ================== 響應式：Mobile ≤ 720px ====================
   ============================================================ */
@media screen and (max-width: 720px) {

  main .cpx-info-section__booth-text { font-size: 20px;}

/* Hero */
  main .cpx-hero {
    min-height: 720px;
    padding: 32px 16px;
    background-image: url('/assets/images/computex2026/section1_hero_mobile.jpg');
  }
  main .cpx-hero__inner { gap: 32px; }
  main .cpx-hero__subtitle { font-size: 24px; }
  main .cpx-hero__title { font-size: 36px; }
  main .cpx-hero__info { font-size: 18px; white-space: normal; }
  /* mobile 切換到雙行 Phone 版本 hero info */
  main .cpx-hero__info--pc { display: none; }
  main .cpx-hero__info--mobile { display: block; }
  main .cpx-hero__buttons { gap: 8px; }
  main .cpx-booking-btn { font-size: 16px; }

  /* ----- Section 02 Carousel (Mobile STACK) -----
     疊牌：back / mid / front 三層
     - 點 mid / back → 該卡輪轉到 front
     - 點 front → toggle flip
     - 5 秒自動輪轉
     - 非 front 卡：隱藏 icon + sub，加漸層淡化
     - 容器高度 64 + 515 (Figma carousel) + 64 = 643，卡片 top 值都 +64 補上padding 偏移
       （absolute children 不受 padding 推動，所以 top 值要自己算進去 padding offset）
  */
  main .cpx-products {
    height: 643px;
    padding: 64px 16px;
  }
  main .cpx-products .cpx-card {
    /* 重置 tablet 的 absolute 定位轉換 */
    top: auto; left: auto; right: auto;
    width: auto; height: 318px;
    transform: none;
    opacity: 1;
    transition:
      top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      right 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.5s ease,
      opacity 0.4s ease,
      box-shadow 0.4s ease;
  }
  /* 重置 tablet 的位置規則（避免汙染） */
  .cpx-products[data-pos="0"] .cpx-card,
  .cpx-products[data-pos="1"] .cpx-card,
  main .cpx-products[data-pos="2"] .cpx-card {
    transform: none;
  }

  /* mobile 用 data-pos 推算每張卡的 stack 位置
     ⚠ tablet @media 的 transform/scale/opacity rule 在此 breakpoint 也會生效，
        且 specificity 跟以下 rule 一樣（同為 0,4,0），所以必須在這裡每個 rule 都
        把 transform / opacity / width 明確覆寫掉，避免 transform 把卡片拉走畫面中線
     ⚠ top 值 = Figma 內 carousel 內坐標 + 64px (.cpx-products 的 top padding) */

  /* front position (Figma top: 197 → +64 = 261) */
  .cpx-products[data-pos="0"] .cpx-card[data-card="1"],
  .cpx-products[data-pos="1"] .cpx-card[data-card="3"],
  main .cpx-products[data-pos="2"] .cpx-card[data-card="2"] {
    top: 261px; left: 10px; right: 10px;
    width: auto; transform: none; opacity: 1;
    z-index: 3;
  }
  /* mid position (Figma top: 90 → +64 = 154) */
  .cpx-products[data-pos="0"] .cpx-card[data-card="2"],
  .cpx-products[data-pos="1"] .cpx-card[data-card="1"],
  main .cpx-products[data-pos="2"] .cpx-card[data-card="3"] {
    top: 154px; left: 16px; right: 16px;
    width: auto; transform: none; opacity: 1;
    z-index: 2;
  }
  /* back position (Figma top: 0 → +64 = 64) */
  .cpx-products[data-pos="0"] .cpx-card[data-card="3"],
  .cpx-products[data-pos="1"] .cpx-card[data-card="2"],
  main .cpx-products[data-pos="2"] .cpx-card[data-card="1"] {
    top: 64px; left: 22px; right: 22px;
    width: auto; transform: none; opacity: 1;
    z-index: 1;
  }

  /* 非 front 卡：漸層淡化 overlay（tablet rule 已存在，這裡只調強度） */
  /* （tablet ::after 已生效，此處不需重複）*/

  /* 非 front 卡：隱藏 icon + sub，內容靠頂讓文字可見 */
  .cpx-products[data-pos="0"] .cpx-card:not([data-card="1"]) .cpx-card__icon,
  .cpx-products[data-pos="1"] .cpx-card:not([data-card="3"]) .cpx-card__icon,
  main .cpx-products[data-pos="2"] .cpx-card:not([data-card="2"]) .cpx-card__icon {
    display: none;
  }
  .cpx-products[data-pos="0"] .cpx-card:not([data-card="1"]) .cpx-card__spec-sub,
  .cpx-products[data-pos="1"] .cpx-card:not([data-card="3"]) .cpx-card__spec-sub,
  main .cpx-products[data-pos="2"] .cpx-card:not([data-card="2"]) .cpx-card__spec-sub {
    display: none;
  }
  .cpx-products[data-pos="0"] .cpx-card:not([data-card="1"]) .cpx-card__front,
  .cpx-products[data-pos="1"] .cpx-card:not([data-card="3"]) .cpx-card__front,
  main .cpx-products[data-pos="2"] .cpx-card:not([data-card="2"]) .cpx-card__front {
    justify-content: flex-start;
    padding-top: 32px;
  }

  /* front 卡 flip 狀態 — selector 跟 tablet 一樣可用 */
  /* （tablet [data-flip=back] 規則已包含，這裡無需重複）*/

  /* 卡片 spec 字級調整 */
  main .cpx-card__spec-large { font-size: 40px; }
  body[data-lang="EN"] main .cpx-card__spec-large .small { font-size: 24px; }
  main .cpx-card__spec-sub { font-size: 24px; }
  main .cpx-card__title-only { font-size: 24px; line-height: 1.3; }
  /* Mobile back face 字級對齊 Figma（product-name 32 / desc 20 / 用更鬆的 gap 12） */
  main .cpx-card__product-name { font-size: 32px; }
  main .cpx-card__desc { font-size: 20px; }
  main .cpx-card__back { gap: 12px; }

  /* Section 03 */
  main .cpx-video-section { padding: 64px 16px; gap: 32px; }
  main .cpx-video-section__title { font-size: 24px; }
  main .cpx-video-section__video { aspect-ratio: 16/9; width: 100%; }

  /* Section 04 */
  main .cpx-booking-section { padding: 64px 16px; }
  main .cpx-booking-section__title { font-size: 24px; }
  main .cpx-booking-section__cal { min-height: 640px; }

  /* Section 05 */
  main .cpx-info-section { padding: 64px 16px; }
  main .cpx-info-section__map { width: 100%; aspect-ratio: 760 / 490; }
  main .cpx-info-section__heading { font-size: 24px; }
  main .cpx-info-section__address a { font-size: 16px; margin-top: 8px;}
  main .cpx-info-section__booth { font-size: 18px; }

  /* Section 06 */
  main .cpx-footer-cta { padding: 64px 16px; }
  main .cpx-footer-cta::before {
    background-image: url('/assets/images/computex2026/section6_cta_mobile.jpg');
  }
  main .cpx-footer-cta__title { font-size: 24px; }
}