/*
 * 02b-noticias.css
 * Seção: "O mundo está procurando quem sabe cuidar de pessoas" — prova social
 * via 3 notícias reais (prints em assets/noticias/) + texto de transição para
 * o posicionamento sistêmico + CTA.
 *
 * Inserida entre Hero (02) e Identificação (03) a pedido do cliente
 * (2026-08-11). Numerada "02b" (em vez de renumerar 03→15 em cascata) para não
 * invadir a faixa de CSS/asset IDs já reservada às demais seções — ver nota
 * equivalente no HTML (index.html, marcador SECTION_02B_NOTICIAS_START).
 *
 * Fundo claro (--cor-fundo-claro) — mesma paleta de contraste usada em
 * Premiação (06-premiacao.css) — abre uma "dobra off" logo após o hero
 * escuro. Reaproveita tokens já existentes (nenhum token novo precisou ser
 * criado em tokens.css): --fs-h1-claro para o título, --fs-premiacao-corpo
 * para o corpo de texto, --fs-card-corpo/--fs-footer para os cards de
 * notícia, e o mesmo par --cor-cta-dourado/--cor-cta-dourado-hover dos demais
 * CTAs do site.
 */

.noticias {
  background-color: var(--cor-fundo-claro);
}

/* [ATUALIZAÇÃO 2026-08-11, pedido do cliente] Título maior e forçado em 2
   linhas (span fixo por linha, mesmo mecanismo de stagger-lines do
   .hero__title em 02-hero.css) em vez de max-width em ch + quebra natural do
   navegador — a quebra natural, no mobile, produzia 4 linhas curtas e
   desperdiçava a largura do container. Com a quebra manual no ponto certo da
   frase, a fonte pôde crescer sem o risco de virar 3+ linhas em telas
   estreitas. */
.noticias__titulo {
  font-size: clamp(34px, 5vw + 22px, 56px);
  font-weight: var(--fw-h1-claro);
  line-height: 1.15;
  color: var(--cor-texto-quase-preto);
  margin-bottom: 48px;
}

.noticias__titulo-line {
  display: block;
  /* Mesmo raciocínio de .hero__title-line (02-hero.css): a quebra manual em
     2 frases ainda pode quebrar de novo dentro de cada `<span>` em telas
     estreitas, deixando uma linha final "órfã" com poucas palavras. */
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * Carrossel de notícias — grid estático de 3 colunas no desktop/tablet;
 * mesmo mecanismo de scroll-snap + setas/dots de .professores-carrossel
 * (08-especialista.css / script.js initProfessoresCarousel) só passa a atuar
 * como carrossel de fato no breakpoint mobile (768px) — ver media query
 * abaixo. Setas/dots ficam ocultos acima disso porque a grade de 3 colunas
 * já mostra tudo, sem necessidade de rolar.
 * ------------------------------------------------------------------------- */

.noticias-carrossel {
  position: relative;
  margin-bottom: 56px;
}

.noticias-carrossel__viewport {
  overflow: visible;
}

.noticias-carrossel__trilho {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-feature-gap-coluna);
  list-style: none;
  margin: 0;
  padding: 0;
}

.noticias-carrossel__slide {
  min-width: 0;
}

.noticias-carrossel__seta,
.noticias-carrossel__dots {
  display: none;
}

.noticia-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: var(--card-feature-padding);
  background-color: var(--cor-fundo-cinza-claro);
  border-radius: var(--card-feature-radius);
}

.noticia-card__imagem-wrapper {
  width: 100%;
  border-radius: var(--foto-radius-md);
  overflow: hidden;
  border: 1px solid rgba(15, 34, 29, 0.1);
  box-shadow: 0 8px 20px rgba(15, 34, 29, 0.08);
}

.noticia-card__imagem {
  display: block;
  width: 100%;
  height: auto;
}

.noticia-card__texto {
  font-size: var(--fs-card-corpo);
  font-weight: var(--fw-card-corpo);
  line-height: var(--lh-card-corpo);
  color: var(--cor-texto-quase-preto);
}

