/*
 * Complementos do tema clássico para matéria/editoria/tag/autor/colunistas
 * (components/classic/{article,editoria}). O CSS do site antigo
 * (app-*.css) continua sendo a base; aqui só o que a marcação em React precisa
 * a mais (links no lugar de botões, posições de anúncio vazias…).
 */

/* Posição de anúncio sem anúncio: some com a moldura ("Continua após anúncio"). */
.cl-ad-wrap:not(:has([data-ad-slot])) {
  display: none;
}

/* Paginador: no antigo eram <button>; aqui são links (?page=N). */
.cl-pager a.paginate-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/*
 * Degradês do Tailwind 3 do antigo (classes from-black, to-transparent…): o Tailwind 4 do app registra
 * --tw-gradient-from/to como <color> (@property), o que invalida os valores do
 * CSS antigo ("#000 var(--tw-gradient-from-position)") — o degradê sumia.
 */
.noticia .cl-card-gradient {
  background-image: linear-gradient(to top, #000, transparent);
}
.cl-rank-number {
  background-image: linear-gradient(to top, transparent, #cbd5e1);
}

/* Galeria: largura das miniaturas (a do CSS do antigo) para a janela de 5. */
.galeria__container {
  --cl-thumb-w: 100px;
}
@media screen and (max-width: 900px) {
  .galeria__container {
    --cl-thumb-w: 90px;
  }
}
/* Miniatura clicável: botão sem aparência (no antigo era a <img> solta no slide). */
.galeria__container .cl-thumb {
  all: unset;
  display: flex;
  justify-content: center;
  height: 100%;
  cursor: pointer;
}
.galeria__container .cl-thumb:focus-visible {
  outline: 2px solid #0095d4;
}
.cl-gallery .carousel__track {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*
 * Carrosséis (components/classic/article/carousel.tsx): cards por tela como os
 * breakpoints do vue3-carousel do antigo; a posição vem de --cl-i (no <section>).
 */
.cl-per-destaque {
  --cl-per: 2;
}
@media (min-width: 1024px) {
  .cl-per-destaque {
    --cl-per: 3;
  }
}
@media (min-width: 1279px) {
  .cl-per-destaque {
    --cl-per: 5;
  }
}
.cl-per-colunistas {
  --cl-per: 1.25;
}
@media (min-width: 700px) {
  .cl-per-colunistas {
    --cl-per: 3;
  }
}
.cl-slide {
  width: calc(100% / var(--cl-per, 1));
}
.cl-track {
  transform: translateX(calc(var(--cl-i, 0) * -100% / var(--cl-per, 1)));
  transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Tags ("Leia mais sobre:") viraram links para /tag/…: mantêm a cor do antigo. */
.conteudo .leia-mais__p a {
  color: inherit;
}

/* Nome do autor no "Por …" é link para /autor/… (site novo), com o visual do antigo. */
.noticia-fonte .cl-byline-link {
  color: inherit;
  text-decoration: none;
}
.noticia-fonte .cl-byline-link:hover {
  text-decoration: underline;
}

/* Selos do site novo na linha da cartola. */
.cl-selo-live {
  background-color: #d92d20;
}

/* "Ouça esta matéria" (narração por IA, site novo). */
.cl-audio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #f3f4f6;
  font: 13px Open-Sans;
  color: #4a4a49;
}
.cl-audio__label {
  font-family: Open-Sans-Bold;
}
.cl-audio audio {
  height: 2.25rem;
  min-width: 0;
  flex: 1;
}
.cl-audio__note {
  width: 100%;
  font-size: 12px;
  color: #9ca3af;
}

/* Vídeo/iframe incorporado no texto: 16:9 na largura da coluna. */
.conteudo .cl-embed {
  margin: 0.9em 0;
}
.conteudo .cl-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Caixa de destaque (bloco "Destaque" do editor novo). */
.conteudo .cl-callout {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #f9fafb;
}