/* ------------------------------------------------------- ESTILOS DO CATÁLOGO DE EDITAIS ------------------------------------------------------- */

/* -------------------------------------- Heading ----------------------------------------------------------------------------*/

#catalogo-heading-section {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    var(--primary-color-dark),
    var(--primary-color-darker)
  );
  padding: 40px 180px;
  margin-bottom: 1em;
  box-shadow: var(--box-shadow-heavy);
}

#catalogo-heading-section h1 {
  color: var(--highlight-color) !important;
  font-weight: bold;
}

/* -------------------------------------- Container para busca e filtro -----------------------------------------------------*/

.catalogo-page-wrapper {
  padding: 0 3em;
  max-width: 1080px;
  margin: 0 auto;
}

/* 📌 Campo de entrada */
.catalogo-search-input {
  width: 100%;
  max-width: 300px;
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: var(--background-light);
  color: var(--text-color-dark);
}

.catalogo-search-button:hover {
  background-color: var(--button-hover-color);
}

#catalogo-filter-container {
  display: flex;
  flex-wrap: wrap; /* Permite que os elementos quebrem quando necessário */
  flex-direction: row;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-light);
  border: 1px solid var(--border-color);
  padding: 15px;
  border-radius: 8px;
  box-shadow: var(--box-shadow-light);
  margin-bottom: 20px;
}

#catalogo-filter-container section {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 1rem;
}

/* 📌 Formulário da busca e do filtro */
.catalogo-filter-form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: start;
  flex: 1; /* Faz os dois ocuparem o mesmo espaço */
  min-width: 250px; /* Define um tamanho mínimo */
  width: 100%;
}

/* 📌 Input e Select ajustados para ocupar espaço igualmente */
.catalogo-search-input,
#catalogo-category {
  flex-grow: 1;
  min-width: 180px; /* Define um tamanho mínimo */
  height: 40px;
  padding: 0 10px;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--highlight-color);
  color: var(--text-color-dark);
  box-shadow: var(--box-shadow-light) inset;
}

#catalogo-filter-container label {
  display: block;
  font-weight: bold;
  color: var(--text-color-dark);
  margin-bottom: 5px;
}

#catalogo-filter-container input,
#catalogo-filter-container select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 1rem;
  color: var(--text-color-dark);
  background-color: var(--highlight-color);
  box-shadow: var(--box-shadow-light) inset;
}

/* Estiliza o pai com negrito */
.catalogo-category-parent {
  font-weight: bold;
  color: #057da6;
}

/* Estiliza o filho com indentação */
option:not(.catalogo-category-parent) {
  padding-left: 10px;
}

#catalogo-filter-container button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  font-size: 1rem;
  font-weight: bold;
  color: var(--highlight-color);
  background-color: var(--primary-color-dark);
  border: none;
  border-radius: 4px;

  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  flex-shrink: 0; /* Mantém os botões com tamanho fixo */
}

#catalogo-filter-container button:hover {
  background-color: var(--button-hover-color);
}

/* Estilo para o container do input e botão */
.catalogo-input-button-wrapper {
  display: flex;
  flex-direction: row;
  align-content: center;
  gap: 10px; /* Espaço entre os campos */
  margin: 0;
  flex: 1; /* Permite que os elementos internos cresçam */
  width: 100%; /* Ocupa todo o espaço disponível */
}

.catalogo-input-button-wrapper input,
.catalogo-input-button-wrapper select,
.catalogo-input-button-wrapper button {
  height: 40px; /* Define uma altura fixa para todos os elementos */
  padding: 0 10px; /* Ajusta o preenchimento interno */
  box-sizing: border-box; /* Garante que padding e border sejam incluídos no cálculo da altura */
  font-size: 1rem; /* Uniformiza o tamanho da fonte */
  border-radius: 4px; /* Deixa todos os elementos com bordas arredondadas iguais */
  border: 1px solid var(--border-color); /* Uniformiza as bordas */
}

.catalogo-input-button-wrapper input,
.catalogo-input-button-wrapper select {
  flex-grow: 1; /* O input e select ocupam todo o espaço */
}

.catalogo-input-button-wrapper button {
  flex-shrink: 0; /* Impede que o botão encolha */
}

/* -------------------------------------- Container da lista de editais -----------------------------------------------------*/

/* Container principal */
#catalogo-list-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: var(--box-shadow-light);
}

/* Contador de editais */
.catalogo-list-count {
  font-size: 1rem;
  color: var(--text-color-dark);
  margin-bottom: 20px;
}

/* Lista de editais */
.catalogo-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Item de edital */
.catalogo-list-item {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 15px;
  box-shadow: var(--box-shadow-light);
  gap: 20px;
}

