/* ===== MW Motyw — O nas (/o-nas/): szablon o-nas.php na komponentach home (front.css) ===== */
/* odstep miedzy sekcjami daje .mw-front__main (row-gap), sekcje nie maja wlasnych marginesow */

/* okruszki nad tytulem hero, poza przeplywem (tytul nie skacze), jak hero wpisu */
.mw-about .mw-hero .mw-okruszki{ position:absolute; inset-block-end:100%; inset-inline:0; padding-block:0 var(--mw-s5); }
.mw-about .mw-hero .mw-okruszki, .mw-about .mw-hero .mw-okruszki :is(a, [aria-current]){ color:var(--mw-on-dark); }

/* ---- mijanka: manifest + zdjecie; telefon jedna kolumna, manifest nad zdjeciem ---- */
.mw-about__split{ display:grid; row-gap:var(--mw-section-gap); padding-inline:var(--mw-page-pad); } /* telefon: jak odstep sekcji */
.mw-about__split > .mw-manifesto{ padding-inline:0; }
.mw-about__photo{ margin:0; }
.mw-about__photo img{ width:100%; height:auto; }

/* ---- panorama z dwiema osobami: telefon tekst pod zdjeciem, desktop na zdjeciu ---- */
.mw-about__people{ position:relative; }
.mw-about__people-img{ width:100%; height:auto; object-fit:cover; } /* proporcje z width/height pliku: WP sizes=auto daje contain:size, bez proporcji wysokosc 1500 */
.mw-about__persons{ display:grid; gap:var(--mw-s6); padding:var(--mw-page-pad) var(--mw-page-pad) 0; }
.mw-about__person .mw-about__person-name{ margin:0 0 var(--mw-s4); font-family:var(--mw-serif); font-weight:400; font-size:var(--mw-fs-display);
  line-height:var(--mw-lh-tight); color:inherit; }
.mw-about__person p{ margin:0; color:inherit; }

/* przelacznik osob tylko na telefonie (blok < 900 nizej) */
.mw-about__person-tabs{ display:none; }

/* ---- wartosci: manifest wysrodkowany, eyebrow nad zdaniem ---- */
.mw-about .mw-section-block > .mw-manifesto{ text-align:center; }
.mw-about .mw-section-block > .mw-manifesto .mw-manifesto__text{ margin-inline:auto; }
.mw-about .mw-section-block > .mw-manifesto .mw-manifesto__eyebrow{ display:block; margin:0 0 var(--mw-s4); }

/* ---- wartosci: zdjecie 2:3 + podpis + akapit; telefon = pas .mw-track ---- */
.mw-about__values{ padding-inline:var(--mw-page-pad); } /* rodzic pasa: gutter, ktory .mw-track znosi do brzegu */
.mw-about__value{ margin:0; scroll-snap-align:center; scroll-snap-stop:always; } /* jeden gest = jedna karta */
.mw-about__value-img{ width:100%; height:auto; aspect-ratio:2 / 3; object-fit:cover; }
/* kroj i rozmiar: utility tytulu nad akapitem w tokeny.css */
.mw-about__value .mw-about__value-name{ margin:var(--mw-s3) 0 var(--mw-s2); }
.mw-about__value .mw-about__value-text{ margin:0; }

/* ---- social: pas 7 zdjec plynie w lewo, posrodku link do Instagrama ---- */
.mw-about__social{ --mw-social-u:1vw; position:relative; overflow:hidden; } /* u = jednostka rozmiarow zdjec */
.mw-about__social-track{ display:flex; width:max-content; height:calc(44 * var(--mw-social-u));
  animation:mw-social-drift 60s linear infinite; }
