/* ===== Proyectos (grid 3x3) ===== */
.content--flush { padding: 18px 16px; }

/* Contenedor de grid */
.projects-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.content h2{
  text-align: center;
}

/* Tarjeta minimalista con glass suave */
.project-card{
  --glass-bg: rgba(255,255,255,.035);
  --glass-br: 16px;

  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;

  background: var(--glass-bg);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--glass-br);
  overflow:hidden;

  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  box-shadow: 0 10px 30px rgba(0,0,0,.30);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.project-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.14);
}

/* Título centrado arriba */
.project-title{
  margin: 16px 14px 10px;
  text-align:center;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  letter-spacing:.3px;
}

/* Imagen debajo, con ratio limpio */
.project-media{
  position:relative;
  aspect-ratio: 16 / 10; /* ajusta si te gusta más 4/3 o 1/1 */
  overflow:hidden;
  border-radius: 10px;
  margin: 0 12px 10px;
  background: rgba(0,0,0,.25);
}

.project-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.01);
  transition: transform .4s ease, filter .3s ease;
}

.project-card:hover .project-media img{
  transform: scale(1.05);
  filter: contrast(1.05) brightness(.98);
}

/* Fecha pequeña abajo */
.project-date{
  display:block;
  text-align:center;
  color: #bdbdbd;
  font-size: 12px;
  letter-spacing:.2px;
  margin: 8px 0 14px;
}

/* Responsive */
@media (max-width: 1024px){
  .projects-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .projects-grid{ grid-template-columns: 1fr; }
  .project-title{ font-size: 16px; }
}