/**
 * Notícia interna — só o miolo.
 *
 * Foto de topo, barra de tags, matéria com player de áudio, recomendados e a
 * chamada "Seja um porta-voz".
 *
 * Reset, base e utilitários vêm de `compartilhado/css/base.css`; topo e
 * rodapé de `topo.css` e `rodape.css`. Esta folha entra depois deles.
 *
 * A seção final chamava-se `.porta-voz`, mas esse nome é do BOTÃO do header
 * compartilhado (a pílula verde). Renomeada para `.convite` na migração de
 * 07/08/2026 — sem isso a seção inteira herdava `border-radius: 999px` e
 * fundo verde.
 *
 * Caminhos de imagem sempre relativos (CLAUDE.md: nunca `/img/...`).
 */

/* ------------------------------------------------- fundo próprio da página */

/*
 * A matéria é branca; o creme do compartilhado fica só no topo e no rodapé.
 * Escopado ao `main` pelo mesmo motivo das páginas escuras: mexer no `:root`
 * repintaria a barra da marca.
 */
main {
  --cor-fundo: var(--cor-fundo-noticia);
  background: var(--cor-fundo);
  font-family: var(--fonte-corpo);
}

/* Vinha do bloco base da página, que saiu para o compartilhado; o markup do
   miolo ainda usa. */
.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}
/* -------------------------------------------------------- topo da matéria */

/* PSD: foto em x 243→1695, y 127→630 (1452×503 sobre 1920). */
.materia__foto {
  position: relative; /* âncora do crédito do fotógrafo */
  width: min(100% - 2 * var(--gutter), 1452px);
  margin-inline: auto;
}

.materia__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1452 / 503;
  object-fit: cover;
}

/*
 * Crédito do fotógrafo sobre a foto de topo — canto inferior direito.
 *
 * Vem do campo "Descrição" da mídia (ver `inc/creditos.php`). Fica SOBRE a
 * imagem porque a foto de topo não tem legenda embaixo: logo abaixo dela
 * começa a faixa vermelha das tags, e enfiar uma linha de crédito entre as
 * duas separaria a faixa da foto, que no PSD são coladas.
 *
 * `inline-block` dentro de um wrapper `absolute`: assim o véu tem a largura do
 * texto e não a da foto inteira, e ainda quebra em duas linhas num nome longo
 * sem esticar a caixa até a esquerda.
 */
.materia__credito {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: min(100%, 32ch);
  padding: 0.15rem 0.45rem;
  background: var(--cor-credito-veu);
  color: var(--cor-credito-sobre-foto);
  font-size: var(--texto-credito);
  line-height: 1.35;
  text-align: right;
}

/* Barra vermelha com tags, colada na base da foto (y 628→725 no PSD). */
.barra-tag {
  width: min(100% - 2 * var(--gutter), 1452px);
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background: var(--cor-marca-primaria);
  color: #fff;
}

/*
 * A faixa é inteira, do começo ao fim da foto — PSD: x244→1696, y627→726, ou
 * seja 1452×99, a mesma largura de TOPO FOTO. Antes ela parava em ~72% e o
 * resto da linha era um bloco branco de "Compartilhe", que no layout não fica
 * ali: o compartilhamento é o bloco vermelho centralizado mais abaixo.
 *
 * Recuo do texto: 49px de 1452 ≈ 3,4% — o `clamp` já traduzia isso.
 */
