/* ==========================================================================
   Novidades — a secao 04 da home, a chamada para /blog.

   Composicao de pagina de noticias (a sala de imprensa da Apple) na
   gramatica do site: cartao branco sobre o palco, numero da secao, titulo
   mascarado. O artigo mais recente em destaque, com a foto grande; os
   seguintes em linhas separadas por fio, que se desenha da esquerda ao
   entrar e fica vermelho sob o ponteiro, como toda lista do site.

     .novidades__intro   numero, titulo e uma frase
     .nv-lead            o destaque: foto, tema, titulo, resumo e data
     .nv-list / .nv-row  os seguintes: tema, titulo e data, miniatura a direita
     .novidades__all     "Ver todos os artigos": no alto (tablet e desktop)
                         ou no fim da lista (celular), pela grade

   Um vermelho so: o tema de cada artigo, em versalete. O resto e tinta.
   ========================================================================== */

.novidades__card {
  /* O acento do tema. Em tom escuro ou vermelho o vermelho forte perde
     contraste, entao cada tom troca o valor aqui, num lugar so. */
  --nv-accent: var(--brand-strong);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "lead"
    "list"
    "all";
  row-gap: var(--section-gap);
}

.novidades__card[data-tone="ink"] {
  --nv-accent: var(--brand-light);
}

.novidades__card[data-tone="brand"] {
  --nv-accent: #ffffff;
}

/* --------------------------------------------------------------------------
   Abertura
   -------------------------------------------------------------------------- */
.novidades__intro {
  grid-area: intro;
  display: grid;
  gap: clamp(1.125rem, 0.8rem + 1.6vw, 2rem);
  min-width: 0;
}

.novidades__headline {
  margin-left: -0.035em; /* alinhamento optico da haste */
}

.novidades__lead {
  max-width: 40ch;
  font-size: var(--fs-lead-lg);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Rotulos comuns: o tema (o unico vermelho) e a data
   -------------------------------------------------------------------------- */
.nv-theme {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nv-accent);
}

.nv-date {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-50);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Destaque
   -------------------------------------------------------------------------- */
.nv-lead {
  grid-area: lead;
  min-width: 0;
}

.nv-lead__link {
  display: grid;
  gap: clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
  color: inherit;
}

.nv-lead__link:focus-visible {
  outline-offset: 6px;
  border-radius: var(--radius-panel);
}

.nv-lead__media {
  display: block;
  aspect-ratio: 3 / 2;
}

/* A foto se abre de cima para baixo quando o destaque entra em cena, como
   a capa das outras secoes, enquanto a imagem assenta do zoom da .media. */
[data-reveal] .nv-lead__media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-reveal) var(--ease-out);
}

[data-reveal].is-revealed .nv-lead__media {
  clip-path: inset(0);
}

/* Folga para a paralaxe (abaixo): `scale` e nao `transform`, para conviver
   com o zoom de entrada e o de hover, que usam --img-scale. */
.nv-lead__img {
  scale: 1.06;
}

.nv-lead__body {
  display: grid;
  justify-items: start;
  gap: 0.625rem;
  min-width: 0;
}

.nv-lead__title {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  font-weight: var(--fw-display);
  line-height: 1.08;
  letter-spacing: calc(-0.032em * var(--track-display));
  color: var(--ink);
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease-out);
}

.nv-lead__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-width: 54ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-70);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Os seguintes — linhas no fio fino. Celular: texto a esquerda e a
   miniatura quadrada a direita, como uma lista de noticias no telefone.
   -------------------------------------------------------------------------- */
.nv-list {
  grid-area: list;
  display: grid;
  min-width: 0;
  /* A cadencia aprovada para listas: item a item, de cima para baixo,
     devagar (a mesma do painel do hero). */
  --reveal-stagger: var(--row-stagger);
  --dur-reveal-scroll: var(--dur-row);
}

.nv-row {
  position: relative;
}

/* Dois fios no topo de cada linha: o cinza, que se desenha da esquerda
   quando a linha entra, e o vermelho, que cresce por cima no hover. */
.nv-row::before,
.nv-row::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
}

.nv-row::before {
  background: var(--line-strong);
  transition: transform var(--dur-reveal) var(--ease-out);
}

[data-reveal].is-revealed .nv-row::before {
  transform: scaleX(1);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
}

.nv-row::after {
  background: var(--nv-accent);
  transition: transform var(--dur-base) var(--ease-out);
}

.nv-row:last-child {
  border-bottom: 1px solid var(--line);
}

/* O <article> entre a linha e o link passa a altura adiante: no desktop a
   linha tem altura fixa (uma fatia do destaque) e o link a ocupa inteira. */
.nv-row__card {
  height: 100%;
}

.nv-row__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding-block: clamp(1rem, 0.85rem + 0.7vw, 1.375rem);
  color: inherit;
}

.nv-row__link:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.nv-row__text {
  display: grid;
  gap: 0.4375rem;
  min-width: 0;
}

/* No celular o titulo vai ate quatro linhas: cortado em tres, a maioria
   parava no meio da frase. */
.nv-row__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  font-weight: var(--fw-display);
  line-height: 1.22;
  letter-spacing: calc(-0.024em * var(--track-display));
  color: var(--ink);
  text-wrap: pretty;
  transition: color var(--dur-fast) var(--ease-out);
}

