/* Notícias na Home (Figma: Home / Notícias, 476:1957). */

.noticias { padding: 32px 0 56px; }
@media (min-width: 1024px) {
  .noticias { padding: 32px 0 96px; }
}

/* Desktop (Figma: O Mercanet 2562:17866): card de destaque 590×419 à
   esquerda, lista de notícias de 630px à direita, 60px de vão. */
.noticias-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .noticias-grid { grid-template-columns: 590fr 630fr; gap: 60px; align-items: start; }
}

.noticias-intro {
  background-image: linear-gradient(111.965deg, #BD2019 2.4171%, #EC4208 58.946%);
  border-radius: 20px;
  padding: 32px 28px;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 1024px) {
  /* Textos a 69px da lateral e a 73px do topo; o botão (24px de
     padding próprio) fecha 30px antes da borda de baixo. */
  .noticias-intro { border-radius: 30px; min-height: 419px; padding: 73px 40px 30px 69px; }
}
.noticias-intro h2 { margin-bottom: 29px; white-space: nowrap; }
@media (min-width: 1024px) {
  /* O título no Figma começa 3px antes do resto do texto (a "caixa"
     de texto dele é mais larga que a do parágrafo). */
  .noticias-intro h2 { margin-left: -3px; }
}
.noticias-intro p { max-width: 370px; font-size: 16px; font-weight: 300; line-height: 1.5; margin-bottom: 0; }
@media (min-width: 1024px) {
  .noticias-intro p { font-size: 18px; }
}

/* "Ver todas as notícias →": texto 18px Medium + seta de 24px, sem
   fundo nem borda; o padding de 24px/18px é do próprio botão no
   Figma, então ele recua pra o texto alinhar com o parágrafo. Fica
   grudado no rodapé do card (margin-top:auto). */
.noticias-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0 -24px;
  padding: 18px 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-white);
}
.noticias-cta:hover { text-decoration: underline; }
.noticias-cta img { width: 24px; height: 24px; }
@media (min-width: 1024px) {
  .noticias-cta { margin-top: auto; }
}

/* Lista (Figma: divisória de 630px a cada notícia; data 14px Light
   acima do título 24px/600, 4px entre eles). */
.noticias-list { list-style: none; padding: 0; margin: 0; }
.noticias-list li { padding: 20px 0; border-bottom: 1px solid var(--color-border-blue); }
.noticias-list li:first-child { padding-top: 0; }
.noticias-list a { display: block; }
.noticia-date { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--color-gray-04); margin-bottom: 4px; }
.noticias-list h3 { font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--color-navy); }
@media (min-width: 1024px) {
  .noticias-list h3 { font-size: 24px; }
  /* 23px entre a divisória e a data seguinte, 24px entre o título e a
     divisória (o 1º item tem 32px — medido no Figma). */
  .noticias-list li { padding: 23px 0 24px; }
  .noticias-list li:first-child { padding-top: 0; padding-bottom: 32px; }
}

/* Entrada animada (fade + slide-up) ao rolar até a seção — mesmo
   observer genérico usado em outras sessões da Home (ver main.js). O
   card de destaque entra sozinho; a lista entra em cascata, um item
   um pouco depois do outro. */
.noticias-intro {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.noticias-intro.is-visible { opacity: 1; transform: none; }

.noticias-list li {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.noticias-list li.is-visible { opacity: 1; transform: none; }
.noticias-list li:nth-child(1) { transition-delay: 0s; }
.noticias-list li:nth-child(2) { transition-delay: 0.1s; }
.noticias-list li:nth-child(3) { transition-delay: 0.2s; }
.noticias-list li:nth-child(4) { transition-delay: 0.3s; }
.noticias-list li:nth-child(n+5) { transition-delay: 0.4s; }

html:not(.js) .noticias-intro,
html:not(.js) .noticias-list li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .noticias-intro,
  .noticias-list li { transition: none; }
}

/* Mobile: mais respiro interno no card de destaque (padding maior,
   título → texto → botão com vãos regulares) e texto balanceado. O botão
   tem 18px de padding próprio, então o card fecha com menos embaixo. */
@media (max-width: 767px) {
  .noticias-intro { padding: 44px 32px 24px; border-radius: 24px; }
  .noticias-intro h2 { margin-bottom: 20px; }
  .noticias-intro p { max-width: 100%; font-size: 15px; line-height: 1.6; text-wrap: balance; }
  .noticias-cta { margin-top: 28px; }
  .noticias-list h3 { font-size: 16px; }
}