/* O mnie — prototyp C2 145 02 O mnie (Stage 145), wartości 1:1.
   Układ: telefon < 1024 px (64em) — jedna kolumna, margines max(20 px, (100% − 600 px) / 2) jak mpx prototypu;
   komputer od 1024 px — siatka 12 kolumn / 24 px. Margines komputera jak pxv prototypu: 48 px poniżej 1280 px,
   76 px od 1280 px (80em), treść do 1800 px (--cap). Prototyp nie skaluje tej strony mnożnikami dużych ekranów
   (--h/--t/--s) — nagłówki rosną przez cqi, reszta jest stała; tak samo tutaj.
   Jednostki jak w fundamencie: tekst i miary tekstu w rem, odstępy i grafiki w px.
   Kroje: prototyp używa Spectral 400 w leadzie i w numerach kroków „Sposobu pracy” — witryna ma tylko Spectral 500
   (otwarta kwestia w raporcie Etapu B). */

/* Margines komputera = --px fundamentu (decyzja właściciela 2026-11-05: krawędzie treści w linii z Nav87 i stopką;
   prototyp podstron: skok 48 → 76 px przy 1280 px). */
.c2-om {
  --om-mx: max(20px, calc((100% - 37.5rem) / 2));
  --om-px: var(--px);
}

/* Zawijanie (h1–h3 balance, p/li pretty) — wspólna reguła base.css. Pozycje „Doświadczenia” i „Przygotowania”
   są tu elementami listy, a w prototypie blokami div — zawijają się zwykle (text-wrap: wrap), jak w prototypie. */
:where(.c2-om) :where(dl, dd) { margin: 0; }

/* etykieta sekcji: 600 12 / 13 px, .14em, wersaliki, petrol */
.c2-om-eyebrow { font: 600 .75rem var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-petrol); }
/* nagłówek sekcji: M 500 32/1.1, D clamp(40, 3.4cqi, 56)/1.06 */
.c2-om-h2 { font: 500 2rem/1.1 var(--f-serif); letter-spacing: -.01em; }

/* grafika wypełniająca ramkę (ramka przycina, Ruch „mask” animuje warstwę wewnątrz ramki — jak img w prototypie) */
.c2-om-fill, .c2-om-fill > picture { display: block; width: 100%; height: 100%; }
.c2-om-img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }

/* ===================================================================== 01 OSOBA
   Telefon: etykieta → nazwisko → lead → portret → wstęp → odnośnik → „Prawo i matematyka" (kolumna tekstu
   przezroczysta dla układu, portret wstawiony przez order). */
.c2-om-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 84px var(--om-mx) 48px;
}
.c2-om-hero__text, .c2-om-hero__intro { display: contents; }
.c2-om-hero__name { display: flex; flex-direction: column; gap: 8px; }
.c2-om-hero__h1 { font: 500 clamp(2.5rem, 11.4cqi, 3.25rem)/1.02 var(--f-serif); letter-spacing: -.015em; }
.c2-om-hero__br { display: none; }
.c2-om-hero__role { font: 500 1rem/1.45 var(--f-sans); color: var(--c-petrol); }
.c2-om-hero__line { display: none; }
/* lead (data-c2-lead — punkt pomiaru powiększonego tekstu w c2-site.test.js). Prototyp: Spectral 400 — w witrynie 500. */
.c2-om-hero__lead { font: 500 1.25rem/1.42 var(--f-serif); color: var(--c-ink); text-wrap: pretty; }
.c2-om-hero__portrait {
  order: 1;
  margin-top: 2px;
  aspect-ratio: 1 / 1;
  width: min(100%, 448px);
  border-radius: 0 72px 0 0;
  overflow: hidden;
  background: #D3DAD8;
}
.c2-om-hero__portrait > picture { display: block; width: 100%; height: 100%; }
.c2-om-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.c2-om-hero__p, .c2-om-hero__spec, .c2-om-pm { order: 2; }
.c2-om-hero__p { font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }
.c2 .c2-om-hero__spec {
  align-self: flex-start;
  margin-top: -4px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font: 600 1rem var(--f-sans);
  color: var(--c-petrol);
  text-underline-offset: 4px;
}

