/**
 * ReservaBoat — busca e página da embarcação.
 */

/* ======================================================================
   Topo das páginas internas
   ====================================================================== */

.rb-topo-pagina {
  position: relative;
  background: var(--rb-superficie-escura);
  color: var(--rb-texto-inverso);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 0;
}

.rb-topo-pagina h1 {
  color: var(--rb-texto-inverso);
  margin-bottom: var(--rb-espaco-3);
}

.rb-topo-pagina .rb-rotulo {
  color: var(--rb-mar-raso);
}

.rb-topo-pagina__texto {
  color: var(--rb-texto-inverso-suave);
  font-size: var(--rb-texto-lg);
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.rb-topo-pagina .rb-agua {
  display: block;
  margin-bottom: -1px;
}

/* A onda ja separa o cabecalho do conteudo; o padding cheio da secao em
   cima dela abre um vao morto de mais de cem pixels. */
.rb-listagem {
  padding-top: var(--rb-espaco-10);
}

/* ======================================================================
   Filtros
   ====================================================================== */

.rb-filtros {
  margin-bottom: var(--rb-espaco-10);
  padding: var(--rb-espaco-6);
  background: var(--rb-superficie);
  border: 1px solid var(--rb-borda);
  border-radius: var(--rb-raio-lg);
  box-shadow: var(--rb-sombra-1);
}

.rb-filtros__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--rb-espaco-4);
  align-items: end;
}

.rb-filtros__campos .rb-botao {
  height: 2.75rem;
}

.rb-filtros__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rb-espaco-3);
  margin-top: var(--rb-espaco-5);
  padding-top: var(--rb-espaco-4);
  border-top: 1px solid var(--rb-borda);
}

.rb-filtros__contagem {
  margin: 0;
  max-width: none;
  font-family: var(--rb-fonte-dado);
  font-size: var(--rb-texto-sm);
  color: var(--rb-texto-suave);
}

.rb-filtros__limpar {
  font-size: var(--rb-texto-sm);
  font-weight: 600;
}

/* ======================================================================
   Página da embarcação
   ====================================================================== */

.rb-embarcacao {
  padding-top: var(--rb-espaco-6);
}

.rb-migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rb-espaco-2);
  margin-bottom: var(--rb-espaco-5);
  font-size: var(--rb-texto-sm);
  color: var(--rb-texto-suave);
}

.rb-migalhas a {
  color: var(--rb-texto-suave);
  text-decoration: none;
}

.rb-migalhas a:hover {
  color: var(--rb-marinho);
  text-decoration: underline;
}

/* --- Galeria ------------------------------------------------------------- */

.rb-galeria {
  display: grid;
  gap: var(--rb-espaco-3);
  margin-bottom: var(--rb-espaco-10);
}

.rb-galeria__principal {
  aspect-ratio: 16 / 9;
  border-radius: var(--rb-raio-xl);
  overflow: hidden;
  background: var(--rb-areia-100);
  box-shadow: var(--rb-sombra-2);
}

.rb-galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rb-galeria__miniaturas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--rb-espaco-3);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--rb-espaco-2);
}

.rb-galeria__miniaturas button {
  display: block;
  width: 7rem;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--rb-raio);
  overflow: hidden;
  background: none;
  cursor: pointer;
  transition: border-color var(--rb-transicao), opacity var(--rb-transicao);
  opacity: 0.7;
}

.rb-galeria__miniaturas button:hover {
  opacity: 1;
}

.rb-galeria__miniaturas button[aria-current='true'] {
  border-color: var(--rb-mar);
  opacity: 1;
}

.rb-galeria__miniaturas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Grade principal ----------------------------------------------------- */

.rb-embarcacao__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
  padding-bottom: var(--rb-espaco-16);
}

.rb-embarcacao__cabecalho {
  margin-bottom: var(--rb-espaco-8);
}

.rb-embarcacao__cabecalho h1 {
  margin: var(--rb-espaco-3) 0 var(--rb-espaco-2);
}

.rb-embarcacao__local {
  margin: 0;
  color: var(--rb-texto-suave);
}

/* --- Ficha técnica -------------------------------------------------------
   Grade de pares rótulo/valor. Os números ficam em monoespaçada para que
   comparar dois barcos em abas diferentes seja bater o olho na mesma
   posição. */

.rb-especificacoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--rb-espaco-4);
  margin: 0 0 var(--rb-espaco-10);
  padding: var(--rb-espaco-6);
  background: var(--rb-superficie);
  border: 1px solid var(--rb-borda);
  border-radius: var(--rb-raio-lg);
}

.rb-especificacoes__item dt {
  font-size: var(--rb-texto-xs);
  letter-spacing: var(--rb-tracking-rotulo);
  text-transform: uppercase;
  color: var(--rb-texto-suave);
  margin-bottom: var(--rb-espaco-1);
}

