/* ==========================================================================
   Ruas do Bixiga — layout das páginas de logradouro (front-end)
   Escopo em .rbx-rua. Herda as cores da marca do portal.
   ========================================================================== */

.rbx-rua {
	--rbx-verde: #006838;
	--rbx-vermelho: #d71921;
	--rbx-ouro: #c8a24a;
	--rbx-ink: #222;
	--rbx-texto: #444;
	--rbx-muted: #777;
	--rbx-linha: #e6e6e6;
	--rbx-suave: #f5f7f5;
	margin-top: 34px;
	color: var(--rbx-texto);
}
.rbx-rua *, .rbx-rua *::before, .rbx-rua *::after { box-sizing: border-box; }

.rbx-bloco { margin: 0 0 32px; }
.rbx-bloco h2 {
	font-size: 20px; font-weight: 700; color: var(--rbx-ink);
	margin: 0 0 16px; padding-bottom: 10px; position: relative;
}
.rbx-bloco h2::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 48px; height: 3px; background: var(--rbx-vermelho); border-radius: 2px;
}

/* ---- Foto principal: abre a página, na largura toda do post ----
   SEM `aspect-ratio` e SEM `object-fit`: a imagem aparece inteira, na proporção
   em que foi enviada. Um banner 787×100 sai largo e baixo, que é o certo —
   forçar 2/1 estourava a imagem e cortava o nome da rua no meio.
   `max-width:none` porque tema costuma limitar imagem dentro do conteúdo. */
.rbx-foto { margin: 0 0 22px; }
.rbx-foto__img {
	display: block; width: 100%; max-width: none; height: auto;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
}

/* ---- Plaquinha azul: flutua à esquerda, o texto contorna ----
   No celular vira largura total acima do primeiro parágrafo (ver a media query
   lá embaixo) — é o layout combinado com o cliente. */
.rbx-placa {
	float: left; width: 262px; max-width: 45%;
	margin: 4px 24px 16px 0;
}
.rbx-placa__img {
	display: block; width: 100%; height: auto; border-radius: 6px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}

/* ---- Texto (parágrafos vindos dos campos) ---- */
.rbx-texto { font-size: 16.5px; line-height: 1.75; }
.rbx-texto p { margin: 0 0 1.1em; }
/* Impede o bloco seguinte de subir ao lado da placa quando o texto é curto. */
.rbx-texto::after { content: ""; display: table; clear: both; }
/* A capitular brigaria com o float da placa na mesma linha; só sem placa. */
.rbx-texto > p:first-child::first-letter {
	float: left; font-size: 3.1em; line-height: .86;
	padding: .06em .1em 0 0; color: var(--rbx-verde); font-weight: 700;
}

/* ---- Metrô ----
   A cor da linha é a identidade dela em São Paulo, então a etiqueta carrega a
   cor oficial via custom property (vem no style inline do PHP, que é a fonte
   única). Amarela e laranja pedem texto escuro — daí --rbx-linha-texto. */
.rbx-metro__lista {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px;
}
.rbx-metro__item {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	padding: 12px 15px; border-radius: 8px;
	background: #fff; border: 1px solid var(--rbx-linha);
}
.rbx-metro__item b { font-size: 15px; color: var(--rbx-ink); line-height: 1.25; }
.rbx-metro__item small { font-size: 12px; color: var(--rbx-muted); }
.rbx-metro__linhas { display: flex; flex-wrap: wrap; gap: 5px; }

