/* ===== PROJECT PAGE ===== */

.project-hero{
  padding:130px 0 60px;
  background:var(--dark) url('../img/hero/hero.jpg') center/cover no-repeat;
  position:relative;
}
.project-hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.72)}
.project-hero__inner{position:relative;z-index:1;max-width:820px}

.back-link{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.6);font-size:.85rem;
  margin-bottom:24px;
  transition:color var(--transition);
}
.back-link:hover{color:var(--yellow)}
.back-link svg{width:16px;height:16px}

.project-hero__client{
  font-size:.72rem;color:var(--yellow);
  font-family:'Manrope',sans-serif;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:12px;
}
.project-hero__title{
  font-size:2.75rem;color:#fff;font-weight:800;
  line-height:1.1;margin-bottom:20px;letter-spacing:-.5px;
}
.project-hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.project-hero__tag{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.85);
  font-size:.75rem;padding:5px 12px;
  border-radius:var(--radius);
  font-family:'Manrope',sans-serif;font-weight:600;
}

/* ===== GALLERY ===== */
.project-gallery{padding:56px 0;background:var(--dark2)}
.project-gallery__main{
  aspect-ratio:16/7;
  overflow:hidden;
  border-radius:var(--radius);
  margin-bottom:4px;
}
.project-gallery__main img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.project-gallery__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
}
.project-gallery__grid img{
  aspect-ratio:4/3;
  width:100%;object-fit:cover;display:block;
  cursor:pointer;
  transition:filter .3s ease;
}
.project-gallery__grid img:hover{filter:brightness(1.15)}

/* ===== INFO ===== */
.project-info{padding:80px 0;background:var(--bg)}
.project-info__layout{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:64px;align-items:start;
}
.project-info h2{
  font-size:1.5rem;font-weight:800;
  margin-bottom:16px;margin-top:40px;
}
.project-info h2:first-child{margin-top:0}
.project-info p{color:var(--text);line-height:1.75;margin-bottom:16px;font-size:.95rem}
.project-works{display:flex;flex-direction:column;gap:0;margin-bottom:32px}
.project-works li{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--gray);
  font-size:.9rem;color:var(--text);
}
.project-works li::before{
  content:'';width:8px;height:8px;
  background:var(--yellow);border-radius:2px;flex-shrink:0;
}

/* ===== SIDEBAR ===== */
.project-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}
.project-meta{
  background:var(--gray);border-radius:var(--radius);
  padding:24px;
}
.project-meta__row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06);
  font-size:.875rem;
}
.project-meta__row:last-child{border-bottom:none}
.project-meta__label{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px}
.project-meta__value{font-family:'Manrope',sans-serif;font-weight:700;color:var(--dark)}
.project-cta{
  background:var(--dark);border-radius:var(--radius);
  padding:28px;
}
.project-cta h3{color:#fff;font-family:'Manrope',sans-serif;font-weight:800;font-size:1.1rem;margin-bottom:6px}
.project-cta p{color:rgba(255,255,255,.55);font-size:.85rem;margin-bottom:20px}
.project-cta .form-input{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;margin-bottom:12px;
}
.project-cta .form-input::placeholder{color:rgba(255,255,255,.4)}
.project-cta .form-input:focus{border-color:var(--yellow)}

/* ===== OTHER PROJECTS ===== */
.other-projects{background:var(--gray);padding:80px 0}
.other-projects__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

@media(max-width:1024px){
  .project-info__layout{grid-template-columns:1fr}
  .project-sidebar{position:static}
  .other-projects__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .project-hero__title{font-size:2rem}
  .project-gallery__grid{grid-template-columns:repeat(2,1fr)}
  .other-projects__grid{grid-template-columns:1fr}
}