/* Página Cestas (índice): composição própria sobre a base (base.css), o movimento (movimento.css) e os componentes (componentes.css).
   Direção visual (site/direcao-visual.html, "Cestas (índice)"): uma folha de contato, com as fotos verticais em colunas alternadas e um filtro por linha em texto simples.
   As fotos são todas 4:5 (o tamanho padrão do site) e as colunas ficam deslocadas para cima e para baixo. É um catálogo: o topo é compacto e a folha começa na primeira tela. */

/* ---------- topo compacto: título à esquerda, frase à direita ---------- */
.topo--cestas{padding-block:var(--s5) var(--s6)}
.topo--cestas .topo__grade{display:grid;gap:var(--s5);align-items:end}
@media(min-width:900px){
  .topo--cestas{padding-block:var(--s6) var(--s7)}
  .topo--cestas .topo__grade{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,120px)}
}
.topo--cestas .migalhas{margin-bottom:var(--s4)}
.topo--cestas h1{max-width:12ch;font-size:clamp(2.5rem,.8rem + 4.6vw,6rem);line-height:1;letter-spacing:-.025em;text-wrap:balance}
.topo--cestas .topo__lead{margin:0;max-width:30em}

/* ---------- filtro por linha: texto simples, fixo logo abaixo do cabeçalho ---------- */
.filtro{position:sticky;top:var(--cab-h);z-index:30;background:rgba(255,255,255,.96);border-block:1px solid var(--linha)}
.filtro__lista{display:flex;gap:var(--s6);overflow-x:auto;scrollbar-width:none}
.filtro__lista::-webkit-scrollbar{display:none}
.filtro__btn{flex:none;padding:16px 0 14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--suave);font:500 16px/1 var(--sans);cursor:pointer;transition:color var(--t-rapido) var(--ease),border-color var(--t-rapido) var(--ease)}
.filtro__btn[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ouro)}
@media(hover:hover){.filtro__btn:hover{color:var(--ink)}}
.filtro__qtd{margin-left:2px;font-size:13px;font-weight:400;color:var(--suave)}
@media(prefers-reduced-motion:reduce){.filtro__btn{transition:none}}

/* ---------- folha de contato ---------- */
.folha{padding-bottom:var(--s8)}
.folha__estado{margin:var(--s4) 0 var(--s5);font-size:14px;color:var(--suave)}
.folha__grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) clamp(12px,1.4vw,20px)}
@media(min-width:760px){.folha__grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.folha__grade{grid-template-columns:repeat(4,minmax(0,1fr))}}
.folha__item{position:relative;display:grid;gap:var(--s2);align-content:start;min-width:0}
/* colunas escalonadas: o data-col (0, 1, 2, 3...) vem do HTML e é refeito em base.js quando o filtro esconde cestas ou a tela muda de número de colunas */
.folha__item[data-col="1"]{margin-top:clamp(28px,4vw,64px)}
.folha__item[data-col="2"]{margin-top:clamp(10px,1.4vw,20px)}
.folha__item[data-col="3"]{margin-top:clamp(40px,6vw,88px)}
.folha__foto{overflow:hidden;border-radius:var(--r-img)}
.folha__foto .slot{width:100%;transition:transform 700ms var(--ease)}
.folha__nome{margin:var(--s2) 0 0;font:500 clamp(1.125rem,1rem + .5vw,1.375rem)/1.2 var(--serif);letter-spacing:-.01em}
.folha__nome a{color:var(--ink);text-decoration:none}
.folha__nome a::after{content:"";position:absolute;inset:0;z-index:1}
.folha__nome a:focus-visible{outline:0}
.folha__nome a:focus-visible::after{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r-img)}
.folha__linha{margin:0;font-size:14px;line-height:1.4;color:var(--suave)}
.folha__preco{margin:0;font:600 16px/1.3 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
@media(hover:hover){
  .folha__item:hover .slot{transform:scale(1.04)}
  .folha__item:hover .folha__nome{text-decoration:underline;text-decoration-color:var(--ouro);text-decoration-thickness:2px;text-underline-offset:5px}
}
@media(prefers-reduced-motion:reduce){.folha__foto .slot{transition:none}}