/* Projects grid styling */

.projects-grid { display: grid; gap: 1.25rem; }
@media (max-width: 640px){ 
  .projects-grid { grid-template-columns: 1fr; gap: 1rem; } 
  .project-content h3 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
  .project-content p { font-size: .9rem; }
}
@media (min-width: 640px){ .projects-grid { gap: 1.5rem; } }
@media (min-width: 768px){ .projects-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px){ .projects-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.project-card { background: linear-gradient(135deg,#131313,#0c0c0c); border: 1px solid rgba(255,30,30,.25); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); display:flex; flex-direction: column; min-height: 100%; transition: transform .3s ease, box-shadow .3s ease; }
.project-card:focus-within { outline: 2px solid #ff1e1e; outline-offset: 2px; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }

.project-image { position: relative; overflow: hidden; }
.project-image img { width: 100%; height: 220px; object-fit: cover; display:block; filter: saturate(1.05) contrast(1.05); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.project-card:hover .project-image img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce){ .project-card:hover .project-image img { transform: none; } }

.project-content { padding: 1rem; display:flex; flex-direction: column; gap: .5rem; }
.project-content h3 { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(1.25rem,2.4vw,1.75rem); letter-spacing: .01em; color:#f3f4f6; }
.project-content p { color: #9ca3af; font-size: .95rem; line-height: 1.45; }

.project-actions { margin-top: .75rem; display:flex; gap: .5rem; flex-wrap: wrap; }
.btn-ghost { padding: .55rem .9rem; border-radius: 10px; border: 1px solid rgba(255,30,30,.35); color:#f3f4f6; background: rgba(255,30,30,.06); transition: background .25s ease, box-shadow .25s ease; text-decoration: none; display:inline-flex; align-items:center; gap:.4rem; }
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(255,30,30,.12); box-shadow: 0 0 0 3px rgba(255,30,30,.18); }

/* Optional glitch overlay */
.glitch-overlay { position:absolute; inset:0; mix-blend-mode:screen; opacity:0; pointer-events:none; background: repeating-linear-gradient(90deg, rgba(255,0,128,.07) 0 2px, transparent 2px 4px); transition: opacity .3s ease; }
.project-card:hover .glitch-overlay { opacity: .6; }
@media (prefers-reduced-motion: reduce){ .glitch-overlay { display:none; } }