/* =========================================================================
   AzambujaMais — página: Rede Credenciada (rede.html)
   Só o específico da PÁGINA: hero + posicionamento da barra de busca sobre ele.
   A barra de busca e os cards em si vêm do componente compartilhado
   /src/pages/shared/rede.css. Reaproveita tokens de base.css + header/footer
   de home.css.
   ========================================================================= */

/* ------- Hero (compacto) ------- */
.rede-hero {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  min-height: 340px;
}
/* Filete laranja fechando a base do hero (mesma linguagem da home). */
.rede-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    var(--accent-dark),
    var(--accent) 35%,
    var(--accent-light) 62%,
    var(--accent)
  );
}
.rede-hero-bg {
  position: absolute;
  inset: 0;
}
.rede-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.rede-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 52, 110, 0.86) 0%,
    rgba(8, 62, 130, 0.82) 55%,
    rgba(9, 66, 140, 0.88) 100%
  );
}
.rede-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3.75rem 20px 4.75rem;
}
.eyebrow--light {
  color: var(--accent-light);
}
.rede-hero-title {
  margin-top: 0.5rem;
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  filter: drop-shadow(0 3px 10px rgba(3, 22, 52, 0.4));
}
.rede-hero-sub {
  margin: 1rem auto 0;
  max-width: 42rem;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
}

/* ------- Barra de busca: flutua sobre a base do hero ------- */
.rede-busca {
  position: relative;
  z-index: 5;
  margin-top: -2.75rem;
}

/* ------- Resultados ------- */
.rede-resultados {
  padding-top: 3rem;
}

/* =========================================================================
   Responsivo
   ========================================================================= */
@media (max-width: 760px) {
  .rede-hero {
    min-height: 280px;
  }
  .rede-hero-title {
    font-size: 2.2rem;
  }
  .rede-hero-sub {
    font-size: 1.05rem;
  }
  .rede-busca {
    margin-top: -2rem;
  }
}