/* ==========================================================================
   ABITA - Mobiliário
   Página de venda do serviço 04: especificação e fornecimento.

   Desde 16/09/2026 a página é capa, repertório, CTA e FAQ. Vitrine,
   composição, acabamentos e critérios saíram por pedido do cliente: a
   página vai direto ao que a ABITA fornece.
   ========================================================================== */

.categorias,
.faq { padding-block: var(--secao-curta); }


/* 2 · Repertório
   As categorias do cliente, cada uma com as fotos que estão em
   `Imagens/mobiliario/`, uma pasta por categoria. Sanfona nativa,
   `<details>` com `name`, pelo mesmo motivo do FAQ: uma categoria aberta
   por vez. Com as nove abertas a seção passaria de três telas.

   **O enquadramento vem pronto no arquivo, e não do CSS.** O programa
   `.claude/repertorio-mobiliario.py` clareia o fundo para branco, centraliza
   o produto com a mesma margem em todos e grava o cartão inteiro. Aqui a foto
   só cobre o cartão, e o `mix-blend-mode: multiply` funde o branco no tom
   dele. Cena de ambiente cobre o cartão sem `multiply`.

   **Dois formatos: em pé e largo.** O largo ocupa duas colunas e tem a
   mesma altura, para a foto horizontal não virar faixa fina num cartão em
   pé. A altura da fileira sai da largura da coluna, e não do cartão: com
   cartão largo e cartão em pé na mesma grade, proporção fixa em cada um
   dava duas alturas diferentes.

   **Imagem dentro de categoria fechada não baixa.** O conteúdo fechado não
   é renderizado, e o `loading="lazy"` só dispara quando a categoria abre. */

.categorias__cabeca h2 {
  margin-top: var(--e-3);
  max-width: 25ch;
}

.categorias__cabeca .lead {
  margin-top: var(--e-4);
  max-width: 46ch;
}

.repertorio {
  margin-top: clamp(var(--e-4), 2.5vw, var(--e-5));
  container-type: inline-size;
}

.repertorio__item { border-top: var(--fio) solid var(--linha-cor, var(--linha)); }

.repertorio__item:last-child { border-bottom: var(--fio) solid var(--linha-cor, var(--linha)); }

.repertorio__cat {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) var(--e-5);
  align-items: baseline;
  column-gap: var(--e-4);
  padding-block: var(--e-4);
  list-style: none;
  cursor: pointer;
}

.repertorio__cat::-webkit-details-marker { display: none; }

.repertorio__cat h3 {
  grid-column: 2;
  color: var(--texto-cor, var(--texto));
}

.repertorio__desc {
  grid-column: 2;
  margin-top: var(--e-2);
  max-width: 46ch;
}

/* O mesmo mais que vira menos do FAQ. */
.repertorio__cat::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  width: var(--e-4);
  height: var(--e-4);
  background:
    linear-gradient(currentColor, currentColor) center / 100% var(--fio) no-repeat,
    linear-gradient(currentColor, currentColor) center / var(--fio) 100% no-repeat;
  opacity: 0.6;
  transition: background-size var(--t-media) var(--suave), opacity var(--t-rapida) var(--suave);
}

.repertorio__item[open] .repertorio__cat::after {
  background-size: 100% var(--fio), var(--fio) 0%;
  opacity: 1;
}

.repertorio__cat:hover::after { opacity: 1; }

/* Categoria sem foto não abre: sem sinal e sem cursor de ação. */
.repertorio__item--sem-foto .repertorio__cat { cursor: default; }
.repertorio__item--sem-foto .repertorio__cat::after { content: none; }

/* Texto de abertura de uma categoria, antes das fotos. Só existe onde o
   assunto não cabe na linha do sumário: a de divisórias reúne dois produtos
   de naturezas diferentes e precisa dizer qual é qual.

   Ele corre de ponta a ponta da grade, sem medida e sem coluna, por decisão
   do cliente em 19/10/2026. As duas colunas que estiveram aqui por uma
   passada foram recusadas: ele quer o texto direto, e não quebrado ao meio.

   ⚠ A linha passa de cem caracteres em 1440, contra os cerca de sessenta que
   o `design.md` §5 dá como medida de leitura. No ar por decisão do cliente. */
.repertorio__texto { margin-bottom: var(--e-4); }
.repertorio__texto p + p { margin-top: var(--e-2); }

.repertorio__grade {
  display: grid;
  gap: var(--e-3);
  padding-bottom: var(--e-5);
  list-style: none;
}

