/* Arquivo: assets/css/bloco-ultimas-noticias/portal-kit-bloco-ultimas-noticias.css */
/* Estilos REFINADOS para o Bloco "Últimas Notícias" conforme especificações */

/* --- Wrapper Principal do Bloco --- */
.pk-bloco-ultimas-noticias-wrapper {
  font-family: "Fira Sans Condensed", sans-serif; /* Fonte padrão do bloco, pode ser sobrescrita */
  margin-bottom: 30px;
  padding: 0; /* Remover padding lateral se o título do bloco for full-width no mobile */
}

.pk-bloco-ultimas-noticias-wrapper * {
  box-sizing: border-box;
}

/* --- Título do Bloco ("Últimas notícias") --- */
.pk-bloco-titulo.pk-titulo-ultimas-noticias {
  background: #2bb810; /* Cor de fundo verde do Figma */
  border-radius: 8px 8px 0px 0px; /* Cantos arredondados do Figma (ajustei o último para 0px também no topo) */
  padding: 10px 20px; /* Padding interno para o título */
  margin: 0 0 20px 0; /* Margem inferior para separar do grid de notícias */
}

.pk-titulo-ultimas-noticias .pk-titulo-texto {
  /* Nova classe para o texto do título */
  font-size: 1.3rem; /* PC */
  font-weight: 600; /* Padrão, pode ajustar */
  color: #ffffff !important; /* Texto BRANCO */
  line-height: normal;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

/* A barrinha decorativa não foi mencionada com o box verde, então vou remover por enquanto */
/* .pk-titulo-ultimas-noticias .pk-titulo-barra-decorativa { display: none; } */

/* --- Grid para os Itens de Notícia (PC e Tablet Inicialmente) --- */
.pk-ultimas-noticias-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PC: Duas colunas */
  gap: 15px; /* Espaçamento um pouco menor */
  padding: 0 10px; /* Padding lateral para o grid não colar nas bordas da tela */
}

/* --- Cada Item de Notícia (Estilo Card PC/Tablet) --- */
.pk-ultimas-noticias-item {
  background-color: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.pk-ultimas-noticias-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.pk-ultimas-noticias-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pk-ultimas-noticias-thumb {
  /* Para PC e Tablet */
  width: 100%;
  aspect-ratio: 16 / 10; /* Proporção para as imagens */
  background-color: #e9e9e9;
  overflow: hidden;
}

.pk-ultimas-noticias-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.3s ease;
}

.pk-ultimas-noticias-item:hover .pk-ultimas-noticias-thumb img {
  transform: scale(1.03);
}

.pk-ultimas-noticias-conteudo {
  /* Para PC e Tablet */
  padding: 12px 15px 15px;
  flex-grow: 1;
}

.pk-ultimas-noticias-titulo {
  /* Para PC e Tablet */
  font-family: Manrope, sans-serif; /* Fonte dos títulos dos cards */
  font-size: 1.2rem;
  font-weight: 700; /* Mais peso para o título do card */
  line-height: 1.4;
  color: #303030 !important; /* Cor do título do card */
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(0.9rem * 1.4 * 3);
}

/* Mensagem de "Sem Notícias" */
.pk-sem-noticias-bloco {
  grid-column: 1 / -1;
  padding: 30px 20px;
  text-align: center;
  background-color: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  color: #6c757d !important;
  border-radius: 6px;
  font-size: 0.95rem;
}

/* === RESPONSIVIDADE para "Últimas Notícias" === */

/* Tablet (Você pediu: "Tablet unico bloco que oculpa todo espaço, duas noticias um do lado do outro") */
/* Isso significa que o grid continua com 2 colunas, mas o wrapper PAI dele (se houver)
   ou este wrapper .pk-bloco-ultimas-noticias-wrapper ocuparia o espaço.
   O CSS atual já faz o grid ter 2 colunas. A largura do wrapper dependerá do container onde o shortcode é colocado. */
@media (max-width: 992px) {
  .pk-bloco-titulo.pk-titulo-ultimas-noticias {
    /* Opcional: ajustar padding ou margem se necessário */
  }
  .pk-titulo-ultimas-noticias .pk-titulo-texto {
    font-size: 1.2rem; /* Ajuste se o título do bloco precisa mudar no tablet */
  }
  .pk-ultimas-noticias-grid {
    gap: 12px;
    padding: 0 8px; /* Menor padding lateral para o grid no tablet */
  }
  .pk-ultimas-noticias-thumb {
    aspect-ratio: 16 / 9.5;
  }
  .pk-ultimas-noticias-titulo {
    font-size: 0.85rem;
    -webkit-line-clamp: 3;
    max-height: calc(0.85rem * 1.4 * 3);
  }
  .pk-ultimas-noticias-conteudo {
    padding: 10px 12px 12px;
  }
}

