/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 30 2026 | 23:13:37 */
/* ============================================================
   GRID DE NOTÍCIAS ESTILO MAGAZINE / SPOTNEWS
   ============================================================ */

/* 1. Contêiner Principal da Lista */
.blog .post-list.row {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 15px !important;
  height: auto !important;
  position: relative !important;
}

/* Anula as larguras e margens do Bootstrap / Masonry JS */
.blog .post-list.row > .post-list-item,
.blog .post-list.row > div[class*="col-"] {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* 2. Destaque Principal (1ª Notícia - Esquerda) */
.blog .post-list.row > .post-list-item:nth-child(1) {
  grid-column: span 6 !important;
  grid-row: span 2 !important;
}

.blog .post-list.row > .post-list-item:nth-child(1) .post-thumbnail,
.blog .post-list.row > .post-list-item:nth-child(1) .blog-post {
  height: 480px !important;
}

/* 3. Quadrados 2x2 (Notícias 2 a 5 - Direita) */
.blog .post-list.row > .post-list-item:nth-child(n+2):nth-child(-n+5) {
  grid-column: span 3 !important;
}

.blog .post-list.row > .post-list-item:nth-child(n+2):nth-child(-n+5) .post-thumbnail,
.blog .post-list.row > .post-list-item:nth-child(n+2):nth-child(-n+5) .blog-post {
  height: 232px !important;
}

.blog .post-list.row > .post-list-item:nth-child(n+2):nth-child(-n+5) .post-excerpt {
  display: none !important;
}

/* 4. Notícias Secundárias (6ª em diante) - 4 Colunas Quadradinhas no Desktop */
.blog .post-list.row > .post-list-item:nth-child(n+6) {
  grid-column: span 3 !important;
  margin-top: 10px !important;
}

.blog .post-list.row > .post-list-item:nth-child(n+6) .post-thumbnail,
.blog .post-list.row > .post-list-item:nth-child(n+6) .blog-post {
  height: 232px !important;
}

.blog .post-list.row > .post-list-item:nth-child(n+6) .post-excerpt {
  display: none !important;
}

/* 5. Estilização dos Cards e Textos Sobrepostos à Imagem */
.blog .blog-post.mdc-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background-color: #000000 !important;
}

.blog .post-thumbnail {
  width: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
}

