/* ==========================================================================
   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 e numeral em escala de
   display (var(--fs-mega)) ao lado de titulo+texto, com uma regua e um
   marcador quadrado que crescem 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, color e
   opacity animam; duracao sempre multiplicada por var(--motion).

   O gatilho da regua (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)
   a regua nasce visivel: nenhum conteudo depende dela 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);
  }
}

/* REDESENHO (31/08/2026, pedido do dono: "muito simples essa section",
   depois de já termos cortado texto e quebrado a simetria — o que faltava
   era desenho, não conteúdo). Sai a caixa com filete de topo; entra o
   numeral em escala de DISPLAY (var(--fs-mega), token da escala tipográfica
   que nenhuma seção ainda consumia) numa coluna própria, ao lado da coluna
   de título+texto (linha única, altura dada pelo mais alto dos dois), e a
   régua deixa de ser topo de caixa para virar
   traço + marcador quadrado acima do título — o "régua horizontal com
   marcador" do pedido, preso ao conteúdo, não ao bloco inteiro. */
.tese-block {
  position: relative;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-6);
}

/* Tinta do numeral: --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. --faint-foreground passa como
   texto de corpo em qualquer viewport. Ver o bloco --faint em 01-tokens.css.
   font-weight baixo (o extremo oposto do título, ver abaixo) é o contraste
   de peso pedido: numeral fino e enorme atrás, título grosso e pequeno na
   frente — hierarquia por peso e escala, não por caixa. */
/* Desde 31/08/2026 esta caixa guarda um ÍCONE, não o numeral (o dono pediu a
   troca). O traço fino do ícone faz o mesmo papel que o numeral fino fazia:
   massa grande e clara atrás do título grosso e pequeno — hierarquia por
   escala e peso, não por caixa. */
.tese-block__num {
  display: inline-flex;
  align-items: flex-start;
  inline-size: var(--fs-mega);
  block-size: var(--fs-mega);
  color: hsl(var(--faint-foreground));
  transition:
    color calc(var(--dur-base) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

/* Sem a régua no topo, o recuo dela também sai: o título abre o bloco. */
.tese-block__content {
  grid-column: 2;
  position: relative;
  min-width: 0;
  padding-block-start: 0;
}

/* A RÉGUA E O MARCADOR SAÍRAM (31/08/2026, pedido do dono: "remove isso, de
   todos os 4 ali"). Eram a marcação de índice do bloco; com o ícone de volta
   ao lado do título, viravam um segundo sinal dizendo a mesma coisa, e o
   traço largo empurrava o título para baixo sem separar nada. */

.tese-block__title {
  margin: 0;
  font-weight: 700;
}

/* Título e texto ficam a uma distância só, e menor: eram --space-4 (16px)
   somados ao recuo da régua, e o dono viu o bloco descolado ("tem que arrumar
   a distância dos títulos com subtítulo e o conteúdo"). */
.tese-block__text {
  margin-block-start: var(--space-3);
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* Realce ao passar o mouse: só transform, color e opacity animam. O
   marcador (::after) fica de fora de propósito — ele é o ponto fixo da
   régua, não reage. */
@media (hover: hover) {
  .tese-block:hover .tese-block__num {
    color: hsl(var(--foreground));
    transform: translateY(calc(var(--space-2) * -1));
  }
}

/* O SVG preenche a caixa do ícone; o traço fica fino para não virar mancha
   sólida nessa escala. */
.tese-block__num svg {
  inline-size: 100%;
  block-size: 100%;
  stroke-width: 1;
}

/* O MURAL SAIU DESTA FOLHA em 31/08/2026: ele mora na dobra agora, e o CSS
   dele foi junto para sections/hero.css. O que sobra aqui é a matriz dos
   quatro compromissos, na largura inteira. */