/* Bd'A — página de colaborações (usa tokens + .grid/.disp/.eyebrow/.mono/.rise do style.css) */

/* cabeçalho — mesmo molde do svc-hero: sem mídia, nav já nasce sólida */
.col-hero{
  padding-block:calc(var(--space-l) + 44px) var(--space-m);
  min-height:52svh;align-content:end;background:var(--bg);
}
.col-hero-in{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--space-s)}
.col-title{font-size:clamp(44px,8vw,120px);font-weight:500;letter-spacing:-.02em;line-height:.98}
.col-title .ap{color:var(--accent)}
.col-lead{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(18px,1.9vw,26px);line-height:1.35;max-width:42ch;margin:0;color:var(--ink);
}
.col-note{font-size:var(--text-meta-s);color:var(--muted);margin:0;max-width:52ch}

/* seções por escritório */
.col-sec{padding-block:var(--space-m);border-top:1px solid var(--line);background:var(--bg)}
.col-sec-head{grid-column:1/-1;display:flex;align-items:baseline;gap:var(--space-xs);margin-bottom:var(--space-m);flex-wrap:wrap}
.col-sec-head .n{font-family:var(--font-mono);font-size:var(--text-meta-s);color:var(--accent-ink)}
.col-sec-head h2{font-family:var(--font-body);font-weight:500;font-size:clamp(28px,4vw,52px);letter-spacing:-.02em;line-height:1;margin:0}
.col-sec-head .count{font-family:var(--font-mono);font-size:var(--text-meta-s);color:var(--muted);margin-left:auto}

/* mural: quarteirões separados por fios de 1px (mesma grade da cidade dos logos e dos serviços) */
.col-grid{
  grid-column:1/-1;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.col-grid li{background:var(--bg)}

/* a célula é botão: o clique amplia na própria página, não navega */
.col-cell{
  display:block;width:100%;border:0;padding:0;margin:0;background:none;cursor:zoom-in;
  font:inherit;color:inherit;text-align:left;
}
.col-cell img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  filter:grayscale(1);opacity:.82;
  transition:filter .35s var(--ease-out),opacity .35s var(--ease-out);
}
.col-cell:hover img,.col-cell:focus-visible img{filter:none;opacity:1}
.col-cell:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}
/* block: como <span>, o padding vertical pintava sem empurrar o layout */
.col-cap{display:block;padding:var(--space-xs) clamp(14px,1.6vw,22px)}
.col-cap .nome{display:block;font-family:var(--font-body);font-weight:500;font-size:clamp(15px,1.4vw,18px);letter-spacing:-.01em;color:var(--ink)}
.col-cap .cliente{display:block;margin-top:var(--space-5xs);font-family:var(--font-mono);font-size:var(--text-meta-s);color:var(--muted)}

/* ampliação — <dialog> nativo: prisão de foco, Esc e fundo inerte vêm de graça */
.col-zoom{
  border:0;padding:0;background:none;max-width:min(92vw,1600px);max-height:92svh;
  color:var(--ink);
}
.col-zoom::backdrop{background:rgb(22 19 15 / .92)}
.col-zoom figure{margin:0}   /* o UA dá 40px lateral no figure — o recuo aqui é decisão do layout, não herança */
.col-zoom img{display:block;max-width:100%;max-height:82svh;width:auto;height:auto;object-fit:contain}
.col-zoom figcaption{
  display:flex;gap:var(--space-xs);align-items:baseline;flex-wrap:wrap;
  padding-top:var(--space-2xs);color:var(--bda-marfim);
}
.col-zoom .nome{font-family:var(--font-body);font-weight:500;font-size:var(--text-meta-l)}
.col-zoom .cliente{font-family:var(--font-mono);font-size:var(--text-meta-s);opacity:.72}
.col-zoom .fechar{
  margin-left:auto;border:0;background:none;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--text-meta-s);color:var(--bda-marfim);
}
.col-zoom .fechar:hover{color:var(--accent)}

@media (max-width:760px){
  .col-hero{min-height:auto;padding-block:calc(var(--space-l) + 20px) var(--space-m)}
  .col-grid{grid-template-columns:1fr}
  .col-sec-head .count{margin-left:0;width:100%}
}