/*
 * Notícia (news-single.php). Abertura (migalhas, etiqueta e data, título,
 * subtítulo em serifa e foto), corpo com a ficha na margem e o texto em
 * largura de leitura, anterior e próxima como folhas vizinhas de uma carta,
 * relacionadas e a barra de leitura.
 *
 * Ganchos:
 *   .noticia--retrato   foto em pé ou quadrada: vai ao lado do título na tela larga
 *   .noticia--inteira   cartaz ou logotipo: a imagem cabe inteira, sobre névoa
 *   .leitura            barra de 2 px; scroll() no CSS ou --progresso pelo JS
 */

@layer componentes {
  /* Abertura */
  .noticia__abertura {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
  }
  .noticia__cabecalho { display: grid; justify-items: start; align-content: start; }
  .noticia__abertura > .migalhas { grid-column: 1 / -1; margin-bottom: 0; }
  .noticia__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    color: var(--basalto-suave);
  }
  .noticia__meta time { white-space: nowrap; }
  /* Linha de chamada laranja entre a etiqueta e a data, como na coordenada do cabeçalho */
  .noticia__meta time::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    margin-right: 0.75rem;
    background: var(--horizonte);
    vertical-align: middle;
  }
  /* em e não ch (o "0" do fallback mede outra coisa: CLS na troca de fonte).
     10,1em = 22ch da Display condensada; 26,5em = 52ch da Texto. */
  .noticia__titulo {
    max-width: 10.1em;
    margin-top: clamp(1rem, 2vw, 1.5rem);
    hyphens: manual;
  }
  .noticia__subtitulo {
    max-width: 26.5em;
    margin-top: clamp(1rem, 2vw, 1.5rem);
    color: var(--basalto-suave);
    font-family: var(--fonte-texto);
    font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
    line-height: 1.55;
  }

  /* Foto: paisagem larga embaixo do título; retrato ao lado (tela larga) */
  .noticia__figura { margin: 0; }
  .noticia__foto {
    overflow: hidden;
    border-radius: var(--raio);
    background: var(--nevoa);
    view-transition-class: noticia;
  }
  .noticia__foto img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(80vh, 48rem);
    object-fit: cover;
    border-radius: 0;
  }
  .noticia__figura .legenda { margin-top: 0.75rem; }
  /* Original estreito (menos de 1280 px): a foto larga não é ampliada além
     de ~56rem, onde começaria a borrar */
  .noticia--estreita:not(.noticia--retrato) .noticia__figura { max-width: 56rem; }
  /* Foto em pé: a moldura abraça a foto (sem faixas de névoa dos lados) */
  .noticia--retrato:not(.noticia--inteira) .noticia__foto { width: fit-content; max-width: 100%; }
  .noticia--retrato .noticia__foto img { width: auto; max-width: 100%; max-height: min(78vh, 46rem); object-fit: contain; }
  /* Com a proporção (imagem() a põe na foto de LCP), a largura sai da altura
     máxima antes de a foto baixar: com width auto, a moldura nascia com
     300 x 150 e crescia na decodificação (CLS de 0,13 a 0,28 na notícia 27). */
  .noticia--retrato:not(.noticia--inteira) .noticia__foto img[style*="--proporcao"] {
    width: calc(min(78vh, 46rem) * var(--proporcao));
  }
  .noticia--inteira .noticia__foto img { width: 100%; }
  .noticia--inteira .noticia__foto img {
    max-height: min(70vh, 36rem);
    padding: clamp(1rem, 4vw, 2.5rem);
    object-fit: contain;
  }
  @media (min-width: 60em) {
    .noticia--retrato .noticia__abertura {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      align-items: center;
      column-gap: clamp(2rem, 5vw, 5rem);
    }
    .noticia--retrato .noticia__titulo { max-width: 8.3em; } /* 18ch da Display condensada */
  }

  /* Corpo: ficha na margem (como os dados de uma folha de carta) e o texto */
  .noticia__corpo {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
  }
  .noticia__ficha {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding-top: 0.75rem;
    border-top: 2px solid var(--marinho);
  }
  .noticia__dados { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
  .noticia__dados dt {
    color: var(--aco-texto);
    font-size: var(--tam-etiqueta);
    font-weight: var(--peso-etiqueta);
    font-family: var(--fonte-etiqueta);
    font-stretch: var(--largura-etiqueta);
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .noticia__dados dd { margin-top: 0.25rem; color: var(--basalto); }
  .noticia__dados dd.dados { font-size: 0.9375rem; }
  .noticia__voltar { justify-self: start; font-size: 0.9375rem; }
  @media (min-width: 64em) {
    .noticia__corpo { grid-template-columns: 13rem minmax(0, var(--medida)); column-gap: clamp(3rem, 6vw, 6rem); }
    .noticia__ficha {
      position: sticky;
      top: calc(var(--altura-cabecalho) + 1.5rem);
      gap: 1.5rem;
    }
    .noticia__dados { display: grid; gap: 1.25rem; }
  }

  /* Texto: o HTML vem de data/news.php, já balanceado e sem style */
  .noticia__texto { min-width: 0; }
  .noticia__texto > :first-child { margin-top: 0; }
  .noticia__texto figure { margin-block: 2em; }
  /* Fotos do texto no tamanho natural, até a largura da coluna e 80 % da
     altura da janela; as em pé ficam alinhadas à esquerda, sem faixas */
  .noticia__texto figure picture { display: contents; }
  .noticia__texto figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 80vh; }
  .noticia__texto figcaption::before { content: "\2014\00A0"; content: "\2014\00A0" / ""; color: var(--aco); }
  .noticia__texto hr { margin-block: 2.5em 0; border-top-color: var(--linha); }
  .noticia__texto h4 {
    color: var(--aco-texto);
    font-family: var(--fonte-etiqueta);
    font-size: var(--tam-etiqueta);
    font-weight: var(--peso-etiqueta);
    font-stretch: var(--largura-etiqueta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .noticia__texto blockquote { font-size: 0.95em; }
  .noticia__texto a { overflow-wrap: anywhere; }
  .noticia__texto a .icone { width: 0.9em; height: 0.9em; margin-left: 0.15em; vertical-align: -0.05em; }
  .noticia__texto ul { list-style: square; }
  .noticia__texto li::marker { color: var(--aco); }

  /* Anterior e próxima: folhas vizinhas, separadas por um filete */
  .noticia__vizinhas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: clamp(3rem, 6vw, 5rem);
  }
  .noticia__vizinha {
    display: grid;
    align-content: start;
    gap: 0.375rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--linha);
    color: var(--basalto);
    text-decoration: none;
  }
  .noticia__vizinha:last-child { border-bottom: 1px solid var(--linha); }
  .noticia__sentido {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--marinho);
    font-size: var(--tam-etiqueta);
    font-weight: var(--peso-etiqueta);
    font-family: var(--fonte-etiqueta);
    font-stretch: var(--largura-etiqueta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .noticia__vizinha time { color: var(--basalto-suave); }
  .noticia__vizinha-titulo {
    max-width: 40ch;
    color: var(--marinho);
    font-family: var(--fonte-titulo);
    font-size: var(--tam-h3);
    font-weight: var(--peso-titulo);
    font-stretch: var(--largura-titulo);
    line-height: 1.15;
    text-wrap: balance;
  }
  .noticia__vizinha:hover .noticia__vizinha-titulo { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
  @media (min-width: 48em) {
    .noticia__vizinhas { grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--linha); }
    .noticia__vizinha { padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2.5rem); border: 0; }
    .noticia__vizinha:last-child { border-bottom: 0; }
    .noticia__vizinha--anterior { padding-left: 0; }
    .noticia__vizinha--proxima { grid-column: 2; justify-items: end; padding-right: 0; border-left: 1px solid var(--linha); text-align: right; }
  }

  /* Relacionadas */
  .noticia__grade > li { display: flex; }
  .noticia__grade .cartao { flex: 1; }
  .noticia__relacionadas .cartao__midia { view-transition-class: noticia; }

  /* Barra de leitura: 2 px em --horizonte-ui, encostada no topo da janela */
  .leitura {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    height: 2px;
    background: var(--horizonte-ui);
    transform: scaleX(var(--progresso, 0));
    transform-origin: 0 50%;
    pointer-events: none;
  }
  @supports (animation-timeline: scroll()) {
    .leitura {
      animation: leitura-avanca linear both;
      animation-timeline: scroll(root block);
    }
  }
  @keyframes leitura-avanca {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  @media print { .leitura { display: none; } }
}

@layer movimento {
  @media (prefers-reduced-motion: no-preference) {
    .noticia__vizinha .icone { transition: transform var(--dur-rapida) var(--ease-assentamento); }
    .noticia__vizinha--anterior:hover .icone { transform: translateX(-3px); }
    .noticia__vizinha--proxima:hover .icone { transform: translateX(3px); }

    /* Cartão -> notícia: a foto do cartão vira a foto grande (400 ms) */
    ::view-transition-group(*.noticia) {
      animation-duration: 400ms;
      animation-timing-function: var(--ease-assentamento);
    }
  }
}


@layer componentes {
  /* Figura com várias fotos (o HTML das notícias chega sem class): grade
     de colunas iguais, legenda ocupando a largura toda */
  .noticia__texto figure:has(img ~ img, picture ~ picture) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: 0.5rem;
    align-items: start;
  }
  .noticia__texto figure:has(img ~ img, picture ~ picture) img { width: 100%; height: 11rem; object-fit: cover; }
  .noticia__texto figure:has(img ~ img, picture ~ picture) figcaption { grid-column: 1 / -1; }
}