/* 服務／特色卡片：圖示與標籤一列、標題、說明、勾選清單，按鈕貼齊卡片底部 */
.lws-features .lws-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.lws-features .lws-feature__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.lws-features .lws-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--fg);
}
.lws-features .lws-feature__icon svg {
  width: var(--space-5);
  height: var(--space-5);
}
/* emoji 圖示：不用底色方塊，字放大 */
.lws-features .lws-feature__icon--emoji {
  width: auto;
  height: auto;
  background: none;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}
.lws-features .lws-feature__title {
  margin: 0;
  color: var(--s-fg);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
}
.lws-features .lws-feature__desc {
  margin: 0;
  color: var(--s-soft);
  font-size: var(--text-base);
}
.lws-features .lws-feature .lws-checklist {
  padding-top: var(--space-4);
  border-top: 1px solid var(--s-line);
}
.lws-features .lws-feature .lws-btn,
.lws-features .lws-feature .lws-btn-wrap {
  margin-top: auto;
}
/* 卡片格下方的結語：置中、限寬 */
.lws-features .lws-features__footnote {
  max-width: var(--layout-narrow);
  margin: var(--space-6) auto 0;
  color: var(--s-fg);
  font-size: var(--text-md);
  text-align: center;
}
/*
 * 步驟排法（steps）：卡片上方一條進度線，標籤改成實心。桌機橫向；平板以下卡片改單欄、線改到左側直向。
 * 線的長度由 --lws-progress（0～1）決定，assets/motion.js 依捲動位置寫入並替走到的卡片加 is-reached；
 * 腳本沒執行時 --lws-progress 沒有值，線直接畫滿、標籤全部實心。還沒走到時變淡的樣式在 blocks-base.css。
 */
.lws-features .lws-grid.lws-grid--steps {
  position: relative;
  padding-top: var(--space-5);
}
.lws-features .lws-grid--steps::before,
.lws-features .lws-grid--steps::after {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--s-line);
  content: "";
}
.lws-features .lws-grid--steps::after {
  background: var(--s-strong);
  transform: scaleX(var(--lws-progress, 1));
  transform-origin: left center;
}
.lws-features .lws-grid--steps .lws-badge {
  border-color: var(--s-accent);
  background: var(--s-accent);
  color: var(--s-accent-fg);
  font-weight: 700;
}
@media (max-width: 1023px) {
  .lws-features .lws-grid.lws-grid--steps {
    --cols: 1;
    padding-top: 0;
    padding-left: var(--space-5);
  }
  .lws-features .lws-grid--steps::before,
  .lws-features .lws-grid--steps::after {
    inset: 0 auto 0 0;
    width: 2px;
    height: auto;
  }
  .lws-features .lws-grid--steps::after {
    transform: scaleY(var(--lws-progress, 1));
    transform-origin: center top;
  }
}
/*
 * 列表排法（rows）：不畫卡片、不畫分隔線，一項一列。桌機標題放大在左、說明與清單在右；
 * 列與列之間只靠留白分開。平板以下改上下排。
 */
.lws-features .lws-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  max-width: var(--layout-content);
  margin-inline: auto;
}
.lws-features .lws-feature--row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-4) var(--space-7);
  align-items: start;
}
.lws-features .lws-feature--row .lws-feature__head {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
.lws-features .lws-feature--row .lws-feature__title {
  font-size: var(--text-xl);
}
.lws-features .lws-feature--row .lws-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.lws-features .lws-feature--row .lws-feature__desc {
  font-size: var(--text-md);
}
.lws-features .lws-feature--row .lws-checklist {
  padding-top: 0;
  border-top: 0;
}
@media (max-width: 1023px) {
  .lws-features .lws-feature--row {
    grid-template-columns: 1fr;
  }
}
/* 手機：列表標題和區段標題原本一樣大，降兩級；說明改回內文大小，列與列間距收一點 */
@media (max-width: 767px) {
  .lws-features .lws-rows {
    gap: var(--space-6);
  }
  .lws-features .lws-feature--row {
    gap: var(--space-3);
  }
  .lws-features .lws-feature--row .lws-feature__title {
    font-size: var(--text-lg);
  }
  .lws-features .lws-feature--row .lws-feature__desc,
  .lws-features .lws-features__footnote {
    font-size: var(--text-base);
  }
}
/*
 * 卡牌排法（deck）：左圖右文的大卡，平板以下改上圖下文。
 * 沒有動畫時卡片上下排開；有動畫時（html.lws-motion）卡片疊在同一格，外框多留出捲動距離，
 * 疊好的卡片黏在畫面上，assets/motion.js 依捲動位置直接寫每張卡的 transform：最上面那張往右抽走、後面的往前補上。
 * 每張卡分到的捲動距離是 --lws-deck-step；外框高度＝卡片高度＋（張數－1）×每張的距離。
 */
.lws-features .lws-deck {
  --lws-deck-step: var(--layout-deck-step);
  max-width: var(--layout-content);
  margin-inline: auto;
}
.lws-features .lws-deck__stage {
  display: grid;
  gap: var(--space-6);
}
.lws-features .lws-deck__card {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-6);
  align-items: center;
  box-shadow: var(--shadow-sm);
}
/* 純文字的卡牌（整疊都沒有圖）：卡片收窄成單欄 */
.lws-features .lws-deck--text .lws-deck__stage {
  width: 100%;
  max-width: var(--layout-card-pair);
  margin-inline: auto;
}
.lws-features .lws-deck--text .lws-deck__card {
  grid-template-columns: 1fr;
  align-items: start;
}
.lws-features .lws-deck__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--s-line);
  border-radius: var(--radius-sm);
  aspect-ratio: 16 / 10;
}
.lws-features .lws-deck__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.lws-features .lws-deck__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.lws-features .lws-deck__card .lws-feature__title {
  font-size: var(--text-xl);
}
@media (max-width: 1023px) {
  .lws-features .lws-deck__card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .lws-features .lws-deck__card {
    gap: var(--space-4);
  }
  .lws-features .lws-deck__card .lws-feature__title {
    font-size: var(--text-lg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* 捲動距離用 ::after 撐出來，不用 padding：sticky 只會在外框的內容區裡黏住，padding 不算 */
  .lws-motion .lws-features .lws-deck::after {
    display: block;
    height: calc((var(--lws-deck-n, 1) - 1) * var(--lws-deck-step));
    content: "";
  }
  .lws-motion .lws-features .lws-deck__stage {
    position: sticky;
    top: var(--lws-deck-top, var(--layout-deck-top));
    gap: 0;
  }
  /* 電腦版：區段標題跟卡疊一起黏住（標題在上、卡疊緊接在下），兩者的位置由 motion.js 寫入；平板以下標題照常捲走 */
  .lws-motion .lws-features .lws-deck > .lws-section-header {
    position: sticky;
    top: var(--lws-deck-head-top, var(--layout-deck-top));
  }
  @media (max-width: 1023px) {
    .lws-motion .lws-features .lws-deck > .lws-section-header {
      position: static;
    }
  }
  .lws-motion .lws-features .lws-deck__card {
    grid-area: 1 / 1;
    transform-origin: center bottom;
    will-change: transform, opacity;
  }
}
/* 抽走的卡片會移出版面右側：整段橫向裁掉，避免出現左右捲軸（clip 不會讓 sticky 失效） */
.lws-motion .lws-features.has-deck {
  overflow-x: clip;
}