/* Prawo i matematyka */
.c2-om-pm {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 3px solid var(--c-petrol);
}
.c2-om-pm__head, .c2-om-pm__side { display: contents; }
.c2-om-pm__h { font: 500 1.5rem/1.22 var(--f-serif); color: var(--c-ink); text-wrap: balance; }
.c2-om-pm__dl { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; border-top: 1px solid var(--c-line); }
.c2-om-pm__row {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line-light);
}
.c2-om-pm__row dt { font: 600 .75rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.c2-om-pm__row dd { font: 500 .9375rem/1.45 var(--f-sans); }
.c2 .c2-om-pm__more {
  align-self: flex-start;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font: 600 .9375rem var(--f-sans);
  color: var(--c-petrol);
  text-underline-offset: 4px;
}

@media (min-width: 64em) {
  .c2-om-eyebrow { font-size: .8125rem; }
  .c2-om-h2 { font-size: clamp(2.5rem, 3.4cqi, 3.5rem); line-height: 1.06; }

  .c2-om-hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 24px;
    align-items: start;
    padding: calc(172px + var(--n87-top-extra, 0px)) var(--om-px) 104px;   /* + pasek narzędzi PL | EN (nav87.css) */
  }
  .c2-om-hero__text { grid-column: 1 / 8; grid-row: 1; display: flex; flex-direction: column; gap: 26px; max-width: 47.5rem; }
  .c2-om-hero__name { gap: 14px; }
  .c2-om-hero__h1 { font-size: clamp(3.625rem, 5.2cqi, 5.5rem); line-height: 1; letter-spacing: -.018em; }
  .c2-om-hero__br { display: inline; }
  .c2-om-hero__role { font-size: 1.1875rem; line-height: normal; }
  .c2-om-hero__line { display: block; width: 120px; height: 1px; background: var(--c-ink); }
  .c2-om-hero__lead { max-width: 40rem; font-size: 1.625rem; }
  .c2-om-hero__intro { display: flex; flex-direction: column; gap: 16px; }
  .c2-om-hero__p { max-width: 37.5rem; font-size: 1.125rem; }
  .c2 .c2-om-hero__spec { margin-top: 0; min-height: 32px; font-size: 1.0625rem; }
  .c2-om-hero__portrait {
    order: 0;
    grid-column: 8 / 13;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    max-height: 720px;
    margin-top: 8px;
    aspect-ratio: 4 / 5;
    border-radius: 0 120px 0 0;
  }
  .c2-om-hero__img { object-position: 50% 18%; }

  .c2-om-pm {
    order: 0;
    grid-column: 1 / 13;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px 24px;
    align-items: start;
    margin-top: 64px;
    padding-top: 26px;
  }
  .c2-om-pm__head { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 14px; }
  .c2-om-pm__h { max-width: 38.75rem; font-size: clamp(1.875rem, 2.5cqi, 2.5rem); line-height: 1.15; letter-spacing: -.01em; }
  .c2-om-pm__side { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
  .c2-om-pm__dl { display: flex; flex-direction: column; }
  .c2-om-pm__row { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 16px; padding: 13px 0; }
  .c2-om-pm__row dd { font-size: 1rem; }
  .c2 .c2-om-pm__more { font-size: 1rem; }
}
@media (min-width: 80em) { .c2-om-hero__portrait { margin-top: 40px; } }

/* ===================================================================== 02 DOŚWIADCZENIE */
.c2-om-exp {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 56px var(--om-mx) 48px;
  background: var(--c-surface);
}
.c2-om-exp__head { display: contents; }
.c2-om-exp__intro { font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }
.c2-om-exp__fig {
  margin-top: 6px;
  width: min(100%, 560px);
  aspect-ratio: 1448 / 1086;
  border-radius: 0 24px 0 0;
  /* wariant B (zatwierdzony 2026-11-07): kadr R1 bez wygaszania krawędzi — cienka linia (::after) i miękki cień
     opakowania; ilustracja, proporcje i kompozycja bez zmian; obraz przycina wewnętrzna warstwa .c2-om-fill */
  position: relative;
  box-shadow: var(--c2-sh-media-box);
}
.c2-om-exp__fig > .c2-om-fill { position: relative; display: block; height: 100%; border-radius: inherit; overflow: hidden; }
/* linia należy do odsłanianej warstwy (Ruch „mask”), a cień w trakcie odsłaniania rzuca filtr opakowania —
   podąża za odsłoniętą częścią obrazu, jak w kadrach Stage 147 (glebia.css); po odsłonięciu — box-shadow */
.c2-om-exp__fig:has([data-ruch-anim]) { box-shadow: none; filter: var(--c2-fx-media); }
.c2-om-exp__fig > .c2-om-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--c2-kadr-line);
  pointer-events: none;
}
.c2-om-exp__list {
  list-style: none;
  margin-top: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-ink);
}
/* telefon: numer i tytuł w jednym wierszu (linia bazowa), pod spodem opis i odnośniki */
.c2-om-exp__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
  text-wrap: wrap;
}
.c2-om-exp__n { font: 600 .8125rem var(--f-sans); letter-spacing: .06em; color: var(--c-petrol); }
.c2-om-exp__t { font: 500 1.375rem/1.22 var(--f-serif); }
.c2-om-exp__d { grid-column: 1 / -1; font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }
.c2-om-exp__links {
  grid-column: 1 / -1;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  text-wrap: wrap;
}
.c2-om-exp__lk { font: 600 .6875rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.c2 .c2-om-exp__links a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font: 600 .9375rem/1.5 var(--f-sans);
  color: var(--c-petrol);
  text-underline-offset: 4px;
}

