/* ═══════════════════════════════════════════════
   DH MEDIA — página "Todos os Cases"
   Reaproveita tokens, fontes e o componente .case de css/style.css;
   aqui só entram o layout específico desta página (subnav, título,
   filtros e a grade 3×3) e o ajuste de tamanho dos cards compactos.
   ═══════════════════════════════════════════════ */

/* ═══════════ SUBNAV ═══════════ */
.subnav{
  position:fixed;top:var(--faixa);left:0;right:0;z-index:60;
  transition:background .3s,box-shadow .3s;
}
.subnav.is-stuck{background:var(--preto);box-shadow:0 1px 24px rgba(0,0,0,.6)}
.subnav__inner{display:flex;align-items:center;gap:24px;padding:30px 24px}
.subnav__logo img{height:52px;width:auto}
.subnav__home{
  margin-left:auto;display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;
  color:var(--branco);transition:color .2s;
}
.subnav__home:hover{color:var(--amarelo)}
.subnav__arrow{font-size:16px;transition:translate .2s}
.subnav__home:hover .subnav__arrow{translate:-4px 0}
.subnav__cta{
  border:1px solid var(--amarelo);color:var(--amarelo);
  font-size:14px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  padding:18px 42px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.subnav__cta:hover{background:var(--amarelo);color:var(--preto)}

/* ═══════════ TÍTULO + FILTROS ═══════════ */
.allcases{position:relative;background:var(--preto);color:var(--branco);padding:200px 0 110px;overflow:hidden}
.allcases__bolt{
  position:absolute;left:-140px;bottom:-120px;width:460px;
  opacity:.14;pointer-events:none;z-index:0;
}
.allcases .wrap{position:relative;z-index:1}

.allcases__title{
  font-size:clamp(38px,6.9vw,94px);line-height:.98;
  text-transform:uppercase;margin-bottom:30px;
}
.allcases__title .sans{font-family:'Alfabet',sans-serif;font-weight:600}
.allcases__title .serif{font-family:'Things',serif;font-weight:400}

.allcases__lead{
  max-width:450px;margin-bottom:72px;
  font-size:20px;font-weight:200;line-height:1.5;color:var(--branco);
}

/* uma linha só: a régua contínua de ponta a ponta embaixo da barra E o
   indicador do item ativo vivem na MESMA altura — o ativo não é mais um
   bloco separado colado no texto, é o próprio trecho da régua ficando
   amarelo por cima do cinza (por isso o bottom:-20px, pra descer do texto
   até bater exatamente na régua do container). */
.filters{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:26px 46px;padding-bottom:20px;margin-bottom:64px;
  position:relative;
}
.filters::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(255,255,255,.16);
}
.filters__divider{width:1px;height:16px;flex-shrink:0;background:rgba(255,255,255,.22)}
.filters__tab{
  position:relative;
  font-family:'Alfabet',sans-serif;font-size:13px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);transition:color .2s;
}
.filters__tab::after{
  /* estica até a divisória vizinha (--bar-l/--bar-r vêm do cases.js, medidos
     de verdade — o espaçamento é space-between, não dá pra cravar um valor
     fixo que sirva pra todo tamanho de tela) */
  content:'';position:absolute;left:var(--bar-l,0px);right:var(--bar-r,0px);bottom:-20px;height:3px;
  background:var(--amarelo);scale:0 1;transform-origin:left;transition:scale .25s ease;
}
.filters__tab:hover{color:var(--branco)}
.filters__tab.is-active{color:var(--amarelo)}
.filters__tab.is-active::after{scale:1 1}

/* ═══════════ GRADE 3 COLUNAS (reaproveita .case de style.css) ═══════════ */
.acases__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  position:relative;z-index:1;
}
.acases__grid .case{
  min-height:300px;padding:24px;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .3s ease;
}
/* o cursor personalizado substitui o ponteiro nativo também sobre os cards */
html.cursorfx .acases__grid .case{cursor:none}
.acases__grid .case.is-hidden{display:none}
/* no card amarelo a borda branca translúcida quase não aparece — vira escura
   pra continuar lendo como contorno sobre o amarelo */
