/* ==========================================================================
   首頁敘事段 — 區塊 01 Hero / 02 Trust Bar / 03 地理 / 04 塔位 / 05 品牌 / 06 好評
   對應：03-page-specs.md 第一部分
   ========================================================================== */

/* ══ 01 Hero ═══════════════════════════════ */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(72vh, 620px);      /* 行動版；不使用 100vh */
  /* 內容較高時不被 fixed header 覆蓋 */
  padding-top: calc(var(--header-height) + var(--proto-h, 0px) + var(--space-4));
  padding-bottom: var(--space-8);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 768px) {
  .hero {
    min-height: min(88vh, 820px);
    padding-bottom: 12%;             /* 文字落在下三分之一，非置中 */
  }
}

/* 影像標註置於右上，避開 Hero 文字與 CTA；行動版空間不足則隱藏 */
.hero__media::after {
  top: calc(var(--header-height) + var(--proto-h, 0px) + var(--space-3));
  right: var(--gutter);
  bottom: auto;
  left: auto;
  max-width: min(60%, 30em);
}

@media (max-width: 767px) {
  .hero__media::after { display: none; }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  animation: hero-scale 1.6s var(--ease-out-expo) both;
}

@keyframes hero-scale {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}

/* 底部 40% 暖色漸層，確保文字對比 ≥ 4.5:1 */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 桌機文字置左下，故採「左側縱向 + 底部橫向」雙層漸層；
     右側維持通透，不壓暗主體影像 */
  background:
    linear-gradient(
      to right,
      rgba(26, 31, 27, 0.82) 0%,
      rgba(26, 31, 27, 0.62) 26%,
      rgba(26, 31, 27, 0.22) 50%,
      rgba(26, 31, 27, 0.04) 68%,
      transparent 82%
    ),
    linear-gradient(
      to top,
      rgba(28, 25, 20, 0.55) 0%,
      rgba(28, 25, 20, 0.22) 26%,
      transparent 52%
    );
}

/* 行動版文字全寬，改回單一由下而上的漸層並加強 */
@media (max-width: 767px) {
  .hero__scrim {
    background: linear-gradient(
      to top,
      rgba(26, 31, 27, 0.88) 0%,
      rgba(26, 31, 27, 0.74) 38%,
      rgba(26, 31, 27, 0.46) 62%,
      rgba(26, 31, 27, 0.14) 84%,
      transparent 100%
    );
  }
}

.hero__inner {
  width: 100%;
  color: var(--color-text-inverse);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.9;
}

.hero__eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--color-accent);
}

.hero__title {
  max-width: 16em;
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
}

/* 主標分行 clip-path 上掀揭示，stagger 80ms */
.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line > span {
  display: block;
  animation: line-up var(--duration-reveal) var(--ease-out-expo) both;
}

.hero__line:nth-child(2) > span { animation-delay: 80ms; }

@keyframes line-up {
  from { transform: translateY(105%); }
  to { transform: none; }
}

.hero__sub {
  max-width: 30em;
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  opacity: 0.92;
  animation: fade-up var(--duration-slow) var(--ease-out-expo) 320ms both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 0.92; transform: none; }
}

/* 行動版主標降一級（規格：--text-3xl），並取消副標的桌機斷行 */
@media (max-width: 767px) {
  .hero__title { font-size: var(--text-3xl); }
  .hero__sub br { display: none; }
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
  animation: fade-up var(--duration-slow) var(--ease-out-expo) 440ms both;
}

@media (min-width: 640px) {
  .hero__actions { flex-direction: row; align-items: center; }
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-6);
  display: none;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  opacity: 0.7;
  writing-mode: vertical-rl;
}

@media (min-width: 1024px) { .hero__scroll { display: flex; } }

.hero__scroll::after {
  content: '';
  width: 1px;
  height: 56px;
  background: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .hero__media,
  .hero__line > span,
  .hero__sub,
  .hero__actions { animation: none; opacity: 1; transform: none; }
}

/* ══ 02 Trust Bar ══════════════════════════ */

.trustbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-block: var(--space-6);
}

@media (min-width: 768px) {
  .trustbar__grid {
    grid-template-columns: repeat(4, 1fr);
    padding-block: var(--space-5);
    min-height: 160px;
    align-items: center;
  }
}

.trustbar__item {
  padding: var(--space-4) var(--space-5);
  text-align: center;
}

/* 欄間 1px 細分隔線 */
.trustbar__item + .trustbar__item { box-shadow: inset 1px 0 0 var(--color-border); }
.trustbar__item:nth-child(3) { box-shadow: none; }

@media (min-width: 768px) {
  .trustbar__item:nth-child(3) { box-shadow: inset 1px 0 0 var(--color-border); }
}

.trustbar__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-numeric);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.2;
}

.trustbar__value .unit {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
}

.trustbar__label {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-caption);
}

/* ══ 03 地理特點與優勢 ═════════════════════ */

.geo { background: var(--color-surface); }

