/* Page-specific styles for projects.html — follow main site's visual system */

.projects-hero{
    padding:clamp(56px,6.5vw,96px) 0;
}

.projects-hero .eyebrow{ color:var(--muted); margin:0 0 .4rem }
.projects-hero h1{ font-size:clamp(2rem,3.2vw,2.6rem); margin:0 0 .6rem }
.projects-hero .lead{ color:var(--muted); max-width:68ch }

.projects-list{ padding:calc(var(--gap) * 2) 0 6rem }

.projects-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:calc(var(--gap) * 1.2);
}

.project-card{
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:calc(var(--radius) + 6px);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.project-card a{ text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100% }

.project-media{ width:100%; padding-bottom:100%; overflow:hidden; background:var(--bg); position:relative }
.project-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .35s ease; filter:contrast(1.02) saturate(1.02) brightness(.88) }

.project-body{ padding:1.2rem }
.project-body h3{ margin:0 0 .35rem; font-size:var(--step-1); color: color-mix(in srgb, var(--brand) 40%, var(--text)) }
.project-body .meta{ margin:0 0 .6rem; color:var(--muted); font-size:var(--step--1) }
.project-body .excerpt{ margin:0; color:var(--muted); font-size:var(--step-0); line-height:1.5 }

.project-card:hover{ transform:translateY(-8px); box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 36px color-mix(in srgb, var(--brand-2) 36%, transparent) }
.project-card:hover .project-media img{ transform:scale(1.05) }

.projects-cta{ display:flex; justify-content:center; margin-top:calc(var(--gap) * 1.4) }
.projects-cta .btn{ padding:.9rem 1.2rem }

/* Responsive */
@media (max-width:1120px){ .projects-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:880px){ .projects-grid{ grid-template-columns:1fr } .projects-hero h1{ text-align:center } }