.repertorio__peca {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--raio-card);
  background: var(--papel-2);
}

.repertorio__peca--larga { grid-column: span 2; }

.repertorio__peca picture { position: absolute; inset: 0; }

.repertorio__peca img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.repertorio__peca--recorte img { mix-blend-mode: multiply; }

/* **No celular a grade vira fileira que corre para o lado**, e a categoria
   fechada mostra só índice e nome. Em duas colunas as treze cadeiras davam
   sete fileiras, cada categoria fechada empilhava três linhas de descrição,
   e a seção media 3.324px com Cadeiras aberta: quatro telas. O cartão
   cortado na borda é o que diz que a fileira continua. */
@media (max-width: 899px) {
  /* O nome da categoria começa onde começa o texto das outras listas
     numeradas do site, 2,5rem de índice mais 1rem de vão. */
  .repertorio__cat { column-gap: var(--e-3); }

  .repertorio__grade {
    --col: max(9rem, 44cqw);
    grid-template-columns: none;
    grid-template-rows: calc(var(--col) * 1.25);
    grid-auto-flow: column;
    grid-auto-columns: var(--col);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .repertorio__grade::-webkit-scrollbar { display: none; }

  .repertorio__peca { scroll-snap-align: start; }

  .repertorio__item:not([open]):not(.repertorio__item--sem-foto) .repertorio__desc { display: none; }
}

@media (min-width: 900px) {
  .repertorio__cat {
    grid-template-columns: 3rem minmax(0, 20rem) minmax(0, 1fr) var(--e-5);
    padding-block: var(--e-3);
  }
  .repertorio__desc { grid-column: 3; grid-row: 1; margin-top: 0; }
  .repertorio__cat::after { grid-column: 4; }

  /* A grade começa na coluna do nome, e não embaixo do índice. A coluna
     tem no mínimo 9rem, como o `auto-fill` que estava aqui: em 1440 são
     sete. O número de colunas é explícito, por largura do repertório,
     porque é dele que sai a altura da fileira. `dense` deixa um cartão em
     pé ocupar o buraco que um largo deixou no fim da fileira. */
  .repertorio__grade {
    --recuo: calc(3rem + var(--e-4));
    --n: 4;
    --col: calc((100cqw - var(--recuo) - (var(--n) - 1) * var(--e-3)) / var(--n));
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    grid-auto-rows: calc(var(--col) * 1.25);
    grid-auto-flow: row dense;
    padding-left: var(--recuo);
  }

  /* O texto acompanha o recuo da grade: os dois começam na coluna do nome,
     e ele termina onde a última foto termina. */
  .repertorio__texto { padding-left: calc(3rem + var(--e-4)); }

  @container (min-width: 53.5rem) { .repertorio__grade { --n: 5; } }
  @container (min-width: 63.5rem) { .repertorio__grade { --n: 6; } }
  @container (min-width: 73.5rem) { .repertorio__grade { --n: 7; } }
  @container (min-width: 83.5rem) { .repertorio__grade { --n: 8; } }
}

/* A nota depois da última categoria, uma linha pequena. Começa na margem da
   página, a mesma dos índices e do fio da lista: recuada até o nome da
   categoria, ela ficava solta no meio, sem linha nenhuma que a segurasse. */
.categorias__nota {
  margin-top: var(--e-4);
  font-size: var(--fs-sm);
  color: var(--meta-cor, var(--texto-meta));
}

@supports (interpolate-size: allow-keywords) {
  .repertorio { interpolate-size: allow-keywords; }

  .repertorio__item[open]::details-content {
    block-size: auto;
    overflow: hidden;
    transition: block-size var(--t-media) var(--suave);
  }

  @starting-style {
    .repertorio__item[open]::details-content { block-size: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .repertorio__cat::after { transition: none; }
  .repertorio__item[open]::details-content { transition: none; }
}


/* 3 · CTA */


.proximo h2 {
  margin-top: var(--e-4);
  max-width: 16ch;
  color: var(--texto-sobre-foto);
}

.proximo .lead {
  margin-top: var(--e-4);
  max-width: 46ch;
  color: var(--texto-sobre-foto);
}

.proximo .cta { margin-top: clamp(var(--e-5), 3vw, var(--e-6)); }





/* O componente vive em componentes.css: era o mesmo bloco em três
   folhas. Aqui fica só o ritmo da seção, no topo do arquivo. */