/* Componente case-overlay — modal de projeto estilo Behance.
   Keyframe próprio vive aqui por ser exclusivo deste componente. */
.case-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: center;
}
/* display:flex sobrescreveria o atributo [hidden] do HTML — reforça o oculto */
.case-overlay[hidden] { display: none; }

.case-overlay-veu {
  position: absolute;
  inset: 0;
  background: var(--cor-veu);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.case-overlay-painel {
  position: relative;
  width: min(96vw, 68rem);
  margin-top: var(--espaco-lg);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-forte);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: overlaySubir 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  /* Scrollbar customizada seguindo estética do projeto */
  scrollbar-width: thin;
  scrollbar-color: var(--cor-borda-forte) var(--cor-fundo);
}

.case-overlay-painel::-webkit-scrollbar {
  width: 8px;
}

.case-overlay-painel::-webkit-scrollbar-track {
  background: var(--cor-fundo);
}

.case-overlay-painel::-webkit-scrollbar-thumb {
  background-color: var(--cor-borda-forte);
  border-radius: 4px;
}

.case-overlay-painel::-webkit-scrollbar-thumb:hover {
  background-color: var(--cor-destaque);
}

@keyframes overlaySubir {
  from { opacity: 0; transform: translateY(6vh); }
  to   { opacity: 1; transform: translateY(0); }
}

.case-overlay-fechar {
  position: sticky;
  top: var(--espaco-sm);
  margin-left: auto;
  margin-right: var(--espaco-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--espaco-md);
  height: var(--espaco-md);
  z-index: var(--z-flutuante);
  font-size: var(--texto-lg);
  line-height: 1;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-full);
  transition: color var(--transicao-rapida), border-color var(--transicao-rapida);
}
.case-overlay-fechar:hover { color: var(--cor-destaque); border-color: var(--cor-destaque); }

.case-overlay-conteudo { padding: 0 var(--espaco-lg) var(--espaco-xl); }

.case-overlay-conteudo .case-carregando {
  padding-block: var(--espaco-2xl);
  text-align: center;
  font-family: var(--fonte-mono);
  color: var(--cor-texto-suave);
}

body.case-aberto { overflow: hidden; }

@media (max-width: 768px) {
  .case-overlay-painel { margin-top: var(--espaco-sm); width: 100vw; }
  .case-overlay-conteudo { padding: 0 var(--espaco-sm) var(--espaco-lg); }
  /* Alvo de toque ≥44px (era 2rem/32px, abaixo do mínimo recomendado) */
  .case-overlay-fechar { width: 2.75rem; height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .case-overlay-painel { animation: none; }
}