.rbx-linha {
	display: inline-block; padding: 2px 9px; border-radius: 11px;
	font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
	background: var(--rbx-linha-cor, #8a8a8a);
	color: var(--rbx-linha-texto, #fff);
}

/* Estação em obras: mesma cor, mas listrada — dá para ver que ainda não abriu. */
.rbx-metro__item.is-futura {
	border-style: dashed;
	background: repeating-linear-gradient(135deg, #fff, #fff 9px, #fbfbfb 9px, #fbfbfb 18px);
}
.rbx-metro__item.is-futura .rbx-linha { opacity: .72; }
.rbx-metro__obras {
	font-size: 10.5px; font-style: normal; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; color: var(--rbx-muted);
}
.rbx-metro__nota { margin: 12px 0 0; font-size: 12.5px; color: var(--rbx-muted); line-height: 1.5; }

/* ---- Serviços, dentro de "A rua em dados" ----
   Ícone, quantidade e categoria. Sem nome de estabelecimento: a página informa,
   não indica. */
.rbx-entorno__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px;
}
.rbx-entorno__item {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 14px; border-radius: 8px;
	background: #fff; border: 1px solid var(--rbx-linha);
}
.rbx-entorno__icone { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.rbx-entorno__n {
	flex: 0 0 auto; min-width: 26px; text-align: center;
	padding: 2px 8px; border-radius: 20px;
	background: var(--rbx-suave); color: var(--rbx-verde);
	font-size: 14px; font-weight: 700;
}
.rbx-entorno__item b {
	font-size: 14px; color: var(--rbx-ink); line-height: 1.3; font-weight: 600;
}

.rbx-entorno__sub {
	font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--rbx-verde); margin: 22px 0 10px;
}
.rbx-entorno__fonte {
	margin: 16px 0 0; font-size: 12px; color: var(--rbx-muted); line-height: 1.5;
}

/* ---- Mapa ---- */
.rbx-mapa__canvas {
	height: 340px; border-radius: 10px; overflow: hidden;
	border: 1px solid var(--rbx-linha); z-index: 0;
	/* O container precisa da largura toda desde o começo: é ela que o Leaflet
	   mede para decidir quantos ladrilhos buscar. */
	width: 100%;
}

/* Defesa contra o tema. Quase todo tema declara `img { max-width: 100% }` — e
   isso encolhe os ladrilhos do Leaflet, que são <img> de 256px posicionados em
   grade. O resultado é mapa quebrado, com pedaços faltando. O próprio Leaflet
   se protege, mas o CSS do tema costuma vir depois; por isso repetimos aqui, e
   por isso este arquivo é enfileirado DEPOIS do leaflet.css. */
.rbx-mapa .leaflet-container img,
.rbx-mapa .leaflet-pane img,
.rbx-mapa .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-radius: 0;
	box-shadow: none;
}
/* Controles e marcador não podem herdar largura de imagem do conteúdo. */
.rbx-mapa .leaflet-control img,
.rbx-mapa .leaflet-marker-icon { width: auto; height: auto; }

/* ---- Ficha ---- */
.rbx-ficha__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1px; margin: 0; background: var(--rbx-linha);
	border: 1px solid var(--rbx-linha); border-radius: 8px; overflow: hidden;
}
.rbx-ficha__item { background: #fff; padding: 13px 16px; margin: 0; }
.rbx-ficha__item dt {
	font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--rbx-muted); font-weight: 700; margin: 0 0 3px;
}
.rbx-ficha__item dd { margin: 0; font-size: 15px; color: var(--rbx-ink); font-weight: 600; }

/* ---- História ---- */
.rbx-historia { background: var(--rbx-suave); border-radius: 8px; padding: 22px 24px; }
.rbx-historia h2 { margin-top: 0; }
.rbx-historia__nome { font-size: 17px; margin: 0 0 10px; }
.rbx-historia__anos { color: var(--rbx-muted); font-weight: 400; }
.rbx-historia__curio { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rbx-linha); }
.rbx-historia__curio h3 {
	font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--rbx-verde); margin: 0 0 8px;
}

/* ---- Galeria: uma foto grande, setas e lupa ----
   Sem JS a classe `is-ativa` nunca entra e os slides ficam todos visíveis,
   empilhados — a página continua servindo. */
.rbx-galeria__palco { position: relative; }
.rbx-galeria__slide { margin: 0 0 12px; }
.rbx-galeria__link { display: block; line-height: 0; }
.rbx-galeria__img {
	display: block; width: 100%; max-width: none; height: auto;
	border-radius: 10px; background: var(--rbx-suave);
}
.rbx-galeria__slide figcaption {
	margin-top: 8px; font-size: 13px; color: var(--rbx-muted); line-height: 1.5;
}

.rbx-galeria.is-ativa .rbx-galeria__slide { display: none; margin: 0; }
.rbx-galeria.is-ativa .rbx-galeria__slide.is-atual { display: block; }
.rbx-galeria.is-ativa .rbx-galeria__link { cursor: zoom-in; }

.rbx-galeria__seta, .rbx-galeria__lupa {
	position: absolute; z-index: 2; cursor: pointer;
	border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .55); color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: background .16s ease;
}
.rbx-galeria__seta:hover, .rbx-galeria__lupa:hover { background: rgba(0, 0, 0, .8); }
.rbx-galeria__seta:focus-visible, .rbx-galeria__lupa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.rbx-galeria__seta {
	top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; font-size: 30px; line-height: 1; padding-bottom: 4px;
}
.rbx-galeria__seta--ant { left: 12px; }
.rbx-galeria__seta--prox { right: 12px; }
/* Sem JS não há o que navegar: as setas só aparecem com a galeria ativa. */
.rbx-galeria:not(.is-ativa) .rbx-galeria__seta,
.rbx-galeria:not(.is-ativa) .rbx-galeria__lupa,
.rbx-galeria:not(.is-ativa) .rbx-galeria__contador,
.rbx-galeria:not(.is-ativa) .rbx-galeria__pontos { display: none; }

