/* ==========================================================================
   Chase — home do design system

   Tradução de `referencia/loja/HomeScreen.jsx`, `CategoryTile.jsx`,
   `TrustStrip.jsx` e `Button.jsx` para CSS. Cada valor aqui saiu do objeto
   `style` do componente correspondente, e não de aproximação a olho — o
   comentário de cada bloco diz de onde veio.

   Carrega só na front page e obedece o interruptor `CHASE_DS_ATIVO`.
   ========================================================================== */

/* ==========================================================================
   Contêiner

   Do HomeScreen: `maxWidth: var(--container-max)`, `margin: 0 auto`,
   `padding: var(--space-8) var(--container-pad) 0`.
   ========================================================================== */

.chase-home {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad) 0;
}

/* O Storefront encaixa e espaça tudo pelo `.col-full`, e a home dele ainda
   recebe um `margin-bottom` de 4,2358em no `.site-header`. O contêiner do
   handoff já define o próprio respiro, então aquele vão sobraria como um
   buraco entre o header e o painel azul.

   `body.home #masthead` tem especificidade 1,1,1 contra os 0,3,0 do seletor do
   Storefront — é o mesmo padrão já registrado no projeto, e é por isso que não
   precisa de `!important`. */
body.home #masthead {
  margin-bottom: 0;
}

/* ==========================================================================
   1. Herói

   Do HomeScreen, na `<section>` de abertura: `background: var(--surface-brand)`,
   `borderRadius: var(--radius-xl)`, `overflow: hidden`,
   `gridTemplateColumns: '1.1fr 1fr'`, `minHeight: 320`.
   ========================================================================== */

/* A ARTE MOSTRA O BANNER INTEIRO — 25/09/2026.

   Era `1.1fr 1fr` com 320px de altura, depois `1fr 1.35fr` com 420. O pedido
   sempre foi o mesmo: dar à imagem o máximo possível sem perder o painel azul
   com o texto e os botões. A segunda tentativa foi na direção errada, e a
   conta explica por quê.

   O banner cadastrado é 2560x931, razão 2,75. A coluna da arte com 420px de
   altura e 800 de largura tem razão 1,90. Com `cover`, quem manda é o lado que
   precisa da maior escala — aqui a ALTURA —, e a largura escalada estoura a
   caixa. Medido: a imagem virava 1155x420 numa caixa de 800, com 355px fora.
   Só 69% do banner aparecia, e o que sobrava de fora era justamente a carta e
   o "JÁ DISPONÍVEL".

   Ou seja: para um banner mais largo que a caixa, ALTURA É CORTE. Subir de 320
   para 420 piorou a situação — a 320px a imagem aparecia 79% inteira. O
   comentário que estava aqui afirmava o contrário, e estava errado.

   A saída são duas mudanças que andam juntas:

   1. `background-size: contain`, que mostra o banner inteiro em vez de cortar.
      A arte deixa de encostar no topo e na base do painel: com 857px de
      largura ela pede 312 de altura, e sobram ~42px de azul de cada lado, que
      são o próprio `--surface-brand` do painel aparecendo por trás.
   2. A altura deixa de ser cravada em 420 e passa a ser a do bloco de texto,
      hoje 395px. O `min-height: 360` é só piso, para o painel não encolher se
      um dia o texto diminuir.

   As proporções viraram `1fr 1.6fr`, e 1,6 é teto medido, não gosto: o texto
   fica com 535px, e o título de `text-4xl` ainda cabe em duas linhas. Em
   `1.7fr` o parágrafo de apoio quebra numa linha a mais, a seção sobe para
   459px e as faixas de azul crescem de 42 para 70 — a arte ganha 19px de
   largura e perde muito mais em acabamento.

   O que NÃO dá para ter, e vale dizer: com este banner não existe sangrar de
   ponta a ponta E mostrar tudo. Para a arte encostar em cima e embaixo sem
   corte, a seção teria 312px de altura, e o texto não cabe em 312. Escolhemos
   ver o banner inteiro. Para voltar ao sangramento com corte, trocar o
   `contain` por `cover` — é uma linha. */
