/* Podstrony: projekty, usługi, zespół, blog, kontakt. */
main { padding-bottom: 160px; }
.list-bar { align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--fg); margin: 0 var(--gutter) 28px; padding-left: 0; padding-right: 0; }
.list-bar .filters { grid-column: 4 / 11; }
.list-bar .count { grid-column: 11 / 13; text-align: right; }

/* ---------- usługi ---------- */
.services { padding: 0 var(--gutter); }
.service { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 28px 0 96px; border-top: 1px solid var(--fg); scroll-margin-top: 80px; }
.service .num { grid-column: 1 / 4; display: inline-flex; align-items: flex-start; gap: 8px; color: var(--muted); }
.service .num .plus { width: 9px; height: 9px; margin-top: 3px; color: var(--fg); }
.service-body { grid-column: 4 / 9; display: flex; flex-direction: column; gap: 18px; }
.service h2 { font-size: var(--fs-l); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
.service .lead { font-size: var(--fs-m); line-height: 1.3; }
.service .uses { color: var(--muted); }
.service .uses b { font-weight: 500; color: var(--fg); }
.service-media { grid-column: 10 / 13; aspect-ratio: 4 / 5; overflow: hidden; background: var(--soft); align-self: start; }
.service-media img { width: 100%; height: 115%; object-fit: cover; }
.service:first-child .service-media { grid-column: 9 / 13; }

/* ---------- co robimy: dwie ścieżki ---------- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding: 0 var(--gutter) 120px; }
.path a { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 18px 0 22px; border-top: 1px solid var(--fg); }
.path .num { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-s); text-transform: uppercase; letter-spacing: .08em; }
.path h2 { font-size: var(--fs-xl); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.path .muted { font-size: var(--fs-m); }
.path-thumbs { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin-top: 18px; padding-top: 16px; box-sizing: content-box; overflow: hidden; }
.path-thumbs img { height: 100%; width: auto; object-fit: cover; transition: transform .6s var(--ease); }
.path-thumbs img.cutout { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .18)); }
.path a:hover .path-thumbs img { transform: translateY(-8px); }
.path a:hover .path-thumbs img:nth-child(2n) { transform: translateY(-14px); }
.path-foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 18px; color: var(--muted); }
.path-foot .link { color: var(--fg); border-bottom: 1px solid currentColor; }
.specs-bar { margin-bottom: 0; }

/* ---------- zespół ---------- */
/* intro text beside a modest photo; the picture drifts gently inside its frame */
.team-intro { margin-bottom: 120px; align-items: start; }
.team-intro-text { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 16px; font-size: var(--fs-m); line-height: 1.3; }
.team-intro-text .label { margin-bottom: 4px; }
.team-photo { position: relative; grid-column: 7 / 13; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.team-photo > div { position: absolute; inset: -8% 0; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- pełna sylwetka: jeden ekran ---------- */
body[data-page="person"] main { padding-bottom: 0; }
.person-page {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding: 132px var(--gutter) var(--gutter);
}
.person-photo { grid-column: 1 / 5; margin: 0; align-self: center; }
.person-float img {
  width: 100%; height: auto; max-height: calc(100svh - 190px); aspect-ratio: 3 / 4; object-fit: cover; display: block;
  animation: levitate 7s ease-in-out infinite alternate;
}
@keyframes levitate { from { transform: translateY(-7px) rotate(-.4deg); } to { transform: translateY(7px) rotate(.4deg); } }
.person-body { grid-column: 6 / 13; display: flex; flex-direction: column; gap: 14px; }
.person-body h1 { font-size: clamp(36px, 4.2vw, 64px); font-weight: 400; line-height: 1; letter-spacing: -.035em; margin-top: 8px; }
.person-role { font-size: var(--fs-m); }
.person-lead { font-size: var(--fs-m); line-height: 1.3; max-width: 44ch; margin-top: 12px; }
.person-bio { columns: 2; column-gap: var(--gutter); line-height: 1.45; }
.person-bio p + p { margin-top: 10px; }
.person-body a:not(.link) { border-bottom: 1px solid var(--line); }
.person-body a:hover { border-color: var(--fg); }
.person-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fg);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--gutter);
}
.person-foot .label { display: flex; margin-bottom: 8px; }
.person-foot ul { display: flex; flex-direction: column; gap: 2px; }
.person-foot ul a, .person-body .person-foot ul a { display: inline-flex; align-items: center; gap: 8px; border: 0; }
.person-foot ul .plus { width: 8px; height: 8px; }
.person-foot .link { border-bottom: 1px solid currentColor; }
.person-next a { font-size: var(--fs-m); border: 0 !important; }
.person-next a span { display: inline-block; transition: transform .4s var(--ease); }
.person-next a:hover span { transform: translateX(5px); }
.people { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 96px; padding: 0 var(--gutter); }
.person { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gutter); padding-top: 14px; border-top: 1px solid var(--fg); }
.person .photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--soft); }
.person .photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s; }
.person:hover .photo img { filter: none; }
.person h2 { font-size: var(--fs-m); font-weight: 500; }
.person .role { color: var(--muted); margin: 2px 0 16px; }
.person .bio { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

/* ---------- blog ---------- */
.posts { padding: 0 var(--gutter); }
.posts li.hidden { display: none; }
.posts a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 18px 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease); }
.posts a:hover { padding-left: 12px; }
.posts .date { grid-column: 1 / 3; color: var(--muted); }
.posts .cats { grid-column: 3 / 4; color: var(--muted); font-size: var(--fs-s); padding-top: 2px; }
.posts .title { grid-column: 4 / 10; font-size: var(--fs-m); line-height: 1.25; display: flex; gap: 10px; }
.posts .title .plus { width: 10px; height: 10px; margin-top: 6px; opacity: 0; transition: opacity .3s, transform .5s var(--ease); }
.posts a:hover .title .plus { opacity: 1; transform: rotate(90deg); }
.posts .excerpt { grid-column: 4 / 10; color: var(--muted); margin-top: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s; }
.posts a:hover .excerpt { max-height: 80px; opacity: 1; }
/* preview keeps the photo's own proportions (no crop); cut-outs float without a frame */
.post-preview { position: fixed; right: var(--gutter); top: 50%; width: auto; height: auto; max-width: 24vw; max-height: 56vh; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 5; }
.post-preview.cutout { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .18)); }
.post-preview.on { opacity: 1; }
.specs a:hover .excerpt { max-height: 140px; }
.specs .excerpt b { font-weight: 500; color: var(--fg); }

