/* =====================================================================
   /lojas: a vitrine de lojas. Carrega DEPOIS do style.css e do combo.css,
   e so nesta pagina.

   Duas decisoes mandam aqui:
     * A FOTO E O CARD. Numa pagina de lugares a fotografia e o design: ela
       sangra na largura toda do card e o endereco vem num painel embaixo.
     * A DISTANCIA E A ASSINATURA. A lista se ordena por ela, cada card diz
       quanto esta, e a mais perto ganha o card largo.

   E quando a distancia NAO existe (o visitante so disse a UF), nada disso
   aparece: sem faixa, sem card largo, sem ordem.

   30/10/2026: o hero passou a ser a fachada da loja de Sorriso (foto nossa,
   no lugar da modelo com luz neon), no mesmo desenho dos outros heros.
   ===================================================================== */

/* ---------- hero: a fachada de uma loja nossa ---------- */
.hero2-lojas .hero2-img { background-image: url("/img/hero-lojas.jpg?v=3b57877625"); background-position: center 30%; }
.hero2-lojas .hero2-sub { margin-bottom: 0; }

/* ---------- o cabecalho que responde as tres situacoes ---------- */
.lojas-head { max-width: 760px; margin-bottom: 28px; }
.lojas-onde { margin-top: 12px; font-size: 15px; color: var(--texto2); }
.lojas-onde b { color: var(--tinta); font-weight: 700; }
.lojas-acoes { margin-top: 6px; display: flex; gap: 6px 22px; flex-wrap: wrap; }

/* Botao que parece link: as duas saidas desta pagina (dizer a cidade, ver o
   resto da rede) sao secundarias e nao podem competir com o botao do card. */
.lojas-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  font-size: 15px; font-weight: 700; color: var(--azul-2); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.lojas-link:hover { color: var(--azul-texto); text-decoration-thickness: 2px; }

/* ---------- "ainda nao temos loja na sua regiao": a mensagem do dono ---------- */
.lojas-vazio {
  margin: 0 0 28px; padding: 20px 22px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
}
.lojas-vazio p { font-weight: 600; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.35; color: var(--tinta); max-width: 46ch; }

/* ---------- grupos por UF (so quando nao ha de onde medir) ---------- */
.lojas-grupo + .lojas-grupo { margin-top: 44px; }
.lojas-uf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 23px; letter-spacing: -0.015em;
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--linha);
}
.lojas-uf span { font-weight: 600; font-size: 14px; color: var(--texto2); letter-spacing: 0; }

/* ---------- a grade e o card ---------- */
.lojas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.loja {
  display: flex; flex-direction: column;
  background: var(--carta); border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden;
}
.loja:hover { border-color: var(--linha-2); }
.loja-foto { position: relative; aspect-ratio: 4 / 3; background: var(--carta-2); }
.loja-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Loja sem foto: no lugar, a marca centrada num campo proprio. */
.loja-placa {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--carta-2); color: var(--verm-marca);
}
.loja-placa svg { width: 92px; height: auto; }

/* A distancia: aba solida na quina de baixo da foto. Solida porque as fotos
   tem qualquer cor por baixo e o numero precisa ler em todas. */
.loja-medida {
  position: absolute; left: 0; bottom: 0;
  padding: 7px 14px 7px 16px; border-radius: 0 var(--raio) 0 0;
  background: rgba(9, 62, 139, 0.94);
  font-weight: 800; font-size: 16px; line-height: 1.15; color: #fff;
}
.loja-1 .loja-medida { background: var(--verm); }

.loja-txt { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.loja-nome { font-size: 20px; letter-spacing: -0.015em; }
.loja-cidade { margin-top: 2px; font-size: 14px; color: var(--texto2); }
.loja-end { font-style: normal; margin-top: 12px; }
.loja-rua { display: block; font-size: 15.5px; font-weight: 700; color: var(--tinta); line-height: 1.35; }
.loja-resto { display: block; margin-top: 3px; font-size: 14px; color: var(--texto2); line-height: 1.5; }
.loja-resto span + span::before { content: " \00B7 "; color: var(--linha-2); }
/* O CEP inteiro na mesma linha: quebrar no hifen deixava "69050-" / "902". */
.loja-cep { white-space: nowrap; }
.loja-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; }
.loja-btn { min-height: 44px; flex: 1 1 auto; padding: 0 14px; font-size: 15px; white-space: nowrap; }
.loja-btn .ico-wpp { width: 17px; height: 17px; }

/* ---------- a mais perto ganha o card largo ---------- */
@media (min-width: 760px) {
  .lojas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loja-1 {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch;
  }
  .loja-1 .loja-foto { aspect-ratio: auto; min-height: 360px; }
  .loja-1 .loja-foto img { position: absolute; inset: 0; }
  .loja-1 .loja-txt { justify-content: center; padding: 28px 30px; }
  .loja-1 .loja-nome { font-size: 28px; }
  .loja-1 .loja-rua { font-size: 17px; }
  .loja-1 .loja-acoes { flex: 0 0 auto; margin-top: 22px; padding-top: 0; }
  .loja-1 .loja-btn { flex: 0 1 auto; }
  .loja-1 .loja-medida { padding: 10px 18px 10px 20px; font-size: 22px; }
  .loja-1 .loja-placa svg { width: 148px; }
}
@media (min-width: 1081px) {
  .lojas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loja-1 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* ---------- 390px e o foco ---------- */
@media (max-width: 720px) {
  .hero2-lojas .hero2-img { background-image: url("/img/hero-lojas-cel.jpg?v=1aab1b7560"); background-position: center 20%; }
  .lojas-head { margin-bottom: 22px; }
  .lojas-uf { font-size: 20px; }
  .loja-nome { font-size: 19px; }
  .loja-btn { flex: 1 1 100%; }
}
@media (min-width: 721px) and (max-width: 899px) {
  .hero2-lojas .hero2-img { background-image: url("/img/hero-lojas-cel.jpg?v=1aab1b7560"); }
}

@media (prefers-reduced-motion: reduce) {
  .loja { transition: none; }
}