/* BBMG v2: komponenty tylko strony O mnie (ładowany po bloki.css wyłącznie w o-mnie.html).
   Kolory i fonty z tokens.css, zmienne serwisu z shared.css. Wspólne komponenty stoją w bloki.css
   (hero podstron, .cytaty). Pierwsze bloki (.para i dwa niżej) przeszły tu z bloki.css bez zmian, przed
   regułami strony, żeby kolejność kaskady została ta sama. */

/* ---------- Dwa albo trzy bloki obok siebie (Gdzie pracuję) ---------- */
.para { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 4vw, 64px); }
.para h3 { font: 500 clamp(24px, 2.2vw, 30px)/1.15 var(--font-display); color: var(--deep-teal); }
.para p { margin-top: 10px; color: var(--ink-60); max-width: 52ch; }
@media (max-width: 760px) { .para { grid-template-columns: 1fr; } }

/* ---------- Hero: fakty i zdjęcie ---------- */
.hero-sub__fakty { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 28px; }
/* v3: na telefonie fakty zawsze jeden pod drugim. Z zawijaniem o tym, czy dwa fakty po 18ch mieszczą się obok siebie,
   decydowała szerokość znaku fontu, więc po wczytaniu Outfit układ się przełamywał (Lighthouse: CLS 0,16 na
   figure.hero-sub__foto, które jechało w dół). */
@media (max-width: 600px) { .hero-sub__fakty { flex-direction: column; gap: 20px; } }
.hero-sub__fakty div { border-top: 2px solid var(--amber); padding-top: 10px; max-width: 18ch; font: 400 15px/1.4 var(--font-body); color: var(--ink-60); }
/* Skrót `font:` (specyficzność 0,1,1) zeruje cyfry z .liczby (0,1,0), więc cyfry tytułowe dopisujemy tu, po skrócie:
   bez tego „2004” w hero O mnie wychodzi w cyfrach nautycznych Cormorantu („1” jak „I”, „0” niższe od „8”). */
.hero-sub__fakty b { display: block; font: 500 clamp(28px, 2.6vw, 38px)/1 var(--font-display); color: var(--deep-teal); margin-bottom: 6px; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.hero-sub__foto { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--deep-teal); margin: 0; }
.hero-sub__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-sub__foto figcaption { position: absolute; left: 16px; bottom: 16px; background: rgba(7,48,42,.88); color: var(--cream); padding: 12px 16px; border-radius: 10px; font: 400 14px/1.4 var(--font-body); }
.hero-sub__foto figcaption b { display: block; font: 600 17px/1.3 var(--font-body); }

/* ---------- O mnie: światy, kariera, zasady ---------- */
.swiaty { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: 36px; list-style: none; }
.swiaty h3 { font: 400 clamp(28px, 2.6vw, 38px)/1.05 var(--font-display); color: var(--deep-teal); border-top: 2px solid var(--amber); padding-top: 14px; }
.swiaty p { margin-top: 10px; color: var(--ink-60); }
.zasady { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px 40px; margin-top: 36px; list-style: none; }
/* v3 (runda 4): próg Cormoranta 26 px; „Człowiek decyduje, AI wykonuje.” przy 22 px wyglądało mniej niż tekst pod nim. */
.zasady h3 { font: 500 clamp(26px, 2.2vw, 32px)/1.2 var(--font-display); color: var(--deep-teal); }
.zasady p { margin-top: 8px; color: var(--ink-60); }
@media (max-width: 760px) { .swiaty { grid-template-columns: 1fr; } }

/* ---------- Hero: zdjęcie ---------- */
/* Zdjęcie na stołku jest pionowe (2:3), a ramka .hero-sub__foto ma proporcje ok. 1:1,1, więc przy środkowym
   położeniu przycięłoby głowę. Kadr trzymamy przy górze: głowa z zapasem, uciętych jest kilka dolnych centymetrów
   nóg stołka. */
.hero-sub__foto img { object-position: 50% 10%; }

/* ---------- Zasady: numer nad tytułem ---------- */
/* Numer (<small aria-hidden>) to ozdoba kolejności, nie treść tytułu: czytnik ekranu czyta sam tytuł. */
.zasady h3 small { display: block; margin-bottom: 8px; font: 600 12px/1 var(--font-body); letter-spacing: .16em; color: var(--ink-60); }

