/*
 * hero-banner-mobile-dividers.css
 * Padronização mobile: espaçamentos (16px) e títulos uniformes em TODOS os blocos.
 * Exceção: matérias com texto ao lado da foto (mantêm padrão próprio).
 */

@media screen and (max-width: 767px) {

  /* ============================================================
   * PADRÃO: espaçamento = 16px acima e abaixo do divider
   * Divider = border-bottom 1px solid #ececec
   * ============================================================ */

  /* --- Hero banner: manchete principal --- */
  .hero-banner .hero-banner-content .news-block {
    padding-bottom: 16px;
    border-bottom: 1px solid #ececec;
  }

  .hero-banner .hero-banner-content .news-block.--bottom {
    padding-top: 16px;
    border-bottom: none;
  }

  /* Titulo manchete */
  .hero-banner .news-block a {
    font-size: 24px;
    line-height: 30px;
  }

  /* --- Hero banner: lista .--bottom (3 destaques sem imagem) --- */
  .hero-banner .news-block.--bottom li {
    border-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-banner .hero-banner-content .news-block.--bottom ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hero-banner .hero-banner-content .news-block.--bottom li:not(:last-child) {
    padding-bottom: 16px !important;
    border-bottom: 1px solid #ececec !important;
  }

  .hero-banner .hero-banner-content .news-block.--bottom li + li {
    padding-top: 16px !important;
  }

  /* Título das matérias .--bottom */
  .hero-banner .news-block.--bottom a {
    font-size: 20px;
    line-height: 24px;
  }

  /* --- Hero banner: cards da direita (com imagem) --- */
  .hero-banner .hero-banner-content-aside .card-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 18px;
    margin-top: 0;
  }

  .hero-banner .hero-banner-content-aside .card-item:not(:last-child) {
    padding-bottom: 16px;
    border-bottom: 1px solid #ececec;
  }

  .hero-banner .hero-banner-content-aside .card-item + .card-item {
    padding-top: 16px;
    margin-top: 0;
  }

  .hero-banner .hero-banner-content-aside .card-item p {
    font-size: 20px;
    line-height: 24px;
  }

  /* Card secundário: zera margin-top do style.css (35px) para que o divider controle */
  .hero-banner .card-item.--secondary {
    margin-top: 0 !important;
  }

  /* Primeiro card da aside: não precisa de padding-top extra */
  .hero-banner .hero-banner-content-aside .card-item:first-child {
    padding-top: 0;
  }

  /* --- Hero banner: card-group (5 matérias com imagem em baixo) --- */
  .hero-banner .card-group {
    gap: 0 !important;
    margin-top: 32px;
  }

  .hero-banner .card-group .card-group-item {
    max-width: 100%;
  }

  .hero-banner .card-group .card-group-item:not(:last-child) {
    padding-bottom: 16px;
    border-bottom: 1px solid #ececec;
  }

  .hero-banner .card-group .card-group-item + .card-group-item {
    padding-top: 16px;
  }

  /* Título card-group */
  .hero-banner .card-group .card-group-item {
    font-size: 20px;
    line-height: 24px;
  }

  /* ============================================================
   * Padronização global: títulos no mobile (fora hero-banner também)
   * Exceção: matérias com thumb ao lado (mantêm fonte menor própria)
   * ============================================================ */

  /* Títulos padronizados: 20px/24px para tudo exceto manchete do hero */
  .card-item p {
    font-size: 20px !important;
    line-height: 24px !important;
  }

  .news-block.--bottom a {
    font-size: 20px;
    line-height: 24px;
  }

  .card-group .card-group-item {
    font-size: 20px;
    line-height: 24px;
  }

  /* Títulos genéricos .news-block a: 20px (style.css compila 24px) */
  .news-block a {
    font-size: 20px;
    line-height: 24px;
  }

  /* .card-item.--secondary: zera margin-top (35px) globalmente no mobile */
  .card-item.--secondary {
    margin-top: 0 !important;
  }

  /* Padronização global de dividers: sobrescreve o style.css
   * que tem nth-child(-n+2) com padding-bottom: 16px
   * e nth-child(n+2) com padding-top: 16px (sem uniformidade total) */
  .news-block.--bottom li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .news-block.--bottom li:not(:last-child) {
    padding-bottom: 16px !important;
    border-bottom: 1px solid #ececec !important;
  }
  .news-block.--bottom li + li {
    padding-top: 16px !important;
  }
}