/* Página 8 */

.color-8 .bloco4-container {
    margin-top: 0;
}

.color-8 .bloco4-card {
    border-radius: 0;
    box-shadow: none;
}

.color-8 .index8-image-btn {
    border: none;
    background: transparent;
    padding: 0;
    width: 100%;
    cursor: pointer;
}

.color-8 .index8-image-btn img {
    width: 100%;
    height: auto;
    display: block;
}

.color-8 .bloco-1-img .index8-image-btn {
    width: 85px;
    height: auto;
    display: block;
    overflow: visible;
}

.color-8 .bloco-1-img .index8-image-btn img {
    width: 85px;
    height: auto;
    object-fit: contain;
    object-position: top center;
}

.color-8 .index8-image-btn:hover img,
.color-8 .news-image:hover img {
    filter: brightness(1.08);
}

.color-8 .bloco4-datetime,
.color-8 .bloco4-source p,
.color-8 .bloco4-text p {
    color: #333333;
}

.color-8 .bloco4-title {
    padding: 8px 0;
}

.color-8 .index8-title-link,
.color-8 .index8-meta-link,
.color-8 .bloco4-metadata .metadata-link,
.color-8 .news-title,
.color-8 .news-title a,
.color-8 .news-source-link,
.color-8 .bloco-1-title a,
.color-8 .bloco-1-info .info-link,
.color-8 .bloco-1-contact .info-link {
    color: #003399;
    text-decoration: none;
}

.color-8 .index8-title-link:hover,
.color-8 .index8-meta-link:hover,
.color-8 .bloco4-metadata .metadata-link:hover,
.color-8 .news-title a:hover,
.color-8 .news-source-link:hover,
.color-8 .bloco-1-title a:hover,
.color-8 .bloco-1-info .info-link:hover,
.color-8 .bloco-1-contact .info-link:hover {
    text-decoration: underline;
}

.color-8 .bloco4-source {
    align-items: flex-start;
    gap: 4px;
    padding: 8px 0;
}

.color-8 .bloco4-source p {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: normal;
}

.color-8 .bloco4-source .source-prefix {
    font-weight: bold;
    color: #333333;
}

.color-8 .bloco4-source .source-location {
    font-size: 12px;
}

.color-8 .bloco4-text {
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    margin: 10px 0;
    padding: 12px 0;
}

.color-8 .bloco4-text p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    font-weight: normal;
}

.color-8 .bloco4-text p:last-child {
    margin-bottom: 0;
}

.color-8 .bloco4-metadata {
    margin: 12px 0;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

.color-8 .bloco4-metadata .metadata-item {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.4;
    background: none;
    border: none;
    padding: 0;
}

.color-8 .bloco4-metadata .metadata-item strong {
    color: #333333;
    font-weight: bold;
}

.color-8 .bloco4-metadata .index8-meta-value {
    color: #003399;
}

.color-8 .bloco4-navigation {
    gap: 8px;
    padding: 10px 0;
}

.color-8 .bloco4-nav-btn {
    border-radius: 0;
    border: none;
    background-color: var(--ct-gray-btn);
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 10px 0;
}

.color-8 .bloco4-nav-btn:hover {
    background-color: var(--ct-btn-hover);
    color: #333333;
}

.color-8 .bloco4-share-btn {
    border-radius: 0;
    border: none;
    background-color: var(--ct-gray-btn);
    color: #ffffff;
    margin-bottom: 4px;
}

.color-8 .bloco4-share-btn:hover {
    background-color: var(--ct-btn-hover);
    color: #333333;
}

.color-8 .bloco-1-container {
    margin-bottom: 15px;
}

.color-8 .bloco-1-card {
    border-radius: 0;
    background-color: #fff;
}

.color-8 .bloco-1-main {
    margin-bottom: 0;
    padding-top: 20px;
}

.color-8 .bloco-1-content {
    min-width: 0;
}

.color-8 .bloco-1-title {
    color: #333333;
}

.color-8 .bloco-1-title .index8-title-link,
.color-8 .bloco-1-title .index8-title-link:visited,
.color-8 .bloco-1-title .index8-title-link:hover,
.color-8 .bloco-1-title .index8-title-link:focus,
.color-8 .bloco-1-title .index8-title-link:active {
    color: #333333;
    text-decoration: none;
}

.color-8 .bloco-1-img {
    width: 85px;
    height: 85px;
    border: 1px solid #bfc5cc;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f1f1f1;
    flex-shrink: 0;
}

.color-8 .index8-logo-link {
    width: 100%;
    height: 100%;
    display: block;
}

.color-8 .index8-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.color-8 .bloco-1-logout {
    color: #333333;
    text-decoration: none;
    font-size: 12px;
    margin-bottom: 8px;
    display: block;
}

.color-8 .bloco-1-logout:hover {
    text-decoration: underline;
}

.color-8 .bloco-1-info,
.color-8 .bloco-1-contact,
.color-8 .news-details p,
.color-8 .news-details-label {
    color: #333333;
}

.color-8 .bloco-1-social i {
    border: solid 1px #999999;
    padding: 5px 8px;
    border-radius: 5px;
}

.color-8 .news-item:hover .news-title {
    color: #003399;
}

.color-8 .ultimas-publicacoes-index4 {
    margin: 15px 0 24px 0;
}

.color-8 .ultimas-publicacoes-index4 .publicacao-imagem {
    background-color: transparent;
    border: none;
}

/* Reset do .publicacao-imagem-btn (e do img interno): regra base em
   lugares-da-cidade.css (23/07). Não redefinir aqui. */

/* LISTAR TODAS das publicações: regra única em assets/css/lugares-da-cidade.css
   (linha cinza + direita, como o PÁGINA INICIAL do card). Não redefinir aqui. */

/* Dropdown topo do assistente (componente compartilhado) */
.color-8 #section-assistente-top-5 {
    max-height: none;
    overflow: visible;
    transition: max-height 0.3s ease;
}