.chase-heroi {
  background: var(--surface-brand);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
}

/* Do bloco de texto: `padding: var(--space-12)`, coluna, centralizado no eixo
   vertical, `gap: var(--space-5)`. */
.chase-heroi__texto {
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}

/* Do `<span>` do chip: `text-xs`, caixa alta, `tracking-caps`, amarelo, 700. */
.chase-heroi__chip {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--chase-yellow);
  font-weight: var(--weight-bold);
}

/* Do `<h1>`: branco, `text-4xl`. A família e o entreletras vêm da ponte, que
   já manda todo `h1` para o Outfit com `--tracking-tight`. */
.chase-heroi__titulo {
  color: var(--neutral-0);
  font-size: var(--text-3xl);
  margin: 0;
}

/* Do `<p>`: `--blue-100`, `text-md`, `maxWidth: '38ch'`, `margin: 0`.

   O `38ch` é literal do protótipo e não uma escolha minha: ele limita a linha
   por número de caracteres, o que mantém a medida legível independentemente do
   tamanho da fonte. */
.chase-heroi__texto-apoio {
  color: var(--blue-100);
  font-size: var(--text-md);
  max-width: 38ch;
  margin: 0;
}

/* Do `<div>` dos botões: flex com `gap: var(--space-3)`. */
.chase-heroi__acoes {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* O lado direito: no protótipo é um `ProductMedia` com `background="brand"` e
   `ratio="auto"` ocupando `height: 100%`. Aqui recebe o banner do
   personalizador; sem banner, cai nas listras diagonais da marca. */
.chase-heroi__media {
  /* `left` e não `center` por causa de QUEM perde quando há corte. Banner é
     composto da esquerda para a direita — logo, chamada, selo — e a arte
     decorativa fica à direita. Com `center`, os 17% de corte de uma tela de
     1280 saem metade de cada lado e comem o começo do "JÁ DISPONÍVEL"; com
     `left`, saem inteiros da cauda do Charizard e a mensagem fica de pé.

     Acima de 1400 não há corte nenhum, então ali os dois valores desenham
     igual. Se um dia entrar um banner com o peso à direita, este é o valor a
     revisar. */
  background-position: left center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* A PROPORÇÃO ENTRA POR UM ESPAÇADOR, E NÃO NO PRÓPRIO ELEMENTO.

   `aspect-ratio` no elemento parece o caminho óbvio e tem um efeito colateral
   que o `overflow: hidden` do painel esconde: quando algo força a ALTURA — um
   `min-height`, ou a linha da grade —, a proporção passa a calcular a LARGURA
   a partir dela, e o elemento estoura a própria coluna. Medido a 1280: coluna
   de 697px e arte de 845, 148px para fora, invisíveis porque o painel recorta.
   Funcionava por acidente, e deslocava o enquadramento do banner para a
   esquerda.

   O espaçador resolve sem esse acoplamento. Ele é um filho de altura
   proporcional à LARGURA da coluna, então:

   - quando essa altura passa a do texto, é ela que estica a linha da grade, e
     a arte fica com a proporção exata do arquivo — nem corte nem sobra;
   - quando o texto é mais alto, a arte simplesmente estica junto com a linha,
     dentro da própria coluna, e o `cover` corta o excedente.

   Sobra de azul nunca acontece. Corte acontece só quando o texto força, e na
   medida exata em que ele forçou. */
.chase-heroi__media::before {
  content: '';
  display: block;
  aspect-ratio: var(--chase-proporcao);
}

/* ==========================================================================
   O CARROSSEL DENTRO DO HERÓI — 01/10/2026

   O herói mantém as duas colunas e o painel azul com "Pré-venda aberta"; o que
   muda é a coluna da arte, que passa de um banner fixo para os três do
   personalizador.

   NADA DO MECANISMO DE ALTURA MUDOU, e isso é de propósito. O `::before` acima
   continua sendo quem dimensiona a caixa, e o `object-fit: cover` do slide faz
   exatamente o que o `background-size: cover` fazia: a arte preenche a coluna
   e só é recortada na medida em que o texto forçar a linha da grade. Trocar
   isso por `height: auto` — que nunca corta — devolveria a FAIXA DE AZUL que o
   proprietário recusou em 25/09. São as duas caras da mesma moeda, e a escolha
   já tinha sido feita.

   O comportamento por largura, portanto, segue o da tabela da 1.23.1: sem
   corte de 1440 para cima, corte crescente até 1280, e empilhado abaixo disso,
   onde a arte aparece inteira e em largura total.

   O JS é o `carousel.js` do tema anterior, reusado sem uma linha de mudança.
   O VISUAL é escrito aqui, e não herdado do `carousel.css`: aquele arquivo
   desenha para o tema antigo, e disputar a cascata dele a cada detalhe é o
   erro que mais custou tempo neste projeto.
   ========================================================================== */

.chase-heroi__media {
  position: relative;
}

/* `absolute` sobre o espaçador: o `::before` continua ditando a altura, e o
   carrossel ocupa exatamente a caixa que ele abriu. */
.chase-heroi__carrossel {
  position: absolute;
  inset: 0;
}

.chase-heroi__carrossel .chase-carousel__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chase-heroi__carrossel .chase-carousel__track::-webkit-scrollbar {
  display: none;
}

.chase-heroi__carrossel .chase-carousel__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}

.chase-heroi__carrossel .chase-carousel__slide > a,
.chase-heroi__carrossel picture {
  display: block;
  height: 100%;
}

/* `left center` e não `center`, pelo mesmo motivo do banner fixo: o banner é
   composto da esquerda para a direita — logo, chamada, selo — e a arte
   decorativa fica à direita. Quando há corte, ele sai da cauda e a mensagem
   fica de pé. */
.chase-heroi__carrossel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* OS DOIS CUIDADOS DE `button` DO STOREFRONT, QUE JÁ MORDERAM AQUI DUAS VEZES.

   Ele aplica `padding: 9.9px 22.65px` em TODO `button`, o que não deixa área
   útil num botão quadrado; e o SVG dentro, sendo item flex, encolhe para
   LARGURA ZERO. O botão vira uma caixa vazia. Daí o `padding: 0` e o
   `flex-shrink: 0`, que não são enfeite. */
.chase-heroi__carrossel .chase-carousel__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 68, 99, 0.55);
  color: var(--neutral-0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard);
}