.geo__layout {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 1024px) {
  .geo__layout {
    grid-template-columns: 58fr 42fr;
    gap: var(--space-8);
    align-items: start;
  }
}

.geo__visual {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}

@media (min-width: 1024px) {
  .geo__visual {
    position: sticky;
    top: calc(var(--header-height) + var(--proto-h, 0px) + var(--space-6));
    aspect-ratio: 5 / 4;
  }
}

/* 底圖暗化，確保白色疊圖線條與地理標註達到可讀對比 */
.geo__visual .media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(24, 30, 26, 0.52) 0%,
    rgba(24, 30, 26, 0.34) 45%,
    rgba(24, 30, 26, 0.56) 100%
  );
}

.geo__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* SVG 疊圖層：對應錨點進入視窗時描繪 */
.geo__layer {
  opacity: 0.28;
  transition: opacity var(--duration-slow) var(--ease-out-expo);
}

.geo__layer.is-active { opacity: 1; }

.geo__layer path,
.geo__layer circle,
.geo__layer line,
.geo__layer polyline {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset var(--duration-reveal) var(--ease-out-expo);
}

.geo__layer.is-drawn path,
.geo__layer.is-drawn circle,
.geo__layer.is-drawn line,
.geo__layer.is-drawn polyline {
  stroke-dashoffset: 0;
}

.geo__layer text {
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out-expo) 400ms;
}

.geo__layer.is-drawn text { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .geo__layer,
  .geo__layer path,
  .geo__layer circle,
  .geo__layer line,
  .geo__layer polyline,
  .geo__layer text {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* 行動版：放棄 sticky，四層合成為一張靜態疊圖。
   圖上標註於小尺寸不可讀，資訊改由下方文字錨點承擔 */
@media (max-width: 1023px) {
  .geo__layer { opacity: 0.85; }
  .geo__layer text { display: none; }
}

.geo__anchors {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .geo__anchors { gap: var(--space-9); padding-block: var(--space-8); }
}

/* 事實在前、詮釋在後（01-strategy §3.3） */
.geo__anchor {
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-border);
  transition: border-color var(--duration-normal) var(--ease-out-expo);
}

.geo__anchor.is-active { border-left-color: var(--color-accent); }

.geo__index {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}

.geo__fact {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-heading);
}

.geo__fact .num { color: var(--color-primary); }

.geo__interp {
  position: relative;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-tight);
}

.geo__interp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--color-border-strong);
}

/* ══ 04 商品與塔位展示 ═════════════════════ */

.niches { background: var(--color-surface-raised); }

/* 區塊底部的總覽入口（規格指定位置，同時避開桌機右緣的 Sticky Bar） */
.niches__more {
  margin-top: var(--space-7);
  text-align: center;
}

/* 不對稱編輯式排版：首張為橫幅大卡佔 2 欄 */
.niches__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .niches__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .niches__grid { grid-template-columns: repeat(3, 1fr); }
  .niches__grid .card--feature { grid-column: span 2; }
}

.card--feature { border-color: var(--color-border-strong); }

@media (min-width: 640px) {
  .card--feature {
    flex-direction: row;
    align-items: stretch;
  }

  .card--feature .card__media {
    flex: 1 1 58%;
    aspect-ratio: auto;
  }

  .card--feature .card__body {
    flex: 1 1 42%;
    justify-content: center;
    padding: var(--space-6);
  }

  .card--feature .card__title { font-size: var(--text-2xl); }
}

.card__price {
  font-family: var(--font-numeric);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ══ 05 品牌信任與歷史 ═════════════════════ */

.founder { background: var(--color-surface); }

.founder__layout {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 900px) {
  .founder__layout {
    grid-template-columns: 45fr 55fr;
    gap: var(--space-9);
    align-items: center;
  }
}

.founder__portrait {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

@media (min-width: 900px) {
  .founder__portrait {
    aspect-ratio: 3 / 4;
    /* 影像略微超出容器，製造層次（§5.3 重疊） */
    margin-left: calc(var(--gutter) * -0.4);
  }
}

.founder__caption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-caption);
}

.founder__quote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-primary);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;
}

.founder__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--width-prose);
  color: var(--color-text-muted);
}

.founder__name {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.founder__name strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.founder__name span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ══ 06 客戶真實好評 ═══════════════════════ */

.reviews { background: var(--color-surface-raised); }

.reviews__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  text-align: center;
}

.reviews__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-numeric);
  font-size: var(--text-3xl);
  font-weight: 600;
}

.reviews__score small {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-muted);
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-accent);
}

.stars svg { width: 20px; height: 20px; }

.reviews__source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* masonry 式錯落，非等高 */
.reviews__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .reviews__grid > *:nth-child(3n + 2) { margin-top: var(--space-6); }
  .reviews__grid > *:nth-child(3n) { margin-top: var(--space-3); }
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.review__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.review__meta { min-width: 0; }

.review__name { font-weight: 500; }

.review__date {
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.review__body {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

.review .stars svg { width: 16px; height: 16px; }