/* ===========================================================
   Sales Landing Page — 譚崔能量療癒師認證
   專用樣式：emotional hero / pain points / testimonials / steps
   不覆寫 tokens.css 與 main.css 的共用樣式
   =========================================================== */

/* ---------- 區塊基礎 ---------- */
.lp-section {
  padding: var(--space-9) 0;
}
.lp-section--narrow {
  padding: var(--space-8) 0;
}
.lp-section--tint {
  background: var(--color-bg-secondary);
}
.lp-section--deep {
  background: var(--color-bg-tertiary);
}

.lp-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin-bottom: var(--space-4);
}
.lp-section__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
  color: var(--color-text-primary);
}
.lp-section__title em {
  font-style: italic;
  color: var(--color-accent-primary);
}
.lp-section__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 720px;
}
.lp-section__lead strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}
.lp-text-center {
  text-align: center;
}
.lp-text-center .lp-section__lead {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .lp-section__title { font-size: var(--fs-3xl); }
}

/* =========================================================
   Hero — emotional, full first screen
   ========================================================= */
.lp-hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(233, 222, 200, 0.95) 0%, rgba(241, 235, 221, 0.85) 60%, var(--color-bg-primary) 100%);
  padding: var(--space-8) 0 var(--space-9);
  overflow: hidden;
}
.lp-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(171, 129, 72, 0.18), transparent 70%);
  pointer-events: none;
}
.lp-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 960px) {
  .lp-hero { padding: var(--space-9) 0 var(--space-10); }
  .lp-hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}
.lp-hero__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin-bottom: var(--space-4);
}
.lp-hero__pretitle {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.lp-hero__pretitle strong {
  display: block;
  margin-top: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-primary);
}
.lp-hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  line-height: 1.15;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .lp-hero__title { font-size: var(--fs-4xl); }
}
.lp-hero__sub {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 520px;
}
.lp-hero__sub strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }

.lp-hero__match {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-7);
  display: grid;
  gap: var(--space-3);
}
.lp-hero__match li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  line-height: var(--lh-normal);
}
.lp-hero__match-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* hero media — 影片 poster 風格 */
.lp-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-tertiary);
}
.lp-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58, 42, 22, 0.05) 0%, rgba(58, 42, 22, 0.45) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-5);
  text-align: center;
}
.lp-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(250, 247, 241, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(58, 42, 22, 0.3);
  transition: transform var(--transition-base);
}
.lp-video__play::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--color-accent-primary);
  margin-left: 6px;
}
.lp-video:hover .lp-video__play {
  transform: translate(-50%, -50%) scale(1.06);
}
.lp-video__caption {
  position: relative;
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   Section 1 — 你不是沒有在努力（情緒同理）
   ========================================================= */
.lp-empathy {
  text-align: center;
}
.lp-empathy__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}
.lp-empathy__body {
  max-width: 720px;
  margin: 0 auto;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}
.lp-empathy__body strong {
  color: var(--color-accent-primary);
  font-weight: var(--fw-semibold);
}

/* =========================================================
   Section 2 — Pain points 卡片
   ========================================================= */
.lp-pain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .lp-pain-grid { grid-template-columns: repeat(3, 1fr); }
}
.lp-pain-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  transition: all var(--transition-base);
}
.lp-pain-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border);
}
.lp-pain-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-text-inverse);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  margin-bottom: var(--space-4);
}
.lp-pain-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}
.lp-pain-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.lp-pain-card__answer {
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-accent-primary);
}
.lp-pain-card__answer::before {
  content: "→ ";
  font-weight: var(--fw-semibold);
}

/* =========================================================
   Section 3 — 根源說明 + 4 個關鍵字
   ========================================================= */
.lp-root-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .lp-root-grid { grid-template-columns: repeat(4, 1fr); }
}
.lp-root-chip {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--color-accent-primary);
  letter-spacing: 0.08em;
}

/* =========================================================
   Section 4 — 第二影片
   ========================================================= */
.lp-video-block {
  max-width: 880px;
  margin: var(--space-7) auto 0;
}
.lp-video-block .lp-video {
  margin-bottom: var(--space-4);
}
.lp-video-block__caption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

/* =========================================================
   Section 5 — 3 種核心能力（橫向卡片）
   ========================================================= */
