/* ============================================================
   MOBILE RANKING STYLES - Ajustes para Rankings em Mobile
   ============================================================ */

@media (max-width: 1750px) {
  /* Garantir que a coluna-3 esteja sempre disponível */
  .coluna-3 {
    padding: 15px !important;
    display: block !important; /* Forçar exibição */
    visibility: visible !important;
  }

  .rank-bloco {
    margin-bottom: 15px !important;
    padding: 12px !important;
  }

  .rank-titulo {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  .rank-bloco ol {
    margin-bottom: 12px !important;
    padding-left: 18px !important;
  }

  .rank-bloco ol li {
    font-size: 13px !important;
    margin-bottom: 3px !important;
  }

  .rank-bloco a {
    font-size: 12px !important;
    display: inline-block !important;
    margin-top: 5px !important;
  }

  /* Header para coluna-3 em mobile */
  .coluna-3::before {
    content: "Rankings e Destaques";
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: var(--azul-escuro, #333);
    text-align: center;
    padding: 15px 0;
    border-bottom: 2px solid var(--laranja-queimado, #e67e22);
    margin-bottom: 15px;
    font-family: var(--fonte-titulo-padrao, 'Arial', sans-serif);
  }
}

@media (max-width: 480px) {
  .coluna-3 {
    padding: 10px !important;
  }

  .rank-bloco {
    padding: 10px !important;
    margin-bottom: 12px !important;
  }

  .rank-titulo {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  .rank-bloco ol li {
    font-size: 12px !important;
  }

  .rank-bloco a {
    font-size: 11px !important;
  }
}