/* ==========================================================================
   Works.css — project cards matching the screenshot
   ========================================================================== */

/* Grid: 3 columns on desktop, auto-fit below */
.projects-grid{
  display:grid;
  gap:22px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:1100px){
  .projects-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:640px){
  .projects-grid{ grid-template-columns: 1fr; }
}

/* Card internals */
.project{ position:relative; }
.project .in{
  position:relative;
  padding:22px;
}

/* Large preview image with soft radius and inner border */
.project .shot{
  margin:0 0 14px;
  width:100%; height:260px;
  border-radius:22px; overflow:hidden;
  background:#0f1013;
  border:1px solid rgba(255,255,255,.06);
}
.project .shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:inherit;
}

/* Category label + title */
.project .muted{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#8b8f96; opacity:.9; margin-top:4px; margin-bottom:6px;
}
.project .title{
  margin:0; color:var(--text);
  font:600 18px/1.25 Inter, system-ui, sans-serif;
}

/* optional bubble (non usata per ora, hai la corner arrow) */
.project .bubble{
  position:absolute; right:18px; bottom:18px;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  color:#e9ecf1; text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#1b1c21,#0f1013);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.project .bubble:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px rgba(0,0,0,.35);
}
.project .bubble svg{ width:22px; height:22px; }

/* Hover polish similar to your cards */
.project:hover .shine{ opacity:1; }

/* Image height tweaks for breakpoints */
@media (min-width:1280px){
  .project .shot{ height:280px; }
}
@media (max-width:420px){
  .project .shot{ height:220px; border-radius:18px; }
  .project .bubble{ width:44px; height:44px; right:16px; bottom:16px; }
}