/* Układ strony /realizacje. Nie używany poza tą podstroną. */

.folio-bar{
  position:sticky;top:5rem;z-index:5;
  display:grid;gap:.55rem;
  margin:0 0 1.35rem;padding:.7rem 0 .85rem;
  background:var(--canvas);
  border-bottom:1px solid var(--rule);
}
.folio .filters{margin:0}
.folio .filters legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.folio .filter-count{margin:0;font-size:.96rem}
.folio [data-group="web"][hidden] + .group-second{
  margin-top:0;padding-top:0;border-top:0;
}
.folio-hint{
  margin:0 0 clamp(2rem,3.6vw,2.8rem);
  max-width:min(52ch,100%);
  color:rgba(243,238,232,.58);font-size:1rem;line-height:1.5;
}
.folio-head{margin:0 0 clamp(1.6rem,3vw,2.2rem)}

.folio-list{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2.4rem,4.5vw,3.5rem) clamp(1.5rem,2.4vw,2.4rem);
}
.folio-case{min-width:0}
.folio-case:hover .laptop,
.folio-case:focus-within .laptop{border-color:rgba(243,238,232,.32)}
.folio-copy{margin-top:1.35rem}
.folio-kicker{
  margin:0 0 .4rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(243,238,232,.5);
}
.folio-copy h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.55rem,1.9vw,1.9rem);line-height:1.1;letter-spacing:-.02em;
  margin:0 0 .35rem;
}
.folio-flag{
  margin:0 0 .35rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(224,162,74,.82);
}
.folio-links{margin:.7rem 0 0}
.folio-links a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:.06em;
}
.folio-links a:hover{color:var(--accent)}

.folio-kinds{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
}
.folio-kinds--one{grid-template-columns:minmax(0,28rem);}
.folio-kind{
  position:relative;display:block;min-width:0;overflow:hidden;
  background:#211f28;color:inherit;text-decoration:none;
  aspect-ratio:16 / 10;
}
.folio-kind img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.folio-kind:hover img,.folio-kind:focus-visible img{transform:scale(1.04)}
.folio-kind-text{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:grid;gap:.2rem;
  padding:1.8rem .85rem .7rem;
  background:linear-gradient(to top,rgba(21,19,26,.94) 0%,rgba(21,19,26,0) 100%);
}
.folio-kind-text strong{
  font-family:var(--display);font-weight:500;font-size:1.12rem;line-height:1.15;
}
.folio-kind-text span{
  font-size:.88rem;line-height:1.35;color:rgba(243,238,232,.72);
  max-width:36ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.folio-kind--wait{
  background:linear-gradient(165deg,#1c1a22 0%,#15131a 100%);
  box-shadow:inset 0 0 0 1px rgba(243,238,232,.08);
}
.folio-kind--wait .folio-kind-text{
  position:relative;padding:1.1rem .95rem;
  background:none;
}
.folio-kind--wait .folio-kind-text span{color:rgba(224,162,74,.82)}

@media (max-width:560px){
  .folio-kinds{grid-template-columns:1fr}
}
@media (min-width:900px){
  .folio-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  .folio-kinds{gap:.9rem}
}
@media (min-width:1240px){
  .folio-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .folio-kind img{transition:none}
  .folio-kind:hover img{transform:none}
}