/* Map rotation and mobile image-only fullscreen enhancements. */
.map-viewport > img {
  --map-rotation: 0deg;
  --map-rotation-fit: 1;
  rotate: var(--map-rotation);
  scale: var(--map-rotation-fit);
  transition:
    transform 0.12s ease-out,
    rotate 0.18s ease-out,
    scale 0.18s ease-out;
}

.map-viewport.dragging > img {
  transition: none;
}

.map-viewport:focus-visible {
  outline: 2px solid rgba(97, 226, 170, 0.92);
  outline-offset: -2px;
}

.map-controls .map-rotate-button svg {
  width: 17px;
  height: 17px;
}

.map-controls .map-reset-button-hidden,
.map-controls button[aria-label="复位地图"] {
  display: none !important;
}

/* Native fullscreen must contain the map image only. */
.map-card:fullscreen,
.map-card.is-fullscreen,
.map-card:-webkit-full-screen {
  display: block;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: #000;
}

.map-card:fullscreen .map-viewport,
.map-card.is-fullscreen .map-viewport,
.map-card:-webkit-full-screen .map-viewport {
  width: 100vw;
  height: 100dvh;
  cursor: grab;
  touch-action: none;
  background: #000;
}

.map-card:fullscreen .map-viewport > img,
.map-card.is-fullscreen .map-viewport > img,
.map-card:-webkit-full-screen .map-viewport > img {
  padding: 0;
}

.map-card:fullscreen .map-controls,
.map-card:fullscreen .zoom-value,
.map-card:fullscreen figcaption,
.map-card.is-fullscreen .map-controls,
.map-card.is-fullscreen .zoom-value,
.map-card.is-fullscreen figcaption,
.map-card:-webkit-full-screen .map-controls,
.map-card:-webkit-full-screen .zoom-value,
.map-card:-webkit-full-screen figcaption {
  display: none !important;
}

.map-card:fullscreen .map-viewport::after,
.map-card.is-fullscreen .map-viewport::after,
.map-card:-webkit-full-screen .map-viewport::after {
  display: none;
}

body.map-lightbox-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* The mobile fallback intentionally contains no caption, label, or controls. */
.map-image-lightbox {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  place-items: center;
  border: 0;
  background: #000;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.map-image-lightbox.is-moving {
  cursor: grabbing;
}

.map-image-lightbox > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  object-fit: contain;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}

@media (max-width: 768px), (pointer: coarse) {
  .map-viewport:not(.zoomed) {
    cursor: zoom-in;
  }
}

/* Desktop presentation: wider reading surface, larger map, and visible controls. */
@media (min-width: 769px) {
  .page-shell {
    max-width: 1120px;
    padding: 24px 28px 40px;
  }

  .article-heading {
    padding: 34px 30px 28px;
  }

  .article-heading h1 {
    font-size: clamp(30px, 3vw, 38px);
    line-height: 1.45;
  }

  .article-content {
    padding: 6px 32px 34px;
  }

  .article-content > p {
    font-size: 17px;
    line-height: 2.05;
  }

  .map-card {
    min-width: 0;
    margin-top: 28px;
  }

  .map-viewport {
    height: clamp(500px, 62vw, 720px);
  }

  .map-controls {
    top: 14px;
    right: 14px;
    grid-auto-flow: column;
    grid-template-columns: repeat(4, 42px);
  }

  .map-controls button {
    width: 42px;
    height: 42px;
    border-right: 1px solid rgba(112, 229, 183, 0.13);
    border-bottom: 0;
  }

  .map-controls button:last-child {
    border-right: 0;
  }

  .map-card:fullscreen .map-controls,
  .map-card.is-fullscreen .map-controls,
  .map-card:-webkit-full-screen .map-controls {
    display: grid !important;
  }

  .map-card:fullscreen .zoom-value,
  .map-card.is-fullscreen .zoom-value,
  .map-card:-webkit-full-screen .zoom-value {
    display: block !important;
  }
}

@media (min-width: 1180px) {
  .page-shell {
    max-width: 1480px;
    padding-right: 36px;
    padding-left: 36px;
  }

  .article-content {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(560px, 1.1fr);
    column-gap: 36px;
    align-items: start;
    padding-right: 38px;
    padding-left: 38px;
  }

  .article-content > p:first-of-type {
    grid-column: 1;
    grid-row: 1;
  }

  .article-content > .map-card {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .article-content > p:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .article-content > p:nth-of-type(3) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .map-viewport {
    height: clamp(540px, 43vw, 680px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-viewport > img {
    transition: none;
  }
}