/* ============================================================
   首屏 v3：与全站统一（白面板 + 湖蓝点缀 + 无衬线）
   布局：标题区（含倒计时）/ 路线带 / 摘要 / 五人合影
   ============================================================ */

.hero#top {
  padding: 26px 16px 20px;
  min-height: 0;
  display: block;
}

.hero-panel {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 34px 42px 24px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #d7dfdc);
  border-radius: 22px;
  box-shadow: var(--shadow, 0 16px 48px rgba(25, 47, 55, .08));
  overflow: hidden;
}

/* 底部细线装饰（湖蓝色调） */
.hero-panel::after {
  content: "";
  position: absolute;
  left: -30px;
  right: -30px;
  bottom: -8px;
  height: 110px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 120' fill='none' stroke='%23a9cdd6' stroke-width='1.3'%3E%3Cpath d='M0 118 L90 58 L150 96 L240 28 L330 96 L420 50 L520 100 L610 42 L700 88 L800 58'/%3E%3Cpath d='M0 118 L120 86 L260 108 L400 74 L560 110 L680 86 L800 106' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .5;
}

/* ---- 标题区 ---- */
.hero-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line, #d7dfdc);
}

.hero-id { position: relative; min-width: 0; }

.hero__eyebrow, .hero .hero__eyebrow {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .3em;
  color: var(--muted, #66757a);
}

.hero#top h1#trip-title {
  margin: 8px 0 10px;
  font-family: inherit;
  font-size: clamp(38px, 7.5vw, 58px);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.05;
  color: var(--ink, #13262f);
}

.hero#top .hero__date {
  margin: 0;
  font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  color: var(--muted, #66757a);
}

/* ---- 倒计时 ---- */
.hero-count {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding-left: 28px;
  border-left: 1px solid var(--line, #d7dfdc);
  min-width: 118px;
  flex: 0 0 auto;
}
.hero-count__label {
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--muted, #66757a);
  white-space: nowrap;
}
.hero-count__num {
  font-family: inherit;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink, #13262f);
  font-variant-numeric: tabular-nums;
}
.hero-count__unit { font-size: 12px; letter-spacing: .12em; color: var(--muted, #66757a); }
.hero-count.is-today .hero-count__num { color: var(--terracotta, #b65c3a); }
.hero-count.is-done { opacity: .55; }

/* ---- 路线带 ---- */
.hero-route {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  padding: 22px 6px 0;
}
.hero-route__stop {
  flex: 1 1 0;
  min-width: 56px;
  text-align: center;
  position: relative;
}
.hero-route__stop .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #a9c4cb;
  margin: 0 auto 9px;
  position: relative;
  z-index: 2;
  transition: all .3s ease;
}
.hero-route__stop .place {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #13262f);
  letter-spacing: .04em;
}
.hero-route__stop .when {
  font-size: 10.5px;
  color: #8ba1a8;
  margin-top: 3px;
  letter-spacing: .05em;
}
.hero-route__stop::before,
.hero-route__stop::after {
  content: "";
  position: absolute;
  top: 4px;
  height: 1px;
  background: var(--line, #d7dfdc);
}
.hero-route__stop::before { left: 0; right: 50%; }
.hero-route__stop::after { left: 50%; right: 0; }
.hero-route__stop:first-child::before,
.hero-route__stop:last-child::after { display: none; }

.hero-route__stop.is-past .dot { background: #a9c4cb; border-color: #a9c4cb; }
.hero-route__stop.is-past::before,
.hero-route__stop.is-past::after { background: #a9c4cb; }
.hero-route__stop.is-current .dot {
  background: var(--lake, #287b90);
  border-color: var(--lake, #287b90);
  animation: hero-pulse 2.4s ease-in-out infinite;
}
.hero-route__stop.is-current .place { color: var(--lake, #287b90); }
@keyframes hero-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(40, 123, 144, .16); }
  50%      { box-shadow: 0 0 0 7px rgba(40, 123, 144, .07); }
}

/* ---- 摘要（细线分隔，不用药丸） ---- */
.hero-facts {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 22px 0 4px;
}
.hero-facts span {
  position: relative;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted, #66757a);
}
.hero-facts span + span::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 1px;
  height: 10px;
  background: var(--line, #d7dfdc);
  transform: translateY(-50%);
}

/* ---- 合影位 ---- */
.hero .crew {
  position: relative;
  z-index: 2;
  margin: 16px auto 2px;
}
.hero .crew-caption {
  position: relative;
  z-index: 2;
  margin: 4px 0 6px;
}

/* ---- 移动端 ---- */
@media (max-width: 640px) {
  .hero#top { padding: 16px 12px 14px; }
  .hero-panel { padding: 24px 20px 18px; border-radius: 18px; }
  .hero-head { flex-direction: column; gap: 14px; padding-bottom: 16px; }
  .hero#top h1#trip-title { font-size: clamp(34px, 10vw, 44px); }
  .hero-count {
    margin-left: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding-left: 0;
    border-left: 0;
  }
  .hero-count__num { font-size: 34px; }
  .hero-route { padding-top: 18px; }
  .hero-route__stop { min-width: 0; }
  .hero-route__stop .place { font-size: 11.5px; }
  .hero-route__stop .when { font-size: 9.5px; }
  .hero-facts { gap: 6px 14px; }
  .hero-facts span + span::before { left: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-route__stop.is-current .dot { animation: none; }
}