/* ===========================================================
   PORTFÓLIO — Overrides
   - Aumenta as colunas (largura/altura)
   - Adiciona degradê no rodapé das colunas
   =========================================================== */

/* Variáveis fáceis de ajustar */
:root{
  --col-min: 340px;          /* largura mínima da coluna */
  --col-max: 400px;          /* largura máxima da coluna */
  --col-h:   640px;          /* altura visível (com scroll interno) */

  --col-grad-h: 84px;        /* altura do degradê no rodapé */
  --col-grad-opacity: .35;   /* opacidade do degradê (0–1) */
}

/* 1) Aumenta o tamanho das colunas */
.portfolio-columns{
  gap: 2.2rem !important;  /* um pouco mais de respiro entre colunas */
}

.portfolio-column{
  min-width: var(--col-min) !important;
  max-width: var(--col-max) !important;
  max-height: var(--col-h) !important;
}

/* 2) Remova o “guard” antigo que anulava ::after OU sobreponha aqui */
.portfolio-column::before{
  content: none !important; 
  background: none !important;
}


.portfolio-column::after{
  content: "" !important;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--col-grad-h);
  pointer-events: none;

  /* Degradê discreto (baixo → mais escuro) */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(0,0,0, var(--col-grad-opacity))
  );
  /* respeita raio/clip existentes da coluna */
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* 4) Responsivo — mantém conforto em telas menores */
@media (max-width: 1200px){
  :root{
    --col-min: 320px;
    --col-max: 360px;
    --col-h:   600px;
  }
}

@media (max-width: 960px){
  :root{
    --col-min: 300px;
    --col-max: 340px;
    --col-h:   520px;
    --col-grad-h: 72px;
  }
}

@media (max-width: 560px){
  :root{
    --col-min: 100%;
    --col-max: 100%;
    --col-h:   460px;
    --col-grad-h: 60px;
  }
}

/* ===========================
   HARDENING DE CAMADAS/CLIQUE
   Cole no FINAL de portifolio-overrides.css
   =========================== */

/* 1) Cards SEMPRE acima de overlays da coluna */
.project-card{
  position: relative;
  z-index: 40 !important; /* > ::after (20) e abaixo do header sticky (30)? deixa o sticky acima: */
}
.portfolio-column .sticky-title{ z-index: 50 !important; }

/* 2) Garante que o degradê nunca intercepte toques (alguns browsers precisam do !important) */
.portfolio-column::after{
  pointer-events: none !important;
}

/* 3) Modal do projeto sempre no topo e clicável */
#pdf-modal{
  z-index: 100000 !important;
}
#pdf-modal.show{
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 4) Chat SEMPRE acima de tudo */
.chatbot-widget{
  z-index: 100001 !important;
}

/* 5) Se existir QUALQUER pai com transform/filter criando stacking context,
      evita que ele prenda os cliques por cima do modal */
.portfolio-section, .portfolio-columns, .portfolio-column{
  transform: none !important;
  filter: none !important;
}