.color-8 #section-assistente-top-5:not(.active) {
    max-height: 0;
    overflow: hidden;
}

.color-8 .index8-editor-text {
    color: #333333;
    font-size: 13px;
    line-height: 1.55;
    padding: 12px 15px;
}

.color-8 .index8-editor-text p,
.color-8 .index8-editor-text ul,
.color-8 .index8-editor-text ol {
    margin: 0 0 10px 0;
}

.color-8 .index8-editor-text ul,
.color-8 .index8-editor-text ol {
    padding-left: 18px;
}

.color-8 .index8-editor-text a {
    color: #003399;
    text-decoration: none;
}

.color-8 .index8-editor-text a:hover {
    text-decoration: underline;
}

/* A regra que pintava .ct-entity-name/.ct-entity-subtitle/.city-link de BRANCO
   saiu em 23/07 (mock 'alteraçoes finais perfil post 2.png': replicar o campo
   Ecossistema como está na CIDADE/NOTÍCIAS): o módulo tem fundo branco e o
   texto ficava invisível. Valem os padrões do componente (nome azul, UF cinza,
   pills #ededed) — igual index-3, e mesmo conserto já feito no index-6 (16/07)
   e index-7 (23/07). */

.color-8 .assistente-section {
    margin-top: 20px;
}

/* Bloco de postagem (index 8) - layout da referência */
.color-8 .index8-post-card {
    padding: 10px;
}

.color-8 .index8-post-card .bloco4-image {
    height: auto;
    background: transparent;
    overflow: hidden;
    border: none;
    padding: 0;
}

.color-8 .index8-post-card .bloco4-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
    display: block;
}

/* 23/07: bloco data/título/perfil+cidade no desenho do news-card da INDEX
   (mas sem os ícones de redes sociais), com texto PRETO e letra maior —
   mock 'alterações finais perfil post.png'. Recriado nas classes index8-*
   próprias da página (news-list.css é do componente da INDEX, não tocar). */
.color-8 .index8-post-date {
    font-size: 13px;
    color: #000000;
    padding: 6px 0 8px;
    gap: 4px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 8px;
}

.color-8 .index8-post-date i {
    font-size: 13px;
}

.color-8 .index8-post-title {
    margin: 0;
    padding: 4px 0 8px;
    font-size: 18px;
    line-height: 1.25;
    color: #000000;
    font-weight: 600;
}

.color-8 .index8-post-source {
    align-items: flex-end;
    padding: 0 0 8px;
    gap: 2px;
}

/* Sem os "chips" cinza: linhas limpas alinhadas à direita, como no card da
   INDEX (nome do perfil azul, cidade cinza). */
.color-8 .index8-post-source p {
    margin: 0;
    font-size: 13px;
    background: transparent;
    color: #666666;
    border-radius: 0;
    padding: 0;
}

.color-8 .index8-post-source .index8-post-meta-link {
    color: inherit;
    text-decoration: none;
}

.color-8 .index8-post-source .index8-post-profile-link {
    color: #003399;
    font-size: 14px;
}

.color-8 .index8-post-source .index8-post-meta-link:hover {
    text-decoration: underline;
}

/* Corpo do post em 16px (23/07): a regra de 16px existia no container, mas o
   conteúdo vem do editor embrulhado em <p> e a regra do <p> (11px) vencia a
   herança — a letra saía "muito pequena". Tamanho agora declarado nos DOIS. */
.color-8 .bloco4-description-box {
    background: #ffffff;
    border: none;
    min-height: 92px;
    margin: 0 0 10px;
    padding: 8px 0;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5;
}

.color-8 .bloco4-description-box p,
.color-8 .bloco4-description-box li {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
}