.acases__grid .case--yellow{border-color:rgba(0,0,0,.25)}
/* hover: a borda acompanha o acento de cada card (amarelo nos escuros/foto,
   roxo nos amarelos — o mesmo par de cores que o botão VER CASE já usa) */
.acases__grid .case--dark:hover,
.acases__grid .case--dark:focus-within{border-color:var(--amarelo)}
.acases__grid .case--yellow:hover,
.acases__grid .case--yellow:focus-within{border-color:var(--roxo)}

/* a foto do evento fica visível o tempo todo (na home ela só aparece no
   hover; aqui a referência do cliente pede o card já "aberto" por padrão —
   o hover só dá um leve zoom na imagem e revela o botão VER CASE) */
.acases__grid .case__media{
  opacity:1;pointer-events:none;transform:none;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.acases__grid .case:hover .case__media,
.acases__grid .case:focus-within .case__media{transform:scale(1.06)}
.acases__grid .case__media::after{
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.82) 100%);
}
/* cards amarelos (branded content) não têm foto de evento */
.acases__grid .case--yellow .case__media{display:none}

/* hierarquia de texto: NOME DO EVENTO > categoria > ano — os 3 sempre em
   branco (a referência não usa o roxo/amarelo do label da home aqui).
   O nome do evento usa a BigNoodle (condensada, traço bem fino e letra
   "esticada" na vertical) em vez da Alfabet Bold — é a mesma família que o
   resto do site usa para títulos de destaque (case__name da home, stats). */
.acases__grid .case__label{
  font-family:'BigNoodle',sans-serif;font-weight:400;
  font-size:30px;line-height:1;letter-spacing:.01em;margin-bottom:6px;
  color:var(--branco);
}
.acases__grid .case__name{
  font-family:'BigNoodle',sans-serif;font-weight:400;
  font-size:22px;line-height:1;letter-spacing:.01em;text-transform:uppercase;
  color:var(--branco);margin-bottom:14px;
}
.acases__grid .case__caption{
  font-size:11px;font-weight:300;letter-spacing:.01em;
  color:rgba(255,255,255,.6);
}
.acases__grid .case--yellow .case__label,
.acases__grid .case--yellow:hover .case__label,
.acases__grid .case--yellow:focus-within .case__label{color:var(--branco)}
.acases__grid .case--yellow .case__caption,
.acases__grid .case--yellow:hover .case__caption,
.acases__grid .case--yellow:focus-within .case__caption{color:rgba(255,255,255,.6)}
.acases__grid .case__cta{font-size:10.5px;letter-spacing:.16em;text-indent:.16em}
/* no card amarelo o botão (amarelo sobre amarelo) some — vira roxo, como o
   resto do site usa roxo como acento sobre fundo amarelo (.contato__cta) */
.acases__grid .case--yellow .case__cta{color:var(--roxo)}
.acases__grid .case--yellow:hover .case__cta,
.acases__grid .case--yellow:focus-within .case__cta{border-color:var(--roxo)}
.acases__grid .case--yellow .case__cta:hover{background:var(--roxo);color:var(--amarelo)}

/* Variações temporárias apenas na imagem genérica. Fotografias próprias
   preservam suas cores e o enquadramento definido no HTML. */
