/* ============================================================ PROJECTS */
.projects__grid{
  margin-top:var(--s-9);display:grid;gap:var(--gutter);
  grid-template-columns:1fr;
}
@media (min-width:768px){.projects__grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.projects__grid{grid-template-columns:repeat(12,1fr);}}

/* Asimetriją kuria pačios nuotraukos: gulsčia užima daugiau stulpelių
   ir gauna gulsčią kadrą, portretas — siauresnį ir aukštą.
   Taip nė viena nuotrauka nekarpoma prieš savo formatą. */
@media (min-width:1024px){
  .project--landscape{grid-column:span 7;aspect-ratio:16/10;}
  .project--portrait {grid-column:span 5;aspect-ratio:4/5;}
}
@media (min-width:768px) and (max-width:1023px){
  .project--landscape{aspect-ratio:16/10;}
  .project--portrait {aspect-ratio:4/5;}
}
@media (max-width:767px){
  .project--landscape{aspect-ratio:4/3;}
  .project--portrait {aspect-ratio:4/5;}
}

.project{
  position:relative;overflow:hidden;display:block;
  border:var(--border) solid var(--line);background:var(--bg-raised);
}
.project .photo{transition:transform var(--t-image) var(--ease-out);}
.project:hover .photo{transform:scale(1.04);}
.project__overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--s-5);color:var(--c-off-white);
  background:linear-gradient(180deg,rgba(17,17,17,.35) 0%,rgba(17,17,17,0) 34%,rgba(17,17,17,.88) 100%);
}
.project__code{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:.14em;color:rgba(232,232,230,.8);}
.project__name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);
  line-height:1.2;letter-spacing:-.01em;text-transform:uppercase;}
.project__meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-3);
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;
  text-transform:uppercase;color:rgba(232,232,230,.75);}
.project__count{position:absolute;top:var(--s-5);right:var(--s-5);
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;
  background:rgba(245,245,243,.92);color:var(--c-black);padding:2px 8px;}

.projects__empty{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;
  min-height:220px;border:var(--border) dashed var(--line-strong);
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);text-align:center;padding:var(--s-6);
}