/* ---------- VARIABLES (se potrivește cu services.css) ---------- */
:root{
  --primary:#d32f2f;
  --primary-dark:#b71c1c;
  --radius:12px;
  --shadow:0 4px 15px rgba(0,0,0,.1);
  --shadow-lg:0 8px 25px rgba(0,0,0,.15);
  --max-width:1200px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:#222;background:#fff}
img{display:block;max-width:100%;height:auto}

/* ---------- HERO ---------- */
.projects-hero{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
  padding:80px 1rem;
  text-align:center;
}
.projects-hero h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.5rem;font-weight:700}
.projects-hero p{font-size:clamp(1rem,2.5vw,1.2rem);opacity:.9;max-width:600px;margin:0 auto}

/* ---------- GRID ---------- */
.projects-grid{padding:60px 1rem;background:#f8f9fa}
.projects-grid .container{max-width:var(--max-width);margin:0 auto}
#gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:30px;
}
.project-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:all .3s ease;
  background:#fff;
  cursor:pointer;
}
.project-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.project-card img{width:100%;height:250px;object-fit:cover;transition:transform .3s}
.project-card:hover img{transform:scale(1.05)}
.overlay{
  position:absolute;inset:auto 0 0 0;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
  color:#fff;padding:20px;
  transform:translateY(100%);
  transition:transform .3s;
}
.project-card:hover .overlay{transform:translateY(0)}
.overlay span{font-size:1.1rem;font-weight:600}

/* ---------- LOADER / NO-PROJECTS ---------- */
#loader,.no-projects{text-align:center;padding:2rem 1rem;color:#666}
#loader p{font-size:1.1rem;font-weight:500}
#loader::before{
  content:"";
  display:inline-block;
  width:20px;height:20px;
  border:2px solid #f3f3f3;
  border-top:2px solid var(--primary);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-right:.5rem;
  vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- LIGHTBOX ---------- */
.modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.9);backdrop-filter:blur(5px);
  z-index:var(--z-modal);align-items:center;justify-content:center;
}
.modal.show{display:flex}
.modal img{max-width:90%;max-height:80%;border-radius:var(--radius);box-shadow:0 4px 20px rgba(0,0,0,.5)}
.close,.arrow{
  position:absolute;color:#fff;border:none;
  background:rgba(0,0,0,.4);cursor:pointer;
  transition:all .3s;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.close{top:20px;right:20px;font-size:2rem;width:50px;height:50px}
.arrow{top:50%;transform:translateY(-50%);font-size:1.5rem;padding:1rem}
.arrow.left{left:20px}
.arrow.right{right:20px}
.close:hover,.arrow:hover{background:rgba(0,0,0,.7);transform:translateY(-50%) scale(1.1)}
#modalCaption{color:#fff;text-align:center;padding:1rem;font-weight:500;font-size:1.1rem}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  #gallery{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
  .project-card img{height:200px}
  .close,.arrow{width:40px;height:40px;font-size:1.3rem}
}
@media(max-width:480px){
  #gallery{grid-template-columns:1fr;gap:15px;padding:0 15px}
  .project-card img{height:180px}
}