/* Mobile (Layout completamente diferente para cada item, e título do bloco com dimensões fixas) */
@media (max-width: 767px) {
  .pk-bloco-ultimas-noticias-wrapper {
    padding: 0; /* Remove padding do wrapper principal no mobile se o título é full-width */
  }

  .pk-bloco-titulo.pk-titulo-ultimas-noticias {
    /* Estilo do Figma para o TÍTULO DO BLOCO no Mobile */
    width: 100%; /* Ocupa a largura total, mas o padding interno controla o texto */
    /* height: 55px;  A altura será definida pelo padding e font-size */
    padding: 15px 20px; /* Padding interno para dar a altura e centralizar texto verticalmente */
    border-radius: 0; /* Sem border-radius no mobile para o título do bloco, ou conforme design */
    margin: 0 0 15px 0; /* Zera margens laterais, ajusta inferior */
    display: flex; /* Para alinhar a barrinha e o texto se a barrinha voltar */
    align-items: center;
  }

  .pk-titulo-ultimas-noticias .pk-titulo-texto {
    /* Estilo do Figma para o TEXTO DENTRO do título do bloco no Mobile */
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 1.5625rem; /* 25px */
    font-weight: 600;
    line-height: normal; /* Equivalente a 1 ou 1.2 */
    /* width: 10.5rem; */ /* Não fixar largura do texto, deixar fluir */
    /* height: 1.8125rem; */ /* Altura será automática */
    color: #fff !important;
    text-transform: uppercase; /* Mantido */
  }
  /* Se a barrinha verde existir no mobile:
  .pk-titulo-ultimas-noticias .pk-titulo-barra-decorativa { display: none; } Ou estilizar diferente */

  .pk-ultimas-noticias-grid {
    grid-template-columns: 1fr; /* Uma coluna, itens empilhados */
    gap: 15px; /* Espaçamento entre os itens empilhados */
    padding: 0 10px; /* Padding lateral para os cards não colarem */
  }

  /* Layout de CADA ITEM de notícia no Mobile (imagem à esquerda, texto à direita) */
  .pk-ultimas-noticias-item {
    display: flex;
    flex-direction: row; /* MUDANÇA: Imagem e conteúdo lado a lado */
    background-color: #ffffff; /* Fundo branco para o card */
    border-radius: 5px; /* Raio do figma para o item */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }

  .pk-ultimas-noticias-item:hover {
    transform: none; /* Remover efeito de elevação no mobile se preferir */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  .pk-ultimas-noticias-link {
    flex-direction: row; /* Link acompanha o flex do item */
    width: 100%;
  }

  .pk-ultimas-noticias-thumb {
    /* Estilo do Figma para a MINIATURA no Mobile */
    width: 140px;
    height: 80px; /* Altura fixa da miniatura */
    flex-shrink: 0; /* Impede que a imagem encolha */
    aspect-ratio: unset; /* Remove o aspect-ratio, pois temos altura e largura fixas */
    border-radius: 5px 0 0 5px; /* Arredonda cantos esquerdos da imagem */
    /* background: url(<path-to-image>) lightgray 50% / cover no-repeat; // Isso é para background-image, estamos usando <img> */
  }

  .pk-ultimas-noticias-thumb img {
    border-radius: 5px 0 0 5px; /* Garante que a imagem siga o raio do thumb */
    /* object-position: center center; // Mantido */
  }
  .pk-ultimas-noticias-item:hover .pk-ultimas-noticias-thumb img {
    transform: none; /* Remover zoom na thumb no mobile se preferir */
  }

  .pk-ultimas-noticias-conteudo {
    /* Estilo do Figma para o CONTEÚDO DE TEXTO ao lado da miniatura no Mobile */
    padding: 8px 10px 8px 12px; /* Padding ajustado para o layout horizontal */
    /* width: 13.25rem; */ /* Não fixar largura, deixar o flexbox cuidar */
    /* height: 3.75rem;  Não fixar altura, deixar o conteúdo definir */
    display: flex; /* Para centralizar verticalmente ou alinhar o texto */
    flex-direction: column;
    justify-content: center; /* Tenta centralizar o texto verticalmente */
    flex-grow: 1;
  }

  .pk-ultimas-noticias-titulo {
    /* Estilo do Figma para o TÍTULO DO CARD no Mobile */
    font-family: Inter, sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 800; /* Bem forte */
    line-height: 1.3; /* Linha normal/apertada */
    color: #303030 !important;
    -webkit-line-clamp: 3; /* Limite de 3 linhas */
    max-height: calc(
      0.875rem * 1.3 * 3
    ); /* (font-size * line-height * num-linhas) */
    /* Se quiser exatamente 3.75rem de altura total para o texto,
       e a fonte tem 0.875rem, e line-height 1.3 (aprox 1.1375rem por linha),
       3 linhas = 3.4125rem. 4 linhas = 4.55rem.
       Ajuste o line-height ou o número de linhas para caber melhor se a altura for fixa.
       No entanto, é melhor não fixar a altura do conteúdo de texto. */
  }
}

/* Ajustes finos para Mobile MUITO PEQUENO, se necessário */
@media (max-width: 350px) {
  .pk-ultimas-noticias-thumb {
    width: 120px; /* Diminui ainda mais a thumb */
    height: 70px;
  }
  .pk-ultimas-noticias-titulo {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
    max-height: calc(0.8rem * 1.3 * 2);
  }
  .pk-destaque-conteudo {
    /* Este é do carrossel principal, mas só pra constar */
    padding: 10px 12px 12px 12px;
  }
  .pk-titulo-ultimas-noticias .pk-titulo-texto {
    font-size: 1.3rem;
  }
}



/* ==== PK FIX — Padronização de título do bloco e remoção de clamp nos cards ==== */

/* 1) Título dos blocos (faixa verde) — igual em ambos */
.pk-bloco-titulo.pk-titulo-ultimas-noticias{
  width: 100% !important;
  height: 55px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
}
.pk-titulo-ultimas-noticias .pk-titulo-texto{
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px){
  .pk-bloco-titulo.pk-titulo-ultimas-noticias{
    height: 55px !important;
    padding: 0 15px !important;
  }
  .pk-titulo-ultimas-noticias .pk-titulo-texto{
    font-size: 1.5625rem !important; /* 25px, igual ao Em Alta mobile */
  }
}

/* 2) Título das notícias dos cards — sem clamp e sem "..." */
.pk-ultimas-noticias-titulo{
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-height: none !important;
  height: auto !important;
}