.ead-content {
    margin: 4% 10%;
}


.stage_topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.stage_topics .topic { float: none; width: auto; }

#t4-footer .breadcrumb .divider::before {
  content: "›";              /* ou "»", "/", ">" */
  font-family: inherit !important;
  font-weight: normal !important;
  margin: 0 6px;
}

/* esconde o separador depois do último item */
#t4-footer .breadcrumb-item:last-child .divider {
  display: none;
}

/* para q todas as imagens fiquem redondas e do mesmo tamanho*/
.imagens-feed-app {
  width: 150px;
  height: 150px;
  margin: 0 auto 12px;        /* centraliza no card e dá espaço antes do título */
  border-radius: 50%;
  overflow: hidden;           /* é isso que faz o recorte redondo */
  flex-shrink: 0;
}

.imagens-feed-app img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;          /* preenche o círculo sem distorcer a imagem */
  object-position: center;
  display: block;
}

/*layout dos subtitulos*/

/* faz o item ocupar a linha inteira do grid
   (funciona se a classe estiver no <a> ou no .topic dentro dele) */
.stage_topics > .level_1733,
.stage_topics > :has(.level_1733) {
  grid-column: 1 / -1;
}

.level_1733 {
  justify-self: start;      /* a caixa fica da largura do texto, não da linha */
  align-self: start;
  height: auto !important;
  min-height: 0 !important;

  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  color: #5a6b7b;
  margin: 70px 0 20px;
  padding-left: 10px;
  border-left: 3px solid currentColor;
}

/* cabeçalho do tópico: imagem redonda + título à direita */
.ead-topic-header center {
  display: flex;
  align-items: center;         /* título centralizado na altura da imagem */
  justify-content: flex-start; /* troque por center se quiser o conjunto no meio */
  gap: 24px;
  text-align: left;            /* anula a centralização do <center> */
  margin-bottom: 30px;
}


.ead-topic-header-image {
  width: 150px !important;
  height: 150px !important;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;           /* recorta sem distorcer */
  object-position: center;
  flex-shrink: 0;              /* não deixa a imagem encolher em telas menores */
  display: block;
  margin-top: 20px;
}

.ead-topic-header-title {
  margin: 0;
  text-align: left;
}

/* no celular, empilha: imagem em cima, título embaixo */
@media (max-width: 576px) {
  .ead-topic-header center {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .ead-topic-header-title {
    text-align: center;
  }
}
/* seta do botão "voltar ao topo" sem Font Awesome */
#back-to-top .fa-chevron-up::before {
  content: "" !important;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 3px solid currentColor;
  border-left: 3px solid currentColor;
  transform: rotate(45deg);
  margin-top: 5px;           /* compensa a rotação, para ficar centralizada */
  font-family: inherit !important;
}

/* ícone do menu mobile (hambúrguer) sem Font Awesome */
.t4-offcanvas-toggle .toggle-bars::before {
  content: "" !important;
  display: inline-block;
  width: 24px;
  height: 18px;
  vertical-align: middle;
  font-family: inherit !important;
  background:
    linear-gradient(currentColor, currentColor) top    / 100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 3px no-repeat;
}