.mw-about__social-set{ display:flex; }
.mw-about__social-item img{ width:auto; height:calc(var(--mw-social-h) * var(--mw-social-u)); }
/* srodkowy pas 18-26u wolny na napis; przecina go tylko 1 */
.mw-about__social-item:nth-child(1){ --mw-social-h:30; align-self:center; margin:0 0 0 calc(2 * var(--mw-social-u)); }
.mw-about__social-item:nth-child(2){ --mw-social-h:18; align-self:start; margin:0 0 0 calc(2 * var(--mw-social-u)); }
.mw-about__social-item:nth-child(3){ --mw-social-h:16; align-self:end; margin:0 0 0 calc(-6 * var(--mw-social-u)); }
.mw-about__social-item:nth-child(4){ --mw-social-h:14; align-self:end; margin:0 0 calc(2 * var(--mw-social-u)) calc(2.5 * var(--mw-social-u)); }
.mw-about__social-item:nth-child(5){ --mw-social-h:18; align-self:start; margin:0 0 0 calc(2.5 * var(--mw-social-u)); }
.mw-about__social-item:nth-child(6){ --mw-social-h:18; align-self:end; margin:0 0 0 calc(-6 * var(--mw-social-u)); }
.mw-about__social-item:nth-child(7){ --mw-social-h:16; align-self:start; margin:var(--mw-social-u) 0 0 calc(2.5 * var(--mw-social-u)); }

.mw-about__social-card{ position:absolute; inset:50% auto auto 50%; translate:-50% -50%; width:max-content; max-width:calc(100% - 2 * var(--mw-page-pad)); padding:var(--mw-s3);
  color:var(--mw-ink); text-align:center; } /* tlo: utility mleka w tokeny.css, napis czytelny nad kazdym zdjeciem */
.mw-about__social-link{ display:block; text-decoration:none; } /* cala sekcja = link do Instagrama */
.mw-widok .mw-about__social-link:focus-visible{ outline-offset:-2px; } /* do srodka: sekcja ma overflow:hidden, zewnetrzny pierscien znikal */
.mw-about__social .mw-about__social-title{ margin:0; line-height:var(--mw-lh-snug); }
.mw-about__social .mw-about__social-handle{ margin:var(--mw-s2) 0 0; text-decoration:underline; }

