/*
 * Hero 主視覺：有圖時桌機左文右圖、圖片直接放在區段底色上（無框、無底色）；
 * 手機標題、插圖、副標、按鈕依序排，圖片縮小；沒有圖片時單欄置中。
 */
.lws-hero .lws-hero__inner {
  text-align: center;
}
.lws-hero .lws-hero__title {
  max-width: 14em;
  margin-inline: auto;
  font-size: var(--text-3xl);
}
.lws-hero .lws-hero__subtitle {
  max-width: var(--layout-narrow);
  margin: var(--space-5) auto 0;
  color: var(--s-soft);
  font-size: var(--text-md);
  text-wrap: pretty;
}
.lws-hero .lws-actions {
  margin-top: var(--space-6);
}
/* 按鈕下方小字（例：折扣碼提示）：粗體字加橘色底線標出重點，不用橘字（淺底上對比不足） */
.lws-hero .lws-hero__note {
  margin: var(--space-3) 0 0;
  color: var(--s-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
.lws-hero .lws-hero__note strong {
  color: var(--s-fg);
  text-decoration: underline 2px var(--s-accent);
  text-underline-offset: var(--space-1);
}
.lws-hero .lws-hero__media {
  margin: 0;
}
.lws-hero .lws-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--layout-media-max);
  object-fit: contain;
}
.lws-hero.has-media .lws-hero__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-7);
  text-align: left;
}
.lws-hero.has-media .lws-hero__title,
.lws-hero.has-media .lws-hero__subtitle {
  margin-inline: 0;
}
.lws-hero.has-media .lws-actions {
  justify-content: flex-start;
}

/*
 * 液態背景（background 設為 liquid）：區段加高、內容垂直置中，文字浮在背景上所以加陰影。
 * 底色先墊靜態漸層 --gradient-liquid；assets/hero-liquid.js 開始畫之後加上 is-liquid-live，
 * <canvas> 才淡入蓋住靜態漸層。腳本沒執行、使用者關閉動態效果時就停在靜態漸層。
 */
.lws-hero.has-liquid {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--layout-hero-tall);
  overflow: hidden;
  background: var(--gradient-liquid), var(--s-bg);
}
.lws-hero .lws-hero__liquid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.lws-hero.is-liquid-live .lws-hero__liquid {
  opacity: 1;
}
.lws-hero.has-liquid .lws-hero__inner {
  position: relative;
  margin-block: auto;
  text-shadow: var(--shadow-text);
}
.lws-hero.has-liquid .lws-btn {
  text-shadow: none;
}
/* 小標籤在色塊上讀不清楚，改成實心的強調色標籤 */
.lws-hero.has-liquid .lws-eyebrow {
  border-color: var(--s-accent);
  background: var(--s-accent);
  color: var(--s-accent-fg);
  font-weight: 700;
  text-shadow: none;
}
.lws-hero.has-liquid .lws-hero__title {
  font-size: var(--text-4xl);
}
.lws-hero.has-liquid .lws-hero__subtitle,
.lws-hero.has-liquid .lws-hero__note {
  color: var(--s-fg);
}
.lws-hero.has-liquid .lws-hero__subtitle strong {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
}
/*
 * 液態背景上的重點字：字色不變，底下畫一條強調色底線（背景本身已經很花，不再換字色）。
 * 原本是半透明色帶，但大字的行高比字身高，色帶會偏到字的下方、看起來像選取反白，改用底線貼齊字身。
 */
.lws-hero.has-liquid .lws-hero__title strong {
  color: var(--s-fg);
  text-decoration-line: underline;
  text-decoration-color: var(--s-accent);
  text-decoration-thickness: var(--space-1);
  text-underline-offset: var(--space-2);
  text-decoration-skip-ink: none;
}

/* 跑馬燈：兩份內容並排，整條往左移半條的寬度後接回起點，看起來不會斷 */
@keyframes lws-marquee {
  to {
    transform: translateX(-50%);
  }
}
.lws-hero .lws-hero__marquee {
  position: relative;
  margin-top: var(--space-7);
  overflow: hidden;
  color: var(--s-muted);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.lws-hero .lws-hero__marquee-track {
  display: flex;
  justify-content: center;
}
.lws-hero .lws-hero__marquee-group {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lws-hero .lws-hero__marquee-group li {
  padding-inline: var(--space-5);
  border-inline-start: 1px solid var(--s-line);
}
/* 沒有動態時只顯示一份、置中折行；第二份只在會捲動時才需要 */
.lws-hero .lws-hero__marquee-group[aria-hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .lws-hero .lws-hero__marquee-track {
    justify-content: flex-start;
    width: max-content;
    animation: lws-marquee var(--duration-marquee) linear infinite;
  }
  .lws-hero .lws-hero__marquee-group,
  .lws-hero .lws-hero__marquee-group[aria-hidden] {
    display: flex;
    flex-wrap: nowrap;
  }
  /* 色帶由左往右刷出（進場時機由 assets/motion.js 加上 is-inview） */
  .lws-motion .lws-hero.has-liquid .lws-hero__title strong {
    transition: background-size var(--duration-slow) var(--ease-standard) var(--duration-base);
  }
  .lws-motion .lws-hero.has-liquid .lws-hero__title strong:not(.is-inview) {
    background-size: 0 100%;
  }
}
@media (max-width: 767px) {
  /* 手機標題用 xl：360px 寬也能讓「讓 AI 當你的 AM，」排在同一行 */
  .lws-hero .lws-hero__title {
    font-size: var(--text-xl);
  }
  .lws-hero.has-liquid .lws-hero__title {
    font-size: var(--text-2xl);
  }
  .lws-hero .lws-actions .lws-btn {
    flex: 1 1 100%;
  }
  /* 手機有圖時：標題 → 插圖 → 副標 → 按鈕，插圖夾在中間，主按鈕留在第一屏 */
  .lws-hero.has-media .lws-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .lws-hero.has-media .lws-hero__content {
    display: contents;
  }
  .lws-hero.has-media .lws-eyebrow {
    justify-self: start;
  }
  .lws-hero.has-media .lws-hero__media {
    order: 1;
    margin-top: var(--space-5);
  }
  .lws-hero.has-media .lws-hero__subtitle,
  .lws-hero.has-media .lws-actions,
  .lws-hero.has-media .lws-hero__note {
    order: 2;
  }
  .lws-hero .lws-hero__media img {
    max-height: calc(var(--layout-media-max-sm) * 0.6);
    margin-inline: auto;
  }
}