/*
 * catalogo-publico-responsivo.css
 * Camada de overrides responsivos para o catalogo publico.
 * REGRAS:
 *   1. Apenas @media (max-width: ...) - nunca estilos sem media.
 *   2. Nunca alterar --catalogo-* (tokens em catalogo-publico.css).
 *   3. Breakpoints: 1199.98 | 991.98 | 767.98 | 575.98 (Bootstrap 5).
 *
 * Observacao: catalogo-publico.css ja possui regras responsivas legadas
 * (blocos @media em 991.98 / 767.98 / 479.98). Este arquivo complementa
 * com overrides refinados aplicados sobre aquelas regras.
 */

/* ==========================================================================
   < 1200px - desktop pequeno / tablet grande
   ========================================================================== */
@media (max-width: 1199.98px) {
  /* Search form: 775px fixo estoura viewports menores que 800px */
  .catalogo-home-search__form {
    width: 100%;
    max-width: 775px;
  }
  /* Grid: 5 colunas (base) nao cabe entre 1200 e 1199.98px */
  .catalogo-cat-group__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   < 992px - tablet
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Impede overflow causado por elementos com largura fixa proxima do viewport */
  .catalogo-home-search__form {
    width: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   < 768px - mobile
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Cards de API: 245px fixo causa overflow no iPhone 12 Mini (375px) quando
     o grid tenta manter a largura. catalogo-publico.css ja define width: 100%
     em .catalogo-api-card para este breakpoint, mas o grid precisa permitir
     quebra de linha com 1 coluna cheia. */
  .catalogo-cat-group__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .catalogo-api-card {
    width: 100%;
    min-width: 0;
  }

  /* Banner home: evitar cortes no titulo */
  .catalogo-home-banner {
    min-height: auto;
    background-position: center right -80px;
  }
  .catalogo-home-banner__content {
    max-width: 100%;
    padding: 1.25rem;
  }

  /* Header: evitar clipping do botao Entrar */
  .catalogo-header__content .container-xxl {
    gap: 0.75rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .catalogo-btn-login {
    padding: 6px 10px;
  }

  /* Section title rule cobrindo tudo reduz em pequenas larguras */
  .catalogo-section-title::after {
    flex: 1 1 auto;
  }

  /* Hero de detalhe: pill e Swagger podem ter rolagem horizontal propria */
  .catalogo-detail-hero__badges {
    margin-top: 1rem;
  }
}

/* ==========================================================================
   < 576px - mobile pequeno
   ========================================================================== */
@media (max-width: 575.98px) {
  /* Container content: reduzir padding nas laterais para ganhar largura util */
  .container-content {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Espacamento vertical excessivo do bloco "Api's por Categoria" */
  #categorias {
    margin-top: 40px !important;
  }

  /* Grid: 1 coluna em mobile pequeno */
  .catalogo-cat-group__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Footer interno */
  .catalogo-footer__inner {
    padding: 20px 12px;
  }
}