@media (width < 900px){ /* bp:desktop */
  .mw-about .mw-hero__image{ object-position:58% 28%; } /* srodek miedzy twarzami */

  /* osoby: caly kadr, lekki ruch w strone wybranej, jeden biogram naraz */
  .mw-about__people{ overflow:clip; }
  .mw-about__people-img{ aspect-ratio:4 / 3; --zoom:1.05; scale:var(--zoom); translate:2% 0; transition:translate .8s cubic-bezier(.3, .7, .2, 1);
    clip-path:inset(calc(100% * (1 - 1 / var(--zoom)) / 2) 0); } /* przyciete do pola: nie wchodzi pod nazwy osob (14.10) */
  .mw-about__people:has(#mw-person-1:checked) .mw-about__people-img{ translate:-2% 0; }
  .mw-about__persons{ padding-top:var(--mw-s3); }
  .mw-about__people:has(#mw-person-0:checked) .mw-about__person:nth-child(2),
  .mw-about__people:has(#mw-person-1:checked) .mw-about__person:nth-child(1){ display:none; }
  .mw-about__person{ --mw-person-from:calc(-1 * var(--mw-s4)); animation:mw-person-in .35s ease-out; } /* wjazd od strony zakladki */
  .mw-about__person:nth-child(2){ --mw-person-from:var(--mw-s4); }
  /* przelacznik osob (radio), kreska jedzie pod wybrana */
  .mw-about__person-tabs{ position:relative; display:grid; grid-template-columns:1fr 1fr; margin:0 var(--mw-page-pad); border-bottom:1px solid var(--mw-line); }
  .mw-about__person-tabs::after{ content:""; position:absolute; inset:auto auto -1px 0; width:50%; height:1px; background:var(--mw-black); transition:translate .45s ease; }
  .mw-about__person-radio{ position:absolute; opacity:0; pointer-events:none; }
  .mw-about__people .mw-about__person-tab{ display:flex; justify-content:center; align-items:center; gap:.25em; min-height:calc(var(--mw-s7) + var(--mw-s2)); font-family:var(--mw-serif); font-weight:500; font-size:min(var(--mw-fs-lg), 6.4vw); white-space:nowrap;
    color:var(--mw-ink-3); cursor:pointer; transition:color .3s; }
  .mw-about__person-radio:checked + .mw-about__person-tab{ color:var(--mw-black); }
  .mw-about__person-radio:focus-visible + .mw-about__person-tab{ outline:2px solid var(--mw-black); outline-offset:-2px; }
  .mw-about__people:has(#mw-person-1:checked) .mw-about__person-tabs::after{ translate:100% 0; }
  /* social: wyzszy pas, srodek 47-75u wolny na napis; przecina go tylko 1; align-self z bazy */
  .mw-about__social-track{ height:calc(122 * var(--mw-social-u)); }
  .mw-about__social-item:nth-child(1){ --mw-social-h:70; margin:0 0 0 calc(3 * var(--mw-social-u)); }
  .mw-about__social-item:nth-child(2){ --mw-social-h:44; margin:0 0 0 calc(4 * var(--mw-social-u)); }
  .mw-about__social-item:nth-child(3){ --mw-social-h:40; margin:0 0 0 calc(-14 * var(--mw-social-u)); }
  .mw-about__social-item:nth-child(4){ --mw-social-h:30; margin:0 0 calc(4 * var(--mw-social-u)) calc(6 * var(--mw-social-u)); }
  .mw-about__social-item:nth-child(5){ --mw-social-h:40; margin:calc(2 * var(--mw-social-u)) 0 0 calc(4 * var(--mw-social-u)); }
  .mw-about__social-item:nth-child(6){ --mw-social-h:44; margin:0 0 0 calc(-10 * var(--mw-social-u)); }
  .mw-about__social-item:nth-child(7){ --mw-social-h:34; margin:calc(6 * var(--mw-social-u)) 0 0 calc(5 * var(--mw-social-u)); }
  .mw-about__person .mw-about__person-name{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* imie niesie zakladka */
}

@media (width >= 900px){ /* bp:desktop */
  /* mijanka: manifest przykleja sie pod naglowkiem i schodzi do dolu zdjecia */
  .mw-about__split{ grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--mw-s5); }
  .mw-about__split > .mw-manifesto{ grid-column:1 / 7; grid-row:1; align-self:stretch; }
  .mw-about__split > .mw-about__photo{ grid-column:8 / 13; grid-row:1; align-self:center; }
  .mw-about__split--reverse > .mw-manifesto{ grid-column:7 / 13; }
  .mw-about__split--reverse > .mw-about__photo{ grid-column:1 / 6; }
  .mw-about__split .mw-manifesto__text{ position:sticky; top:calc(var(--mw-header-h) + var(--mw-page-pad)); }

  /* panorama: panie w srodku, teksty na ciemnych bokach, jada w dol z przewijaniem */
  .mw-about__people{ view-timeline:--mw-people; container-type:inline-size; }
  .mw-about__people::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, color-mix(in srgb, var(--mw-black) 75%, transparent), transparent 35% 65%, color-mix(in srgb, var(--mw-black) 75%, transparent)); }
  .mw-about__persons{ position:absolute; inset:auto 0 0; z-index:1; grid-template-columns:repeat(2, minmax(0, 22rem));
    justify-content:space-between; align-items:start; padding:var(--mw-page-pad); color:var(--mw-on-dark); }
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .mw-about__persons{ inset:0 0 auto; animation:mw-people-drift ease-in-out both; animation-timeline:--mw-people;
        animation-range:entry calc(16.8rem + 2 * var(--mw-page-pad)) entry 100%; } /* start: caly blok tekstu na ekranie */
    }
  }

  /* wartosci: wszystkie w jednym rzedzie */
  .mw-view .mw-about__values-list{ grid-auto-flow:row; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:var(--mw-s4);
    margin-inline:0; padding-inline:0; overflow:visible; } /* desktop: jeden rzad zamiast pasa */
  .mw-about__value .mw-about__value-text{ font-size:var(--mw-fs-base); }
}

@keyframes mw-person-in{
  from{ opacity:0; translate:var(--mw-person-from) 0; }
}

@keyframes mw-social-drift{
  to{ translate:-50% 0; } /* dwa identyczne komplety = petla bez szwu */
}

@keyframes mw-people-drift{
  from{ translate:0 0; }
  to{ translate:0 calc(100cqw * 2048 / 4600 - 100%); } /* ponytail: proporcje panoramy 4600x2048; inne zdjecie = zmien liczby */
}