:root {
  --verde-1: #146646;
}

/* === Grid de cards === */
.eleve-cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Centraliza a última linha! */
  gap: 48px;
  margin: 0 auto;
  /* Mantém o grid inteiro centralizado na tela */

  /* Garante espaço exato para 4 cards + 3 gaps (1464px + 144px = 1608px) */
  max-width: 1608px;
}

/* 1314px – 1703px → 3 colunas */
@media (max-width: 1703px) {
  .eleve-cards-grid {
    /* Espaço exato para 3 cards + 2 gaps (1098px + 96px = 1194px) */
    max-width: 1194px;
  }
}

/* 894px – 1313px → 2 colunas */
@media (max-width: 1313px) {
  .eleve-cards-grid {
    /* Espaço exato para 2 cards + 1 gap (732px + 48px = 780px) */
    max-width: 780px;
  }
}

/* 420px – 893px → 1 coluna, card com largura fixa */
@media (max-width: 893px) {
  .eleve-cards-grid {
    /* Espaço para apenas 1 card */
    max-width: 366px;
    gap: 32px;
  }
}

/* < 420px → card fluido, sem rolagem horizontal */
@media (max-width: 419px) {
  .eleve-cards-grid {
    max-width: 100%;
  }
}


/* === Card === */
.eleve-card {
  position: relative;
  width: 366px;
  height: 396px;
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: right bottom;
}

/* Borda inferior do card */
.eleve-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background: var(--verde-1);
  border-radius: 999px;
}

@media (max-width: 419px) {
  .eleve-card {
    width: 100%;
    height: auto;
    /* altura flexível no mobile pequenininho */
    min-height: 396px;
  }
}

.eleve-card__online_decorativo {
  position: absolute;
  width: 96px;
  height: 21px;
  top: 21px;
  right: 24px;
  background-image: url(../img/online-decorativo.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.eleve-card__imagem {
  flex-shrink: 0;
  height: 200px;
  overflow: hidden;
}

.eleve-card__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eleve-card__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 40px;
}

.eleve-card__titulo {
  font-size: 32px;
  font-weight: bold;
  color: var(--verde-1);
  line-height: 36px;
  margin: 0 0 12px 0;
}

@media (max-width: 419px) {
  .eleve-card__titulo {
    font-size: 24px;
    line-height: 32px;
  }
}

.eleve-card__carga_horaria {
  position: absolute;
  font-size: 22px;
  font-weight: 900;
  color: var(--verde-1);
  bottom: 26px;
}

.eleve-card__botao_acessar {
  position: absolute;
  width: fit-content;
  line-height: 43px;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: var(--verde-1);
  border-radius: 34px;
  mix-blend-mode: multiply;
  bottom: 16px;
  right: 0;
  padding-left: 16px;
  padding-right: 14px;
}

.eleve-card__botao_acessar span {
  display: inline-block;
}

.eleve-card__botao_acessar span::after {
  display: inline-block;
  content: "\25B6";
  font-size: 12px;
  vertical-align: top;
  margin-top: 1px;
  margin-left: 8px;
}

.eleve-card__botao_acessar:hover {
  color: #ffffff;
}

.eleve-card__botao_acessar.desabilitado {
  opacity: 0.4;
  pointer-events: none;
}

.eleve-card__badge_novo {
  width: fit-content;
  line-height: 43px;
  font-size: 22px;
  font-weight: 900;
  color: var(--verde-1);
  text-align: center;
  background-color: #ffffff;
  border-radius: 34px;
  padding-left: 16px;
  padding-right: 14px;
}


/* === Paginação === */
.eleve-cards-paginacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 64px;
}

.eleve-cards-paginacao button {
  min-width: 56px;
  height: 56px;
  padding: 0 12px;
  border: 3px solid #3D7D65;
  border-radius: 32px;
  background: transparent;
  cursor: pointer;
  font-size: 2rem;
  color: #3D7D65;
  font-weight: 900;
  transition: background 0.2s, border-color 0.2s;
}

.eleve-cards-paginacao button:hover {
  background: #A0CE9E;
  color: #3D7D65;
  border-color: #A0CE9E;
}

.eleve-cards-paginacao button.ativo {
  background: #3D7D65;
  color: #ffffff;
  border-color: #3D7D65;
}

.eleve-cards-paginacao button:disabled {
  opacity: 0.35;
  cursor: default;
}


/* === Animação de troca === */
.eleve-cards-grid.saindo {
  animation: cards-fade-out 0.18s ease forwards;
}

.eleve-cards-grid.entrando {
  animation: cards-fade-in 0.22s ease forwards;
}

@keyframes cards-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes cards-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* === Estilos de card === */
.eleve-card.tema-legislativo-e-orcamentario {
  background-color: #ADCD9F;
  background-image: url(../img/bg-tema-legislativo-e-orcamentario.png);
}

.eleve-card.tema-administrativo {
  background-color: #CFE5E5;
  background-image: url(../img/bg-tema-administrativo.png);
}

.eleve-card.tema-tecnologia-da-informacao {
  background-color: #E8E8E7;
  background-image: url(../img/bg-tema-tecnologia-da-informacao.png);
}


/* === Preview de estilo de card no admin === */
#card-style-preview-wrap {
  border: 1px dashed #ccc;
  border-radius: 24px;
  padding: 16px;
  width: 366px;
  height: 396px;
  background: #f9f9f9;
}

.card-style-picker {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.card-style-option {
  cursor: pointer;
  text-align: center;
  padding: 12px;
  border: 2px dashed #ccc;
  border-radius: 12px;
}

.card-style-option > .card-style-label {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-top: 4px;
}