/* ==========================================================================
   NEXUS theme-final / assets/css/sections/tese.css
   Secao "tese": os 4 blocos "o que muda quando o fornecedor tambem opera".

   Layout editorial, nao grade de cards: cabecalho da secao a esquerda
   (fixo em telas largas o suficiente para caber sem apertar o texto),
   blocos numerados empilhados a direita. Cada bloco tem um filete superior
   que cresce da esquerda por scaleX quando o bloco entra em cena.

   So consome tokens de 01-tokens.css e reaproveita os primitivos ja
   existentes (.section, .container, .section__head, .eyebrow, .lead).
   Nada aqui redefine botao, card ou badge. Motion: so transform e opacity
   animam; duracao sempre multiplicada por var(--motion).

   O gatilho do filete (data-reveal-init / data-revealed) e escrito pelo
   motor de revelacao do core (assets/js/core/motion.js) em qualquer
   [data-reveal], nao por este partial. Sem esses atributos (pagina sem JS)
   o filete nasce visivel: nenhum conteudo depende dele para existir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout de duas colunas: intro fixa a esquerda, lista a direita.
   Abaixo de 900px vira uma coluna so, cabecalho em cima da lista.
   -------------------------------------------------------------------------- */

.tese__layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-12);
}

@media (min-width: 900px) {
  .tese__layout {
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: var(--space-16);
  }
}

.tese__intro {
  min-width: 0;
}

.tese__intro .section__head {
  margin-block-end: 0;
}

/* Cabecalho acompanha a rolagem da lista em telas largas o suficiente para
   ter as duas colunas lado a lado; abaixo disso fica no fluxo normal. */
@media (min-width: 900px) {
  .tese__intro {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-10));
  }
}

/* --------------------------------------------------------------------------
   2. Lista de blocos.
   <ol role="list">: role="list" reaplica a semantica de lista que
   list-style: none (herdado do reset de 02-base.css) remove em alguns
   leitores de tela.
   -------------------------------------------------------------------------- */

.tese__list {
  display: grid;
  gap: var(--space-14);
  min-width: 0;
}

/* Acima de 1560px o container cresce (1420px, depois 1600px, §7.3) e a
   coluna dos blocos passa a ter mais largura do que uma linha de texto pode
   usar: com o bloco travado em 68ch (--measure) a seção parava em 72% do
   container e sobrava uma faixa morta de cerca de 420px ao longo dos 1148px
   de altura.

   São quatro blocos, número par: duas colunas fecham exato, sem órfão e sem
   célula vazia, e cada bloco fica com cerca de 52ch, dentro da medida de
   leitura. A coluna do cabeçalho ganha um pouco mais de largura no mesmo
   degrau, porque agora ela divide a linha com uma grade e não com uma
   coluna única. Nada disso muda abaixo de 1560px. */
@media (min-width: 1560px) {
  .tese__layout {
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  }

  .tese__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-12);
    row-gap: var(--space-14);
  }
}

.tese-block {
  position: relative;
  max-width: var(--measure);
  padding-block-start: var(--space-8);
}

/* Filete superior: cresce da esquerda por scaleX, nunca por width. */
.tese-block::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: calc(var(--hairline) * 2);
  background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary) / 0.05));
  transform: scaleX(1);
  transform-origin: left;
  transition: transform calc(var(--dur-slow) * var(--motion)) var(--ease-out);
}

/* Só existe estado oculto depois que o motor de revelação já processou o
   elemento (data-reveal-init). Sem esse atributo (sem JS) o filete nasce
   no estado final, visível, cumprindo o invariante do §6. */
.tese-block[data-reveal-init]:not([data-revealed])::before {
  transform: scaleX(0);
}

.tese-block__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-5);
}

/* Tinta: --faint-foreground, nunca hsl(var(--primary) / alfa). É o mesmo
   antipadrão do alfa sobre --muted-foreground com outro token na frente, e
   reprovava pelo mesmo motivo: em 390x844 a --fs-h3 fica presa no piso do
   clamp (1,25rem = 20px), abaixo dos 24px que autorizariam o piso de 3:1, e
   o alfa 0.5 media 3,41:1 no claro. A partir de 414px a fonte passa de 24px
   e o mesmo valor passava, o que é exatamente o tipo de aprovação por acaso
   que o token elimina: --faint-foreground passa como texto de corpo em qualquer
   viewport. Ver o bloco --faint em 01-tokens.css. */
.tese-block__num {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-mono);
  color: hsl(var(--faint-foreground));
  font-variant-numeric: tabular-nums;
}

.tese-block__title {
  margin: 0;
}

.tese-block__text {
  margin-block-start: var(--space-4);
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* Realce sutil ao passar o mouse: só transform e color animam, aplicados
   nos filhos (nunca no próprio <li data-reveal>, que já carrega um
   transform inline escrito pelo motor de revelação; sobrescrever ali não
   funcionaria porque estilo inline sempre vence regra de classe). */
@media (hover: hover) {
  .tese-block__title,
  .tese-block__num {
    transition:
      transform calc(var(--dur-base) * var(--motion)) var(--ease-out),
      color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
  }

  .tese-block:hover .tese-block__title {
    transform: translateX(var(--space-2));
  }

  /* O hover sobe a ênfase pelo token inteiro, não por um alfa maior: se o
     estado de repouso não pode depender de alfa, o de hover também não. */
  .tese-block:hover .tese-block__num {
    color: hsl(var(--foreground));
  }
}