/* =============================================
   40-PROJETOS — GRID E CARDS (2 colunas desktop)
   - overlay absoluto (não empurra layout)
   - card com overflow hidden (não vaza)
============================================= */

/* Seção/container */
#projetos{
  width:100%;
  padding:clamp(3rem,8vw,5rem) 0;
  background:var(--dark-bg);
}
.portfolio-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 1.5rem;
}

/* Grid: 1 coluna mobile, 2 colunas desktop */
.portfolio-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(1.5rem,3vw,2.5rem);
}
@media (min-width:1024px){
  .portfolio-grid{
    grid-template-columns: repeat(2, minmax(420px, 1fr));
  }
}

/* Card base */
.project-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding:clamp(1rem,2vw,1.25rem);
  border-radius:var(--radius, 1rem);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 15px rgba(0,180,255,.15);
  backdrop-filter:blur(6px);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  overflow:hidden;              /* <- impede o overlay de passar do card */
  min-height: 460px;            /* altura coerente para 2 colunas */
}
.project-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 0 26px rgba(0,180,255,.55);
  border-color:var(--primary-color);
}

/* Thumb 16:9 */
.project-thumb{
  aspect-ratio:16/9;
  border-radius:calc(var(--radius, 1rem) - 4px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 12px rgba(0,180,255,.15) inset;
}
.project-thumb img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.02);
  transition:transform .5s ease;
}
.project-card:hover .project-thumb img{ transform:scale(1.04); }

/* Cabeçalho */
.project-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
}
.project-title{
  margin:0;
  font-size:clamp(1rem,1.8vw,1.25rem);
  color:#fff; font-weight:600;
  border-bottom:2px solid var(--primary-color);
  padding-bottom:.45rem;
}

/* Badge de status (mesmo visual anterior) */
.status-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:.6rem; font-size:.8rem; font-weight:700;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  box-shadow:0 0 10px rgba(0,180,255,.15) inset;
  white-space:nowrap; color:#7CFFA5; border-color:rgba(124,255,165,.35);
}
.status-badge::before{
  content:""; width:.55rem; height:.55rem; border-radius:50%;
  background:#7CFFA5; box-shadow:0 0 10px currentColor;
}

/* Tags */
.project-tags{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.55rem; margin:.25rem 0 .5rem;
}
.project-tags .tag{
  font-size:clamp(.75rem,1.4vw,.85rem);
  padding:.35rem .8rem; border-radius:.6rem; font-weight:600; color:#fff;
  background:linear-gradient(135deg, rgba(0,180,255,.35), rgba(255,0,214,.35));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 10px rgba(0,180,255,.35);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  white-space:nowrap;
}

/* Botão */
.project-card .btn{
  align-self:center;
  margin-top:auto;
  font-size:clamp(.85rem,1.5vw,.95rem);
  padding:.8rem 1.6rem;
  border-radius:50px; font-weight:700; text-decoration:none;
  border:2px solid var(--primary-color);
  background:rgba(0,180,255,.15); color:#fff;
  box-shadow:0 0 10px rgba(0,180,255,.35);
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease, color .28s ease, border-color .28s ease;
}
.project-card .btn:hover{
  background:var(--primary-color); color:#000;
  box-shadow:0 0 18px rgba(0,180,255,.8);
  transform:translateY(-3px) scale(1.05);
}

/* Overlay (preview) — fica DENTRO do card, sem empurrar nada */
.project-preview{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,2vw,1.25rem);
  background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.88));
  opacity:0; transform:translateY(6%) scale(1.03);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
.project-card:hover .project-preview,
.project-card:focus-within .project-preview,
.project-card.show .project-preview{                 /* para mobile via JS */
  opacity:1; transform:translateY(0) scale(1);
  pointer-events:auto;
}
.preview-content{
  max-width:min(760px, 92%);
  color:var(--secondary-color);
  text-align:left; line-height:1.6; font-size:.95rem;
}
.preview-content h4{
  margin:0 0 .5rem; text-align:center; color:#fff;
}
.preview-actions{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1rem;
}
.btn.btn-secondary{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.25);
}

/* Acessibilidade */
.project-card:focus-within{
  box-shadow:0 0 0 3px rgba(0,180,255,.25), 0 0 22px rgba(0,180,255,.6);
  border-color:var(--primary-color);
}

/* Responsividade fina */
@media (max-width:520px){
  .project-head{ flex-direction:column; gap:.5rem; text-align:center; }
}

/* ===== Modal de Resumo (imagem) ===== */
.resumo-modal{
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  z-index: 2000;
}
.resumo-modal.open{ display: flex; }

.resumo-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(2px);
}

.resumo-dialog{
  position: relative; z-index: 1;
  width: min(1100px, 92vw);
  max-height: 92vh;
  padding: clamp(12px, 1.8vw, 16px);
  border-radius: 12px;
  background: rgba(0,0,0,.85);
  border: 1px solid rgba(0,180,255,.35);
  box-shadow: 0 0 32px rgba(0,180,255,.35);
}

.resumo-close{
  position: absolute; top: 6px; right: 6px;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff; font-size: 24px; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.resumo-close:hover{ transform: scale(1.05); background: rgba(255,255,255,.15); }

.resumo-figure{ margin: 0; }
.resumo-figure img{
  display: block; width: 100%; height: auto;
  max-height: 70vh; object-fit: contain; border-radius: 8px;
  box-shadow: 0 0 24px rgba(0,180,255,.25);
}
.resumo-caption{
  color: var(--secondary-color); text-align: center;
  font-size: .95rem; margin-top: .5rem;
}

.resumo-actions{
  margin-top: 12px;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}