/* Página de cada trabalho (/trabalhos/<slug> e /en/work/<slug>), gerada pelo build a partir de src/trabalhos.mjs.
   Usa o sistema do site.css (abas, rótulos [N.0X], botões, alças laranja nos cantos, faixa escura). */

/* ---------- topo ---------- */
.cs-hero { padding-top: clamp(104px, 10vw, 152px); }
.cs-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; font: 500 12px/1 var(--f-mono); letter-spacing: -.02em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; transition: color .2s; }
.cs-back .ic { width: 14px; height: 14px; transition: transform .35s var(--ease); }
@media (hover: hover) { .cs-back:hover { color: var(--ink); } .cs-back:hover .ic { transform: translateX(-3px); } }
.cs-title { margin-top: 28px; font-size: clamp(44px, 4.4vw + 16px, 96px); line-height: 1.02; letter-spacing: -.065em; font-weight: 400; }
.cs-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-top: 28px; }
.cs-lead { font-size: clamp(18px, .5vw + 14px, 24px); line-height: 1.3; letter-spacing: -.05em; color: var(--ink-2); max-width: 46ch; }
.cs-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ficha: cliente, segmento, entrega, ferramentas (as linhas internas saem do fundo da grade) */
.cs-facts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1px; margin-top: clamp(32px, 3.4vw, 48px); border: 1px solid var(--line); background: var(--line); }
.cs-facts[data-n="3"] { --n: 3; }
.cs-fact { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--bg); }
.cs-fact dt { font: 500 12px/1.3 var(--f-mono); letter-spacing: -.02em; text-transform: uppercase; color: var(--ink-3); }
.cs-fact dd { font-size: 16px; line-height: 1.3; letter-spacing: -.05em; color: var(--ink); }
.cs-stack { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-stack li { padding: 6px 8px; border: 1px solid var(--line-2); font: 500 12px/1 var(--f-mono); letter-spacing: -.02em; text-transform: uppercase; color: var(--ink-2); }

/* capa: a tela na moldura pontilhada, com a barra de navegador e as alças laranja nos cantos */
.cs-cover { position: relative; margin: clamp(28px, 3vw, 40px) 0 0; padding: clamp(12px, 2.4vw, 32px) clamp(12px, 2.4vw, 32px) 0; border: 1px solid var(--line); background-color: var(--bg-2); background-image: radial-gradient(var(--dots) 1px, transparent 1.25px); background-size: 12px 12px; }
.cs-cover img { display: block; width: 100%; height: auto; }
/* capa em vídeo: o topo do site rodando (_tools/record.mjs) e, por cima, a faixa do letreiro, que corre na
   velocidade do site e não depende do loop do vídeo */
.cs-vid { position: relative; overflow: hidden; background: #0B1D33; }
.cs-vid video { display: block; width: 100%; height: auto; }
.cs-faixa { position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none; }
.cs-faixa-tr { display: flex; width: max-content; height: 100%; animation: csFaixa var(--dur, 42s) linear infinite; will-change: transform; }
.cs-cover .cs-faixa-tr img { width: auto; max-width: none; height: 100%; }
@keyframes csFaixa { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cs-faixa-tr { animation: none; } }
.cs-note { margin-top: 12px; font: 500 12px/1.4 var(--f-mono); letter-spacing: -.02em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- o projeto: caixas como as do bento; a do resultado fica preta ---------- */
.cs-blocks { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.cs-blocks[data-n="2"], .cs-blocks[data-n="4"] { --n: 2; }
.cs-box { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--line); background: var(--surface); }
.cs-box h3 { margin-top: 24px; font-size: 24px; line-height: 1.2; letter-spacing: -.05em; font-weight: 500; }
.cs-box p { font-size: 18px; line-height: 1.35; letter-spacing: -.05em; color: var(--ink-2); }
.cs-box--res { background: #161616; border-color: #161616; }
.cs-box--res h3 { color: #FFFFFF; }
.cs-box--res p { color: #B8B8B8; }
.cs-box--res .num-tag { color: #FF7A45; }

/* ---------- telas: inteiras ou em pares (os pares têm a mesma proporção) ---------- */
.cs-gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 48px) 12px; }
.cs-shot { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cs-shot--full { grid-column: 1 / -1; }
.cs-img { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.cs-img img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .cs-shot:hover .cs-img img { transform: scale(1.02); } }
.cs-shot figcaption { display: flex; align-items: baseline; gap: 12px; font-size: 16px; line-height: 1.35; letter-spacing: -.05em; color: var(--ink-2); }
.cs-shot figcaption .num-tag { flex: none; color: var(--accent-text); }

/* ---------- a página inteira, rolando dentro da moldura ---------- */
.cs-full { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; align-items: start; }
.cs-full .sec-head { position: sticky; top: 104px; margin-bottom: 0; }
.cs-full .sec-head .btn { align-self: flex-start; }
.cs-page { position: relative; height: min(82vh, 880px); overflow: auto; border: 1px solid var(--line); background: var(--bg-2); scrollbar-width: thin; scrollbar-color: #1A1A1A transparent; }
.cs-page img { display: block; width: 100%; height: auto; }
.cs-page:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cs-hint { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.4 var(--f-mono); letter-spacing: -.02em; text-transform: uppercase; color: var(--ink-3); }
.cs-hint .ic { width: 14px; height: 14px; color: var(--accent); }

/* ---------- próximo projeto + chamada (faixa escura) ---------- */
.cs-next-card { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: center; padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .3s; }
.cs-next-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cs-next-name { font-size: clamp(36px, 3vw + 16px, 72px); line-height: 1.02; letter-spacing: -.06em; }
.cs-next-img { overflow: hidden; border: 1px solid var(--line); }
.cs-next-img img { display: block; width: 100%; height: auto; transition: transform 1s var(--ease); }
.cs-next-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .cs-next-card:hover { border-color: var(--line-strong); }
  .cs-next-card:hover .cs-next-img img { transform: scale(1.04); }
  .cs-next-card:hover .case-more { color: var(--accent-text); }
  .cs-next-card:hover .case-more .sq { transform: translateX(4px); }
}
.cs-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-top: clamp(72px, 8vw, 128px); }
.cs-cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.cs-cta-side p { font-size: 18px; line-height: 1.35; letter-spacing: -.05em; color: var(--ink-2); }
.cs-cta-btns { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 960px) {
  .cs-full { grid-template-columns: minmax(0, 1fr); }
  .cs-full .sec-head { position: static; }
  .cs-page { height: 72vh; }
}
@media (max-width: 860px) {
  .cs-intro, .cs-next-card, .cs-cta { grid-template-columns: minmax(0, 1fr); }
  .cs-act { justify-content: flex-start; }
  .cs-facts[data-n] { --n: 2; }
  .cs-blocks[data-n] { --n: 1; }
}
@media (max-width: 760px) {
  .cs-gal { grid-template-columns: minmax(0, 1fr); }
  .cs-page { height: 64vh; }
}
@media (max-width: 520px) {
  .cs-facts[data-n] { --n: 1; }
  .cs-act .btn, .cs-cta-btns .btn { flex: 1 1 100%; }
}