.lp-skill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .lp-skill-grid { grid-template-columns: repeat(3, 1fr); }
}
.lp-skill-card {
  background: var(--color-bg-primary);
  border-top: 3px solid var(--color-accent-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.lp-skill-card__index {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-accent-primary);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-3);
}
.lp-skill-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}
.lp-skill-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-skill-card__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.lp-skill-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-soft);
}

.lp-cta-block {
  text-align: center;
  margin-top: var(--space-8);
}

/* =========================================================
   Section 6 — 學員見證
   ========================================================= */
.lp-testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .lp-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
.lp-testimonial {
  position: relative;
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6) var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-soft);
}
.lp-testimonial::before {
  content: "\201C";
  position: absolute;
  top: -12px;
  left: var(--space-5);
  font-family: var(--font-serif);
  font-size: 80px;
  line-height: 1;
  color: var(--color-accent-primary);
  opacity: 0.35;
}
.lp-testimonial__quote {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
  font-family: var(--font-serif);
}
.lp-testimonial__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}
.lp-testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-bg);
  color: var(--color-accent-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}
.lp-testimonial__info {
  display: flex;
  flex-direction: column;
}
.lp-testimonial__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.lp-testimonial__role {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

/* =========================================================
   Section 7 — 適合哪些人（左右交替）
   ========================================================= */
.lp-audience-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .lp-audience-list { grid-template-columns: repeat(2, 1fr); }
}
.lp-audience {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border-left: 4px solid var(--color-accent-soft);
}
.lp-audience__index {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-accent-primary);
  margin-bottom: var(--space-2);
}
.lp-audience__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}
.lp-audience__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* =========================================================
   Section 8 — 4 個 STEP 時間軸
   ========================================================= */
.lp-steps {
  margin-top: var(--space-7);
  position: relative;
}
.lp-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.lp-step:last-of-type {
  border-bottom: none;
}
.lp-step__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.lp-step__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.lp-step__circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-2);
  box-shadow: 0 4px 14px rgba(171, 129, 72, 0.35);
}
.lp-step__body {
  padding-top: var(--space-2);
}
.lp-step__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}
.lp-step__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}
.lp-step__note {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-accent-bg);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  text-align: center;
}
.lp-step__note strong { color: var(--color-accent-primary); }

/* =========================================================
   Section 9 — 講師介紹 Zia
   ========================================================= */
.lp-instructor {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
  background: var(--color-bg-primary);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
  .lp-instructor {
    grid-template-columns: 280px 1fr;
    padding: var(--space-8);
  }
}
.lp-instructor__avatar {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  border: 6px solid var(--color-bg-secondary);
  box-shadow: var(--shadow-md);
}
.lp-instructor__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-instructor__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-2xl);
  color: var(--color-accent-primary);
  margin-bottom: var(--space-2);
}
.lp-instructor__title {
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.lp-instructor__title strong {
  color: var(--color-accent-primary);
  font-weight: var(--fw-semibold);
}
.lp-instructor__bio {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}
.lp-instructor__bio strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

/* =========================================================
   Section 10 — 最終 CTA
   ========================================================= */
.lp-final {
  text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(171, 129, 72, 0.12), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(106, 127, 110, 0.12), transparent 60%),
    var(--color-bg-tertiary);
  padding: var(--space-10) var(--space-5);
}
.lp-final__inner {
  max-width: 720px;
  margin: 0 auto;
}
.lp-final__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
  color: var(--color-text-primary);
}
@media (min-width: 768px) {
  .lp-final__title { font-size: var(--fs-3xl); }
}
.lp-final__body {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-7);
}
.lp-final__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 540px) {
  .lp-final__actions {
    flex-direction: row;
    justify-content: center;
  }
}
.lp-final .btn--large {
  min-width: 240px;
}
.btn--soft {
  background: var(--color-accent-soft);
  color: var(--color-text-inverse);
}
.btn--soft:hover {
  background: #56695a;
  color: var(--color-text-inverse);
}

/* Breadcrumb 在 sales LP 也保留 */
.lp-breadcrumb {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  padding: var(--space-4) 0;
  letter-spacing: 0.05em;
}
.lp-breadcrumb a { color: var(--color-text-muted); }
.lp-breadcrumb a:hover { color: var(--color-accent-primary); }
.lp-breadcrumb__sep { margin: 0 var(--space-2); }