.chase-heroi__carrossel .chase-carousel__button svg {
  flex-shrink: 0;
}

.chase-heroi__carrossel .chase-carousel__button:hover,
.chase-heroi__carrossel .chase-carousel__button:focus-visible {
  background: rgba(11, 68, 99, 0.8);
}

.chase-heroi__carrossel .chase-carousel__button--prev {
  left: var(--space-3);
}

.chase-heroi__carrossel .chase-carousel__button--next {
  right: var(--space-3);
}

.chase-heroi__carrossel .chase-carousel__nav {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: var(--space-2);
}

.chase-heroi__carrossel .chase-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard);
}

/* O amarelo da marca é o mesmo acento de conversão do resto da home, e sobre
   a foto ele distingue o ponto ativo sem depender só de opacidade — que
   sozinha não serve a quem enxerga pouco contraste. */
.chase-heroi__carrossel .chase-carousel__dot.is-active {
  background: var(--chase-yellow);
}

.chase-heroi__carrossel .chase-carousel__button:focus-visible,
.chase-heroi__carrossel .chase-carousel__dot:focus-visible {
  outline: 2px solid var(--neutral-0);
  outline-offset: 2px;
}

/* NO CELULAR AS SETAS SAEM, E AS BOLINHAS FICAM.

   A 375px o herói empilha e a arte vira uma tira de ~136px de altura. Dois
   botões de 40px sobre ela cobrem quase um terço do banner, para uma ação que
   no toque já existe — o `scroll-snap` deixa arrastar. As bolinhas ficam
   porque são o que diz QUANTOS banners existem; sem elas o segundo e o
   terceiro seriam invisíveis para quem não tentar arrastar. */