@media (min-width: 64em) {
  .c2-om-exp {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 24px;
    align-items: start;
    padding: 112px var(--om-px);
  }
  .c2-om-exp__head { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 18px; padding-right: 24px; }
  .c2-om-exp__intro { font-size: 1.0625rem; }
  .c2-om-exp__fig {
    flex: none;
    margin-top: 40px;
    width: min(100%, 540px, max(240px, calc(468px + (100cqi - 1440px) * .2)));
    border-radius: 0 64px 0 0;
  }
  .c2-om-exp__list { grid-column: 6 / 13; margin-top: 0; }
  /* komputer: numer w kolumnie 72 px, tytuł / opis / odnośniki w drugiej kolumnie */
  .c2-om-exp__item { grid-template-columns: 72px minmax(0, 1fr); gap: 10px 24px; align-items: start; padding: 30px 0; }
  .c2-om-exp__n { grid-row: 1; font-size: .875rem; line-height: 1.9; }
  .c2-om-exp__t { font-size: 1.625rem; line-height: 1.2; }
  .c2-om-exp__d, .c2-om-exp__links { grid-column: 2; }
  .c2-om-exp__d { max-width: 40rem; font-size: 1.0625rem; }
  .c2-om-exp__links { margin-top: 6px; gap: 6px 22px; }
  .c2 .c2-om-exp__links a { min-height: 0; }
}

/* ===================================================================== 03 SPOSÓB PRACY */
.c2-om-met {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 56px var(--om-mx) 48px;
}
.c2-om-met__head, .c2-om-met__ttl { display: contents; }
.c2-om-met__intro { font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }
.c2-om-met__steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-ink);
}
/* telefon: numer w kolumnie 52 px obok tytułu i opisu */
.c2-om-met__step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--c-line);
}
.c2-om-met__n { grid-row: 1 / span 2; font: 500 2.25rem/1 var(--f-serif); color: var(--c-petrol); }
.c2-om-met__t { font: 500 1.375rem/1.22 var(--f-serif); }
.c2-om-met__d { grid-column: 2; font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }

@media (min-width: 64em) {
  .c2-om-met { gap: 64px; padding: 112px var(--om-px) 120px; }
  .c2-om-met__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .c2-om-met__ttl { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 16px; }
  .c2-om-met__intro { grid-column: 8 / 13; font-size: 1.125rem; }
  .c2-om-met__steps { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c2-om-met__step { display: flex; flex-direction: column; gap: 18px; padding: 36px 40px 8px; border-bottom: 0; }
  .c2-om-met__step:first-child { padding-left: 0; }
  .c2-om-met__step + .c2-om-met__step { border-left: 1px solid var(--c-line); }
  .c2-om-met__n { font-size: 4rem; }
  .c2-om-met__t { font-size: 1.6875rem; line-height: 1.2; }
  .c2-om-met__d { max-width: 25rem; font-size: 1.0625rem; line-height: 1.7; }
}

/* ===================================================================== 04 PRZYGOTOWANIE (ciemne)
   Nazwa uczelni: --m (telefon, pod nazwą) albo --d (komputer, prawa kolumna) — kolejność czytania jak w prototypie. */
.c2-om-prep {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 56px var(--om-mx) 52px;
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.c2-om-prep__head { display: contents; }
.c2-om-prep .c2-om-eyebrow { color: var(--c-dark-num); }
.c2-om-prep__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-axis);
}
.c2-om-prep__row { display: flex; flex-direction: column; gap: 5px; padding: 16px 0 18px; border-bottom: 1px solid var(--c-dark-line); text-wrap: wrap; }
.c2-om-prep__main { display: contents; }
.c2-om-prep__t { font: 500 1.25rem/1.25 var(--f-serif); color: #FFFFFF; }
.c2-om-prep__i { font: 500 .875rem/1.5 var(--f-sans); color: var(--c-dark-num); }
.c2-om-prep__i--d { display: none; }
.c2-om-prep__x { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-on-dark-body); }