.acases__grid .case:nth-child(6) .case__media img[src$="case-placeholder.jpg"]{object-position:75% 30%;filter:hue-rotate(215deg) saturate(1.15) brightness(.95)}
.acases__grid .case:nth-child(7) .case__media img[src$="case-placeholder.jpg"]{object-position:20% 65%;filter:contrast(1.2) saturate(1.1)}
.acases__grid .case:nth-child(8) .case__media img[src$="case-placeholder.jpg"]{object-position:50% 80%;filter:grayscale(.55) contrast(1.15)}
.acases__grid .case:nth-child(9) .case__media img[src$="case-placeholder.jpg"]{object-position:80% 15%;filter:sepia(.35) saturate(1.3) hue-rotate(-10deg)}
.acases__grid .case:nth-child(11) .case__media img[src$="case-placeholder.jpg"]{object-position:30% 70%;filter:hue-rotate(250deg) saturate(1.2) brightness(.9)}
.acases__grid .case:nth-child(12) .case__media img[src$="case-placeholder.jpg"]{object-position:60% 40%;filter:contrast(1.1) brightness(1.05) saturate(.85)}
.acases__grid .case:nth-child(13) .case__media img[src$="case-placeholder.jpg"]{object-position:40% 50%;filter:hue-rotate(160deg) saturate(1.1) brightness(1.02)}

/* ═══════════ FAIXA CTA AMARELA ═══════════ */
.ctabar{background:var(--amarelo);color:var(--preto)}
.ctabar__inner{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:150px;padding:44px 24px;
}
.ctabar--solo .ctabar__inner{align-items:center}
.ctabar__inner p{
  font-family:'Alfabet',sans-serif;font-weight:700;font-size:20px;
  letter-spacing:.02em;text-transform:uppercase;
}
.ctabar__btn{
  display:inline-flex;align-items:center;gap:16px;
  background:var(--roxo);color:var(--amarelo);
  font-size:15.5px;font-weight:300;letter-spacing:.24em;text-indent:.24em;
  text-transform:uppercase;padding:24px 52px;
  transition:filter .2s;
}
.ctabar__btn span{font-size:24px;font-weight:300}
.ctabar__btn:hover{filter:brightness(1.25)}

/* O rodapé compartilhado começa logo após a faixa amarela dos cases. */
.foot--cases{margin-top:0;border-top:0}

/* ═══════════ RESPONSIVO ═══════════ */
@media (max-width:860px){
  .subnav__home span:last-child{display:none}
  .subnav__home{gap:4px}
  .subnav__cta{padding:9px 14px;font-size:11px}
  .subnav__logo img{height:36px}
  .allcases{padding:150px 0 60px}
  .allcases__lead{margin-bottom:40px;font-size:14px}
  .filters{justify-content:flex-start;gap:22px;margin-bottom:36px}
  .filters__tab{font-size:11px}
  .acases__grid{grid-template-columns:1fr;gap:14px}
  .ctabar__inner{flex-direction:column;align-items:flex-start}
  .ctabar__inner p{font-size:17px}
}

@media (min-width:861px) and (max-width:1100px){
  .acases__grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:700px){
  .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;margin-bottom:28px}
  .filters::after,.filters__divider,.filters__tab::after{display:none}
  .filters__tab{min-height:46px;padding:9px 6px;border:1px solid #555;font-size:11px;line-height:1.25;letter-spacing:.04em;text-align:center}
  .filters__tab.is-active{border-color:var(--amarelo);background:var(--amarelo);color:var(--preto)}
  .filters__tab:last-child{grid-column:1/-1}
}

@media (max-width:580px){
  .subnav{background:var(--preto)}
  .subnav__inner{padding:16px 20px;gap:12px}
  .subnav__home{display:none}
  .subnav__cta{margin-left:auto;min-height:42px;padding:9px 12px;font-size:10px;letter-spacing:.04em}
  .allcases{padding:116px 0 64px}
  .allcases__title{font-size:clamp(40px,11vw,62px);line-height:1.05}
  .allcases__lead{margin-bottom:30px;font-size:15px}
  .acases__grid .case{min-height:270px;padding:20px}
  .acases__grid .case__label{font-size:30px}
  .acases__grid .case__name{font-size:23px}
  .ctabar__inner{gap:24px;padding:34px 20px}
  .ctabar__inner p{font-size:17px;line-height:1.25}
  .ctabar__btn{min-height:48px;padding:14px 20px;font-size:12px}
}