@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

/* ===== Barra ===== */
.rn-search-wrapper{
  --bg:#f0ebf5; --blue:#0d2240; --blue-hover:#1c3b68; --orange:#EA932A; --radius:40px;
  position:relative; display:flex; align-items:center; gap:16px;
  background:var(--bg); border-radius:var(--radius); padding:12px 16px;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-weight:500;
}
.rn-search-wrapper input,.rn-search-wrapper select{
  background:transparent; font-size:16px; color:#0f172a; padding:10px 12px;
  outline:none!important; border:none!important; box-shadow:none!important;
}
.rn-search-wrapper input{ flex:2; min-width:220px; }
.rn-search-wrapper select{ flex:1; min-width:160px; cursor:pointer; }
.rn-search-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:8px;
  background:var(--blue); border:none; border-radius:12px; cursor:pointer; transition:background .18s ease; }
.rn-search-btn:hover{ background:var(--blue-hover); }
.rn-search-btn svg{ width:22px; height:22px; display:block; }
.rn-search-btn svg path{ fill:var(--orange); }
.rn-autocomplete{
  position:absolute; left:16px; right:72px; top:calc(100% + 6px);
  display:none; list-style:none; margin:0; padding:8px 0; background:#fff;
  border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 6px 20px rgba(2,6,23,.08);
  max-height:280px; overflow:auto; z-index:50;
}
.rn-autocomplete li{ padding:10px 12px; cursor:pointer; font-size:15px; }
.rn-autocomplete li:hover{ background:#f1f5f9; }

/* ===== GRID 3/2/1 ===== */
.rn-results{
  margin-top:24px; display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap:28px; grid-auto-flow:row dense;
}

/* ===== CARD (proporção 1161x1308 sem mexer no fluxo) ===== */
.rn-results .rn-card{
  position:relative; display:grid; width:100%;
  border-radius:24px; overflow:hidden; margin:0!important;
}

/* pseudo-elemento define a altura do card */
.rn-results .rn-card::before{
  content:""; width:100%;
  padding-top: calc(1308 / 1161 * 100%); /* => mesma proporção do seu hover */
  grid-area: 1 / 1 / 2 / 2;
}

/* o conteúdo do template fica por cima, sem absolute */
.rn-results .rn-card > *{
  grid-area: 1 / 1 / 2 / 2;
  min-height: 0; /* evita overflow em grids */
}

/* imagens sempre cobrem o card */
.rn-results .rn-card img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; border-radius:0 !important; display:block !important;
}

/* Mensagem vazia */
.rn-empty{
  grid-column:1 / -1; background:#fff; border:1px dashed #e2e8f0;
  border-radius:12px; padding:24px; text-align:center; color:#334155;
}

/* Breakpoints */
@media (max-width:1024px){ .rn-results{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width:640px){
  .rn-results{ grid-template-columns:1fr !important; gap:20px; }
  .rn-search-wrapper{ flex-wrap:wrap; gap:10px; }
  .rn-search-wrapper input,.rn-search-wrapper select{ flex:1 1 100%; }
  .rn-search-btn{ order:99; margin:8px auto 0; }
  .rn-autocomplete{ left:12px; right:12px; }
}