/* 第五版 v3：跨平台文字安全層
   目標：不同瀏覽器、LINE 內建瀏覽器、Android、摺疊機與平板字體計算不同時，
   讓文字優先保持完整顯示，不被容器邊界裁切。 */

:root {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html.textsafe-active body {
  overflow-x: hidden;
}

[data-textsafe="true"] {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  text-rendering: geometricPrecision;
}

.textsafe-heading {
  padding-top: 0.04em;
  padding-bottom: 0.08em;
  line-height: 1.16;
  word-break: keep-all;
  line-break: strict;
}

.textsafe-body {
  line-height: 1.62;
  word-break: normal;
  overflow-wrap: break-word;
}

.textsafe-button {
  white-space: nowrap;
  line-height: 1.25;
}

[data-textsafe="true"].textsafe-force-wrap {
  white-space: normal !important;
  word-break: normal !important;
  line-break: auto !important;
  overflow-wrap: anywhere !important;
  text-wrap: pretty;
}

.textsafe-overflow {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

.textsafe-overflow.flow-card,
.textsafe-overflow.price-card,
.textsafe-overflow.scenario-row,
.textsafe-overflow.contact-inner {
  padding-bottom: max(18px, 1.2rem);
}

.textsafe-overflow .story-body,
.textsafe-overflow .scenario-copy,
.textsafe-overflow .features p {
  overflow: visible !important;
}

:where(.hero-content,
  .story-opening-copy,
  .milestone-heading,
  .story-flow-v4 .flow-card,
  .product-heading,
  .price-card,
  .scenario-copy,
  .features article,
  .contact-inner,
  .contact-actions) {
  min-width: 0;
}

:where(.hero h1 span,
  .anniversary-mark,
  .story-opening-copy h2,
  .story-finale h2,
  .milestone-heading h2,
  .story-flow-v4 .flow-card h3,
  .product-heading h2,
  .feature-heading h2,
  .scenario-copy h3,
  .contact h2) {
  overflow: visible !important;
}

/* 2010 時間軸圖片：使用已重新生成的橫式安全構圖，不再依賴偏移裁切 */
.story-flow-v4 .flow-card-03 figure.story-visual-photo img {
  object-position: center center !important;
  object-fit: cover !important;
}

@media (max-width: 900px) {
  .story-flow-v4 .flow-card-03 figure.story-visual-photo img {
    object-position: center center !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  .textsafe-heading {
    line-height: 1.16;
  }

  .textsafe-body {
    line-height: 1.62;
  }

  .story-flow-v4 .flow-card.is-open .story-body,
  .story-flow-v4 .flow-card .story-body {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

@media (max-width: 430px) {
  .story-flow-v4 .flow-card-03 figure.story-visual-photo img {
    object-position: center center !important;
  }

  .textsafe-force-wrap.textsafe-button {
    white-space: normal !important;
  }
}

/* 價格區維持第四版原始票券比例；這裡只保護價格不被不同瀏覽器拆行。 */
.price-card b,
.price-card b[data-textsafe="true"],
.price-card b.textsafe-force-wrap {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
}

/* E350 價格票券：761px 以上完整還原第四版原始桌機比例。 */
@media (min-width: 761px) {
  .price-card {
    box-sizing: border-box !important;
    grid-template-columns: minmax(260px, 0.95fr) minmax(330px, 1.05fr) !important;
    grid-template-areas:
      "old price"
      "label price"
      "note note" !important;
    align-items: center !important;
    column-gap: clamp(44px, 6vw, 84px) !important;
    row-gap: 10px !important;
    width: min(100%, 880px) !important;
    max-width: 880px !important;
    margin: 24px auto 0 !important;
    padding: clamp(24px, 3.4vw, 40px) clamp(28px, 4.4vw, 52px) clamp(24px, 3.4vw, 38px) !important;
    transform: none !important;
  }

  .price-card > span {
    grid-area: old !important;
    white-space: nowrap !important;
    align-self: end !important;
  }

  .price-card > em {
    grid-area: label !important;
    white-space: nowrap !important;
    align-self: start !important;
  }

  .price-card > b,
  .price-card > b[data-textsafe="true"],
  .price-card > b.textsafe-force-wrap {
    grid-area: price !important;
    justify-self: end !important;
    align-self: end !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 0 4px !important;
    text-align: right !important;
    letter-spacing: 0.018em !important;
    font-size: clamp(62px, 8.3vw, 112px) !important;
    line-height: 0.86 !important;
    font-weight: 760 !important;
    transform-origin: 100% !important;
    transform: scaleX(1.035) !important;
  }

  .price-card > small {
    grid-area: note !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    padding: 14px 0 0 !important;
    text-align: left !important;
    border-top: 1px solid #fff5d62e !important;
  }
}

/* Mac／桌機：維持第四版 880px 票券，只校正票券內部比例，避免價格末碼被裁切。 */
@media (min-width: 1181px) {
  .price-card {
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr) !important;
    column-gap: clamp(24px, 3vw, 44px) !important;
  }

  .price-card > b,
  .price-card > b[data-textsafe="true"],
  .price-card > b.textsafe-force-wrap {
    letter-spacing: 0.004em !important;
    font-size: clamp(88px, 7.4vw, 104px) !important;
    transform: none !important;
  }
}

/* 平板／展開式螢幕：保留第四版票券，只移除造成末碼裁切的橫向拉伸。 */
@media (min-width: 761px) and (max-width: 1180px) {
  .price-card > b,
  .price-card > b[data-textsafe="true"],
  .price-card > b.textsafe-force-wrap {
    letter-spacing: 0.006em !important;
    transform: none !important;
  }
}

/* 週年活動入口：修正 Safari／行動瀏覽器中掃光溢出成硬邊斜色塊的問題。 */
.e350-cta-group {
  isolation: isolate !important;
  position: relative !important;
}

.e350-main-cta,
.early-bird-cta {
  isolation: isolate !important;
  overflow: hidden !important;
  contain: paint !important;
  clip-path: inset(0 round 999px) !important;
  -webkit-clip-path: inset(0 round 999px) !important;
}

.e350-main-cta::before {
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.28 !important;
  inset: -18% -10% !important;
  background: linear-gradient(105deg, transparent 39%, rgba(255, 255, 255, 0.62) 49%, transparent 59%) !important;
  animation-duration: 6.4s !important;
}

.early-bird-cta::before {
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.16 !important;
  inset: 0 !important;
  background: radial-gradient(circle at 28% 24%, rgba(240, 209, 139, 0.24), transparent 42%) !important;
  animation: none !important;
  transform: none !important;
}

.e350-main-cta > span,
.early-bird-cta > small,
.early-bird-cta > b,
.early-bird-cta > span {
  z-index: 1 !important;
  position: relative !important;
}

.final-conversion {
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(240, 209, 139, 0.12), transparent 48%),
    linear-gradient(#0c2b21 0%, #05140f 100%) !important;
}

@media (max-width: 760px) {
  .e350-main-cta::before {
    opacity: 0.2 !important;
    inset: -10% -6% !important;
  }

  .early-bird-cta::before {
    opacity: 0.12 !important;
  }
}

/* Samsung Galaxy Z Fold：外螢幕與展開螢幕各自處理。
   規則必須同時符合 Samsung Fold 標記與對應尺寸，避免影響 iPhone、Mac 與一般平板。 */

/* 展開後內螢幕（目前實機回報 884 × 1104）。 */
@media (min-width: 840px) and (max-width: 920px) and (min-height: 980px) and (max-height: 1160px) {
  html.samsung-fold-open {
    --gutter: 32px;
  }

  html.samsung-fold-open body,
  html.samsung-fold-open .story,
  html.samsung-fold-open .e350 {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  html.samsung-fold-open .story-opening,
  html.samsung-fold-open .milestone-heading,
  html.samsung-fold-open .product-heading,
  html.samsung-fold-open .feature-heading {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html.samsung-fold-open .milestone-heading {
    padding-inline: 32px !important;
  }

  /* 橫向時間軸固定顯示兩張完整卡片，第三張不再被切一半。 */
  html.samsung-fold-open .timeline-cards {
    box-sizing: border-box !important;
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    margin-inline: 18px !important;
    padding: 0 0 10px !important;
    gap: 18px !important;
    scroll-padding-inline: 0 !important;
  }

  html.samsung-fold-open .story-flow-v4 .flow-card {
    box-sizing: border-box !important;
    flex: 0 0 calc((100% - 18px) / 2) !important;
    width: calc((100% - 18px) / 2) !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html.samsung-fold-open .story-flow-v4 .flow-card h3 {
    font-size: clamp(25px, 3.35vw, 30px) !important;
    line-height: 1.28 !important;
  }

  /* 兩個活動入口各占一半，避免主按鈕被文字安全層縮得過小。 */
  html.samsung-fold-open .e350-cta-group {
    box-sizing: border-box !important;
    width: min(calc(100% - 64px), 780px) !important;
    max-width: 780px !important;
    gap: 12px !important;
  }

  html.samsung-fold-open .e350-cta-group .e350-main-cta,
  html.samsung-fold-open .e350-cta-group .early-bird-cta {
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: 22px !important;
  }

  html.samsung-fold-open .e350-main-cta {
    justify-content: center !important;
    font-size: 16px !important;
    white-space: nowrap !important;
  }

  html.samsung-fold-open .e350-main-cta::before {
    inset: 0 !important;
  }

  html.samsung-fold-open .price-card {
    width: min(calc(100% - 64px), 780px) !important;
    max-width: 780px !important;
  }

  html.samsung-fold-open .scenario-gallery {
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
  }
}

/* 摺疊後外螢幕：保留既有手機視覺，只加入 Samsung Fold 專屬文字與寬度保護。 */
@media (max-width: 699px) {
  html.samsung-fold-cover {
    --gutter: 18px;
  }

  html.samsung-fold-cover body,
  html.samsung-fold-cover main,
  html.samsung-fold-cover section {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  html.samsung-fold-cover :where(
    .hero-content,
    .story-opening-copy,
    .milestone-heading,
    .product-heading,
    .feature-heading,
    .scenario-copy,
    .contact-inner
  ) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html.samsung-fold-cover :where(
    .story-opening-copy h2,
    .milestone-heading h2,
    .story-flow-v4 .flow-card h3,
    .feature-heading h2,
    .scenario-copy h3
  ) {
    word-break: keep-all !important;
    line-break: strict !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
  }

  html.samsung-fold-cover .timeline-cards {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    scroll-padding-inline: 0 !important;
  }

  html.samsung-fold-cover .story-flow-v4 .flow-card {
    box-sizing: border-box !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html.samsung-fold-cover .e350-cta-group,
  html.samsung-fold-cover .e350-cta-group .e350-main-cta,
  html.samsung-fold-cover .e350-cta-group .early-bird-cta {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html.samsung-fold-cover .e350-main-cta::before {
    inset: 0 !important;
  }
}