/* Efeito "marca-texto" no número/estatística de destaque de cada card —
   reaproveita --cor-cta-dourado (mesma cor dos CTAs) em baixa opacidade em
   vez de introduzir um token de cor novo só para isto. */
.noticia-card__texto strong {
  background: color-mix(in srgb, var(--cor-cta-dourado) 25%, transparent);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: var(--peso-semibold);
}

.noticia-card__fonte {
  font-size: var(--fs-footer);
  font-weight: var(--fw-footer);
  color: var(--cor-texto-cinza-escuro);
}

.noticia-card__link {
  color: var(--cor-destaque-em-claro);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

.noticia-card__link:hover {
  opacity: 0.72;
}

/* ---------------------------------------------------------------------------
 * Caixa do texto de transição (prosa) + CTA
 * [ATUALIZAÇÃO 2026-08-11, pedido do cliente] Antes o texto ficava solto
 * direto no fundo da seção, alinhado à esquerda dentro de uma coluna estreita
 * (62ch). Virou uma caixa com a MESMA largura da grade de cards acima
 * (.noticias-carrossel, que ocupa o .container inteiro), texto centralizado —
 * reaproveita o mesmo par bg/padding/radius já usado no card de Premiação
 * (--cor-fundo-cinza-claro / --premiacao-card-padding / --premiacao-card-radius
 * em 06-premiacao.css), o mesmo princípio de "card sobre fundo claro".
 * ------------------------------------------------------------------------- */

.noticias__box {
  background-color: var(--cor-fundo-cinza-claro);
  border-radius: var(--premiacao-card-radius);
  padding: var(--premiacao-card-padding);
  text-align: center;
}

.noticias__corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 62ch;
  margin-inline: auto;
}

.noticias__corpo p {
  font-size: var(--fs-premiacao-corpo);
  font-weight: var(--fw-premiacao-corpo);
  line-height: var(--lh-premiacao-corpo);
  color: var(--cor-texto-cinza-escuro);
}

.noticias__corpo strong {
  color: var(--cor-texto-quase-preto);
  font-weight: var(--peso-semibold);
}

.noticias__corpo em {
  font-style: italic;
}

/* [ATUALIZAÇÃO 2026-08-11, pedido do cliente] A frase-chave do meio do bloco
   ("Esse espaço é o que o olhar sistêmico ocupa...") deixa de ser só um
   <strong>/sublinhado inline dentro do parágrafo e vira uma quebra editorial
   própria: fonte de marca (--font-familia-display = RizomaM) em itálico,
   bem maior que o corpo ao redor (18px → até 40px), com respiro vertical
   próprio — o "tchan" pedido. RizomaM não tem um arquivo itálico real (fonte
   de peso único, ver nota em tokens.css sobre fake-bold); font-style:italic
   aqui aciona itálico sintético do navegador, mesmo princípio já aceito no
   projeto para o fake-bold. max-width mais estreito que o resto do corpo
   (46ch vs 62ch) é proposital: linhas mais curtas dão mais peso visual a uma
   citação em destaque (efeito "pull-quote" editorial). */
/* Especificidade .noticias__corpo .noticias__quebra (2 classes) de propósito
   — precisa vencer ".noticias__corpo p" (1 classe + 1 tipo) declarada acima,
   senão font-size/line-height/color do corpo normal vazam para a quebra. */
.noticias__corpo .noticias__quebra {
  font-family: var(--font-familia-display);
  font-style: italic;
  font-size: clamp(26px, 2.6vw + 18px, 40px);
  line-height: 1.3;
  font-weight: var(--peso-regular);
  max-width: 46ch;
  margin: 40px auto;
  color: var(--cor-texto-quase-preto);
}

/* Aspas decorativas gigantes atrás da frase — flourish editorial clássico,
   reaproveita a mesma cor de accent dourado já usada no resto da seção
   (--cor-destaque-em-claro) em baixa opacidade, sem introduzir cor nova. */
.noticias__quebra::before {
  content: "\201C";
  display: block;
  font-style: normal;
  font-size: 1.8em;
  line-height: 0.5;
  color: var(--cor-destaque-em-claro);
  opacity: 0.4;
  margin-bottom: 12px;
}

.noticias__quebra-destaque {
  color: var(--cor-destaque-em-claro);
}

