/* projects.css */
/* #pragma region Projects Hero */
.projects-hero h1{ 
  margin:6px 0;
  font-size: 2.5rem;
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}
.muted{
  color:var(--muted);
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
}
/* #pragma endregion */

/* #pragma region Projects Grid */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:20px
}
.project-card{
  background:var(--panel);
  padding:20px;
  border-radius:12px;
  border:1px solid var(--card-border);
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.project-card h3{
  margin-top:0;
  font-size: 1.4rem;
  margin-bottom: 12px;
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
}
.project-card p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}
.meta{
  color:var(--muted);
  font-size:14px;
  margin:12px 0;
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
}
.link{
  display:inline-block;
  margin-top:8px;
  color:var(--text);
  text-decoration:none;
  background:rgba(77,163,255,0.06);
  padding:10px 16px;
  border-radius:8px;
  font-size: 15px;
  transition: all 0.2s ease;
  font-family: "Styrene A Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
}
.link:hover {
  background: rgba(77,163,255,0.1);
  transform: translateY(-1px);
}
/* #pragma endregion */

/* #pragma region Project Images */
.project-image {
  width: 100%;
  height: 200px;
  background: var(--card-border);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-image img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  object-fit: cover
}

.project-card:hover .project-image img {
  transform: scale(1.05);
}
/* #pragma endregion */

/* #pragma region Projects Responsive */
@media (max-width:1000px){
  .projects-grid{grid-template-columns:repeat(1,1fr)}
}

@media (max-width: 768px) {
  .projects-grid {
    gap: 16px;
  }
  
  .project-card {
    padding: 16px;
  }
  
  .project-card h3 {
    font-size: 1.3rem;
  }
  
  .project-card p {
    font-size: 15px;
  }
  
  .link {
    padding: 12px 16px;
    text-align: center;
    display: block;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  
  .project-image {
    height: 160px;
  }
}

@media (max-width: 480px) {
  .projects-hero h1 {
    font-size: 1.8rem;
  }
  
  .link {
    width: 100%;
  }
}
/* #pragma endregion */