/* =====================================================================
   ABERTURA DA HOME - ULTIMAS NOTICIAS

   Bloco fixo entre o menu principal e o construtor da pagina inicial.
   Carregado so na home, pela lista $estilosExtras do index.php.

   --cor-editoria: cor da categoria daquela materia, escrita pelo PHP em
   cada article. E ela que pinta a badge quadrada acima do titulo.

   Mobile first: uma coluna so, cartoes deitados (foto a esquerda). O
   arranjo do projeto - destaque grande + 3 cartoes ao lado - comeca em
   992px.
   ===================================================================== */

.ultimas { margin-top: 14px; }

/* =====================================================================
   BANNER DA ABERTURA

   Fica no lugar onde ficava o letreiro de ultimas noticias, entre o menu
   e o bloco das quatro materias. A arte aparece centralizada e no tamanho
   real do arquivo - nunca esticada; em tela estreita ela apenas encolhe
   proporcionalmente. Marcacao em index.php.
   ===================================================================== */

.banner-abertura { margin-top: 14px; }

.banner-abertura-arte {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;
}

.banner-abertura-arte picture { display: block; }

.banner-abertura-arte img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* =====================================================================
   BADGE QUADRADA DA EDITORIA
   Mesma peca no destaque e nos cartoes; muda so o tamanho da fonte.
   ===================================================================== */

