/* search.css */

/* Aux: esconder título sem perder acessibilidade */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Container */
.search-wrap{
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Barra de pesquisa (conforme anexo) */
.search-bar{
  display:flex; align-items:center; gap:10px;
  background:#FFFFFF; color:#0E0F12;
  border-radius: 12px;
  padding:10px 14px;
  margin: 6px 0 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.search-bar .material-symbols-outlined{
  font-size:26px;
  color:#0E0F12;
}
.search-input{
  background:transparent;
  border:0;
  color:#0E0F12;
  padding:10px 2px;
  font-size:1.2rem;
  width:100%;
  outline:none;
  box-shadow:none;
}
.search-input::placeholder{ color:#4b5563; }

/* ===== Grid de resultados */
.grid-results{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
}

/* ===== Card de obra (imagem com overlay + textos) */
.card{
  position:relative;
  overflow:hidden;
  border-radius: 16px;
  background:#17181D;
  border:1px solid #1C1D26;
  aspect-ratio: 3/4;
}

.logo-link { display: inline-flex; align-items: center; padding: 14px 16px 8px; }
.logo { width: 100px; height: auto; display: block; }

.card-link{
  position:absolute; inset:0; display:block; text-decoration:none; color:inherit;
}
.card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .25s ease;
}
.card:hover img{ transform: scale(1.02); }

.card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 10%, rgba(0,0,0,.0) 60%);
  pointer-events:none;
}

.card .texts{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; flex-direction:column; gap:4px;
}

/* badges (agora podem ser várias) */
.badges{
  display:flex; gap:6px; flex-wrap:wrap;
}
.badge{
  display:inline-block;
  background: rgba(255,255,255,.2);
  color:#fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-size:.8rem;
  width:max-content;
  backdrop-filter: blur(2px);
}

.title{
  font-weight:700;
  font-size:1.05rem;
  line-height:1.2;
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* Mensagem de estado */
.status-msg{
  margin-top: 10px;
  color:#c9ced6;
}

/* ===== Responsivo */
@media (min-width: 760px){
  .grid-results{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .title{ font-size:1.1rem; }
}
@media (max-width: 420px){
  .search-bar{ padding:8px 12px; }
  .search-input{ font-size:1.05rem; }
}

/* ===== Footer institucional ===== */
.site-footer1{
  margin-top: 253px;
  margin-bottom: 120px;
  padding: 14px 20px 28px; /* topo menor: de 24px para 14px */
  background: #0E0F12;
  border-top: 1px solid #1C1D26;
  box-shadow: 0 -6px 24px rgba(0,0,0,.45);
}

.site-footer-inner1{
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* sobe o conteúdo */
  justify-content: space-between;
  gap: 10px 18px;
  font-size: .85rem;
  color: #9CA3AF;
  min-height: 80px; /* garante uma altura mínima visual */
}

/* Mobile: footer ainda mais alto por causa do menu inferior */
@media (max-width: 720px){
  .site-footer1{
    margin-bottom: 140px; /* antes era 96px */
    padding: 14px 16px 26px;
    height: 200px;
  }
  .site-footer-inner1{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Título da página (categorias.html) ===== */
.page-title{
  margin: 6px 0 12px;
  font-weight: 900;
  font-size: 1.25rem;
  color: #fff;
}

/* ===== Categorias (tiles estilo anexo 01) ===== */
.categories-section{
  margin: 6px 0 18px;
}

.categories-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.cat-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  text-decoration: none;
  color: #fff;

  border-radius: 18px;
  padding: 14px 16px;
  height: 110px;

  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}

.cat-btn img{
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 14px;
  flex: 0 0 auto;
}

.cat-name{
  font-weight: 900;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  text-align: right;
  flex: 1 1 auto;
}

/* Mobile: 2 colunas */
@media (max-width: 720px){
  .categories-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .cat-btn{
    height: 70px;
    padding: 12px 12px;
    border-radius: 16px;
  }
  .cat-btn img{
    width: 95px;
    height: 95px;
    border-radius: 12px;
    margin-left: -10px;
  }
  .cat-name{
    font-size: clamp(.35rem, 3vw, 1.15rem);
    margin-left: -10px;
  }
}

/* Variante menor (para categorias.html) */
.categories-grid--small .cat-btn{
  height: 70px;
  padding: 10px 12px;
  border-radius: 16px;
}
.categories-grid--small .cat-btn img{
  width: 95px;
  height: 95px;
  border-radius: 12px;
  margin-left: -10px;
}
.categories-grid--small .cat-name{
  font-size: clamp(.35rem, 3vw, 1.15rem);
  margin-left: -10px;
}

.cat-btn.is-active{
  outline: 3px solid #FF344E;
  outline-offset: 2px;
}