.catalogo-item-content {
  display: flex;
  gap: 15px;
  flex: 4;
}

.catalogo-item-extra {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.catalogo-item-image img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: 10px;
}

.catalogo-item-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.catalogo-item-title {
  font-size: 1.3rem;
  color: var(--primary-color-dark);
  font-weight: bold;
}

.catalogo-item-category {
  font-size: 0.8rem;
  color: var(--text-color-muted);
}

.catalogo-item-summary {
  font-size: 0.8rem;
  color: var(--text-color-muted);
  margin: 4px 12px;
  min-height: 40px;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Efeito de gradiente ajustado */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 70%,
    /* Parte visível */ rgba(0, 0, 0, 0.8) 98%,
    /* Meio termo */ rgba(0, 0, 0, 0) 100% /* Totalmente transparente */
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0.5) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.catalogo-interest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* Agora o gap horizontal e vertical funcionam */
}

.catalogo-tag {
  background-color: var(--primary-color-dark);
  color: white;
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 0.8rem;
  display: inline-flex; /* Garante que respeite padding e border-radius */
}

/*------------------------------------------------------ Data de inscrição eBotão de acesso --------------------------------------------------- */

/* Container principal (Flexbox para layout responsivo) */
.catalogo-item-extra {
  display: flex;
  gap: 1em; /* Espaçamento entre os itens */
  justify-content: center !important;
  align-items: center;
}

/* 📌 Container principal de datas */
.catalogo-item-dates-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: fit-content;
  padding: 6px 8px;
  background: linear-gradient(
    135deg,
    #057da620 0%,
    #001f2920 100%
  ); /* Degradê com as cores do site */
  border-radius: 100px;
  box-shadow: var(--box-shadow-heavy);
}

/* 📅 Ícone e rótulo da data */
.catalogo-date-label {
  font-size: 0.7rem;
  color: var(--primary-color-darker);
  font-weight: 600;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.catalogo-date-label::before {
  content: "📅"; /* Ícone de calendário */
  font-size: 0.7rem;
}

/* ⏳ Estilo da Data */
.catalogo-date-deadline {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--highlight-color);
  background: linear-gradient(
    135deg,
    #057da6 0%,
    #001f29 100%
  ); /* Degradê com as cores do site */
  padding: 10px;
  border-radius: 50px;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Container do cartão */
.catalogo-date-continuous-card {
  width: 100%;
  background: var(--primary-color-darker);
  padding: 0.6rem;
  border-radius: 60px;
  z-index: 1;
}

/* Estilo do texto e do efeito */
.catalogo-date-continuous {
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  width: fit-content;
  margin: 0 auto;
  color: var(--highlight-color);
  background: #333;
  padding: 0.4rem;
  text-align: center;
  border-radius: 60px;
  z-index: 1;
}

/* Propriedade personalizada para rotação */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Efeito animado ao redor */
.catalogo-date-continuous::after,
.catalogo-date-continuous::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 60px;
  background-image: conic-gradient(
    from var(--angle),
    var(--primary-color-darker),
    var(--primary-color-dark),
    var(--primary-color-darker)
  );
  animation: spin 5s linear infinite;
}

/* Brilho difuso ao redor */
.catalogo-date-continuous::before {
  filter: blur(1rem);
  opacity: 50%;
}

/* Animação do gradiente girando */
@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

/* Estilo do botão */
.catalogo-item-button {
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  margin: 0;
  background-color: var(--primary-color-dark);
  color: white !important;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none !important;
  font-weight: bold;
  width: 100%; /* Garante que o botão ocupe toda a largura em telas menores */
}

.catalogo-item-button:hover {
  background-color: var(--button-hover-color);
}

/* Botão alinhado à direita em telas maiores */
.catalogo-item-button-container {
  display: flex;
  justify-content: center; /* Centraliza o botão horizontalmente */
  align-items: center; /* Centraliza o botão verticalmente */
  width: 100%;
}

/*------------------------------------------------- Paginação ------------------------------*/
.catalogo-pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
}

.catalogo-page-button {
  background-color: var(--primary-color-dark);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  font-weight: bold;
}

.catalogo-page-button:disabled {
  background-color: var(--secondary-color);
  cursor: not-allowed;
}

@media (max-width: 767.98px) {
  /* Estilos para dispositivos pequenos */

  .catalogo-page-wrapper {
    padding: 0 2em;
  }

  .catalogo-item-interests {
    display: none;
  }

  #catalogo-filter-container {
    flex-direction: column;
  }

  #catalogo-search-section,
  #catalogo-filter-section {
    flex: 1;
    width: 100%;
  }
  .catalogo-filter-form {
    width: 100%;
  }
}