/**
 * Hub de /veiculos — tela `Pagina cachoeira de veiculos.png`.
 *
 * Herda a casca do hub (mg-hub.css do core): paleta, container `.mg-wrap`, herói, cabeçalho de
 * seção, botões e a faixa de CTA. Aqui fica só o que é de veículo: a barra de busca de cinco
 * campos, os cartões de tipo, a coluna de filtros, o cartão de veículo e os três selos.
 *
 * @package Veiculos_GuiaWP
 * @author  Valoar
 * @since   1.21.0 - 2026-09-21
 */

/* A migalha mora dentro do herói, como nos outros hubs. */
body:has(.vgw-hub-migalha) .gcep-migalha { display: none; }
.vgw-hub-migalha { margin: 0 0 14px; }
.vgw-hub-migalha ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vgw-hub-migalha li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.vgw-hub-migalha li + li::before { content: ">"; color: rgba(255, 255, 255, .5); }
.vgw-hub-migalha a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.vgw-hub-migalha a:hover { color: #fff; text-decoration: underline; }
.vgw-hub-migalha [aria-current] { color: #fff; font-weight: 700; }

/* ── Herói: dois caminhos, comprar e vender ─────────────────────────────── */

.mg-hub .vgw-hub-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.mg-hub .vgw-hub-hero__acoes .mg-hub-btn { gap: 9px; }
.mg-hub .vgw-hub-hero__acoes svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.vgw-hub .mg-hub-hero__in { padding-block: 30px 62px; }
@media (min-width: 900px) { .vgw-hub .mg-hub-hero__in { padding-block: 44px 88px; } }

/* ── Herói: foto, véu e a camada do texto ───────────────────────────────── */

/*
 * O `.mg-hub-hero::after` do core é um véu ABSOLUTO sem z-index; sem uma camada acima, ele
 * pintava POR CIMA do título e o texto saía cinza. `position: relative` no conteúdo resolve, e é
 * o mesmo que os outros hubs fazem.
 */
.vgw-hub-hero { position: relative; isolation: isolate; overflow: hidden; }
.vgw-hub-hero .mg-hub-hero__in { position: relative; z-index: 1; }
.vgw-hub-hero__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
/* Sem foto o herói não precisa dos 560 px do desenho com imagem. */
.vgw-hub-hero:not(.vgw-hub-hero--foto) { min-height: 0; }
.vgw-hub-hero:not(.vgw-hub-hero--foto) .mg-hub-hero__in { padding-block: 34px 66px; }
@media (min-width: 900px) { .vgw-hub-hero:not(.vgw-hub-hero--foto) .mg-hub-hero__in { padding-block: 48px 90px; } }
/* ── Barra de busca, montada sobre o rodapé do herói ────────────────────── */

.vgw-hub-barra { position: relative; z-index: 2; margin-top: -36px; }
@media (min-width: 900px) { .vgw-hub-barra { margin-top: -46px; } }

.vgw-hub-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	padding: 14px;
	border: 1px solid #e7e2d8;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 16px 38px rgba(11, 58, 37, .14);
}
@media (min-width: 760px) { .vgw-hub-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) {
	.vgw-hub-form { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 12px; padding: 12px; }
}

.mg-hub .vgw-hub-campo { position: relative; display: flex; margin: 0; }
.vgw-hub-campo__ico { position: absolute; left: 13px; top: 50%; display: flex; transform: translateY(-50%); pointer-events: none; }
.vgw-hub-campo__ico svg { width: 17px; height: 17px; fill: none; stroke: #0f5132; stroke-width: 2; stroke-linecap: round; }
.vgw-hub-campo input,
.vgw-hub-campo select {
	width: 100%; min-width: 0; height: 48px; padding: 0 12px;
	border: 1px solid #dbe4f1; border-radius: 11px; background: #fff;
	font: 500 14.5px/1 Poppins, system-ui, sans-serif; color: #0b3a25;
}
.vgw-hub-campo--q input { padding-left: 40px; }
.vgw-hub-campo select {
	padding-right: 32px; cursor: pointer; appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352678a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.vgw-hub-campo input::placeholder { color: #5a6660; opacity: 1; }
.vgw-hub-campo input:focus, .vgw-hub-campo select:focus { outline: 2px solid #0f5132; outline-offset: 0; border-color: transparent; }
.mg-hub .vgw-hub-form__botao { height: 48px; padding-inline: 30px; }

/* ── Encontre por tipo de veículo ───────────────────────────────────────── */

.mg-hub ul.vgw-hub-tipos {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
	margin: 18px 0 0; padding: 0; list-style: none;
}
@media (min-width: 620px) { .mg-hub ul.vgw-hub-tipos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
/* `auto-fill` para que quatro tipos fiquem do mesmo tamanho de oito. */
@media (min-width: 1100px) { .mg-hub ul.vgw-hub-tipos { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } }

.vgw-hub-tipo {
	display: flex; flex-direction: column; align-items: center; gap: 9px;
	height: 100%; padding: 14px 10px 16px;
	border: 1px solid #ebe7de; border-radius: 14px; background: #f9f7f2;
	text-align: center; text-decoration: none; color: #0b3a25;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.vgw-hub-tipo:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 10px 22px rgba(11, 58, 37, .1); }
.vgw-hub-tipo__foto { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 9px; background: #eef2ec; }
.vgw-hub-tipo__foto img { width: 100%; height: 100%; object-fit: cover; }
.vgw-hub-tipo__ico { display: grid; place-items: center; width: 100%; height: 100%; color: #7d90ad; }
.vgw-hub-tipo__ico svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.vgw-hub-tipo__nome { font-size: 13.5px; font-weight: 800; line-height: 1.25; }
.vgw-hub-tipo__n { font-size: 12px; color: #5a6660; }

/* ── Grade: coluna de filtros + conteúdo ────────────────────────────────── */

.vgw-hub-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 30px; }
@media (min-width: 1100px) { .vgw-hub-grade { grid-template-columns: 252px minmax(0, 1fr); gap: 26px; align-items: start; } }

.vgw-hub-rail { min-width: 0; }
@media (min-width: 1100px) { .vgw-hub-rail { position: sticky; top: 92px; } }

.vgw-hub-filtros { padding: 16px; border: 1px solid #ebe7de; border-radius: 16px; background: #fff; }
.vgw-hub-filtros__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.mg-hub .vgw-hub-filtros__cab h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; color: #0b3a25; }
.vgw-hub-filtros__cab svg { width: 17px; height: 17px; fill: none; stroke: #0f5132; stroke-width: 2; }
.vgw-hub-filtros__limpar { padding: 0; border: 0; background: none; color: #0f5132; font: 700 12.5px/1 Poppins, system-ui, sans-serif; cursor: pointer; }
.vgw-hub-filtros__limpar:hover { text-decoration: underline; }

.mg-hub .vgw-hub-f { display: grid; gap: 6px; margin: 0 0 13px; }
.vgw-hub-f > label, .vgw-hub-f__rot { font-size: 12.5px; font-weight: 700; color: #3d4a43; }
.vgw-hub-f select, .vgw-hub-f input[type="number"] {
	width: 100%; min-width: 0; height: 40px; padding: 0 10px;
	border: 1px solid #dbe4f1; border-radius: 9px; background: #fff;
	font: 500 13.5px/1 Poppins, system-ui, sans-serif; color: #0b3a25;
}
.vgw-hub-f select {
	padding-right: 28px; cursor: pointer; appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352678a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 8px center; background-size: 15px;
}
.vgw-hub-f input::placeholder { color: #7d90ad; opacity: 1; }
.vgw-hub-f select:focus, .vgw-hub-f input:focus { outline: 2px solid #0f5132; outline-offset: 0; border-color: transparent; }
.vgw-hub-f__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.vgw-hub-f--radio { min-width: 0; padding: 0; border: 0; }
.vgw-hub-f--radio legend { padding: 0; margin-bottom: 6px; }
.vgw-hub-f--radio label { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13.5px; color: #3d4a43; cursor: pointer; }
.vgw-hub-f--radio input { width: 16px; height: 16px; accent-color: #0f5132; }

/* ── Conteúdo ───────────────────────────────────────────────────────────── */

.vgw-hub-conteudo { min-width: 0; display: grid; gap: 30px; }
.vgw-hub-bloco { min-width: 0; }

.vgw-hub-dest { display: grid; gap: 16px; }
@media (min-width: 1280px) { .vgw-hub-dest { grid-template-columns: minmax(0, 1fr) 252px; gap: 18px; align-items: start; } }

.mg-hub ul.vgw-hub-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .mg-hub ul.vgw-hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mg-hub ul.vgw-hub-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mg-hub ul.vgw-hub-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .vgw-hub-dest .mg-hub ul.vgw-hub-cards--3, .vgw-hub-dest ul.vgw-hub-cards--3 { margin-top: 0; } }

.vgw-hub-card {
	position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
	border: 1px solid #ebe7de; border-radius: 14px; background: #fff;
	transition: transform .18s ease, box-shadow .18s ease;
}
.vgw-hub-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11, 58, 37, .12); }
.vgw-hub-card__foto { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f1efe8; }
.vgw-hub-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.vgw-hub-card__sem-foto { display: grid; place-items: center; width: 100%; height: 100%; color: #a8b8ce; }
.vgw-hub-card__sem-foto svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vgw-hub-card__selo {
	position: absolute; left: 10px; top: 10px; z-index: 1;
	padding: 5px 10px; border-radius: 7px;
	background: #0f5132; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em;
}
.vgw-hub-card__corpo { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 13px 14px 15px; }
.mg-hub .vgw-hub-card__titulo { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.28; color: #0b3a25; }
.vgw-hub-card__titulo a { color: inherit; text-decoration: none; }
.vgw-hub-card__titulo a::after { content: ""; position: absolute; inset: 0; }
.mg-hub .vgw-hub-card__modelo { margin: 0; font-size: 13px; color: #5a6660; }
.mg-hub ul.vgw-hub-card__dados {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px;
	margin: 6px 0 0; padding: 0; list-style: none;
}
.vgw-hub-card__dados li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: #5a6660; }
.vgw-hub-card__dados svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.mg-hub .vgw-hub-card__preco { margin: 8px 0 0; font-size: 19px; font-weight: 900; color: #0b3a25; letter-spacing: -.01em; }
.mg-hub .vgw-hub-card__local { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: #5a6660; }
.vgw-hub-card__local svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mg-hub .vgw-hub-card--destaque .mg-hub-btn { position: relative; z-index: 1; margin-top: 12px; }

/* ── "Tem um veículo para vender?" ──────────────────────────────────────── */

.vgw-hub-anuncie { padding: 18px; border: 1px solid #d8eee2; border-radius: 16px; background: #eefaf3; }
.mg-hub .vgw-hub-anuncie__ico { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 0 10px; border-radius: 11px; background: #fff; }
.vgw-hub-anuncie__ico svg { width: 22px; height: 22px; fill: none; stroke: #158a58; stroke-width: 1.9; stroke-linejoin: round; }
.mg-hub .vgw-hub-anuncie h3 { margin: 0 0 8px; font-size: 17px; font-weight: 900; line-height: 1.24; color: #0b3a25; }
.mg-hub .vgw-hub-anuncie p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: #3d4a43; }
.mg-hub ul.vgw-hub-anuncie__itens { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.vgw-hub-anuncie__itens li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; color: #3d4a43; }
.vgw-hub-anuncie__itens svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: #158a58; stroke-width: 2.4; }

/* ── Marcas ─────────────────────────────────────────────────────────────── */

.mg-hub ul.vgw-hub-marcas {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
	margin: 16px 0 0; padding: 0; list-style: none;
}
@media (min-width: 620px) { .mg-hub ul.vgw-hub-marcas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mg-hub ul.vgw-hub-marcas { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }
.vgw-hub-marcas a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	height: 100%; padding: 16px 10px;
	border: 1px solid #ebe7de; border-radius: 13px; background: #fff;
	text-align: center; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease;
}
.vgw-hub-marcas a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(11, 58, 37, .1); }
.vgw-hub-marca__nome { font-size: 13.5px; font-weight: 800; color: #0b3a25; }
.vgw-hub-marca__n { font-size: 12px; color: #5a6660; }

/* ── Vazio ──────────────────────────────────────────────────────────────── */

.vgw-hub-vazio { padding: 40px 20px; border: 1px dashed #d4dfee; border-radius: 16px; background: #fff; text-align: center; }
.vgw-hub-vazio > span { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px; background: #f1efe8; color: #7d90ad; }
.vgw-hub-vazio svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mg-hub .vgw-hub-vazio h2 { margin: 0 0 6px; font-size: 19px; font-weight: 900; color: #0b3a25; }
.mg-hub .vgw-hub-vazio p { margin: 0 0 16px; font-size: 14px; color: #5a6660; }

/* ── Três selos ─────────────────────────────────────────────────────────── */

.vgw-hub-selos { margin-top: 34px; }
.mg-hub .vgw-hub-selos ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .mg-hub .vgw-hub-selos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vgw-hub-selos li { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; border-radius: 14px; background: #f1f6fc; }
.vgw-hub-selos li > span:last-child { display: grid; gap: 3px; font-size: 13px; line-height: 1.5; color: #5a6660; }
.vgw-hub-selos strong { font-size: 14.5px; font-weight: 800; color: #0b3a25; }
.vgw-hub-selo__ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: #fff; }
.vgw-hub-selo__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.vgw-hub-selo__ico--verde { color: #158a58; }
.vgw-hub-selo__ico--azul { color: #0f5132; }
.vgw-hub-selo__ico--laranja { color: #c95c00; }

/* ── Faixa final ────────────────────────────────────────────────────────── */

.vgw-hub-cta { margin-top: 36px; }

/*
 * A foto da serra é MUITO clara (verde ao sol) e o véu padrão do hub não segurava o texto: o
 * subtítulo saía cinza em cima do verde. Véu mais forte do lado do texto, sem escurecer a foto
 * inteira, e o subtítulo em branco quase cheio.
 */
.vgw-hub-hero--foto::after {
	background: linear-gradient(101deg, rgba(6, 20, 40, .94) 0%, rgba(6, 20, 40, .86) 34%, rgba(6, 20, 40, .55) 62%, rgba(6, 20, 40, .34) 100%);
}
@media (max-width: 899px) {
	.vgw-hub-hero--foto::after {
		background: linear-gradient(180deg, rgba(6, 20, 40, .78) 0%, rgba(6, 20, 40, .88) 100%);
	}
}
.mg-hub .vgw-hub-hero .mg-hub-hero__lead { color: rgba(255, 255, 255, .94); text-shadow: 0 1px 12px rgba(6, 20, 40, .5); }
.mg-hub .vgw-hub-hero .mg-hub-hero__h1 { text-shadow: 0 2px 16px rgba(6, 20, 40, .45); }

/*
 * "Automatizado", "486.000 km": o dado longo estourava a coluna e encostava no vizinho. Cada
 * célula corta com reticências em vez de invadir a outra, e o título completo fica no `title`
 * do anúncio, uma linha abaixo.
 */
.vgw-hub-card__dados li { overflow: hidden; }
.vgw-hub-card__dados li > :not(svg),
.vgw-hub-card__dados li { white-space: nowrap; text-overflow: ellipsis; }

/* ── Filtros: botão no celular, coluna aberta no desktop ────────────────── */

.vgw-hub-filtros__det { min-width: 0; }
.vgw-hub-filtros__det > summary { list-style: none; cursor: pointer; }
.vgw-hub-filtros__det > summary::-webkit-details-marker { display: none; }
.vgw-hub-filtros__cab {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin: 0 0 14px; border-radius: 10px;
}
.vgw-hub-filtros__det:not([open]) > .vgw-hub-filtros__cab { margin-bottom: 0; }
.vgw-hub-filtros__titulo { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #0b3a25; }
.vgw-hub-filtros__titulo svg { width: 17px; height: 17px; fill: none; stroke: #0f5132; stroke-width: 2; stroke-linecap: round; }
.vgw-hub-filtros__seta { display: flex; }
.vgw-hub-filtros__seta svg { width: 17px; height: 17px; fill: none; stroke: #5a6660; stroke-width: 2; transform: rotate(90deg); transition: transform .18s ease; }
.vgw-hub-filtros__det[open] .vgw-hub-filtros__seta svg { transform: rotate(-90deg); }
.vgw-hub-filtros__det > summary:focus-visible { outline: 2px solid #0f5132; outline-offset: 3px; }
.mg-hub p.vgw-hub-filtros__limpar-w { margin: 0 0 12px; text-align: right; }

@media (min-width: 1100px) {
	/* No desktop a coluna é sempre coluna: o botão de abrir não faz sentido. */
	.vgw-hub-filtros__det > summary { pointer-events: none; }
	.vgw-hub-filtros__seta { display: none; }
}

/*
 * Sem veículo publicado não há coluna de filtros — e sem ela o conteúdo caía dentro da coluna de
 * 252 px, espremido. Foi o que apareceu na produção, que hoje está com zero anúncios.
 */
@media (min-width: 1100px) {
	.vgw-hub-grade--sem-rail { grid-template-columns: minmax(0, 1fr); }
}

/*
 * A barra de busca em FLEX, e não em colunas fixas: os campos de tipo, marca, modelo e faixa só
 * existem quando há dado para eles. Em grade de seis colunas, o guia sem veículo ficava com o
 * campo de texto curtinho e meia barra vazia.
 */
@media (min-width: 1180px) {
	.vgw-hub-form { display: flex; flex-wrap: wrap; align-items: center; }
	.mg-hub .vgw-hub-form .vgw-hub-campo { flex: 1 1 150px; }
	.mg-hub .vgw-hub-form .vgw-hub-campo--q { flex: 2 1 280px; }
	.mg-hub .vgw-hub-form__botao { flex: 0 0 auto; }
}

/*
 * Selos: o ícone é CHEIO e fica direto no cartão, sem a caixinha branca — é assim no mockup, e o
 * traço fino dentro de um quadrado branco saía apagado. Verde, verde e azul, nessa ordem.
 */
.vgw-hub-selo__ico { width: 46px; height: 46px; border-radius: 0; background: none; }
.vgw-hub-selo__ico svg { width: 42px; height: 42px; fill: currentColor; stroke: none; }
.vgw-hub-selos li { align-items: center; gap: 15px; padding: 18px 20px; }