/* ==========================================================================
   PORTFOLIO
   Siatka nierównomierna: pierwsza realizacja szeroka, reszta w kolumnach.
   Realizacje mają różną wagę i różną liczbę prac, więc równy grid
   kłamałby o tym, co jest największym projektem.
   ========================================================================== */

.mp-portfolio{ background:var(--mp-cream); padding-block:clamp(34px,4.6vw,64px) clamp(56px,8vw,110px); }

.mp-portfolio__siatka{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,3.4vw,52px) clamp(18px,2.4vw,34px);
}
.mp-portfolio__siatka--trzy{ grid-template-columns:repeat(3,1fr); }
.mp-praca--szeroka{ grid-column:span 2; }

.mp-praca__link{ display:flex; flex-direction:column; height:100%; }

.mp-praca__media{
  position:relative; display:block; overflow:hidden;
  background:var(--mp-warm); border:1px solid var(--mp-line);
  aspect-ratio:4/3;
  box-shadow:0 18px 40px -32px rgba(44,35,25,.45);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.mp-praca--szeroka .mp-praca__media{ aspect-ratio:16/9; }
.mp-praca__link:hover .mp-praca__media{
  box-shadow:0 28px 56px -30px rgba(44,35,25,.5); border-color:var(--mp-line-2);
}

.mp-praca__foto{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.mp-praca__link:hover .mp-praca__foto{ transform:scale(1.03); }
.mp-praca__brak{ position:absolute; inset:0; background:var(--mp-band); }

.mp-praca__opis{ padding-top:16px; display:flex; flex-direction:column; gap:7px; }
.mp-praca__ile{
  font:400 10px/1.5 var(--mp-sans); letter-spacing:.17em;
  text-transform:uppercase; color:var(--mp-muted);
}
.mp-praca__tytul{
  font:300 clamp(18px,1.7vw,23px)/1.28 var(--mp-serif); color:var(--mp-ink);
  text-wrap:balance;
}
.mp-praca--szeroka .mp-praca__tytul{ font-size:clamp(22px,2.4vw,31px); }
.mp-praca__lead{
  font:300 13.5px/1.75 var(--mp-sans); color:var(--mp-body-2);
  max-width:56ch; text-wrap:pretty;
}

/* --- pojedyncza realizacja --- */

.mp-realizacja{ background:var(--mp-cream); padding-block:clamp(34px,4.6vw,64px) clamp(56px,8vw,110px); }
.mp-realizacja__tresc{ margin-bottom:clamp(36px,4.4vw,64px); }

.mp-realizacja__galeria{
  list-style:none; margin:0 0 clamp(48px,6vw,88px); padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,26px);
}
.mp-realizacja__galeria li{ margin:0; }
.mp-realizacja__galeria figure{
  margin:0; background:var(--mp-white); border:1px solid var(--mp-line);
  overflow:hidden; aspect-ratio:1/1;
}
.mp-realizacja__foto{ width:100%; height:100%; object-fit:cover; display:block; }

.mp-sekcja__tytul{
  margin:0 0 24px; padding-top:22px;
  font:300 clamp(22px,2.6vw,30px)/1.2 var(--mp-serif); color:var(--mp-ink);
  border-top:1px solid var(--mp-line);
}

@media (max-width:1100px){
  .mp-portfolio__siatka,
  .mp-portfolio__siatka--trzy{ grid-template-columns:repeat(2,1fr); }
  .mp-praca--szeroka{ grid-column:span 2; }
  .mp-realizacja__galeria{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .mp-portfolio__siatka,
  .mp-portfolio__siatka--trzy{ grid-template-columns:1fr; }
  .mp-praca--szeroka{ grid-column:span 1; }
  .mp-praca--szeroka .mp-praca__media{ aspect-ratio:4/3; }
}