/*
 * Mapa com duas vistas (secoes/mapa.php com encarte; cena js/cenas/mapa.js).
 * Carregado por um <link> dentro da própria seção; o resto do mapa está em
 * site.css (componentes, .mapa).
 *
 *   vista 1  .mapa__vista--shetland    Shetland do Sul e ponta da Península
 *   vista 2  .mapa__vista--continente  continente inteiro, sítios continentais
 *
 * Sem JS: o continente fica abaixo do mapa das Shetland, e o encarte é um link
 * que rola até ele. Com JS: as duas vistas ocupam o mesmo lugar e
 * .mapa__carta[data-vista] diz qual aparece; a lista mostra só os sítios da
 * vista. Estado posto pelo JS: .mapa__carta--trocando (as duas vistas visíveis
 * enquanto a transição toca).
 */

@layer componentes {
  .mapa__vista { position: relative; }

  /* Encarte: link para a vista do continente */
  .mapa__encarte {
    display: grid;
    gap: 0.25rem;
    color: var(--marinho);
    text-decoration: none;
    transition:
      border-color var(--dur-rapida) var(--ease-assentamento),
      box-shadow var(--dur-rapida) var(--ease-assentamento);
  }
  .mapa__encarte img { display: block; width: 100%; height: auto; }
  .mapa__encarte-rotulo {
    padding: 0 0.125rem 0.125rem;
    font-size: 0.75rem;
    font-weight: var(--peso-forte);
    line-height: 1.25;
  }
  .mapa__encarte:is(:hover, :focus-visible) {
    border-color: var(--horizonte);
    box-shadow: 0 0 0 2px var(--horizonte);
  }
  .mapa__encarte:is(:hover, :focus-visible) .mapa__encarte-rotulo {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  @container (max-width: 30rem) {
    /* Encarte de 64 px: o rótulo vira uma etiqueta ao lado dele. */
    .mapa__encarte-rotulo {
      position: absolute;
      top: -1px;
      left: calc(100% + 4px);
      width: max-content;
      max-width: 8.5rem;
      padding: 0.25rem 0.375rem;
      background: var(--papel);
      border: 1px solid var(--linha);
      font-size: 0.6875rem;
    }
  }

  /* Vista do continente */
  .mapa__vista--continente {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
    padding-top: 1rem;
    border-top: 1px solid var(--linha);
  }
  .mapa__svg--continente {
    --escala-sitio: 1.1;
    display: block;
    max-width: 38rem;
    margin-inline: auto;
  }
  @container (max-width: 30rem) {
    /* No celular, os três nomes ficam sempre à vista (são poucos e não se cruzam). */
    .mapa__svg--continente { --escala-sitio: 1.6; }
    .mapa__svg--continente .sitio-nome { display: inline; }
    .mapa__svg--continente .area-nome { font-size: 18px; }
  }
  .mapa__svg--continente .area-quadro { transition: fill-opacity var(--dur-rapida) var(--ease-assentamento); }
  .mapa__area-voltar { cursor: pointer; }
  .mapa__area-voltar:hover .area-quadro { fill-opacity: 0.5; }
  .mapa__vista-titulo {
    color: var(--aco-texto);
    font-family: var(--fonte-etiqueta);
    font-size: var(--tam-etiqueta);
    font-weight: var(--peso-etiqueta);
    font-stretch: var(--largura-etiqueta);
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .mapa__voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.875rem;
    background: var(--papel);
    border: 1px solid var(--linha);
    color: var(--marinho);
    font-size: 0.875rem;
    font-weight: var(--peso-forte);
    text-decoration: none;
  }
  .mapa__voltar:hover { border-color: var(--marinho); }
  .mapa__voltar .icone { width: 1rem; height: 1rem; }

  /* Lista: texto e sensores dos sítios continentais */
  .mapa__grupo-texto { margin-top: 0.75rem; color: var(--basalto-suave); font-size: 0.875rem; line-height: 1.45; }
  .mapa__lista-vista { display: grid; gap: 1.75rem; align-content: start; }
  .mapa__detalhe { grid-column: 2; margin-top: 0.25rem; color: var(--basalto-suave); font-size: 0.8125rem; line-height: 1.4; }
  .mapa__lista-vista[data-vista="continente"] .mapa__sitio-link .mapa__simbolo { grid-row: span 3; }
  @media (min-width: 40em) and (max-width: 63.99em) {
    .mapa__lista:has(.mapa__lista-vista) { grid-template-columns: minmax(0, 1fr); }
    .mapa__lista-vista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; }
  }

  /* Com JS: as duas vistas no mesmo lugar; o continente cobre a área do
     mapa das Shetland (que dá a altura) e o SVG se ajusta dentro dela. */
  .js .mapa__vista--continente {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .js .mapa__svg--continente {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
  }
  .js .mapa__vista-titulo { position: absolute; top: 0; left: 0; z-index: 1; }
  .js .mapa__voltar { position: absolute; bottom: 0; left: 0; z-index: 1; margin: 0; }
  .js .mapa__carta[data-vista="shetland"] .mapa__vista--continente,
  .js .mapa__carta[data-vista="continente"] .mapa__vista--shetland { visibility: hidden; }
  .js .mapa__carta.mapa__carta--trocando .mapa__vista { visibility: visible; }
  .js .mapa__carta--trocando { overflow: clip; pointer-events: none; }
  .js .mapa__carta--trocando .mapa__vista { will-change: transform, opacity; }
  .js .mapa__grade:has(.mapa__carta[data-vista="shetland"]) .mapa__lista-vista[data-vista="continente"],
  .js .mapa__grade:has(.mapa__carta[data-vista="continente"]) .mapa__lista-vista[data-vista="shetland"] { display: none; }
}