/* ==========================================================================
   Secao 09, mapa "Where we work." Dono: MAPA. Prefixo .mp
   O mapa e um SVG inline (condados, rio, rodovias) + uma camada em HTML por cima (pinos, escudos,
   rotulos, tag) para o texto e o alvo de toque nao encolherem com o SVG no celular.
   Sem JS: mapa e lista inteiros e visiveis. Movimento so em (prefers-reduced-motion: no-preference).
   ========================================================================== */

.mp{
  --mp-cw:1.5;      /* espessura da divisa, em unidades do viewBox (1000 de largura) */
  --mp-rw:3.4;      /* rio */
  --mp-rw2:1.3;
  --mp-rd:1.5;      /* rodovia */
  --mp-pw:22px; --mp-ph:30px;   /* pino */
  overflow:hidden;
}

/* ------------------------------------------------------------------ grade */
.mp__grid{
  display:grid;
  grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);
  grid-template-rows:auto 1fr;
  column-gap:clamp(36px,5vw,76px);
  row-gap:0;
}
.mp__grid{ grid-template-areas:"head map" "side map" }
.mp__head{ grid-area:head; align-self:start }
.mp__fig{ grid-area:map; align-self:start }
.mp__side{ grid-area:side; align-self:start; margin-top:clamp(26px,3vw,40px) }
.mp__head .h2{ margin:0 0 20px }
.mp__head .lead{ margin:0; max-width:34ch }

@media (max-width:1039px){
  .mp__grid{
    grid-template-columns:minmax(0,1fr); grid-template-rows:none;
    grid-template-areas:"head" "map" "side";
    row-gap:28px;
  }
  .mp__side{ margin-top:0 }
  .mp__head .lead{ max-width:56ch }
}

/* ------------------------------------------------------------------ cartao do mapa */
.mp__fig{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  background:#222221; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
}
.mp__stage{
  position:relative; width:100%;
  /* azulejo e rejunte: a grade do produto, bem apagada */
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px; background-position:-1px -1px;
}
.mp__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:hidden }
.mp__ov{ position:absolute; inset:0; pointer-events:none }
.mp__cap{
  padding:12px 18px 14px; font-size:12px; line-height:1.45; color:var(--pedra);
  border-top:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.14);
}

/* ------------------------------------------------------------------ geometria */
.mp__ctx,.mp__roads,.mp__water{ pointer-events:none }
.mp__ctx path{ fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.12); stroke-width:1; stroke-linejoin:round }

.mp__co{
  fill:var(--lima); fill-opacity:.85;
  stroke:var(--profundo); stroke-width:var(--mp-cw); stroke-linejoin:round;
  stroke-dasharray:1.02 3; stroke-dashoffset:0;
  transition:fill-opacity .3s var(--ease-soft);
  outline:none; cursor:default;
}
.mp__co.is-hot{ fill-opacity:1 }
.mp.has-hot .mp__co:not(.is-hot){ fill-opacity:.58 }

.mp__rio{
  fill:none; stroke:var(--pedra); stroke-opacity:.95; stroke-width:var(--mp-rw);
  stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1.02 3; stroke-dashoffset:0;
}
.mp__rio2{
  fill:none; stroke:#fff; stroke-opacity:.95; stroke-width:var(--mp-rw2);
  stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:.010 .037; stroke-dashoffset:0;
}
.mp__road{
  fill:none; stroke:var(--pedra); stroke-opacity:.8; stroke-width:var(--mp-rd);
  stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1.02 3; stroke-dashoffset:0;
}

/* ------------------------------------------------------------------ camada em HTML */
.mp__cl{
  position:absolute; transform:translate(-50%,-50%); white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(28,28,27,.62); transition:opacity .2s;
}
.mp.has-tag .mp__cl.is-hid{ opacity:0 }

.mp__sh{
  position:absolute; transform:translate(-50%,-50%);
  min-width:24px; height:22px; padding:0 5px; display:grid; place-items:center;
  font-size:10.5px; font-weight:700; line-height:1; letter-spacing:.02em;
  color:var(--pedra); background:var(--profundo); border:1.5px solid var(--pedra);
  border-radius:6px 6px 11px 11px / 6px 6px 13px 13px;
}