/* ---------- kontakt ---------- */
.contact { row-gap: 64px; }
.contact-main { grid-column: 4 / 8; display: flex; flex-direction: column; gap: 40px; }
.contact-mail { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-l); letter-spacing: -.02em; border-bottom: 1px solid var(--fg); align-self: flex-start; }
.contact-mail .plus { width: 16px; height: 16px; }
.contact-people { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.contact-people dt { font-weight: 500; }
.contact-form { grid-column: 8 / 13; align-content: start; }

@media (max-width: 800px) {
  .list-bar .filters { grid-column: 1 / 10; }
  .list-bar .count { grid-column: 10 / 13; }
  .service .num, .service-body, .service-media, .service:first-child .service-media { grid-column: 1 / -1; }
  .service-body { margin: 16px 0 24px; }
  .paths { grid-template-columns: 1fr; padding-bottom: 72px; }
  .path h2 { font-size: 40px; }
  .path-thumbs { height: 96px; }
  .team-intro { margin-bottom: 64px; }
  .team-intro-text, .team-photo { grid-column: 1 / -1; }
  .team-photo { margin-top: 32px; }
  .person { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .person-page { min-height: 0; padding-top: 108px; padding-bottom: 96px; }
  .person-photo, .person-body { grid-column: 1 / -1; }
  .person-photo { width: 72%; margin-bottom: 36px; }
  .person-bio { columns: 1; }
  .person-foot { grid-template-columns: 1fr; margin-top: 24px; }
  .posts .date { grid-column: 1 / 7; }
  .posts .cats { grid-column: 7 / 13; text-align: right; }
  .posts .title, .posts .excerpt { grid-column: 1 / -1; margin-top: 6px; }
  .post-preview { display: none; }
  .contact-main, .contact-form { grid-column: 1 / -1; }
  .contact-mail { font-size: 22px; }
  .contact-people { grid-template-columns: 1fr; }
}

/* ---------- error pages (404 / 500 / 403) ---------- */
.error-page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: center; min-height: 100svh; padding: 140px var(--gutter) 96px; }
.error-page .label { grid-column: 1 / 4; padding-top: 14px; color: var(--muted); }
.error-code { grid-column: 4 / 13; font-size: clamp(120px, 24vw, 380px); line-height: .8; letter-spacing: -.06em; margin-bottom: 40px; }
.error-page h1 { grid-column: 4 / 12; font-size: var(--fs-xl); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.error-lead { grid-column: 4 / 10; margin-top: 28px; font-size: var(--fs-m); line-height: 1.3; }
.error-lead a { color: var(--fg); border-bottom: 1px solid currentColor; }
.error-links { grid-column: 4 / 12; display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 48px; list-style: none; }
@media (max-width: 800px) {
  .error-page .label, .error-code, .error-page h1, .error-lead, .error-links { grid-column: 1 / -1; }
  .error-page .label { margin-bottom: 24px; }
}