/* 旅收一週年專頁（/anniversary/）專用樣式。
   只放 anv- 前綴 class；色彩／字型／陰影／圓角／間距一律沿用 /marketing/styles.css 的 design tokens（var(--...)），
   不重複定義 token、不使用色碼字面（比照 /trip-discovery/styles.css）。
   共用元件（.site-header、.section、.stat、.final、.site-footer 等）由 /marketing/styles.css 提供。 */

/* 活動期間切換靠 hidden 屬性；本檔有幾個元素設了 display，要確保 hidden 一定贏。 */
[hidden] {
  display: none !important;
}

/* ===== Hero：文字＋週年圖章 ===== */
.anv-hero {
  padding-block: var(--space-xl) var(--space-2xl);
}

.anv-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.anv-hero__text {
  min-width: 0;
}

.anv-hero h1 {
  margin-bottom: var(--space-md);
}

.anv-hero__lead {
  color: var(--color-ink-2);
  font-size: 1.05rem;
  max-width: 40ch;
  margin-bottom: var(--space-lg);
}

.hero__kicker time,
.anv-stamp__date,
.anv-timeline__date,
.anv-feature__ver,
.stat__value {
  font-variant-numeric: tabular-nums;
}

/* 圖章：沿用旅行手帳「蓋章」的意象，雙圈線條、微傾斜；純裝飾（aria-hidden）。 */
.anv-stamp {
  justify-self: center;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  outline: 1px solid var(--color-accent);
  outline-offset: -10px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3xs);
  color: var(--color-accent-text);
  text-align: center;
  transform: rotate(-8deg);
}

.anv-stamp__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.1;
}

.anv-stamp__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.anv-stamp__date {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

@media (min-width: 48rem) {
  .anv-hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xl);
  }
  .anv-stamp {
    width: 13rem;
    height: 13rem;
  }
}

/* ===== 故事 ===== */
.anv-prose {
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--color-ink-2);
}

/* ===== 灰底段落（時間軸、週年活動） ===== */
.anv-band {
  background: var(--color-paper-2);
  border-block: 1px solid var(--color-rule);
}

/* ===== 時間軸 ===== */
.anv-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-lg);
  border-left: 2px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 56ch;
}

.anv-timeline__item {
  position: relative;
}

.anv-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-lg) - 7px);
  top: 0.45rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-paper-2);
  border: 2px solid var(--color-accent);
}

.anv-timeline__date {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-warm);
}

.anv-timeline__title {
  margin-block: var(--space-3xs) var(--space-2xs);
}

.anv-timeline__item p {
  color: var(--color-ink-2);
}

/* ===== 感謝數字 ===== */
.anv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-2xl);
}

/* ===== 來自大家建議的功能 ===== */
.anv-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-2xl);
}

.anv-feature {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-top: 1px solid var(--color-rule);
}

.anv-feature__name {
  min-width: 0;
  color: var(--color-ink);
}

.anv-feature__ver {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--color-ink-3);
}

@media (min-width: 48rem) {
  .anv-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== 週年活動 ===== */
.anv-status {
  margin-top: var(--space-sm);
  font-weight: 700;
  color: var(--color-accent-text);
}

.anv-events {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.anv-event {
  min-width: 0;
  padding: var(--space-lg);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
}

.anv-event h3 {
  margin-bottom: var(--space-sm);
}

.anv-event p {
  color: var(--color-ink-2);
}

.anv-event strong {
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .anv-events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .anv-event--code {
    grid-column: 1 / -1;
  }
}

.anv-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.anv-code__value {
  min-width: 0;
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.anv-code__copy {
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent-text);
  background: transparent;
  border: 1px solid var(--color-accent-text);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}

.anv-code__copy:hover {
  background: var(--color-accent-tint);
}

.anv-facts {
  margin: 0 0 var(--space-lg);
  padding-left: 1.2rem;
  color: var(--color-ink-2);
}

.anv-event__sub {
  margin: 0 0 var(--space-2xs);
  font-size: 1rem;
  color: var(--color-ink);
}

.anv-steps {
  margin: 0 0 var(--space-sm);
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  color: var(--color-ink-2);
}

.anv-steps li::marker {
  color: var(--color-accent-text);
  font-weight: 700;
}

.anv-inline-code {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.anv-hint {
  font-size: 0.9rem;
}

.anv-ended {
  padding: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
}

/* ===== 下載 ===== */
.anv-final-text {
  min-width: 0;
}

/* 比照 /trip-discovery/styles.css：/marketing/styles.css 行動版的 .final__inner 軌道是裸 1fr，
   長字串會撐寬版面；本頁同樣用 minmax(0, 1fr) 覆寫。 */
@media (max-width: 47.9375rem) {
  .final__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 日期時間不要從中間斷行（例如「10/11」和「23:59」被拆到兩行） */
.anv-nowrap {
  white-space: nowrap;
}