.ultima-badge {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  align-self: flex-start;
  padding: 4px 9px;
  color: #fff;
  background: var(--cor-editoria, var(--verde));
  font-family: var(--fonte-menu);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* =====================================================================
   GRADE: DESTAQUE + 3 CARTOES
   ===================================================================== */

.ultimas-grade {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

/* ---------------------------------------------------------------------
   DESTAQUE
   Foto de fundo, texto por cima e um degrade escuro garantindo a leitura.
   --------------------------------------------------------------------- */

.ultima-destaque {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.ultima-destaque-link { display: block; color: inherit; }

.ultima-destaque-imagem {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--skeleton-base);
}
.ultima-destaque-imagem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* O zoom acontece dentro da moldura (overflow: hidden): a foto cresce,
   o cartao nao. */
.ultima-destaque-link:hover .ultima-destaque-imagem img { transform: scale(1.06); }

.ultima-destaque-texto {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 40px 16px 14px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(4, 20, 26, .82) 45%, rgba(4, 20, 26, .95));
}

.ultima-destaque-titulo {
  margin: 0;
  color: #fff;
  font-size: clamp(1.15rem, 4.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.ultima-destaque-resumo {
  display: none;              /* no celular a foto ja e pequena: so titulo e data */
  color: rgba(255, 255, 255, .84);
  font-size: .88rem;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------
   DESTAQUE ROTATIVO (loop em fade)

   As tres materias ficam empilhadas no mesmo espaco: a ativa fica no
   fluxo (e quem da a altura do bloco) e as outras viram camadas
   absolutas invisiveis. A troca e so opacidade - nada de deslocar o
   layout - e o zoom lento da imagem da o acabamento premium.
   --------------------------------------------------------------------- */

.ultima-destaque-fade .ultima-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s;
}
.ultima-destaque-fade .ultima-slide-ativo {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.ultima-destaque-fade .ultima-slide .ultima-destaque-imagem img {
  transform: scale(1.07);
  transition: transform 5.6s linear;
}
.ultima-destaque-fade .ultima-slide-ativo .ultima-destaque-imagem img { transform: scale(1); }
.ultima-destaque-fade .ultima-slide-ativo:hover .ultima-destaque-imagem img {
  transform: scale(1.06);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

/* O texto entra logo depois da foto, subindo de leve. */
.ultima-destaque-fade .ultima-destaque-texto {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease .2s, transform .7s cubic-bezier(.2, .7, .2, 1) .2s;
}
.ultima-destaque-fade .ultima-slide-ativo .ultima-destaque-texto {
  opacity: 1;
  transform: none;
}

/* Setas: so aparecem com o mouse sobre o destaque (ou no foco do teclado). */
.ultima-seta {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #16202a;
  background: rgba(255, 255, 255, .94);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(4, 20, 26, .28);
  cursor: pointer;
  opacity: 0;
  transition: opacity .28s, transform .28s, background .2s, color .2s;
}
.ultima-seta-anterior { left: 14px; transform: translate(-10px, -50%); }
.ultima-seta-proxima  { right: 14px; transform: translate(10px, -50%); }

.ultima-destaque-fade:hover .ultima-seta,
.ultima-seta:focus-visible { opacity: 1; transform: translate(0, -50%); }

.ultima-seta:hover { color: #fff; background: var(--verde); }

/* Barrinhas indicando em qual das tres materias o loop esta. */
.ultima-pontos {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 16px;
  display: flex;
  gap: 6px;
}
.ultima-pontos b {
  width: 20px;
  height: 4px;
  background: rgba(255, 255, 255, .45);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(4, 20, 26, .3);
  transition: width .3s, background .3s;
}
.ultima-pontos b.ultima-ponto-ativo { width: 32px; background: #fff; }

/* ---------------------------------------------------------------------
   CARTOES MENORES
   Deitados no celular (foto a esquerda), do mesmo jeito ate o desktop.
   --------------------------------------------------------------------- */

.ultimas-lista { display: grid; gap: 14px; align-content: start; }

.ultima-cartao-link {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: inherit;
}

.ultima-cartao-imagem {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: var(--skeleton-base);
  border-radius: 6px;
}
.ultima-cartao-imagem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.ultima-cartao-link:hover .ultima-cartao-imagem img { transform: scale(1.07); }

.ultima-cartao-texto {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.ultima-cartao-titulo {
  margin: 0;
  color: #16202a;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  transition: color .2s;
}
.ultima-cartao-link:hover .ultima-cartao-titulo { color: var(--cor-editoria, var(--verde)); }

/* Data: mesma pegada nos dois tamanhos de cartao. */
.ultima-data {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fonte-menu);
  font-size: 11px;
  font-weight: 600;
}
.ultima-cartao .ultima-data { color: #77808c; }
.ultima-destaque .ultima-data { color: rgba(255, 255, 255, .85); }
.ultima-data i { font-size: 10.5px; }

/* =====================================================================
   TABLET
   ===================================================================== */

@media (min-width: 576px) {
  .ultima-destaque-imagem { aspect-ratio: 16 / 9; }
  .ultima-destaque-texto { padding: 52px 20px 18px; }
  .ultima-destaque-resumo { display: block; }
  .ultima-cartao-link { grid-template-columns: 168px minmax(0, 1fr); gap: 14px; }
  .ultima-cartao-titulo { font-size: 1rem; }
}

/* =====================================================================
   DESKTOP: o arranjo do projeto
   ===================================================================== */

@media (min-width: 992px) {
  .ultimas { margin-top: 18px; }

  .ultimas-grade {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 16px;
  }

  /* Quem manda na altura da linha e a coluna dos cartoes: as tres fotos
     mantem o 3/2 e a altura do bloco sai da soma delas. O destaque e que
     acompanha - a foto dele vira fundo absoluto e preenche a altura toda,
     em vez de impor um 16/10 que deixava sobra em cima e embaixo. */
  .ultimas-lista { align-content: start; }
  .ultima-cartao-link { grid-template-columns: 186px minmax(0, 1fr); }

  .ultima-destaque { min-height: 300px; }
  .ultima-destaque-link { height: 100%; }
  .ultima-destaque-imagem { position: absolute; inset: 0; aspect-ratio: auto; }
  .ultima-destaque-texto { padding: 60px 22px 20px; }
  .ultima-destaque-titulo { font-size: 1.6rem; }
  .ultima-badge { font-size: 10.5px; padding: 4px 10px; }
  .ultima-cartao-titulo { font-size: 1.08rem; }
}

/* =====================================================================
   ACESSIBILIDADE
   Quem pediu menos movimento ao sistema ve as fotos sem zoom.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ultima-destaque-imagem img,
  .ultima-cartao-imagem img { transition: none; transform: none !important; }

  /* O loop continua trocando, mas sem fade longo nem texto deslizando. */
  .ultima-destaque-fade .ultima-slide,
  .ultima-destaque-fade .ultima-destaque-texto { transition-duration: .01ms; }
  .ultima-destaque-fade .ultima-destaque-texto { transform: none; }
}