.rbx-galeria__lupa { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 17px; }
.rbx-galeria__contador {
	position: absolute; left: 12px; top: 12px; z-index: 2;
	background: rgba(0, 0, 0, .55); color: #fff;
	padding: 4px 11px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
}

.rbx-galeria__pontos { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.rbx-galeria__ponto {
	width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
	background: #cfcfcf; cursor: pointer; transition: background .16s ease, transform .16s ease;
}
.rbx-galeria__ponto.is-atual { background: var(--rbx-vermelho); transform: scale(1.25); }

/* ---- Lupa: visor em tela cheia ---- */
.rbx-lupa {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(0, 0, 0, .92);
	display: flex; align-items: center; justify-content: center;
	padding: 28px;
}
.rbx-lupa__img { max-width: 100%; max-height: 92vh; width: auto; height: auto; border-radius: 4px; }
.rbx-lupa__fechar {
	position: absolute; top: 16px; right: 20px;
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .14); color: #fff;
	font-size: 30px; line-height: 1; cursor: pointer;
}
.rbx-lupa__fechar:hover { background: rgba(255, 255, 255, .28); }

/* ---- Ruas vizinhas ---- */
.rbx-vizinhas__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.rbx-vizinha {
	display: inline-block; padding: 7px 14px; border-radius: 20px;
	background: #fff; border: 1px solid var(--rbx-linha);
	color: var(--rbx-verde); font-size: 14px; font-weight: 600; text-decoration: none;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.rbx-vizinha:hover { background: var(--rbx-verde); border-color: var(--rbx-verde); color: #fff; }

/* ---- Imóveis nesta rua: cartão enxuto ----
   Só capa, título e preço. O cartão completo do plugin de Imóveis traz galeria,
   selos e botões — aqui isso roubaria a página. Quem se interessar clica. */
.rbx-imoveis__lista {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px;
}
.rbx-imovel {
	display: block; text-decoration: none; color: inherit;
	border: 1px solid var(--rbx-linha); border-radius: 10px; overflow: hidden;
	background: #fff; transition: box-shadow .18s ease, transform .18s ease;
}
.rbx-imovel:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.rbx-imovel__capa { display: block; line-height: 0; background: var(--rbx-suave); }
.rbx-imovel__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.rbx-imovel__sem-foto { display: block; aspect-ratio: 4 / 3; background: var(--rbx-suave); }
.rbx-imovel__texto { display: block; padding: 11px 13px 13px; }
.rbx-imovel__texto b {
	display: block; font-size: 14.5px; line-height: 1.35; color: var(--rbx-ink); font-weight: 600;
}
.rbx-imovel__texto small {
	display: block; margin-top: 5px; font-size: 15px; font-weight: 700; color: var(--rbx-verde);
}

.rbx-imoveis__mais { margin-top: 16px; }
.rbx-imoveis__mais a { color: var(--rbx-verde); font-weight: 600; }

@media (max-width: 640px) {
	.rbx-ficha__grid { grid-template-columns: 1fr 1fr; }
	.rbx-metro__lista { grid-template-columns: 1fr; }
	.rbx-entorno__grid { grid-template-columns: 1fr 1fr; }
	.rbx-imoveis__lista { grid-template-columns: 1fr 1fr; }
	.rbx-galeria__seta { width: 38px; height: 38px; font-size: 26px; }
	.rbx-galeria__seta--ant { left: 8px; }
	.rbx-galeria__seta--prox { right: 8px; }
	.rbx-lupa { padding: 12px; }
	.rbx-historia { padding: 18px; }
	.rbx-texto { font-size: 16px; }
	.rbx-texto > p:first-child::first-letter { font-size: 2.6em; }
	.rbx-mapa__canvas { height: 260px; }
	.rbx-foto__img { border-radius: 8px; }

	/* No celular a placa deixa de flutuar: largura total, acima do texto. */
	.rbx-placa {
		float: none; width: 100%; max-width: 100%;
		margin: 0 0 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rbx-imovel { transition: none; }
	.rbx-imovel:hover { transform: none; }
	.rbx-galeria__ponto { transition: none; }
	.rbx-galeria__ponto.is-atual { transform: none; }
}