@media (max-width: 768px) {
  .chase-heroi__carrossel .chase-carousel__button {
    display: none;
  }
}

/* As listras são o fallback do `CategoryTile` do handoff, copiado literalmente:
   `repeating-linear-gradient(45deg, blue-500 0 10px, blue-400 10px 20px)`. */
.chase-heroi__media--listras,
.chase-tile__media--listras {
  background-image: repeating-linear-gradient(
    45deg,
    var(--blue-500),
    var(--blue-500) 10px,
    var(--blue-400) 10px,
    var(--blue-400) 20px
  );
}

/* O HERÓI EMPILHA ABAIXO DE 1280px, E O NÚMERO SAI DA LINHA DOS BOTÕES.

   A 1.23.0 empilhava abaixo de 1400, o que mandava quase toda tela para o
   empilhado — só um monitor grande ficava lado a lado. O proprietário viu isso
   em todas as máquinas dele menos uma.

   O que decide o limite NÃO é o título, como eu tinha suposto: é a fileira de
   botões. Medida a altura do bloco de texto por largura de coluna, com o
   título em 36px:

   | Coluna do texto | Altura do texto | O que mudou |
   |---|---|---|
   | 640, 600, 560, 520 | **307** | tudo em uma linha |
   | 500, 480 | 371 | **os dois botões empilham** (+64) |
   | 460 e abaixo | 441 | o título quebra em duas linhas (+70) |

   O degrau de 64px em 520 é `flex-wrap` na `.chase-heroi__acoes`: "Ver
   Acessórios" e "Explorar Pokémon TCG" somam mais do que 440px de linha útil.
   Por isso a coluna do texto virou **520px fixos** em vez de uma fração: é o
   ponto exato onde o texto fica no mínimo, e tudo o que sobra vai para a arte.

   Com o texto travado em 307px de altura, o corte da arte é só aritmética —
   `1 - largura_da_arte / (307 x 2,75)`:

   | Largura | Arte | Corte |
   |---|---|---|
   | 1440+ | 872 | **0** — aqui a arte é mais alta que o texto e MANDA na seção |
   | 1400 | 832 | 1,4% |
   | 1366 | 798 | 5,5% |
   | 1280 | 712 | 15,6% |
   | 1200 | 632 | 25,1% |
   | 1024 | 456 | 46% |

   1280 é onde a conta ainda é defensável, e é largura de portátil comum. De
   1200 para baixo o corte cresce rápido e empilhar passa a entregar um banner
   maior E inteiro — a 1024 são 961px de arte contra 456. */
@media (max-width: 1279px) {
  .chase-heroi {
    grid-template-columns: 1fr;
  }

  .chase-heroi__media {
    order: -1;
  }

  /* O piso de altura vale SÓ para o recuo sem banner. Sem banner não existe a
     variável `--chase-proporcao`, o `aspect-ratio` fica inválido e é ignorado,
     e as listras — que são gradiente, sem proporção intrínseca — colapsariam
     para zero. */
  .chase-heroi__media--listras {
    min-height: 180px;
  }
}

/* No celular o recuo e o título encolhem. Vem DEPOIS do bloco de 1279 de
   propósito: media query não soma especificidade, então quem vence entre
   regras iguais é a última declarada. */
@media (max-width: 768px) {
  .chase-heroi__texto {
    padding: var(--space-8) var(--space-6);
  }

  .chase-heroi__titulo {
    font-size: var(--text-2xl);
  }
}

/* ==========================================================================
   2. Seções e cabeçalhos

   Do helper `section()` do HomeScreen: flex, `alignItems: 'baseline'`,
   `justifyContent: 'space-between'`, `marginBottom: var(--space-5)`, com o
   `<h2>` em `text-2xl` e o link em 600 / `text-sm`.

   O espaço entre seções é do protótipo: `var(--section-gap)` entre as grades.

   Existia também um `.chase-home__secao--curta`, com `var(--space-10)`, para
   o caso único das categorias encostadas no herói. Com elas no fim da home
   (01/10/2026) o modificador ficou sem nenhum uso, e saiu: código morto
   não se guarda “por via das dúvidas”. Se as categorias voltarem para cima,
   a regra volta em uma linha.
   ========================================================================== */

