/* Cases do portfolio — compartilhado pela secao "Cases" da proposta e pela pagina /portfolio.
   Usa as variaveis do site quando existem (--ink, --gold...) e cai em valores proprios. */
:root{
  --cs-ink:var(--ink,#141312);
  --cs-paper:var(--ivory,#FEFAF1);
  --cs-gold:var(--gold,#C7A15C);
  --cs-muted:var(--graphite,#454441);
  --cs-bg:var(--marker,#E6E2D8);
  --cs-rule:rgba(20,19,18,.14);
  --cs-radius:20px;
  --cs-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- grade de 6 colunas (mesmo desenho do portfolio da Rayder) ----------
   capa em pe ocupa 2 colunas (3 por linha, 4/5); capa deitada ocupa 3 (2 por linha, 16/10);
   o js escolhe as larguras por linha (data-span) para nao sobrar buraco */
.cs-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;max-width:1885px;margin-inline:auto}
.cs-card{position:relative;display:block;padding:0;margin:0;font:inherit;text-align:left;color:#fff;text-decoration:none;cursor:pointer;min-width:0;
  grid-column:span 3;aspect-ratio:16/10;border-radius:22px;overflow:hidden;border:1px solid rgba(20,19,18,.1);background:var(--cs-bg);isolation:isolate}
.cs-card[data-span="2"]{grid-column:span 2}
.cs-card[data-span="3"]{grid-column:span 3}
.cs-card[data-span="4"]{grid-column:span 4}
.cs-card[data-span="6"]{grid-column:span 6}
.cs-card.vertical{aspect-ratio:4/5}
.cs-grid > .cs-card:only-child{grid-column:2 / span 4}
.cs-grid > .cs-card.vertical:only-child{grid-column:3 / span 2}
.cs-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cs-three > .cs-card,.cs-three > .cs-card[data-span],.cs-three > .cs-card:only-child{grid-column:span 1}
.cs-card:focus-visible{outline:2px solid var(--cs-gold);outline-offset:4px}
.cs-win{position:absolute;inset:0;display:block;overflow:hidden}
.cs-win img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--cs-ease),filter .5s}
.cs-card:hover .cs-win img{transform:scale(1.06);filter:blur(5px) saturate(1.05)}
/* degrade na base para o nome ler sobre qualquer imagem */
.cs-win::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.46) 42%,rgba(0,0,0,.1) 72%,rgba(0,0,0,0) 100%);z-index:1;pointer-events:none}
.cs-card::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .35s;z-index:3;pointer-events:none}
.cs-card:hover::before{background:rgba(0,0,0,.48)}
.cs-head{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;padding:clamp(18px,2.2vw,32px) clamp(20px,2.4vw,34px);transition:opacity .3s,transform .35s var(--cs-ease)}
.cs-card:hover .cs-head{opacity:0;transform:translateY(10px)}
.cs-head b{display:block;font-size:clamp(18px,1.6vw,26px);font-weight:600;letter-spacing:-.03em;line-height:1.15;margin:0 0 6px}
.cs-head span{display:block;font-size:clamp(13px,1vw,16px);color:rgba(255,255,255,.66)}
.cs-card.vertical .cs-head b{font-size:clamp(17px,1.4vw,22px)}
.cs-cta{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateY(18px);z-index:4;display:inline-flex;align-items:center;gap:14px;padding:8px 8px 8px 26px;border-radius:100px;
  background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.2);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap;
  opacity:0;transition:opacity .35s,transform .4s var(--cs-ease)}
.cs-card:hover .cs-cta,.cs-card:focus-visible .cs-cta{opacity:1;transform:translate(-50%,-50%)}
.cs-cta svg{width:38px;height:38px;padding:10px;border-radius:50%;background:var(--cs-gold);stroke:#141312;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;transform:rotate(-45deg) scale(.75);transition:transform .45s var(--cs-ease) .1s}
.cs-card:hover .cs-cta svg,.cs-card:focus-visible .cs-cta svg{transform:none}
.cs-empty{grid-column:1/-1;padding:40px 0;text-align:center;color:var(--cs-muted);font-size:.95rem}
@media(max-width:900px){
  .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-card,.cs-card[data-span],.cs-grid > .cs-card:only-child{grid-column:span 2}
  .cs-card.vertical,.cs-card.vertical[data-span],.cs-grid > .cs-card.vertical:only-child{grid-column:span 1}
  .cs-three{grid-template-columns:1fr}
  .cs-three > .cs-card,.cs-three > .cs-card[data-span],.cs-three > .cs-card.vertical,.cs-three > .cs-card.vertical[data-span]{grid-column:span 1}
}
@media(max-width:640px){
  .cs-grid{gap:14px}
  .cs-card{aspect-ratio:4/3;border-radius:16px}
  .cs-card.vertical,.cs-card.vertical[data-span],.cs-grid > .cs-card.vertical:only-child{grid-column:span 2;aspect-ratio:4/5}
  .cs-three > .cs-card.vertical,.cs-three > .cs-card.vertical[data-span]{grid-column:span 1}
}
/* no toque nao existe hover: o nome fica sempre visivel e a pilula nao aparece */
@media(hover:none){
  .cs-card:hover .cs-win img{transform:none;filter:none}
  .cs-card:hover::before{background:rgba(0,0,0,0)}
  .cs-card:hover .cs-head{opacity:1;transform:none}
  .cs-card:hover .cs-cta{opacity:0}
}

/* ---------- botao ---------- */
.cs-more{display:flex;justify-content:center;margin-top:clamp(28px,4vw,48px)}
.cs-btn{display:inline-flex;align-items:center;gap:14px;padding:16px 28px;border-radius:100px;background:var(--cs-ink);color:var(--cs-paper);text-decoration:none;font-size:.98rem;font-weight:600;letter-spacing:-.01em;transition:background .3s,color .3s,transform .3s var(--cs-ease)}
.cs-btn:hover{background:var(--cs-gold);color:var(--cs-ink);transform:translateY(-2px)}
.cs-btn:focus-visible{outline:2px solid var(--cs-gold);outline-offset:4px}
.cs-btn.on-dark{background:var(--cs-paper);color:var(--cs-ink)}
.cs-btn.on-dark:hover{background:var(--cs-gold);color:var(--cs-ink)}
.cs-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}

@media(prefers-reduced-motion:reduce){
  .cs-win img,.cs-cta,.cs-cta svg,.cs-head,.cs-btn{transition:none}
}