/*
 * Projeto: MSOUZA ADVOCACIA
 * Author: Marcílio Souza
 * Secao: mapa do site, cards de navegacao e atalhos.
 * Estilos isolados; links e guia reutilizam o comportamento existente.
 */

/* Faixa institucional: apresentacao a esquerda e destinos a direita. */
.site-map { background:var(--green); color:#fff; border-bottom:2px solid var(--gold); }
.site-map-inner {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr);
  align-items:center;
  gap:48px;
}
.site-map-intro { min-width:0; padding-left:26px; border-left:4px solid #e1c28a; }
.site-map-label {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 20px;
  color:#e1c28a;
  font:700 12px/1.5 Arial,sans-serif;
  text-transform:uppercase;
}
.site-map-label svg { width:18px; height:18px; flex-shrink:0; }
.site-map-intro h2 { margin:0 0 20px; font-size:36px; line-height:1.15; }
.site-map-intro h2 span { display:block; color:#e1c28a; }
.site-map-intro > p:not(.site-map-label) { margin:0 0 26px; color:#e0ece6; font:16px/1.8 Arial,sans-serif; }
.site-map-contact {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  max-width:100%;
  padding:12px 15px;
  border:1px solid #e1c28a;
  border-radius:4px;
  background:#e1c28a;
  color:#173f36;
  font:600 14px/1.4 Arial,sans-serif;
}
.site-map-contact svg { width:18px; height:18px; flex-shrink:0; }
.site-map-contact:hover { background:#f0d7aa; border-color:#f0d7aa; }
.site-map-shortcuts { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:24px; }
.site-map-shortcuts a, .site-map-shortcuts button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  max-width:100%;
  padding:8px 0;
  border:0;
  background:transparent;
  color:#e0ece6;
  font:14px/1.5 Arial,sans-serif;
  text-align:left;
}
.site-map-shortcuts svg { width:15px; height:15px; flex-shrink:0; color:#e1c28a; }
.site-map-shortcuts a:hover, .site-map-shortcuts button:hover { color:#f0d7aa; text-decoration:underline; text-underline-offset:4px; }

/* Cards inteiros clicaveis: icone, numero, titulo e descricao. */
.site-map-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; min-width:0; }
.site-map-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:22px 22px 38px;
  border:1px solid #ffffff40;
  border-radius:6px;
  background:#ffffff0f;
  transition:background .2s,border-color .2s;
}
.site-map-card:hover { background:#ffffff1c; border-color:#e1c28a; }
.site-map-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.site-map-icon { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; background:#e1c28a; color:#173f36; border-radius:6px; }
.site-map-icon svg { width:23px; height:23px; }
.site-map-number { color:#adc4ba; font:700 26px/1 Arial,sans-serif; }
.site-map-card h3 { margin:0 0 12px; color:#fff; font-size:21px; line-height:1.3; overflow-wrap:anywhere; }
.site-map-card p { margin:0; color:#e0ece6; font:14px/1.7 Arial,sans-serif; overflow-wrap:anywhere; }
.site-map-card-arrow { position:absolute; right:20px; bottom:12px; color:#e1c28a; }
.site-map-card-arrow svg { display:block; width:17px; height:17px; }
.site-map a:focus-visible, .site-map button:focus-visible { outline:3px solid #f0d7aa; outline-offset:4px; }

/* Telas intermediarias e celulares: nenhuma coluna com largura fixa. */
@media(max-width:1100px) {
  .site-map-inner { grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:28px; }
  .site-map-intro { padding-left:20px; }
  .site-map-card { padding:20px 18px 38px; }
}
@media(max-width:900px) {
  .site-map-inner { grid-template-columns:1fr; gap:32px; }
  .site-map-intro h2 span { display:inline; }
  .site-map-shortcuts { flex-direction:row; flex-wrap:wrap; gap:4px 24px; margin-top:18px; }
}
@media(max-width:640px) {
  .site-map-intro h2 { font-size:30px; }
  .site-map-intro > p:not(.site-map-label) { font-size:15px; }
  .site-map-grid { grid-template-columns:1fr; }
  .site-map-card { padding:22px 22px 38px; }
  .site-map-contact { flex-wrap:wrap; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .site-map-card { transition:none; } }