/* ---------- Projekty: trzy kolumny ---------- */
/* .para z bloki.css to dwie kolumny; trzy projekty w dwóch zostawiłyby sierotę, więc tu trzy. Etykieta obszaru
   (automatyzacja, procesy i ERP, szkolenia) stoi pod nazwą firmy jak podtytuł. */
.para--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.para .para__obszar { margin-top: 6px; font: 600 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--deep-teal); }
.para .para__obszar + p { margin-top: 14px; }
@media (max-width: 900px) { .para--3 { grid-template-columns: 1fr; } }

/* ---------- Kariera rok po roku (infografika nad listą etapów) ---------- */
/* Jedna kropka to jeden rok (od 2004 do bieżącego), jeden wiersz to jeden etap. Cały rysunek jest aria-hidden: treść dla ludzi
   i agentów stoi w osi .droga pod nim. W HTML jest stan końcowy (kropki zapalone do bieżącego roku, licznik
   i głowica na nim), a o-mnie-kropki.js przy pierwszym wejściu w widok przewija lata od 2004 i potem (tylko mysz) pozwala
   przewijać je kursorem. Bez JS, przy ograniczonym ruchu i bez IntersectionObserver zostaje gotowy obraz.
   Kropka .kariera-k__d ma stały rozmiar pudełka 12 x 12 px; widoczny punkt to ::before skalowane transformacją
   (mała szara kropka kontra pełna), więc zapalanie lat nie zmienia układu i nie przesuwa treści pod spodem.
   Liczbę kolumn (--lata) podaje atrybut style w HTML; raz w roku przestawia go scripts/nowy_rok.py razem z kropkami.
   Kolumny siatki to minmax(0, 1fr), nie 1fr: etykiety osi są nowrap i bez zera rozpychałyby kolumny poza ekran. */
.kariera-k { --nazwy: 230px; margin-top: clamp(32px, 3.4vw, 52px); }
.kariera-k__rok { font: 500 clamp(56px, 6vw, 88px)/.9 var(--font-display); letter-spacing: -.03em; color: var(--deep-teal); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.kariera-k__siatka { --kol: calc(var(--lata) - 1); position: relative; display: grid; grid-template-columns: var(--nazwy) repeat(var(--lata), minmax(0, 1fr)); align-items: center; row-gap: 14px; margin-top: 22px; }
/* Celownik tylko wtedy, gdy kursor naprawdę przewija lata (mysz, bez ograniczonego ruchu): klasę dodaje o-mnie-kropki.js. */
.kariera-k__siatka--kursor { cursor: crosshair; }
/* Wiersz nie ma własnego pudełka (display: contents), więc wyróżnienie najechanego wiersza idzie przez jego dzieci. */
.kariera-k__wiersz { display: contents; }
.kariera-k__nazwa { padding-right: 12px; font: 500 15px/1.25 var(--font-body); color: var(--deep-teal); transition: opacity .3s ease; }
.kariera-k__nazwa small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-60); }
.kariera-k__d { justify-self: center; width: 12px; height: 12px; transition: opacity .3s ease; }
/* 26 kolumn: przy 360 px kolumna ma 12,3 px, więc kropki 12 px zlewałyby się w pasek. */
@media (max-width: 380px) { .kariera-k__d { width: 9px; height: 9px; } }
.kariera-k__d::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: rgba(14,83,74,.2); transform: scale(.42); transition: transform .3s ease, background-color .3s ease; }
.kariera-k__d.on::before { background: var(--deep-teal); transform: none; }
.kariera-k__d.on.am::before { background: var(--amber); }
.kariera-k__siatka.dim .kariera-k__wiersz:not(.hover) > * { opacity: .3; }
/* Głowica stoi nad kolumną bieżącego roku. --kol (0 = 2004, --lata - 1 = bieżący rok, domyślnie stan końcowy) przestawia JS, a pozycję liczy CSS z tej samej
   geometrii co siatka (kolumna nazw + --lata równych kolumn), więc nie trzeba odczytywać układu ani nasłuchiwać resize. */
.kariera-k__glowica { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--amber); left: calc(var(--nazwy) + (100% - var(--nazwy)) * (var(--kol) + .5) / var(--lata)); transition: left .12s linear; pointer-events: none; }
/* Oś lat pod siatką, w tych samych kolumnach co kropki (margines = kolumna nazw). Etykieta leży w kolumnie swojego roku
   (grid-column inline) i jest wyśrodkowana nad kropką. */
