/* ==========================================================================
   AMANA TAIPU • master plan interativo (lista + marcadores sobre a foto aérea)
   Carregar depois de style.css (usa --olive, --sand, --cream, --sage, --wine).
   ========================================================================== */

.mplan {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 34px;
  align-items: start;
  width: min(100% - (var(--gutter) * 2), 1236px);
  margin-inline: auto;
}

/* ------------------------------------------------------------ lista de locais */
.mplan__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.mplan__item { margin: 0; }

.mplan__botao {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--olive);
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.mplan__botao:hover { background: var(--sand); }
.mplan__botao:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* numero = mesma identidade do marcador no mapa (cor forte, legivel) */
.mplan__num {
  flex: none;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wine);
  color: var(--cream);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.mplan__rotulo { flex: 1 1 auto; }
.mplan__marca {
  flex: none;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wine);
  opacity: .75;
}

.mplan__item.is-ativo .mplan__botao {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--sand);
}
.mplan__item.is-ativo .mplan__num { background: var(--sand); color: var(--wine); }
.mplan__item.is-ativo .mplan__marca { color: var(--sand); opacity: .9; }

/* ------------------------------------------------------------------- o mapa */
.mplan__figura {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sage);
}
/* os marcadores cobrem a IMAGEM, nunca a figura inteira — no mobile o botao
   "Ampliar mapa" entra no fluxo e, sem esta camada, empurraria os pins. */
.mplan__tela { position: relative; display: block; }
.mplan__img { width: 100%; height: auto; display: block; }

.mplan__pins { position: absolute; inset: 0; pointer-events: none; }

.mplan__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: var(--wine);
  color: var(--cream);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 10px rgba(51, 54, 9, .45);
  transition: transform .2s ease, background-color .2s ease;
}
.mplan__pin:hover { transform: translate(-50%, -50%) scale(1.14); }
.mplan__pin:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.mplan__pin.is-ativo {
  background: var(--cream);
  color: var(--wine);
  border-color: var(--wine);
  transform: translate(-50%, -50%) scale(1.2);
}
/* halo pulsante só no marcador ativo, para achar o ponto na foto */
.mplan__pin.is-ativo::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  animation: mplan-halo 1.8s ease-out infinite;
}
@keyframes mplan-halo {
  0%   { opacity: .85; transform: scale(.72); }
  100% { opacity: 0;   transform: scale(1.25); }
}

.mplan__ampliar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(51, 54, 9, .88);
  color: var(--sand);
  font: inherit;
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .2s ease;
}
.mplan__ampliar:hover { background: var(--olive); }
.mplan__ampliar:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* ------------------------------------------------------- painel de detalhe */
.mplan__detalhe {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  min-height: 46px;
  padding: 14px 18px;
  background: var(--cream);
  border-left: 3px solid var(--wine);
  border-radius: 0 10px 10px 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.45;
}
.mplan__detalhe-titulo { display: block; font-weight: 500; color: var(--wine); }
.mplan__detalhe-dica { display: block; margin-top: 4px; font-size: 13px; opacity: .7; }

/* ======================================================= mapa em tela cheia */
.mlupa {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--olive);
  color: var(--sand);
  overflow: hidden;
}
.mlupa::backdrop { background: rgba(51, 54, 9, .9); }
.mlupa:not([open]) { display: none; }
.mlupa.is-open { display: block; position: fixed; inset: 0; z-index: 1000; }

.mlupa__barra {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px calc(12px + env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, rgba(51,54,9,.92), rgba(51,54,9,0));
}
.mlupa__dica { font-size: 12px; letter-spacing: .04em; opacity: .85; }
.mlupa__fechar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--sand);
  color: var(--olive);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.mlupa__fechar:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

.mlupa__palco {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  cursor: grab;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* o mapa e panoramico (2,4:1) e a tela do celular e retrato: sem centrar,
     ele encosta no topo e deixa meia tela vazia. `safe` evita corte quando o
     conteudo e maior que o palco. */
  display: grid;
  align-content: safe center;
  justify-content: safe center;
}
.mlupa__palco.is-arrastando { cursor: grabbing; }

/* largura maior que a tela = o mapa fica legivel e o usuario arrasta */
.mlupa__tela { position: relative; width: 300vw; }
.mlupa__img { height: auto; max-width: none; width: 100%; display: block; }
@media (min-width: 700px)  { .mlupa__tela { width: 165vw; } }
@media (min-width: 1200px) { .mlupa__tela { width: 100vw; } }

/* marcadores dentro do mapa ampliado, com o nome ao lado */
.mlupa__pins { position: absolute; inset: 0; }
.mlupa__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: rgba(100, 27, 23, .94);
  color: var(--cream);
  white-space: nowrap;
}
.mlupa__pin-num {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cream);
  color: var(--wine);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.mlupa__pin-nome { font-size: 13px; font-weight: 400; }

/* ============================================================== responsivo */
@media (max-width: 1024px) {
  .mplan { grid-template-columns: 1fr; gap: 20px; }
  /* No mobile o mapa inteiro nao e legivel: ele vira uma previa clicavel e a
     LISTA passa a ser a navegacao principal (vem primeiro). */
  .mplan__figura { order: 2; }
  .mplan__lista { order: 1; grid-template-columns: 1fr 1fr; }
  .mplan__detalhe { order: 3; }
  .mplan__botao { padding: 10px 12px; gap: 9px; font-size: 15px; }
  .mplan__marca { display: none; }
  .mplan__num { width: 24px; height: 24px; font-size: 12px; }
  .mplan__pin { width: 26px; height: 26px; font-size: 12px; border-width: 1.5px; }

  /* Sobre a previa pequena o botao cobria os marcadores 1 e 2: no mobile ele
     sai de cima do mapa e vira uma barra de largura total ao pe da figura
     (que tem overflow:hidden, entao respeita o arredondamento). */
  .mplan__ampliar {
    position: static;
    display: flex;
    width: 100%;
    justify-content: center;
    border-radius: 0;
    padding: 14px 16px;
    font-size: 13px;
    background: var(--olive);
  }
}

@media (max-width: 560px) {
  .mplan__lista { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mplan__pin.is-ativo::after { animation: none; opacity: .5; }
  .mplan__botao, .mplan__pin { transition: none; }
}