/* 首頁功能輪播：左文右圖，沒有地圖、截圖不套手機框。 */

.feat, .feat-stack {
  --feat-bg: #c5eadc;
  --feat-ink: #0b2b24;
  --feat-ink-soft: #3f6259;
  --feat-line: rgba(11, 43, 36, .16);
  --feat-accent: #0f766e;
  --feat-accent-soft: #0d9488;
}

.feat { display: none; position: relative; background: #e8f6f1; }
.feat:focus { outline: none; }

.feat__stage {
  position: relative;
  width: min(1180px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(48px, 7vh, 80px) 0 108px;
}

.feat__copy {
  min-width: 0;
  color: var(--feat-ink);
  z-index: 3;
}
.feat__head {
  font-size: clamp(36px, 4.4vw, 50px);
  line-height: 1.22;
  margin: 0 0 12px;
  font-weight: 800;
}
.feat__head em { font-style: normal; color: #ef4444; }
.feat__lede { margin: 0 0 20px; font-size: 21px; color: var(--feat-ink-soft); line-height: 1.65; }

.feat__stop { display: none; }
.feat__stop.is-on { display: block; }
.feat__stop h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.feat__stop p { margin: 0; font-size: 19px; line-height: 1.7; color: var(--feat-ink-soft); }

.feat__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.feat__cta { display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; font-size: 15px; line-height: 1;
  border-radius: 999px; text-decoration: none; background: var(--feat-accent); color: #fff;
  font-weight: 800; box-shadow: 0 12px 28px rgba(15,118,110,.26);
  transition: transform .18s, box-shadow .18s; }
.feat__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(15,118,110,.34); }
.feat__cta--ghost { background: rgba(255,255,255,.72); color: var(--feat-accent); font-weight: 700;
  box-shadow: inset 0 0 0 1.6px rgba(15,118,110,.42); }
.feat__cta--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1.6px var(--feat-accent); }
.feat__cta[hidden] { display: none; }

.feat__poster { position: relative; min-height: min(68vh, 640px); }
.feat__poster figure { position: absolute; inset: 0; margin: 0; opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  display: flex; align-items: center; justify-content: center; }
.feat__poster figure.is-on { opacity: 1; transform: none; }
.feat__poster img { width: auto; height: 100%; max-width: 100%; object-fit: contain; border-radius: 16px;
  display: block; box-shadow: 0 24px 60px rgba(11,43,36,.18), 0 0 0 1px rgba(11,43,36,.08); }

.feat__controls { position: absolute; left: 50%; bottom: clamp(16px, 2.6vh, 28px);
  transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .74); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(11,43,36,.12), inset 0 0 0 1px rgba(11,43,36,.07); }

.feat__arrow { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--feat-accent);
  box-shadow: 0 4px 12px rgba(15,118,110,.32);
  transition: background .18s, transform .18s; }
.feat__arrow:hover { background: #0b5f58; transform: scale(1.08); }
.feat__arrow:focus-visible { outline: 3px solid var(--feat-accent); outline-offset: 3px; }

.feat__rail { position: static; transform: none; display: flex; gap: 7px; flex-wrap: wrap;
  max-width: 280px; justify-content: center; }
.feat__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(11,43,36,.24); cursor: pointer;
  transition: background .2s, width .2s, border-radius .2s; }
.feat__dot:hover { background: rgba(11,43,36,.45); }
.feat__dot.is-on { background: var(--feat-accent); width: 22px; border-radius: 999px; }
.feat__dot:focus-visible { outline: 2px solid var(--feat-accent); outline-offset: 3px; }

.feat__play { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(11,43,36,.08); color: var(--feat-accent);
  transition: background .18s; }
.feat__play:hover { background: rgba(11,43,36,.16); }
.feat__play:focus-visible { outline: 2px solid var(--feat-accent); outline-offset: 3px; }
.feat__play-icon { grid-area: 1 / 1; }
.feat__play[aria-pressed="false"] .feat__play-icon--go,
.feat__play[aria-pressed="true"] .feat__play-icon--pause { display: none; }

.feat-stack { display: block; background: var(--feat-bg); color: var(--feat-ink); padding: 48px 20px 70px; }
.feat-stack .feat__head { margin-bottom: 8px; }
.feat-stack article { margin: 24px 0 0; }
.feat-stack article img { width: 100%; height: auto; max-width: 460px; border-radius: 12px;
  display: block; margin: 12px auto 0; box-shadow: 0 14px 32px rgba(11,43,36,.18); }
.feat-stack h3 { margin: 0 0 3px; }
.feat-stack p { margin: 0; color: var(--feat-ink-soft); }
.feat-stack .feat__ctas { margin-top: 18px; }

body.feat-carousel .feat { display: block; }
body.feat-carousel .feat-stack { display: none; }

@media (max-width: 991.98px) {
  .feat__head { font-size: 30px; }
  .feat__lede { font-size: 17px; }
  .feat__stop h3 { font-size: 18px; }
  .feat__stop p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .feat__stop, .feat__poster figure, .feat__arrow, .feat__dot { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .feat__controls { background: #fff; backdrop-filter: none; }
}