.kariera-k__os { display: grid; grid-template-columns: repeat(var(--lata), minmax(0, 1fr)); margin: 10px 0 0 var(--nazwy); border-top: 1px solid rgba(14,83,74,.2); padding-top: 8px; }
.kariera-k__os span { justify-self: center; font: 600 12px/1 var(--font-body); color: var(--ink-60); white-space: nowrap; font-variant-numeric: lining-nums; }
/* Telefon: nazwa wiersza stoi nad rzędem kropek, kolumna nazw znika (geometria głowicy i osi liczy się od zera),
   kropki są mniejsze (9 px), a na osi zostają tylko lata, które się nie nakładają (2016 i 2024 leżą dwie kolumny od
   sąsiadów, a kolumna ma poniżej 16 px). */
@media (max-width: 900px) {
  .kariera-k { --nazwy: 0px; }
  .kariera-k__siatka { grid-template-columns: repeat(var(--lata), minmax(0, 1fr)); row-gap: 6px; }
  .kariera-k__nazwa { grid-column: 1 / -1; margin-top: 8px; }
  .kariera-k__d.on::before { transform: scale(.75); }
  .kariera-k__d::before { transform: scale(.34); }
}
@media (max-width: 560px) { .kariera-k__os .tylko-szeroki { display: none; } }

/* ---------- Droga zawodowa: oś pod siatką kariery ---------- */
/* Linia pośrodku, etapy na przemian (na telefonie linia z lewej). Każdy etap: puste kółko-węzeł, łącznik z czterech
   kropek do treści, lata, duża nazwa, kropki lat (jedna kropka to jeden rok, bursztyn: doktorat i BBMG) i opis.
   Warstwy od dołu: linia z kropek (.droga__linia, budowana przez o-mnie-kropki.js w odcinkach od kółka do kółka,
   z przerwą 6 px, więc nigdy nie wchodzi pod węzeł), potem lista. W HTML i CSS stoi stan końcowy: wszystko
   zapalone. Przy ruchu skrypt dodaje .droga--gra i zapala etap (.on), gdy czubek linii (62% wysokości okna)
   dojdzie do jego węzła: kropki osi po kolei, kółko wypełnia się i raz pulsuje, kropki lat po kolei (--d w HTML).
   Bez JS stoi prosta kropkowana linia z ::after etapów (skrypt ją chowa, .droga--zywa); węzeł leży nad nią
   (z-index) i ma tło sekcji, więc linia nie wchodzi na kółko. */
.droga { position: relative; margin-top: clamp(40px, 4vw, 64px); }
/* Bez JS: odcinek kropkowanej linii w każdym etapie (poza ostatnim) od jego kółka (środek 37 px od góry) do kółka
   następnego etapu, który zaczyna się 40 px przed końcem tego (stąd bottom: 3 px). */
.droga:not(.droga--zywa) .droga__etap:not(:last-child)::after { content: ''; position: absolute; top: 37px; bottom: 3px; right: -2px; width: 4px; background: radial-gradient(circle, var(--deep-teal) 1.6px, transparent 2px) 0 0 / 4px 11px repeat-y; }
.droga:not(.droga--zywa) .droga__etap:nth-child(even):not(:last-child)::after { right: auto; left: -2px; }
.droga__linia { position: absolute; inset: 0; pointer-events: none; }
.droga__pkt { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--deep-teal); transform: scale(1.25); transition: background-color .25s ease, transform .25s ease; }
.droga--gra .droga__pkt:not(.on) { background: rgba(14,83,74,.22); transform: none; }
/* Ustawienie stanu startowego bez przejść (skrypt zdejmuje tę klasę w następnej klatce). */
.droga--bez-przejsc *, .droga--bez-przejsc *::before, .droga--bez-przejsc *::after { transition: none !important; animation: none !important; }
.droga__lista { list-style: none; }
.droga__etap { position: relative; width: 50%; padding: 18px 56px 38px 0; text-align: right; transition: opacity .25s ease; }
.droga__etap:nth-child(even) { margin-left: 50%; padding: 18px 0 38px 56px; text-align: left; }
.droga__etap + .droga__etap { margin-top: -40px; }
.droga.dim .droga__etap:not(.hover) { opacity: .4; }