.noticias__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.noticias__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--botao-height-lg);
  padding: 0 32px;
  border-radius: calc(var(--botao-height-lg) / 2);
  background-color: var(--cor-cta-dourado);
  color: var(--cor-cta-dourado-texto);
  font-size: var(--fs-botao);
  font-weight: var(--fw-botao);
  line-height: var(--lh-botao);
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.noticias__cta-btn:hover {
  background-color: var(--cor-cta-dourado-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
}

.noticias__cta-btn:focus-visible {
  outline: 2px solid var(--cor-fundo-escuro-base);
  outline-offset: 3px;
}

.noticias__cta-arrow {
  font-weight: var(--peso-semibold);
}

/* ---------------------------------------------------------------------------
 * Responsivo — ver convenção de breakpoints em styles/base.css
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .noticias-carrossel__trilho {
    gap: 16px;
  }

  .noticia-card {
    padding: 20px;
  }

  .noticias__box {
    padding: 40px;
  }
}

@media (max-width: 768px) {
  /* Quebra estrutural: a grade de 3 colunas vira carrossel dinâmico
     (scroll-snap nativo, funciona por touch/swipe sem JS) com setas e dots
     controlados por script.js (initNoticiasCarousel). */

  /* [ATUALIZAÇÃO 2026-08-11, pedido do cliente] Título menor no mobile — o
     tamanho desktop (clamp com piso de 34px) ficava desproporcional em telas
     estreitas, ocupando a tela quase toda em 5-6 linhas curtas. */
  .noticias__titulo {
    font-size: clamp(24px, 5.5vw + 12px, 32px);
    line-height: 1.25;
    margin-bottom: 32px;
  }

  .noticias-carrossel {
    margin-bottom: 40px;
  }

  .noticias__box {
    padding: 32px 24px;
  }

  .noticias__corpo .noticias__quebra {
    margin: 28px auto;
    max-width: 34ch;
  }

  .noticias-carrossel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .noticias-carrossel__viewport::-webkit-scrollbar {
    display: none;
  }

  .noticias-carrossel__trilho {
    display: flex;
    gap: 16px;
    padding: 4px 4px 8px;
  }

  .noticias-carrossel__slide {
    flex: 0 0 82%;
    min-width: 240px;
    scroll-snap-align: center;
  }

  /* Setas douradas flutuando sobre as laterais do carrossel — mesma
     linguagem visual de .professores-carrossel__seta (08-especialista.css) —
     sinalizam que dá pra arrastar/clicar pra ver as outras notícias. Ficam
     escondidas acima deste breakpoint (regra .noticias-carrossel__seta,
     .noticias-carrossel__dots { display: none } no topo do arquivo), onde a
     grade de 3 colunas já mostra tudo sem precisar rolar. */
  .noticias-carrossel__seta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(50% - 18px);
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(212, 175, 55, 0.9);
    color: var(--cor-cta-dourado-texto);
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(15, 34, 29, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .noticias-carrossel__seta:hover {
    background-color: var(--cor-cta-dourado);
  }

  .noticias-carrossel__seta:focus-visible {
    outline: 2px solid var(--cor-fundo-escuro-base);
    outline-offset: 3px;
  }

  .noticias-carrossel__seta svg {
    width: 16px;
    height: 16px;
  }

  .noticias-carrossel__seta--prev {
    left: 4px;
  }

  .noticias-carrossel__seta--next {
    right: 4px;
  }

  .noticias-carrossel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }

  .noticias-carrossel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(15, 34, 29, 0.2);
    cursor: pointer;
    transition: background-color 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
  }

  .noticias-carrossel__dot--active {
    width: 22px;
    border-radius: 4px;
    background-color: var(--cor-cta-dourado);
  }
}

@media (max-width: 430px) {
  .noticias-carrossel__slide {
    flex-basis: 88%;
  }

  .noticias__box {
    padding: 28px 20px;
  }

  .noticias__cta-btn {
    width: 100%;
  }
}

@media (max-width: 375px) {
  .noticia-card {
    padding: 16px;
  }

  .noticias__box {
    padding: 24px 16px;
  }
}