.mp__pin{
  position:absolute; width:0; height:0; z-index:3; pointer-events:auto;
  color:#fff; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.mp__pin::before{ /* alvo de toque de 44px, centrado no corpo do pino */
  content:""; position:absolute; left:-22px; top:calc(var(--mp-ph) / -2 - 22px); width:44px; height:44px; border-radius:50%;
}
.mp__pin:focus-visible{ outline:none }
.mp__pin:focus-visible .mp__pl{ outline:2px solid #fff; outline-offset:2px }
.mp__b{
  position:absolute; left:calc(var(--mp-pw) / -2); top:calc(var(--mp-ph) * -1);
  width:var(--mp-pw); height:var(--mp-ph); transform-origin:50% 100%;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.35));
}
.mp__b svg{ width:100%; height:100%; overflow:visible }
.mp__b path{ fill:var(--profundo); stroke:#fff; stroke-width:1.8; stroke-linejoin:round; transition:fill .25s }
.mp__b circle{ fill:#fff; transition:fill .25s }
.mp__pl{
  position:absolute; top:calc(var(--mp-ph) / -2 - 14px); height:28px; padding:0 11px; display:grid; align-items:center;
  white-space:nowrap; font-size:12.5px; font-weight:600; line-height:1; letter-spacing:.005em;
  color:#fff; background:rgba(28,28,27,.94); border-radius:999px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6); transition:background .25s,color .25s,transform .35s cubic-bezier(.34,1.56,.64,1);
}
.mp__pin--r .mp__pl{ left:calc(var(--mp-pw) / 2 + 3px) }
.mp__pin--l .mp__pl{ right:calc(var(--mp-pw) / 2 + 3px) }

.mp__pin.is-on{ z-index:20 !important }
.mp__pin.is-on .mp__b{ transform:translateY(-5px) scale(1.2) }
.mp__pin.is-on .mp__b path{ fill:#fff; stroke:var(--profundo) }
.mp__pin.is-on .mp__b circle{ fill:var(--profundo) }
.mp__pin.is-on .mp__pl{ background:#fff; color:var(--profundo) }

.mp__pulse{
  position:absolute; left:-15px; top:-15px; width:30px; height:30px; border-radius:50%;
  border:2px solid var(--profundo); opacity:.28; transform:scale(1.5); pointer-events:none;
}

.mp__tag{
  position:absolute; z-index:6; pointer-events:none; white-space:nowrap;
  transform:translate(-50%,-50%) scale(.9); opacity:0; transition:opacity .2s,transform .3s var(--ease-out);
  padding:8px 13px; border-radius:999px; background:#fff; color:var(--profundo);
  font-size:13px; font-weight:600; line-height:1; box-shadow:0 10px 24px -10px rgba(0,0,0,.65);
}
.mp__tag.is-show{ opacity:1; transform:translate(-50%,-50%) scale(1) }

/* ------------------------------------------------------------------ busca e lista */
.mp__sl{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.mp__sf{ position:relative }
.mp__si{ position:absolute; left:18px; top:50%; width:20px; height:20px; margin-top:-10px; fill:none; stroke:var(--pedra); stroke-width:1.8; stroke-linecap:round; pointer-events:none }
.mp__in{
  width:100%; height:56px; padding:0 54px 0 48px; font:inherit; font-size:16px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-pill);
  transition:border-color .2s,background .2s; -webkit-appearance:none; appearance:none;
}
.mp__in::placeholder{ color:var(--pedra); opacity:.75 }
.mp__in:hover{ border-color:rgba(255,255,255,.4) }
.mp__in:focus{ background:rgba(255,255,255,.1) }
.mp__in:focus-visible{ outline:2px solid #fff; outline-offset:3px }
.mp__x{
  position:absolute; right:4px; top:50%; width:48px; height:48px; margin-top:-24px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--pedra); cursor:pointer; display:grid; place-items:center;
}
.mp__x[hidden]{ display:none }
.mp__x svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }
.mp__x:hover{ color:#fff; background:rgba(255,255,255,.1) }
html:not(.js) .mp__search{ display:none }

.mp__list{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px }
.mp__li{ border-bottom:1px solid rgba(255,255,255,.12) }
.mp__li[hidden]{ display:none }
.mp__a{
  display:flex; align-items:center; gap:10px; min-height:56px; padding:0 4px; text-decoration:none; color:var(--pedra);
  font-size:17px; font-weight:500; white-space:nowrap; transition:color .2s,padding .3s var(--ease-out);
}
.mp__ic{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s cubic-bezier(.34,1.56,.64,1) }
.mp__nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis }
.mp__go{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:translateX(-6px); transition:opacity .2s,transform .3s var(--ease-out) }
.mp__a:hover,.mp__a:focus-visible,.mp__a.is-on{ color:#fff; padding-left:10px }
.mp__a:hover .mp__go,.mp__a:focus-visible .mp__go,.mp__a.is-on .mp__go{ opacity:1; transform:none }
.mp__a:hover .mp__ic,.mp__a.is-on .mp__ic{ transform:translateY(-2px) scale(1.15) }
.mp__more{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; min-height:56px; padding:0 4px; font-size:15px; color:var(--pedra); border-bottom:0 }
.mp__more .mp__ic{ opacity:.6 }
.mp__more .pend{ cursor:default }

.mp__live{ min-height:0 }
.mp__none{ margin:20px 0 0; padding:18px 20px; border-radius:var(--r-md); background:rgba(255,255,255,.07); color:#fff; font-size:17px; line-height:1.5 }
.mp__none[hidden]{ display:none }
.mp__tel{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:4px; font-weight:600; color:#fff; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.5); white-space:nowrap }
.mp__tel:hover{ text-decoration-color:#fff }

/* ------------------------------------------------------------------ celular */
@media (max-width:760px){
  .mp{ --mp-cw:2.6; --mp-rw:6; --mp-rw2:2.2; --mp-rd:2.6; --mp-pw:14px; --mp-ph:19px }
  .mp__ctx path{ stroke-width:1.8 }
  .mp__cl{ font-size:9px; letter-spacing:.1em }
  .mp__sh{ min-width:20px; height:18px; font-size:9px; border-width:1.2px }
  .mp__pl{ height:22px; padding:0 8px; font-size:11px; top:calc(var(--mp-ph) / -2 - 11px) }
  .mp__tag{ font-size:12px; padding:7px 11px }
  .mp__cap{ padding:11px 14px 13px }
  /* o mapa vai de borda a borda no celular */
  .mp__fig{ margin-inline:calc(var(--gutter) * -1); border-radius:0; border-inline:0 }
  .mp__a{ font-size:16px; gap:8px }
  .mp__list{ column-gap:14px }
  .mp__go{ display:none }
}

@media (max-width:560px){
  /* 5 chips e 5 rotulos de condado viram borrao num mapa de 390px: so o de Richmond fica; os outros aparecem ao acender */
  .mp__cl{ display:none }
  .mp__pin:not([data-city="richmond"]) .mp__pl{ opacity:0 }
  .mp__pin.is-on .mp__pl{ opacity:1 !important }
}

/* ------------------------------------------------------------------ entrada (so com JS e sem reduced-motion) */
@keyframes mp-draw{ from{ stroke-dashoffset:1.02 } }
@keyframes mp-fill{ from{ fill-opacity:0 } }
@keyframes mp-ink{ from{ stroke:var(--lima) } }
@keyframes mp-fade{ from{ opacity:0 } }
@keyframes mp-drop{
  0%{ opacity:0; transform:translateY(-52px) scale(.85) }
  42%{ opacity:1; transform:translateY(0) scale(1) }
  60%{ transform:translateY(-10px) }
  76%{ transform:translateY(0) }
  88%{ transform:translateY(-3px) }
  100%{ transform:none }
}
@keyframes mp-pop{ from{ opacity:0; transform:translateX(-6px) } }
@keyframes mp-pulse{ 0%{ transform:scale(.35); opacity:.6 } 100%{ transform:scale(2.6); opacity:0 } }
@keyframes mp-flow{ to{ stroke-dashoffset:-.94 } }

@media (prefers-reduced-motion:no-preference){
  /* estado inicial: so existe com JS e antes de entrar na tela */
  html.js .mp:not(.is-in) .mp__co{ stroke-dashoffset:1.02; fill-opacity:0; stroke:var(--lima) }
  html.js .mp:not(.is-in) .mp__ctx,
  html.js .mp:not(.is-in) .mp__sh,
  html.js .mp:not(.is-in) .mp__cl,
  html.js .mp:not(.is-in) .mp__rio2,
  html.js .mp:not(.is-in) .mp__pl,
  html.js .mp:not(.is-in) .mp__pulse,
  html.js .mp:not(.is-in) .mp__b{ opacity:0 }
  html.js .mp:not(.is-in) .mp__rio,
  html.js .mp:not(.is-in) .mp__road{ stroke-dashoffset:1.02 }

  /* linha do tempo da entrada (a partir de .is-in) */
  html.js .mp.is-in .mp__ctx{ animation:mp-fade .9s ease-out backwards }
  html.js .mp.is-in .mp__co{
    animation:
      mp-draw 1.2s var(--ease-out) calc(var(--i) * 60ms) backwards,
      mp-fill .7s ease-out calc(.5s + var(--i) * 80ms) backwards,
      mp-ink .5s linear calc(1s + var(--i) * 80ms) backwards;
  }
  html.js .mp.is-in .mp__rio{ animation:mp-draw 1.5s var(--ease-out) .55s backwards }
  html.js .mp.is-in .mp__road{ animation:mp-draw 1.1s var(--ease-out) calc(.9s + var(--i) * 140ms) backwards }
  html.js .mp.is-in .mp__rio2{ animation:mp-fade .8s ease-out 2s backwards, mp-flow 18s linear 2s infinite }
  html.js .mp.is-in .mp__sh,
  html.js .mp.is-in .mp__cl{ animation:mp-fade .7s ease-out 1.9s backwards }
  html.js .mp.is-in .mp__b{ animation:mp-drop .85s linear calc(1.5s + var(--i) * 150ms) backwards }
  html.js .mp.is-in .mp__pl{ animation:mp-pop .5s var(--ease-out) calc(2s + var(--i) * 150ms) backwards }
  html.js .mp.is-in .mp__pulse{ animation:mp-pulse 2.6s ease-out 2.6s infinite }
  html.js .mp.is-off *{ animation-play-state:paused }

  /* a lista e os pinos nao pulam: so a transicao de hover */
  .mp__co,.mp__b,.mp__pl{ will-change:auto }
}
@media (prefers-reduced-motion:reduce){
  .mp *,.mp *::before,.mp *::after{ transition-duration:.01ms !important; animation:none !important }
}