/*
 * ========================================
 * 1. CORREÇÃO ESTRUTURAL DE LAYOUT (FLEXBOX)
 * ========================================
 * Isso garante que o conteúdo principal e a sidebar se dividam em 2 colunas.
 * Este CSS é crucial para o Figma funcionar dentro do layout de 12 colunas.
 */
.news-detail__container {
    display: flex;
    gap: 40px; /* Espaçamento entre as colunas */
    width: 100%;
    margin: 0 auto;
}

/* Coluna Principal (Notícia) */
.news-detail__main {
    flex-basis: 70%; /* Conteúdo principal ocupa 70% */
    max-width: 70%;
    flex-grow: 1; 
}

/* Sidebar (Notícias Relacionadas) */
.news-detail__sidebar {
    flex-basis: 30%; /* Sidebar ocupa 30% */
    max-width: 30%;
    min-width: 280px;
    flex-shrink: 0; 
}

/*
 * ========================================
 * 2. TIPOGRAFIA DO CONTEÚDO PRINCIPAL (News Detail)
 * ========================================
 */
.news-detail__sidebar-title {
    font-family: 'Praktika', sans-serif; 
    font-size: 1.5rem; 
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: none; 
}

.news-detail__meta {
    font-size: 0.9rem;
    color: #555; 
    margin-bottom: 20px;
}

.news-detail__meta-separator {
    padding: 0 8px;
}

.news-detail__featured-image {
    margin-bottom: 40px;
}

/*
 * ========================================
 * 3. CARDS DE NOTÍCIAS RELACIONADAS (SIDEBAR)
 * ========================================
 */

/* Container do Card (Link que envolve tudo) */
.related-news-card {
    /* Define o contexto para posicionar a seta */
    position: relative;
    display: flex;
    gap: 15px; 
    text-decoration: none;
    color: inherit;
    /* Faz o link cobrir toda a área do card para cliques */
    display: block; 
}

/* Imagem de Destaque */
.related-news-card__image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 24px; /* Arredondamento do Figma */
}

.related-news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tipografia do Título (Figma: Praktika, 16px, Blue) */
.related-news-card__title a {
    font-family: 'Praktika', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 125%;
    color: #126BF8; 
    text-decoration: none;
    display: block; 
    margin-bottom: 5px;
}

/* Tipografia do Resumo/Data (Figma: Manrope, 12px, Black) */
.related-news-card__summary,
.related-news-card__date {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 150%;
    color: #02082F; 
    margin-top: 5px;
    margin-bottom: 5px;
}

/*
 * ========================================
 * 4. LINHAS DIVISÓRIAS E SETA (CORREÇÃO DE DUPLICAÇÃO)
 * ========================================
 */

/* A View Rows é o elemento que recebe a linha divisória */
.views-row {
    padding-bottom: 25px; 
    margin-bottom: 25px; 
    border-bottom: 1px solid #86888C; /* Linha divisória cinza */
}

/* Remove a linha divisória do último item da Views */
.view-content .views-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ADICIONANDO A SETA DE NAVEGAÇÃO (Figma: Seta Azul) */
.related-news-card::after {
    content: ''; 
    position: absolute;
    /* Alinhamento vertical central no card, menos o padding */
    top: 50%; 
    right: 5px;
    width: 8px; 
    height: 8px;
    margin-top: -6px; 
    
    /* Desenho da seta (cor Azul #126BF8) */
    border-top: 2px solid #126BF8;
    border-right: 2px solid #126BF8;
    transform: rotate(45deg); 
}

/* Container do Card (CRÍTICO: Define o Layout Horizontal) */
.related-news-card {
    display: flex; /* Força a Imagem e o Conteúdo a ficarem lado a lado */
    gap: 15px; /* Espaço entre imagem e texto */
    position: relative; 
    
    /* Remove as regras de 'display: block' que causavam a quebra */
    text-decoration: none;
    color: inherit;
    /* Removido: display: block; */
    padding: 0;
    margin: 0;
}

/* Container do Texto (Alinha o texto verticalmente) */
.related-news-card__content {
    display: flex; 
    flex-direction: column; /* Título, Resumo, Data um abaixo do outro */
    justify-content: center; /* Centraliza o texto verticalmente com a imagem */
    flex-grow: 1; 
}

/* O link que envolve o título não deve ser bloco para não quebrar a linha */
.related-news-card__title a {
    /* ... outras propriedades de tipografia ... */
    display: inline; /* Mude para inline para não quebrar a linha */
}


/*
 * CORREÇÃO DA IMAGEM DE DESTAQUE PARA O TAMANHO FIXO DO FIGMA
 */