.nv-row__thumb {
  display: block;
  width: clamp(5.5rem, 4rem + 7vw, 6.5rem);
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Todos os artigos — no celular, a acao que fecha a lista
   -------------------------------------------------------------------------- */
.novidades__all {
  grid-area: all;
  min-width: 0;
}

.novidades__all-btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Ponteiro fino: o gesto das outras listas do site. A foto se aproxima, o
   titulo ganha o vermelho e, na linha, o fio vermelho cresce da esquerda.
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .nv-lead__link:hover .nv-lead__img {
    --img-scale: 1.04;
  }

  .nv-lead__link:hover .nv-lead__title,
  .nv-row__link:hover .nv-row__title {
    color: var(--nv-accent);
  }

  .nv-row:hover::after {
    transform: scaleX(1);
  }

  .nv-row__link:hover .nv-row__img {
    --img-scale: 1.08;
  }
}

/* Paralaxe do destaque, amarrada a rolagem, onde o navegador conhece
   animation-timeline. Onde nao conhece, a foto fica parada. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nv-lead__img {
      animation: cover-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* Sem JavaScript nada fica escondido: a foto nasce aberta e os fios
   ja desenhados. */
.no-js [data-reveal] .nv-lead__media {
  clip-path: none;
}

.no-js .nv-row::before {
  transform: none;
}

/* --------------------------------------------------------------------------
   Tablet — "Ver todos" sobe para o alto, a direita do numero; o destaque
   deita (foto a esquerda, texto a direita) e as linhas ganham miniatura
   maior, em 4:3.
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .novidades__card {
    grid-template-areas:
      "intro"
      "lead"
      "list";
  }

  /* O botao divide a celula da abertura com ela, alinhado ao numero da
     secao. A primeira linha da abertura tem a altura do botao, para os dois
     centrarem na mesma linha e nada abaixo encostar nele. */
  .novidades__all {
    grid-area: intro;
    justify-self: end;
    align-self: start;
    display: flex;
    align-items: center;
    height: 2.5rem;
  }

  .novidades__all-btn {
    width: auto;
  }

  .novidades__intro {
    grid-template-rows: 2.5rem auto;
  }

  .novidades__index {
    align-self: center;
    /* Deixa a faixa do botao livre: o numero nunca passa por baixo dele. */
    max-width: calc(100% - 13rem);
  }

  .nv-lead__link {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .nv-lead__media {
    aspect-ratio: 4 / 3;
  }

  .nv-row__thumb {
    width: 9rem;
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   Desktop — a composicao de jornal: o destaque a esquerda (7 partes), as
   linhas a direita (5 partes), da mesma altura. A abertura usa as mesmas
   duas colunas (subgrid): o titulo sobre o destaque, a frase sobre a lista.
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .novidades__card {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "intro intro"
      "lead  list";
    column-gap: clamp(2rem, 4vw, 5rem);
  }

  /* Nomes de area proprios (nv-*): com subgrid a abertura herda os nomes de
     linha do cartao, e um "lead" aqui resolveria para o "lead" de la, a
     coluna do destaque. */
  .novidades__intro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "nv-index nv-index"
      "nv-title nv-note";
    column-gap: clamp(2rem, 4vw, 5rem);
    row-gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  }

  .novidades__index {
    grid-area: nv-index;
  }

  .novidades__headline {
    grid-area: nv-title;
  }

  /* A frase senta na base do titulo, na coluna da lista. */
  .novidades__lead {
    grid-area: nv-note;
    align-self: end;
  }

  .nv-lead__link {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .nv-lead__media {
    aspect-ratio: 16 / 10;
  }

  /* As linhas dividem a altura do destaque em partes iguais, uma por artigo
     previsto (--nv-rows, do template). Com menos artigos publicados, as que
     existem mantem o tamanho e o resto fica em branco. */
  .nv-list {
    grid-template-rows: repeat(var(--nv-rows, 3), minmax(0, 1fr));
  }

  .nv-row__thumb {
    width: clamp(8rem, 3rem + 7vw, 12rem);
  }

  /* Na coluna larga o titulo cabe em tres linhas. */
  .nv-row__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* So um artigo publicado: sem lista, a faixa dela sai da grade (senao o vao
   da faixa vazia ficaria sobrando) e o destaque ocupa a largura toda. */
.novidades__card:not(:has(> .nv-list)) {
  grid-template-areas:
    "intro"
    "lead"
    "all";
}

@media (min-width: 48rem) {
  .novidades__card:not(:has(> .nv-list)) {
    grid-template-areas:
      "intro"
      "lead";
  }
}

@media (min-width: 64rem) {
  .novidades__card:not(:has(> .nv-list)) {
    grid-template-areas:
      "intro intro"
      "lead  lead";
  }
}

/* Com subgrid, a abertura herda as faixas do proprio cartao: a frase
   alinha ao pixel com a coluna da lista, em qualquer largura. */
@supports (grid-template-columns: subgrid) {
  @media (min-width: 64rem) {
    .novidades__intro {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
  }
}

/* Celular estreito (320): a miniatura encolhe um degrau para o titulo
   caber em tres linhas sem apertar. */
@media (max-width: 22.5rem) {
  .nv-row__thumb {
    width: 4.75rem;
  }
}