/* c-minimap.css — converted from Minimap.module.css
   CSS-module local names become `c-Minimap_<name>`; globals from globals.css keep
   their names. */

.c-Minimap_section {
  position: relative;
  width: 100%;
  height: var(--minimap-scroll, 600vh);
  background: var(--color-dark-charcoal);
  color: var(--color-text);
}

.c-Minimap_viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

.c-Minimap_siteInfo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2.75rem;
  z-index: 2;
  max-width: 24ch;
}

.c-Minimap_imgPreview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32%;
  aspect-ratio: 5 / 7;
  height: auto;
  max-height: 72vh;
  max-width: 90vw;
  overflow: hidden;
}

.c-Minimap_imgPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-Minimap_minimap {
  position: absolute;
  top: 50%;
  right: 8em;
  width: 80px;
  z-index: 2;
}

.c-Minimap_indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border: 1px solid var(--color-text);
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
}

.c-Minimap_items {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  will-change: transform;
}

.c-Minimap_item {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 5px;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-Minimap_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1000px) {
  .c-Minimap_siteInfo {
    top: 17.5svh;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    max-width: 20ch;
  }

  .c-Minimap_imgPreview {
    width: 56%;
    max-height: 42svh;
  }

  .c-Minimap_minimap {
    top: auto;
    right: 0;
    bottom: 5em;
    left: 0;
    width: 100%;
    height: 80px;
    transform: none;
    overflow: hidden;
  }

  .c-Minimap_indicator {
    top: 0;
    left: 50%;
    width: 60px;
    height: 100%;
    transform: translateX(-50%);
  }

  .c-Minimap_items {
    flex-direction: row;
    width: max-content;
    height: 100%;
  }

  .c-Minimap_item {
    width: 60px;
    height: 100%;
    padding: 5px;
  }
}