/* 1. Define o container com as dimensões e arredondamento (442x265px, 24px) */
.news-detail__featured-image {
    width: 442px;
    height: 265px;
    overflow: hidden; /* CRÍTICO: Recorta o conteúdo que exceda as bordas */
    border-radius: 24px;
    margin-bottom: 40px; 
}

/* 2. Força o FIELD__ITEM (que o Drupal gera) a herdar as dimensões */
.news-detail__featured-image .field__item,
.news-detail__featured-image .field {
    width: 100%;
    height: 100%;
}

/* 3. Garante que a tag <img> preencha todo o espaço sem distorção */
.news-detail__featured-image img {
    width: 100%; /* Força a largura de 442px */
    height: 100%; /* Força a altura de 265px */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem esticar */
    border-radius: 24px; /* O arredondamento é aplicado aqui também, para maior garantia */
}

audio {
    width: 335px;
    height: 28px;
    opacity: 1;
    border-radius: 80px;
    top: 377px;
    left: 149px;
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 4px;
    padding-left: 4px;
}

/*
 * ========================================
 * CORREÇÃO DE LAYOUT: IMAGEM AO LADO DO TEXTO
 * ========================================
 */

/* Força a imagem a flutuar para a esquerda */
.news-detail__featured-image {
    /* Mantém os estilos de tamanho e arredondamento que você já tem */
    width: 442px;
    height: 265px;
    border-radius: 24px;
    overflow: hidden;
    
    /* CRÍTICO: Flutua a imagem e adiciona margem à direita */
    float: left; 
    margin-right: 25px; /* Espaço entre a imagem e o texto */
    margin-bottom: 25px; /* Garante que o texto flua corretamente abaixo da imagem */
}

/* Opcional: Garante que o conteúdo subsequente limpe o float (se houver elementos após os parágrafos) */
.news-detail__content::after {
    content: "";
    display: table;
    clear: both;
}

/*
 * ----------------------------------------
 * ESTILO DO TÍTULO DA NOTÍCIA (H1)
 * ----------------------------------------
 */
.news-detail__title {
    /* Tipografia (Mantida) */
    font-family: 'Praktika', sans-serif; 
    font-weight: 700;
    font-size: 24px; 
    line-height: 125%;
    color: #02082F; 
    
    /* DIMENSÕES DO FIGMA */
    width: 354px; /* Largura da caixa de texto */
    /* A altura será determinada pelo line-height (125%) e o conteúdo, mas definimos o mínimo */
    min-height: 60px; 
    
    /* Espaçamento abaixo do título para as metas (Ajustado) */
    margin-bottom: 8px; 
    
    /* O espaçamento superior pode ser ajustado com a margem do container principal, 
       mas adicionamos uma margem superior para fins de precisão visual: */
    margin-top: 15px; /* Ajuste fino se necessário para a posição 'top: 227px' */
}

/* Opcional: Se o seu tema adicionar margens extras ao H1, este pode ser necessário */
.news-detail__title .field--name-title {
    margin: 0;
    padding: 0;
}

/*
 * ----------------------------------------
 * ESTILO DOS METADADOS (Autor, Data, Categoria)
 * ----------------------------------------
 */
.news-detail__meta {
    font-size: 14px; /* Tamanho da fonte menor para metadados */
    color: #555; /* Cor cinza para o texto "Escrito por", "em", "Postado em" */
    line-height: 150%;
    margin-bottom: 20px; /* Espaço entre as metas e o próximo bloco (áudio/imagem) */
}

/* Estilo para links (Autor e Categoria, se forem links) */
.news-detail__meta a,
.news-detail__meta-category a {
    color: #126BF8; /* Cor azul para links ativos */
    text-decoration: none; /* Remove sublinhado */
    font-weight: 600; /* Deixa os links ligeiramente mais grossos */
}

/* Separador entre os itens */
.news-detail__meta-separator {
    padding: 0 8px; /* Espaço ao redor do ponto */
    color: #86888C;
}

/* Se você estiver usando o campo uid diretamente, garanta que o link do autor seja estilizado */
.news-detail__meta .username {
    color: #126BF8;
    text-decoration: none;
    font-weight: 600;
}

/* A View Rows é o elemento que recebe a linha divisória */
.views-row {
    /* REDUZINDO O ESPAÇAMENTO PARA CHEGAR PERTO DOS 16PX DO FIGMA */
    padding-bottom: 1px; /* Reduz de 25px para 16px */
    margin-bottom: 11px; /* Reduz de 25px para 16px */
    
    border-bottom: 1px solid #86888C; /* Linha divisória cinza */
}

/* Remove a linha divisória do último item da Views */
.view-content .views-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Reduzindo o espaçamento dentro do card (se necessário) */
.related-news-card {
    /* Pode ser necessário ajustar o padding-bottom aqui também se a imagem estiver alta */
    padding-bottom: 5px; 
    margin-bottom: 5px; 
}