.droga__wezel { position: absolute; z-index: 1; top: 27px; right: -10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--deep-teal); background: var(--teal-soft); transition: border-color .35s ease; }
.droga__etap:nth-child(even) .droga__wezel { right: auto; left: -10px; }
.droga__wezel::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--deep-teal); transition: transform .45s cubic-bezier(.3,.7,.2,1.25); }
.droga__wezel::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--deep-teal); opacity: 0; }
.droga__wezel--am { border-color: var(--amber); }
.droga__wezel--am::after { background: var(--amber); }
.droga__wezel--am::before { border-color: var(--amber); }
.droga--gra .droga__etap:not(.on) .droga__wezel { border-color: rgba(14,83,74,.26); }
.droga--gra .droga__etap:not(.on) .droga__wezel::after { transform: scale(0); }
.droga--gra .droga__etap.on .droga__wezel::before { animation: droga-puls 1s ease-out; }
@keyframes droga-puls { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }

.droga__lacznik { position: absolute; top: 35px; right: 16px; width: 29px; display: flex; flex-direction: row-reverse; justify-content: space-between; }
.droga__etap:nth-child(even) .droga__lacznik { right: auto; left: 16px; flex-direction: row; }
.droga__lacznik i { width: 4px; height: 4px; border-radius: 50%; background: var(--deep-teal); transition: background-color .25s ease; }
.droga--gra .droga__etap:not(.on) .droga__lacznik i { background: rgba(14,83,74,.22); }
.droga--gra .droga__etap.on .droga__lacznik i:nth-child(2) { transition-delay: 70ms; }
.droga--gra .droga__etap.on .droga__lacznik i:nth-child(3) { transition-delay: 140ms; }
.droga--gra .droga__etap.on .droga__lacznik i:nth-child(4) { transition-delay: 210ms; }

.droga__rok { font: 600 14px/1.3 var(--font-body); letter-spacing: .08em; color: var(--deep-teal); }  /* ciemny bursztyn na jasnej zieleni ma 2,95:1 */
.droga__rok span { font-weight: 500; letter-spacing: 0; color: var(--ink-60); }
.droga__nazwa { margin-top: 6px; font: 500 clamp(30px, 2.8vw, 40px)/1.08 var(--font-display); letter-spacing: -.01em; color: var(--deep-teal); text-wrap: balance; }
.droga__kropki { display: flex; flex-wrap: wrap; gap: 6px; max-width: 280px; margin-top: 16px; }
.droga__etap:nth-child(odd) .droga__kropki { margin-left: auto; justify-content: flex-end; }
.droga__kropki i { width: 10px; height: 10px; border-radius: 50%; background: var(--deep-teal); box-shadow: inset 0 0 0 1.5px var(--deep-teal); transition: background-color .3s ease, box-shadow .3s ease; }
.droga__kropki i.am { background: var(--amber); box-shadow: inset 0 0 0 1.5px var(--amber); }
.droga--gra .droga__etap:not(.on) .droga__kropki i { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(14,83,74,.3); }
.droga--gra .droga__etap:not(.on) .droga__kropki i.am { box-shadow: inset 0 0 0 1.5px rgba(255,176,55,.6); }
.droga--gra .droga__etap.on .droga__kropki i { transition-delay: var(--d); }
.droga__opis { display: inline-block; max-width: 46ch; padding-top: 10px; font: 400 17px/1.65 var(--font-body); color: var(--ink-60); }

@media (max-width: 760px) {
  .droga:not(.droga--zywa) .droga__etap:not(:last-child)::after, .droga:not(.droga--zywa) .droga__etap:nth-child(even):not(:last-child)::after { left: 13px; right: auto; bottom: -37px; }
  .droga__etap, .droga__etap:nth-child(even) { width: auto; margin-left: 0; padding: 18px 0 30px 56px; text-align: left; }
  .droga__etap + .droga__etap { margin-top: 0; }
  .droga__wezel, .droga__etap:nth-child(even) .droga__wezel { left: 5px; right: auto; }
  .droga__etap:nth-child(odd) .droga__kropki { margin-left: 0; justify-content: flex-start; }
  .droga__lacznik, .droga__etap:nth-child(even) .droga__lacznik { left: 31px; right: auto; width: 18px; flex-direction: row; }
  .droga__lacznik i:nth-child(n + 4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .droga__pkt, .droga__wezel, .droga__wezel::after, .droga__lacznik i, .droga__kropki i { transition: none; }
  .droga__wezel::before { animation: none !important; }
}

/* ---------- v3 (20.10.2026, runda 4): hierarchia nagłówków na telefonie ---------- */
@media (max-width: 900px) {
  .swiaty h3, .droga__nazwa, .para h3 { font-size: 26px; }
}