.chase-home__secao {
  margin-top: var(--section-gap);
}

.chase-home__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.chase-home__cabecalho h2 {
  font-size: var(--text-2xl);
  margin: 0;
}

.chase-home__ver-tudo {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text-link);
  text-decoration: none;
}

.chase-home__ver-tudo:hover,
.chase-home__ver-tudo:focus-visible {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/* ==========================================================================
   3. Tiles de categoria

   Do `CategoryTile.jsx`, valor por valor: `radius-lg`, `overflow: hidden`,
   fundo `--surface-card`, `--shadow-md` que vira `--shadow-lg` com `-2px` no
   hover, mídia em `aspectRatio: '16 / 9'` com o nome apoiado embaixo, e o
   rodapé em `padding: '12px var(--space-4)'`.

   A grade é `repeat(4, 1fr)` no protótipo. Aqui é `auto-fit` com teto, porque
   o catálogo pode ter menos de quatro categorias — e `1fr` puro esticaria as
   trilhas, deixando buraco à direita em vez de centralizar. É a armadilha já
   registrada em "Coluna de grade com 1fr ignora justify-content".

   Consequência de encolher o teto, dita em voz alta: com quatro categorias e
   `justify-content: center`, tile menor NÃO preenche mais a linha — o bloco
   fica mais estreito e mais centralizado, com mais ar nas laterais. Era o
   efeito pretendido; se um dia o pedido for "ocupar a largura", o caminho
   não é o teto do tile, é trocar o `center` por trilhas que estiquem.
   ========================================================================== */

.chase-tiles {
  display: grid;
  /* Teto de 220 e não 286: pedido do proprietário em 01/10/2026, junto com
     a descida das Categorias para o fim da home. Bloco que fecha a página
     pesa menos que bloco que a abre.

     O PISO desceu junto, de 220 para 180. Com os dois em 220 a trilha
     ficaria travada num valor único, e aí `auto-fit` não teria o que
     ajustar: na largura em que quatro de 220 deixam de caber, a quarta
     cairia para a linha de baixo em vez de os quatro encolherem juntos. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content: center;
  gap: var(--grid-gutter);
}

.chase-tile {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.chase-tile:hover,
.chase-tile:focus-visible {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* QUADRADO, e não 16/9. Pedido do proprietário em 25/09/2026.

   O handoff desenha o `CategoryTile` em 16/9, que é proporção de vídeo e
   favorece foto panorâmica. As fotos reais da loja são de EMBALAGEM — álbum,
   blister, caixa de LEGO —, todas mais altas que largas, e o 16/9 cortava topo
   e base de cada uma.

   Com `background-size: cover` a proporção do contêiner decide o que sobra da
   foto: 1/1 descarta muito menos de uma imagem vertical do que 16/9. */
.chase-tile__media {
  aspect-ratio: 1 / 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
}

/* Do `<span>` do nome: Outfit 700, `text-lg`, branco sobre
   `rgba(11,68,99,0.55)`, `padding: '4px 10px'`, `radius-sm`.

   O fundo translúcido não é enfeite: ele é o que garante o contraste do nome
   quando a categoria TEM foto, e a foto pode ser clara. Sobre as listras
   azuis o branco já teria contraste; sobre uma foto de embalagem branca, não. */
.chase-tile__nome {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--neutral-0);
  background: rgba(11, 68, 99, 0.55);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.chase-tile__rodape {
  display: flex;
  justify-content: space-between;
  padding: 12px var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.chase-tile__link {
  color: var(--text-link);
  font-weight: var(--weight-semibold);
}

@media (max-width: 768px) {
  .chase-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .chase-tile__nome {
    font-size: var(--text-base);
  }
}

/* O `.chase-tile` anima no hover; quem prefere menos movimento fica só com a
   sombra. O par disto para os botões mora no `componentes.css`, junto com
   eles. */
@media (prefers-reduced-motion: reduce) {
  .chase-tile:hover {
    transform: none;
  }
}