.barra-tag__meta {
  display: flex;
  align-items: center;
  min-height: 99px;
  padding-inline: clamp(1rem, 3.4vw, 3.125rem);
  font-size: var(--texto-tag);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- artigo */

.artigo {
  width: min(100% - 2 * var(--gutter), var(--largura-artigo));
  margin-inline: auto;
  padding-block: var(--espaco-5);
}

.artigo__titulo {
  font-size: var(--texto-titulo);
  font-weight: 800;
  line-height: var(--lh-titulo);
  letter-spacing: -0.01em;
  color: var(--cor-titulo);
  text-wrap: balance;
}

.artigo__lide {
  margin-top: var(--espaco-3);
  font-size: var(--texto-lide);
  font-weight: 600;
  line-height: var(--lh-lide);
  color: var(--cor-titulo);
  text-wrap: pretty;
}

/* ------------------------------------------------------- player de áudio */

/* Não é <audio> nativo porque o PSD desenha controle próprio (play, barra de
   progresso, tempo e velocidade). A lógica entra quando existir o arquivo de
   áudio — pendência #37. */
.ouca {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-top: var(--espaco-5);
  padding-block: var(--espaco-2);
  color: var(--cor-marca-primaria);
  font-size: 0.875rem;
}

.ouca__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  color: #fff;
  background: var(--cor-marca-primaria);
  border-radius: 50%;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.ouca__play:hover {
  transform: scale(1.06);
}

.ouca__play:active {
  transform: scale(0.94);
}

.ouca__corpo {
  flex: 1;
  min-width: 0;
}

.ouca__barra {
  margin-top: 0.5rem;
  height: 3px;
  background: currentColor;
  opacity: 0.35;
}

.ouca__tempo,
.ouca__velocidade {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.ouca__velocidade {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid currentColor;
  border-radius: var(--raio-s);
}

/* --------------------------------------------------- pílula compartilhe */

/* PSD: 329×58 centralizada, y 1088. */
.compartilhe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: fit-content;
  margin: var(--espaco-4) auto 0;
  padding: 0.25rem 0.5rem 0.25rem 1.25rem;
  background: var(--cor-marca-primaria);
  color: #fff;
  border-radius: 999px;
  font-size: var(--texto-tag);
  font-weight: 800;
  text-transform: uppercase;
}

.compartilhe ul {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
}

/*
 * Sem fundo branco no link: a arte do PSD já traz o disco, e um círculo de
 * 44px atrás de um ícone de 38 virava um anel. O link continua com 44×44 de
 * área clicável, só que transparente.
 */
.compartilhe a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.compartilhe img {
  width: 38px;
  height: 38px;
}

.compartilhe a:hover {
  transform: scale(1.08);
}

/* ------------------------------------------------------- texto corrido */

.corpo {
  margin-top: var(--espaco-5);
}

.corpo > * + * {
  margin-top: var(--espaco-2);
}

.corpo p {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.corpo h2 {
  margin-top: var(--espaco-4);
  font-size: var(--texto-subtitulo);
  font-weight: 800;
  line-height: 1.2;
  color: var(--cor-corpo);
}

.corpo figure {
  margin-top: var(--espaco-4);
}

.corpo figure img {
  width: 100%;
  height: auto;
}

.corpo figcaption {
  padding-block: 0.75rem;
  border-bottom: 5px solid var(--cor-borda);
  font-size: var(--texto-legenda);
  color: var(--cor-corpo);
}

/*
 * O crédito emendado no fim da legenda: `Legenda | Fotógrafo: Fulano`.
 *
 * Um degrau menor e mais claro que a legenda — é atribuição, não informação
 * da foto, e o contraste continua em 5,4:1. A barra entra DENTRO do span para
 * encolher junto; solta ela ficaria do tamanho da legenda e chamaria mais
 * atenção que o próprio crédito.
 */
.legenda__credito {
  font-size: var(--texto-credito);
  color: var(--cor-credito);
}

/* Citação: barra vermelha de 6px à esquerda (Retângulo 26 no PSD). */
.corpo blockquote {
  margin-top: var(--espaco-4);
  margin-inline-start: clamp(0rem, 6.2vw, 4.4375rem);
  padding-inline-start: clamp(1rem, 1.5vw, 1.8125rem);
  border-inline-start: 6px solid var(--cor-marca-primaria);
  font-family: var(--fonte-citacao);
  font-size: var(--texto-citacao);
  font-style: italic;
  line-height: 1.12;
  color: var(--cor-marca-primaria);
}

/* ------------------------------------------------ recomendados pra você */

.recomendados {
  background: var(--cor-fundo-secao);
  padding-block: var(--espaco-5);
}

.recomendados__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 2.57vw, 3.08rem);
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  color: var(--cor-marca-primaria);
}

/*
 * `list-style: none` e `padding: 0` explícitos: sem eles o navegador desenhava
 * o marcador de cada `<li class="card">`, e o bullet aparecia solto à esquerda
 * da linha de categoria — era isso que deixava as tags dos recomendados com
 * cara de lista de compras. O reset do compartilhado só alcança
 * `ul[role='list']`, daí o atributo no HTML.
 */
.recomendados__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--espaco-3);
  margin: var(--espaco-4) 0 0;
  padding: 0;
  list-style: none;
}

.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 386 / 217;
  object-fit: cover;
  border-radius: var(--raio-xg);
}

.card__tags {
  margin-top: var(--espaco-2);
  font-size: var(--texto-menu);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--cor-marca-secundaria);
}

.card__titulo {
  margin-top: 0.5rem;
  font-size: clamp(1.125rem, 1.28vw, 1.54rem);
  font-weight: 800;
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--cor-card-titulo);
}

.card__titulo a {
  text-decoration: none;
}

.card__resumo {
  margin-top: 0.75rem;
  font-size: var(--texto-legenda);
}

.card__leia {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  margin-top: 0.25rem;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cor-marca-secundaria);
  transition: gap var(--dur-rapida) var(--ease-padrao);
}

.card__leia:hover {
  gap: 0.75rem;
}

/* ------------------------------------------------------- seja porta-voz */

.convite {
  background: var(--cor-marca-primaria);
  color: #fff;
  /*padding-block: var(--espaco-5);*/
}

.convite__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-3);
  align-items: center;
  text-align: center;
  justify-items: center;
}

/* 574px é a largura do PNG; passar disso só ampliaria bitmap. */
.convite__arte {
  width: min(100%, 574px);
  height: auto;
  margin: -22px 0px;
}

.convite__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 3.6vw, 4.3125rem);
  font-weight: 900;
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--cor-marca-terciaria);
}

.convite__texto {
  margin-top: var(--espaco-2);
}

.convite__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--espaco-2);
  padding-inline: var(--espaco-3);
  background: #fff;
  color: var(--cor-participe);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.convite__botao:hover {
  transform: scale(1.03);
}

@media (width >= 62rem) {
  .convite__linha {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    text-align: start;
    justify-items: start;
  }
}

/* ---------------------------------------------------------- responsivo */

@media (width < 48rem) {
  .barra-tag__meta {
    min-height: 64px;
  }

  .corpo blockquote {
    margin-inline-start: 0;
  }

  .corpo p {
    text-align: start;
  }
}