/* Matematyka jako sposób myślenia — #matematyka: przewinięcie jak w prototypie (120 px od góry na komputerze,
   84 px na telefonie) = scroll-padding-top Nav87 (78 / 82 / 110 px) + scroll-margin-top */
.c2-om-mat {
  scroll-margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 3px solid var(--c-dark-num);
}
@media (min-width: 23.4375em) { .c2-om-mat { scroll-margin-top: 2px; } }
.c2-om-mat__t { font: 500 1.4375rem/1.22 var(--f-serif); }
.c2-om-mat__fig { flex: none; margin: 2px 0 4px; width: min(100%, 560px); aspect-ratio: 3 / 2; border-radius: 0 24px 0 0; overflow: hidden; }
.c2-om-mat__p { font: 400 1rem/1.65 var(--f-sans); color: var(--c-on-dark-body); }

@media (min-width: 64em) {
  .c2-om-prep {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 72px 24px;
    padding: 112px var(--om-px) 120px;
  }
  .c2-om-prep__head { grid-column: 1 / 7; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }
  .c2-om-prep__list { grid-column: 1 / 8; grid-row: 2; margin: 0; }
  .c2-om-prep__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 32px; padding: 22px 0 24px; }
  .c2-om-prep__main { display: flex; flex-direction: column; gap: 6px; }
  .c2-om-prep__t { font-size: 1.375rem; }
  .c2-om-prep__i--m { display: none; }
  .c2-om-prep__i--d { display: block; font-size: .9375rem; }
  .c2-om-prep__x { text-wrap: pretty; }

  .c2-om-mat { grid-column: 9 / 13; grid-row: 2; align-self: start; scroll-margin-top: 38px; gap: 18px; margin-top: 0; padding-top: 28px; }
  .c2-om-mat__t { font-size: 1.75rem; line-height: 1.2; }
  .c2-om-mat__fig { margin: 4px 0; width: 100%; max-width: 720px; border-radius: 0 64px 0 0; }
  .c2-om-mat__p { font-size: 1.0625rem; line-height: 1.7; }
  .c2-om-mat__p--1 { max-width: 36em; }
}
@media (min-width: 73.75em) { .c2-om-mat { scroll-margin-top: 10px; } }

/* ===================================================================== 05 KONTAKT */
.c2-om-cta { padding: 56px var(--om-mx) 64px; }
.c2-om-cta__in { display: flex; flex-direction: column; gap: 18px; }
.c2-om-cta__text { display: contents; }
.c2-om-cta__head { display: flex; flex-direction: column; gap: 12px; }
.c2-om-cta__eyebrow { letter-spacing: .12em; }
.c2-om-cta__p { font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }
.c2-om-cta__actions { display: flex; flex-direction: column; gap: 6px; }
.c2-om-cta__btn { max-width: 420px; }
/* flex-wrap: przy powiększonym tekście numer przechodzi do nowego wiersza (w zwykłym rozmiarze bez zmian) */
.c2 .c2-om-tel, .c2 .c2-om-tel:hover {
  min-height: 44px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  font: 500 1rem var(--f-sans);
  color: var(--c-ink);
  text-decoration: none;
}
.c2-om-tel__ic { flex: none; margin: 0 7px 0 4px; }
.c2-om-tel__num { font-weight: 600; }
.c2-om-cta__media { margin-top: 6px; }
.c2-om-cta__img { width: 100%; aspect-ratio: 3 / 2; border-radius: 0 28px 0 0; overflow: hidden; background: var(--c-bg); }

@media (min-width: 64em) {
  .c2-om-cta { padding: 112px var(--om-px) 120px; }
  .c2-om-cta__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 64px; align-items: center; }
  .c2-om-cta__text { display: flex; flex-direction: column; gap: 24px; max-width: 36.25rem; }
  .c2-om-cta__head { gap: 18px; }
  .c2-om-cta__p { padding-top: 16px; border-top: 1px solid var(--c-line-light); font-size: 1.125rem; line-height: 1.6; }
  .c2-om-cta__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-top: 4px; }
  .c2-om-cta__btn { max-width: none; padding: 0 36px; }
  .c2-om-cta__media { margin-top: 0; display: flex; justify-content: flex-end; }
  .c2-om-cta__img { max-width: 760px; border-radius: 0 64px 0 0; }
}