/* Garante legibilidade do conteúdo longo vindo do editor (mesmo com cor inline branca). */
.color-8 .bloco4-description-box,
.color-8 .bloco4-description-box p,
.color-8 .bloco4-description-box div,
.color-8 .bloco4-description-box span,
.color-8 .bloco4-description-box li,
.color-8 .bloco4-description-box ul,
.color-8 .bloco4-description-box ol,
.color-8 .bloco4-description-box blockquote,
.color-8 .bloco4-description-box strong,
.color-8 .bloco4-description-box em,
.color-8 .bloco4-description-box h1,
.color-8 .bloco4-description-box h2,
.color-8 .bloco4-description-box h3,
.color-8 .bloco4-description-box h4,
.color-8 .bloco4-description-box h5,
.color-8 .bloco4-description-box h6 {
    color: #333333 !important;
}

.color-8 .bloco4-description-box a {
    color: #003399 !important;
    text-decoration: none;
}

.color-8 .bloco4-description-box a:hover {
    text-decoration: underline;
}

.color-8 .bloco4-description-box p:last-child {
    margin-bottom: 0;
}

.color-8 .index8-post-card .bloco4-navigation {
    padding: 0;
    gap: 6px;
    margin-top: 6px;
}

.color-8 .index8-post-card .bloco4-nav-btn {
    font-size: 12px;
    line-height: 1;
    padding: 8px 0;
    border-radius: 4px;
    border: 1px solid #c8cdd3;
    background-color: #d8dde2;
    color: #6a6f74;
    text-decoration: none;
    text-align: center;
}

.color-8 .index8-post-card .bloco4-share-btn {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 0;
    margin-bottom: 0;
    margin-top: 6px;
    border-radius: 4px;
    border: 1px solid #c8cdd3;
    background-color: #ffffff;
    color: #4e5459;
}

.color-8 .index8-post-card .bloco4-nav-btn:hover {
    background-color: #d2d8de;
    border-color: #bcc3ca;
    color: #60666b;
}

.color-8 .index8-post-card .bloco4-share-btn:hover {
    background-color: #f7f7f7;
    border-color: #bcc3ca;
    color: #4e5459;
}

/* Patrocínio da postagem */
.color-8 .bloco4-sponsor {
    margin-bottom: 10px;
}
.color-8 .bloco4-sponsor-label {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #4e5459;
    text-align: left;
    margin-bottom: 4px;
}
.color-8 .bloco4-sponsor-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Continuar lendo + Fonte */
.color-8 .bloco4-read-more {
    padding: 10px 0;
}

/* CTA "Continuar lendo": botão cheio, destaque principal do post (mock da postagem).
   Desde 23/07 recebe a URL DA FONTE CONSULTADA (source_url); a URL do título
   (external_url) é só fallback de posts antigos. */
/* 23/07: VERDE, como o mock 'alterações finais perfil post.png' desenha o
   botão (antes estava no azul das chamadas). */
.color-8 .bloco4-continue-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background-color: #5CB85C;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 4px;
    margin-bottom: 6px;
    transition: background-color 0.2s;
}

.color-8 .bloco4-continue-btn:hover {
    background-color: #4CAE4C;
    text-decoration: none;
}

.color-8 .bloco4-fonte {
    font-size: 13px;
    color: var(--ct-info-text);
    /* 23/07: respiro entre o "Fonte: X" e a linha dos botões logo abaixo */
    margin-bottom: 14px;
}

.color-8 .bloco4-fonte a {
    color: var(--ct-news-title);
    text-decoration: none;
}

.color-8 .bloco4-fonte a:hover {
    text-decoration: underline;
}

/* Corpo do post 16px: fundido na regra principal do .bloco4-description-box
   (acima) em 23/07. */

/* O recorte quadrado das imagens das OUTRAS PUBLICAÇÕES (regra antiga desta
   página, depois modificador do componente) foi REMOVIDO em 23/07 a pedido do
   cliente: thumbnail no formato original da imagem (contain, regra base em
   lugares-da-cidade.css). Não recriar. */

/* Setas de navegação entre postagens sobre a imagem do post (23/07, mock
   'alterações finais perfil post.png'): mesma receita visual do
   .city-banner-arrow do banner da PERFIL/HOME (setinha sempre visível,
   barra-gradiente só no hover), recriada aqui porque aquele é componente de
   cidade (não redecorar componente compartilhado). Offsets em 0: a imagem do
   card é full-bleed, sem a margem de 15px do banner de cidade. */
.color-8 .index8-post-media {
    position: relative;
}

/* O <button> da imagem é inline-block por padrão: dentro do wrapper ele
   deixava 7px de descender abaixo da foto e as setas (top:0/bottom:0)
   vazavam o gradiente sobre o card branco. Block = wrapper do tamanho
   exato da imagem. */
.color-8 .index8-post-media .bloco4-image {
    display: block;
}

.color-8 .index8-post-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
    text-decoration: none;
    font-size: 16px;
    z-index: 2;
    background: none;
    transition: background 0.3s;
}

.color-8 .index8-post-arrow-prev {
    left: 0;
}

.color-8 .index8-post-arrow-next {
    right: 0;
}

.color-8 .index8-post-arrow-prev:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.60), transparent);
}

.color-8 .index8-post-arrow-next:hover {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.60), transparent);
}