.blog .post-thumbnail img,
.blog .post-thumbnail a {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.blog .blog-post:hover .post-thumbnail img {
  opacity: 1;
  transform: scale(1.03);
}

/* Camada de Gradiente Escuro para Leitura do Texto */
.blog .blog-post::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 85% !important;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Posicionamento do Texto na Parte Inferior da Imagem */
.blog .blog-post .flexbox {
  position: absolute !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 3 !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

.blog .post-title,
.blog .post-title a {
  color: #ffffff !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.blog .post-list.row > .post-list-item:nth-child(1) .post-title {
  font-size: 1.4rem !important;
}

.blog .post-list.row > .post-list-item:nth-child(n+2) .post-title {
  font-size: 0.95rem !important;
}

.blog .post-excerpt {
  color: #dddddd !important;
  font-size: 80% !important;
  width: 100% !important;
  max-height: 34px !important;
  line-height: 17px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
}

/* ============================================================
   CATEGORIA (BADGE CENTRALIZADA NA PARTE INFERIOR)
   ============================================================ */

.blog .mdc-card__actions {
  position: absolute !important;
  bottom: 6px !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 4 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

.blog .post-footer-category {
  display: flex !important;
  justify-content: center !important;
}

.blog .post-footer-category a {
  background-color: #e50914 !important;
  color: #ffffff !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1.2 !important;
}

/* ============================================================
   REMOÇÃO DE ELEMENTOS (ÍCONES / COMENTÁRIOS / READ MORE)
   ============================================================ */

.blog .mdc-card__action-icons,
.blog .mdc-card__action-buttons,
.blog .post-footer-link,
.blog .button.color2.link {
  display: none !important;
}

.blog .flexbox .col-padding {
    padding-bottom: 0.55rem;
}

/* MOBILE (até 600px) - COM AJUSTES DE ESPAÇAMENTO SLIM */
@media (max-width: 992px) {
  .blog .post-list.row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* 1. Destaque Principal (Notícia 1) - Reduzido o espaço inferior vago */
  .blog .post-list.row > .post-list-item:nth-child(1) {
    grid-column: span 2 !important;
  }

  .blog .post-list.row > .post-list-item:nth-child(1) .post-thumbnail,
  .blog .post-list.row > .post-list-item:nth-child(1) .blog-post {
    height: 240px !important;
  }

  .blog .post-list.row > .post-list-item:nth-child(1) .flexbox {
    bottom: 4px !important;
    padding: 6px 10px !important;
  }

  /* 2. Notícias 2 a 5 em Grid 2x2 - Reduzida a altura para eliminar espaço vago no rodapé */
  .blog .post-list.row > .post-list-item:nth-child(n+2):nth-child(-n+5) {
    grid-column: span 1 !important;
  }

  .blog .post-list.row > .post-list-item:nth-child(n+2):nth-child(-n+5) .post-thumbnail,
  .blog .post-list.row > .post-list-item:nth-child(n+2):nth-child(-n+5) .blog-post {
    height: 140px !important;
  }

  .blog .post-list.row > .post-list-item:nth-child(n+2):nth-child(-n+5) .flexbox {
    bottom: 2px !important;
    padding: 4px 6px !important;
  }

  .blog .post-list.row > .post-list-item:nth-child(n+2):nth-child(-n+5) .post-title,
  .blog .post-list.row > .post-list-item:nth-child(n+2):nth-child(-n+5) .post-title a {
    font-size: 0.8rem !important;
    line-height: 1.15 !important;
  }

  /* 3. Notícias 6 em diante - Horizontal Slim (Compacto) */
  .blog .post-list.row > .post-list-item:nth-child(n+6) {
    grid-column: span 2 !important;
    margin-top: 0 !important;
  }

  .blog .post-list.row > .post-list-item:nth-child(n+6) .blog-post {
    display: flex !important;
    flex-direction: row !important;
    height: 72px !important;
    background-color: #0b0e14 !important;
    align-items: center !important;
  }

  /* Miniatura quadrada compacta */
  .blog .post-list.row > .post-list-item:nth-child(n+6) .post-thumbnail {
    position: relative !important;
    width: 90px !important;
    min-width: 90px !important;
    height: 100% !important;
  }

  .blog .post-list.row > .post-list-item:nth-child(n+6) .blog-post::after,
  .blog .post-list.row > .post-list-item:nth-child(n+6) .post-excerpt {
    display: none !important;
  }

  /* Bloco de Texto Slim (Aproveita toda a largura restante sem sobras acima/abaixo) */
  .blog .post-list.row > .post-list-item:nth-child(n+6) .flexbox {
    position: relative !important;
    bottom: auto !important;
    flex: 1 !important;
    width: auto !important;
    padding: 0 8px 0 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
  }

  .blog .post-list.row > .post-list-item:nth-child(n+6) .post-title,
  .blog .post-list.row > .post-list-item:nth-child(n+6) .post-title a {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .blog .post-list.row > .post-list-item:nth-child(n+6) .mdc-card__actions {
    display: none !important;
  }
}




/* ============================================================
   ANIMAÇÃO DE ENTRADA SUAVE (FADE IN + SLIDE UP)
   ============================================================ */

/* 1. Definição do Keyframe de Entrada */
@keyframes fadeInUpNews {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Aplicação da Animação nos Itens das Notícias */
.blog .post-list.row > .post-list-item {
  animation: fadeInUpNews 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  opacity: 0; /* Inicia invisível até a animação começar */
}

/* 3. Atraso em Cascata (Stagger Effect) para cada notícia */
.blog .post-list.row > .post-list-item:nth-child(1)  { animation-delay: 0.05s !important; }
.blog .post-list.row > .post-list-item:nth-child(2)  { animation-delay: 0.10s !important; }
.blog .post-list.row > .post-list-item:nth-child(3)  { animation-delay: 0.15s !important; }
.blog .post-list.row > .post-list-item:nth-child(4)  { animation-delay: 0.20s !important; }
.blog .post-list.row > .post-list-item:nth-child(5)  { animation-delay: 0.25s !important; }
.blog .post-list.row > .post-list-item:nth-child(6)  { animation-delay: 0.30s !important; }
.blog .post-list.row > .post-list-item:nth-child(7)  { animation-delay: 0.35s !important; }
.blog .post-list.row > .post-list-item:nth-child(8)  { animation-delay: 0.40s !important; }
.blog .post-list.row > .post-list-item:nth-child(9)  { animation-delay: 0.45s !important; }
.blog .post-list.row > .post-list-item:nth-child(10) { animation-delay: 0.50s !important; }
.blog .post-list.row > .post-list-item:nth-child(n+11) { animation-delay: 0.55s !important; }