.rb-especificacoes__item dd {
  margin: 0;
  font-family: var(--rb-fonte-dado);
  font-size: var(--rb-texto-sm);
  font-weight: 500;
  color: var(--rb-texto);
}

.rb-embarcacao__texto {
  margin-bottom: var(--rb-espaco-10);
}

.rb-embarcacao__texto h2 {
  font-size: var(--rb-texto-2xl);
  margin-bottom: var(--rb-espaco-4);
}

.rb-comodidades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--rb-espaco-3);
}

.rb-comodidades li {
  position: relative;
  padding-left: var(--rb-espaco-6);
  font-size: var(--rb-texto-sm);
}

.rb-comodidades li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--rb-verde);
}

/* --- Proprietário -------------------------------------------------------- */

.rb-proprietario {
  display: flex;
  gap: var(--rb-espaco-5);
  align-items: start;
  padding: var(--rb-espaco-6);
  background: var(--rb-fundo-alt);
  border: 1px solid var(--rb-borda);
  border-radius: var(--rb-raio-lg);
}

.rb-proprietario__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--rb-marinho);
  color: var(--rb-texto-inverso);
}

.rb-proprietario__avatar svg {
  width: 1.6rem;
  height: 1.6rem;
}

.rb-proprietario h3 {
  margin: 0 0 var(--rb-espaco-2);
}

.rb-proprietario p {
  margin: 0;
  font-size: var(--rb-texto-sm);
  color: var(--rb-texto-suave);
}

/* --- Caixa de cotação ---------------------------------------------------- */

.rb-cotacao__caixa {
  position: sticky;
  top: 6rem;
  padding: var(--rb-espaco-6);
  background: var(--rb-superficie);
  border: 1px solid var(--rb-borda);
  border-radius: var(--rb-raio-xl);
  box-shadow: var(--rb-sombra-2);
}

.rb-cotacao__preco {
  display: flex;
  align-items: baseline;
  gap: var(--rb-espaco-2);
  flex-wrap: wrap;
  margin: 0 0 var(--rb-espaco-2);
  max-width: none;
}

.rb-cotacao__preco strong {
  font-family: var(--rb-fonte-display);
  font-stretch: 108%;
  font-size: var(--rb-texto-3xl);
  font-weight: 800;
  letter-spacing: var(--rb-tracking-display);
  color: var(--rb-marinho);
}

.rb-cotacao__preco span {
  color: var(--rb-texto-suave);
}

.rb-cotacao__nota {
  margin: 0 0 var(--rb-espaco-5);
  font-size: var(--rb-texto-sm);
  color: var(--rb-texto-suave);
}

.rb-cotacao__resumo {
  display: grid;
  gap: var(--rb-espaco-3);
  margin: 0 0 var(--rb-espaco-6);
  padding: var(--rb-espaco-4) 0;
  border-block: 1px solid var(--rb-borda);
}

.rb-cotacao__resumo > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-espaco-3);
}

.rb-cotacao__resumo dt {
  display: inline-flex;
  align-items: center;
  gap: var(--rb-espaco-2);
  font-size: var(--rb-texto-sm);
  color: var(--rb-texto-suave);
}

.rb-cotacao__resumo dt svg {
  width: 1rem;
  height: 1rem;
  color: var(--rb-mar);
}

.rb-cotacao__resumo dd {
  margin: 0;
  font-family: var(--rb-fonte-dado);
  font-size: var(--rb-texto-sm);
  font-weight: 500;
}

.rb-cotacao__aviso {
  margin: var(--rb-espaco-4) 0 0;
  font-size: var(--rb-texto-xs);
  color: var(--rb-texto-suave);
  max-width: none;
}

/* --- Barra fixa no celular ----------------------------------------------- */

.rb-barra-movel {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-espaco-4);
  padding: var(--rb-espaco-3) var(--rb-goteira);
  padding-bottom: max(var(--rb-espaco-3), env(safe-area-inset-bottom));
  background: var(--rb-superficie);
  border-top: 1px solid var(--rb-borda);
  box-shadow: 0 -4px 20px rgb(1 42 82 / 0.12);
}

.rb-barra-movel strong {
  font-family: var(--rb-fonte-display);
  font-stretch: 106%;
  font-size: var(--rb-texto-xl);
  font-weight: 800;
  color: var(--rb-marinho);
}

.rb-barra-movel span {
  font-size: var(--rb-texto-xs);
  color: var(--rb-texto-suave);
  display: block;
}

@media (max-width: 960px) {
  .rb-embarcacao__grade {
    grid-template-columns: 1fr;
  }

  /* A caixa lateral vira a barra fixa do rodapé: manter as duas seria
     mostrar o mesmo preço duas vezes na mesma tela. */
  .rb-cotacao {
    display: none;
  }

  .rb-barra-movel {
    display: flex;
  }

  .rb-embarcacao__grade {
    padding-bottom: 6rem;
  }
}