/* ADICIONANDO A SETA DE NAVEGAÇÃO */
.related-news-card::after {
    /* ... outras propriedades ... */
    
    /* top: 50% e margin-top: -6px deve estar quase certo. 
       Se a seta estiver muito alta, aumente o margin-top */
    margin-top: 10px; /* Tente este valor para empurrar a seta ligeiramente para baixo */
}

p.news-detail__audio-label {
    /* Tipografia */
    font-family: 'Manrope', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 14px;
    line-height: 150%;
    color: #585E6A; 
    
    /* Layout */
    margin-bottom: 5px; /* Espaço entre o rótulo e o player de áudio */
}

/*
 * ========================================
 * ESTILO DO CORPO DE TEXTO PRINCIPAL (field_content_paragraphs_news)
 * Aplica as especificações do Figma ao texto.
 * ========================================
 */

.news-detail__content p {
    /* Define o estilo da fonte conforme o Figma */
    font-family: 'Manrope', sans-serif; 
    font-weight: 400; /* Regular */
    font-size: 14px;
    line-height: 150%;
    color: #02082F; /* Cor principal do texto */
    
    /* Remove margens extras padrão para que o layout de flutuação (float) funcione melhor */
    margin-top: 0;
    margin-bottom: 1em; /* Adiciona margem na parte inferior para separar parágrafos */
}

/* Garante que o container do texto seja estilizado caso não use <p> */
.news-detail__content {
    /* Garante que as propriedades de fonte sejam herdadas, se necessário */
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 150%;
    color: #02082F; 
}

.news-detail__meta a, .news-detail__meta-category a {
    color: #1526FF;
    text-decoration: none;
    font-family: Manrope;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: dim/letterSpacing/normal;
    vertical-align: middle;
    margin-left: 5px;
}

/* Correção do Layout da Linha de Metadados */
.news-detail__meta {
    /* Garante que os containers internos fiquem lado a lado */
    display: flex;
    flex-wrap: wrap; /* Permite quebrar se não houver espaço, mas tenta manter a linha */
    align-items: center; 
}

/* Alvo: O container do link de taxonomia (que está quebrando a linha) */
.news-detail__meta .field--name-field-target-audience,
.news-detail__meta .field__item,
.news-detail__category-tag-wrapper {
    /* Força os elementos a se comportarem como texto corrido, removendo blocos */
    display: inline;
    margin: 0;
    padding: 0;
}

/*
 * ESTILIZAÇÃO DO TEXTO "Escrito por" e Margens
 */
.news-detail__meta-link {
    font-family: 'Manrope', sans-serif;
    font-weight: 500; /* Assumindo Regular (400) para o texto estático */
    font-size: 14px;
    line-height: 150%;
    color: #1526FF; /* Cor cinza que você usou em outros rótulos */
    
    /* Garante que o texto fique lado a lado */
    display: inline;
    vertical-align: middle;
}

/* Espaçamento do Separador (•) */
.news-detail__meta-separator {
    padding: 0 5px; /* Mantendo o espaçamento ajustado */
    /* MUDANÇA DA COR: Deve ser a cor do texto principal do Figma */
    color: #02082F; 
}

/*
 * ========================================
 * CUSTOM AUDIO PLAYER - Estilo do Figma
 * ========================================
 */

/* Esconde o player nativo e containers do Drupal */
.custom-media-player {
    display: none !important;
}

.audio-source-container {
    display: none !important;
}

/* Remove labels do Drupal */
.news-detail__audio .field__label,
.news-detail__audio .field--name-field-news-audio > .field__label {
    display: none !important;
}

/* Container do player - Fundo cinza claro */
.audio-player-wrapper {
    width: 335px;
    height: 28px;
    border-radius: 80px;
    padding: 4px 12px 4px 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #E1E2E0;
    margin-top: 8px;
    margin-bottom: 40px;
}

/* Botão Play/Pause - Azul #126BF8 */
.audio-play-btn {
    background: #1526FF;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    min-width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    fill: #1526FF;
    opacity: 1;
}

.audio-play-btn:active {
    transform: scale(0.98);
}

.audio-play-btn svg {
    width: 10px;
    height: 10px;
    fill: #1526FF;
    opacity: 1;
    margin-left: 2px;
}

/* Container da barra */
.audio-progress-wrapper {
    flex-grow: 1;
    padding: 0 8px;
}

/* Barra de progresso - Cinza */
.audio-progress-bar {
    background: #86888C;
    height: 6px;
    border-radius: 25px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Preenchimento - Azul */
.audio-progress-fill {
    background: #1526FF;
    height: 100%;
    width: 0%;
    border-radius: 25px;
    transition: width 0.1s linear;
}

/* Tempo total */
.audio-time-total {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #1526Ff;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}