/* ========================================================
   NETWORK CARDS — Padronização compartilhada (raiz)
   3 cards por linha (desktop) / 2 (tablet) / 1 (mobile)
   Imagens responsivas com aspect-ratio fixo
   ======================================================== */

.network-wrap{
  margin-top: 2.5rem;
}

/* --- Grid responsivo --- */
.network-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:14px;
}

@media (max-width:900px){
  .network-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:600px){
  .network-grid{ grid-template-columns:1fr; }
}

/* --- Card --- */
.network-card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(11,42,91,0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.network-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(11,42,91,0.15);
}

/* --- Imagem do card (responsiva) --- */
.network-card .img{
  position: relative;      /* necessário para conter o .img-badge e o overlay */
  width: 100%;
  aspect-ratio: 16 / 9;      /* mantém proporção em qualquer tela */
  height: auto;
  background-color: #0B2A5B;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay sutil sobre a imagem para legibilidade do badge */
.network-card .img::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,42,91,0.04) 0%, rgba(11,42,91,0.40) 100%);
}

/* Fallback para navegadores sem suporte a aspect-ratio */
@supports not (aspect-ratio: 16 / 9){
  .network-card .img{
    height: 150px;
  }
}

/* Ajuste de altura em telas menores (mantém proporção) */
@media (max-width: 900px){
  .network-card .img{
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px){
  .network-card .img{
    aspect-ratio: 16 / 11;
  }
}

/* --- Badge sobre a imagem (ex: cidade/bairro) --- */
.network-card .img .img-badge{
  position: absolute;
  bottom: 10px;
  left: 12px;
  background: rgba(243,112,33,0.92);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

/* --- Corpo do card --- */
.network-card .body{
  padding: 16px 16px 14px;
}

.network-card .tag{
  display: inline-block;
  font-size: .78rem;
  font-weight: 900;
  background: rgba(243,112,33,0.12);
  color: var(--laranja, #F37021);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.network-card h3{
  margin: 0 0 6px;
  color: var(--azul-marinho, #0B2A5B);
  font-size: 1.05rem;
  line-height: 1.25;
}

.network-card p{
  margin: 0;
  color: #4a5568;
  font-size: .96rem;
}

.network-card .meta{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip{
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f5f7;
  color: #1f2d3d;
  font-weight: 800;
  border: 1px solid var(--cinza-borda, #e8e9ea);
}