/* 六门入城：连续图文章节。颜色、页面宽度、标题和照片预览沿用公共组件。 */
.gates-page { --gate-ink: var(--color-surface-deep); --gate-line: var(--color-border); }
.gates-hero { background: linear-gradient(125deg, var(--color-surface-deep), color-mix(in srgb, var(--color-surface-deep) 78%, var(--color-primary))); }
.gates-map .location-map__trigger { aspect-ratio: auto; background: transparent; font: inherit; text-align: left; color: var(--gate-ink); }
.gate-image-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-md); min-height: 44px; padding-bottom: var(--spacing-sm); margin-bottom: var(--spacing-md); border-bottom: 1px solid var(--gate-line); }
.gates-map__label { margin: 0; font-size: var(--fs-small); font-weight: 600; color: inherit; }
.gate-image-frame { display: block; width: 100%; aspect-ratio: 4 / 3; }
.gates-overview__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-2xl); align-items: center; }
.gates-overview__grid + .gates-overview__grid { margin-top: var(--spacing-2xl); }
.gates-map { min-width: 0; }
.gates-map .location-map__trigger { width: 100%; }
.gates-map .gate-image-frame { height: 480px; aspect-ratio: auto; }
.gates-map img { width: 100%; height: 100%; object-fit: contain; }
.gates-map__error { display: none; padding: var(--spacing-lg); color: var(--color-text-secondary); line-height: 1.8; }
.gates-map.is-image-missing .gates-map__error { display: block; }
.gates-map .location-map__trigger[hidden] { display: none; }
.gates-overview__copy { display: grid; gap: var(--spacing-lg); }
.gates-overview__copy p { margin: 0; line-height: 1.9; color: var(--color-text-secondary); }
.gates-overview__copy .gates-overview__lead { font-family: var(--font-heading); font-size: var(--fs-h3); color: var(--gate-ink); }
.gates-key-facts { display: grid; gap: var(--spacing-md); }
.gates-key-facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--gate-line); }
.gates-key-facts dt { color: var(--gate-ink); font: 600 var(--fs-h3-mobile)/1.7 var(--font-heading); }
.gates-key-facts dd { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-small); line-height: 1.8; }
.gates-timeline { border-top: 1px solid var(--gate-ink); }
.gates-timeline article { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.75fr); gap: var(--spacing-xl); align-items: baseline; padding: var(--spacing-lg) 0; border-bottom: 1px solid var(--gate-line); }
.gates-timeline time { color: var(--gate-ink); font: 500 var(--fs-h3)/1.6 var(--font-heading); }
.gates-timeline h3 { margin: 0; color: var(--gate-ink); font: 600 var(--fs-h3-mobile)/1.7 var(--font-heading); }
.gates-timeline p { margin: 0; color: var(--color-text-secondary); line-height: 1.8; }
.gates-page .gates-glossary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-2xl); }
.gates-glossary dt { margin-bottom: var(--spacing-sm); color: var(--gate-ink); font: 600 var(--fs-h3)/1.6 var(--font-heading); }
.gates-glossary dd { margin: 0; color: var(--color-text-secondary); line-height: 1.8; font-size: var(--fs-small); }
.gates-visit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-xl) var(--spacing-2xl); }
.gates-visit-card { padding-top: var(--spacing-lg); border-top: 1px solid color-mix(in srgb, var(--color-white) 25%, transparent); }
.gates-visit-card > span { display: block; margin-bottom: var(--spacing-md); color: var(--color-accent-light); font-size: var(--fs-small); }
.gates-visit-card h3 { margin: 0 0 var(--spacing-md); font: 500 var(--fs-h3)/1.8 var(--font-heading); color: var(--color-white); }
.gates-visit-card h3 a { display: inline-flex; min-height: 44px; align-items: center; color: inherit; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, var(--color-white) 36%, transparent); }
.gates-visit-card h3 a:hover, .gates-visit-card h3 a:focus-visible { color: var(--color-accent-light); text-decoration-color: currentColor; }
.gates-visit-card p { margin: 0; color: color-mix(in srgb, var(--color-white) 82%, transparent); line-height: 1.9; }
.gates-visit-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--spacing-xl); align-items: baseline; }
.gates-visit-card:last-child h3 { font-size: var(--fs-h3-mobile); }
@media (max-width: 1000px) {
  .gates-overview__grid { gap: var(--spacing-xl); align-items: start; }
  .gates-map .gate-image-frame { height: 420px; }
  .gates-timeline article { grid-template-columns: 112px minmax(0, 1fr); gap: var(--spacing-sm) var(--spacing-lg); }
  .gates-timeline p { grid-column: 2; }
  .gates-page .gates-glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gates-visit-card:last-child { display: block; }
}
@media (max-width: 767px) {
  .gates-overview__grid { grid-template-columns: minmax(0, 1fr); }
  .gates-map .gate-image-frame { height: auto; aspect-ratio: 1400 / 1683; }
  .gates-overview__copy .gates-overview__lead { font-size: var(--fs-h3-mobile); }
  .gates-timeline article { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); }
  .gates-timeline p { grid-column: auto; }
  .gates-page .gates-glossary { gap: var(--spacing-xl) var(--spacing-lg); }
  .gates-visit-grid { grid-template-columns: minmax(0, 1fr); }
  .gates-visit-card h3 { font-size: var(--fs-h3-mobile); }
}
.gates-map--relationship .gate-image-frame { height: auto; aspect-ratio: 1200 / 765; }