/* Specjalizacje (indeks) — prototyp C2 145 03 Specjalizacje (Stage 145), wartości 1:1.
   Układ: telefon < 1024 px (64em) — margines max(20 px, (100% − 600 px) / 2); komputer — margines --px fundamentu
   (48 → 76 px, treść do 1800 px), siatka kart 2 kolumny, od 1280 px (80em) 3 kolumny. Od 1440 px skala dużych
   ekranów jak w prototypie (--h/--t/--s = tokeny --kh/--kt/--ks): V · m = V + V · --k…
   Rezerwa na Nav87 (navH prototypu: 58 / 62 / 86 px) = --nav-space z templates.css (.c2-page).
   Jednostki jak w fundamencie: tekst i miary tekstu w rem, odstępy i grafiki w px. */

.c2-hub { --hub-mx: max(20px, calc((100% - 37.5rem) / 2)); }

/* Kotwice kart i kontaktu: przewinięcie jak w prototypie (112 px od góry od 1180 px, 84 px poniżej) =
   scroll-padding-top Nav87 (78 / 82 / 110 px) + scroll-margin-top. Odnośnik „W razie wątpliwości…” — płynnie. */
.c2-hub-item, .c2-hub-alias, .c2-hub-cta { scroll-margin-top: 6px; }
@media (min-width: 23.4375em) { .c2-hub-item, .c2-hub-alias, .c2-hub-cta { scroll-margin-top: 2px; } }
@media (prefers-reduced-motion: no-preference) { html:has(.c2-hub) { scroll-behavior: smooth; } }

/* ===================================================================== 01 OTWARCIE
   Telefon: tekst, pod nim pas grafiki (kadr: x od 30% szerokości obrazu, dół na 86% wysokości).
   Komputer: grafika przy prawej krawędzi (wysokość sekcji, proporcje 3 : 2), tekst przy dolnej krawędzi. */
.c2-hub-hero { display: flex; flex-direction: column; background: var(--c-surface); }
.c2-hub-hero__text { display: flex; flex-direction: column; padding: calc(var(--nav-space) + 20px) var(--hub-mx) 0; }
.c2-hub-crumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 500 .875rem var(--f-sans);
  color: var(--c-muted);
}
.c2 .c2-hub-crumbs__a, .c2 .c2-hub-crumbs__a:hover { min-height: 44px; display: flex; align-items: center; color: var(--c-muted); text-decoration: none; }
.c2-hub-crumbs__sep { color: #9AA7A6; }
.c2-hub-crumbs__cur { color: var(--c-ink); }
.c2-hub-hero__h1 {
  margin-top: 6px;
  font: 500 clamp(2.375rem, calc(2.375rem + (100cqi - 320px) * .1), 3rem)/1 var(--f-serif);
  letter-spacing: -.02em;
}
/* lead (data-c2-lead — punkt pomiaru powiększonego tekstu w c2-site.test.js) */
.c2-hub-hero__lead { margin-top: 16px; font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2 .c2-hub-hero__unsure, .c2 .c2-hub-hero__unsure:hover {
  align-self: flex-start;
  margin-top: 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font: 600 .9375rem var(--f-sans);
  color: var(--c-petrol);
  text-underline-offset: 5px;
}
.c2-hub-hero__media {
  --bh: clamp(170px, 54cqi, 300px);
  order: 1;
  position: relative;
  width: 100%;
  height: min(var(--bh), max(150px, 42svh));
  margin-top: 6px;
  overflow: hidden;
  background: var(--c-surface);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
@media (min-width: 37.5em) { .c2-hub-hero__media { --bh: clamp(300px, 40cqi, 340px); } }
/* prototyp: obraz o szerokości w / 0,7 przesunięty o −30% w lewo, dół = min(ih − bh, 0,14 · ih) pod ramką.
   Tu ramka obrazu ma szerokość ekranu i wysokość ih = w / 0,7 · 2/3, a object-fit: cover (skala z wysokości = w / 0,7)
   z wyrównaniem do prawej daje ten sam kadr — bez elementu wystającego poza ekran. */
.c2-hub-hero__img {
  --ih: calc(100cqi / .7 * 2 / 3);
  position: absolute;
  left: 0;
  bottom: calc(-1 * min(var(--ih) - var(--bh), var(--ih) * .14));
  display: block;
  width: 100%;
  max-width: none;
  height: var(--ih);
  object-fit: cover;
  object-position: 100% 50%;
}

@media (min-width: 64em) {
  .c2-hub-hero {
    position: relative;
    overflow: hidden;
    justify-content: flex-end;
    min-height: clamp(500px, 37cqi, 660px);
    padding: calc(var(--nav-space) + 40px + 40 * var(--ks)) var(--px) calc(64px + 64 * var(--ks));
  }
  .c2-hub-hero__media {
    order: 0;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
  }
  .c2-hub-hero__img {
    top: 0;
    bottom: 0;
    left: auto;
    right: max(0px, calc((100cqi - 1920px) / 2));
    width: auto;
    max-width: 100%;   /* przy zwykłym tekście nie ogranicza (1,5 · wysokość < szerokość); przy bardzo wysokiej sekcji kadr zamiast wyjścia poza ekran */
    height: 100%;
    aspect-ratio: 3 / 2;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
  .c2-hub-hero__text { position: relative; max-width: 29.375rem; padding: 0; }
  .c2-hub-crumbs__list { gap: 10px; }
  @media (hover: hover) { .c2 .c2-hub-crumbs__a:hover { color: var(--c-petrol); } }
  .c2-hub-hero__h1 {
    margin-top: calc(10px + 10 * var(--ks));
    line-height: .98;
    font-size: calc(clamp(4rem, calc(4rem + (100cqi - 64rem) * 28 / 416), 5.75rem) + 92 * var(--kh));
  }
  .c2-hub-hero__lead {
    margin-top: calc(24px + 24 * var(--ks));
    max-width: min(27.5rem, calc(37cqi - 48px));
    font-size: calc(clamp(1.0625rem, calc(1.0625rem + (100cqi - 64rem) / 416), 1.125rem) + 18 * var(--kt));
  }
  .c2 .c2-hub-hero__unsure, .c2 .c2-hub-hero__unsure:hover { margin-top: calc(8px + 8 * var(--ks)); font-size: calc(1rem + 16 * var(--kt)); }
  @media (hover: hover) { .c2 .c2-hub-hero__unsure:hover { color: var(--c-ink); } }
}
@media (min-width: 80em) {
  .c2-hub-hero__text { max-width: min(38.75rem, 44cqi); }
  .c2-hub-hero__lead { max-width: calc(33.75rem + 540 * var(--kt)); }
}

/* ===================================================================== 02 INDEKS
   Winieta: kadr prototypu (frame2: background-size z · 100%, background-position px py) na <img>. Ramka obrazu ma
   szerokość winiety i wysokość obrazu po powiększeniu (z · szerokość · proporcja), więc object-fit: cover skaluje
   obraz dokładnie o z, a object-position (x) wybiera kadr w poziomie; w pionie ramkę przesuwa top/translate
   (py% wysokości winiety minus py% własnej wysokości). Obraz nie wystaje w poziomie poza winietę.
   Komputer: winieta 16 : 9 nad tytułem (wartości stałe na kartę: --zd, --pxd, --pyd, maska wg --fxd).
   Telefon: winieta w prawym górnym rogu, 52% szerokości karty × clamp(108, 31%, 150) px — powiększenie i położenie
   liczone w CSS z tych wymiarów (--zm, --fxm, --fym, --ar = wysokość/szerokość obrazu), jak frame2 w prototypie. */
.c2-hub-item--01 { --zd: 112%; --pxd: 50%; --pyd: 62.1%; --fxd: 50%; --ar: .667; --zm: 1.55; --fxm: .46; --fym: .57; }
.c2-hub-item--02 { --zd: 108%; --pxd: 100%; --pyd: 82.7%; --fxd: 62%; --ar: .75; --zm: 1.5; --fxm: .66; --fym: .62; }
.c2-hub-item--03 { --zd: 108%; --pxd: 100%; --pyd: 23.8%; --fxd: 66%; --ar: .75; --zm: 1.35; --fxm: .74; --fym: .4; }
.c2-hub-item--04 { --zd: 100%; --pxd: 50%; --pyd: 50%; --fxd: 52%; --ar: 1; --zm: 1.25; --fxm: .5; --fym: .48; }
.c2-hub-item--05 { --zd: 112%; --pxd: 100%; --pyd: 29.8%; --fxd: 58%; --ar: .667; --zm: 1.5; --fxm: .6; --fym: .42; }
.c2-hub-item--06 { --zd: 100%; --pxd: 50%; --pyd: 72.9%; --fxd: 50%; --ar: 1; --zm: 1.22; --fxm: .42; --fym: .6; }
.c2-hub-item--07 { --zd: 100%; --pxd: 50%; --pyd: 45.4%; --fxd: 50%; --ar: 1; --zm: 1.15; --fxm: .5; --fym: .5; }
.c2-hub-item--08 { --zd: 112%; --pxd: 100%; --pyd: 62.1%; --fxd: 60%; --ar: .667; --zm: 1.55; --fxm: .55; --fym: .56; }
.c2-hub-item--09 { --zd: 100%; --pxd: 50%; --pyd: 68.3%; --fxd: 55%; --ar: 1; --zm: 1.9; --fxm: .75; --fym: .38; }

.c2-hub-index { padding: 0 var(--hub-mx) 40px; background: var(--c-surface); }
.c2-hub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.c2-hub-item { position: relative; }
.c2-hub-item + .c2-hub-item { margin-top: 10px; }
.c2-hub-item:nth-child(3n + 4) { margin-top: 22px; }
.c2-hub-alias { position: absolute; top: 0; }

.c2 .c2-hub-tile {
  --tb: #F1F2EF;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
  background: var(--tb);
  border-radius: 0 20px 0 0;
  overflow: hidden;
  color: var(--c-ink);
  text-decoration: none;
}
.c2 .c2-hub-tile:active { --tb: #E6EEEB; }
.c2-hub-vig {
  --vw: calc(.52 * min(37.5rem, 100cqi - 40px));
  --vh: clamp(108px, 31cqi, 150px);
  position: absolute;
  top: 0;
  right: 0;
  width: var(--vw);
  height: var(--vh);
  overflow: hidden;
  mix-blend-mode: darken;
  -webkit-mask-image: radial-gradient(120% 130% at 76% 18%, #000 42%, transparent 86%), linear-gradient(180deg, #000 44%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(120% 130% at 76% 18%, #000 42%, transparent 86%), linear-gradient(180deg, #000 44%, transparent 98%);
  mask-composite: intersect;
}
.c2-hub-vig__img {
  --iw: calc(var(--zm) * max(var(--vw), var(--vh) / var(--ar)));
  position: absolute;
  left: 0;
  top: clamp(calc(var(--vh) - var(--iw) * var(--ar)), calc(var(--vh) / 2 - var(--fym) * var(--iw) * var(--ar)), 0px);
  display: block;
  width: 100%;
  max-width: none;
  height: calc(var(--iw) * var(--ar));
  object-fit: cover;
  object-position: clamp(calc(var(--vw) - var(--iw)), calc(var(--vw) / 2 - var(--fxm) * var(--iw)), 0px) 50%;
  pointer-events: none;
}
.c2-hub-tile__body { display: contents; }
/* telefon: tytuł obok winiety (szerokość do lewej krawędzi winiety + 45% jej szerokości), co najmniej jej wysokość − 30 px */
.c2-hub-tile__t {
  position: relative;
  max-width: max(calc(100% + 16px - .286 * min(37.5rem, 100cqi - 40px)), 7.5em);
  min-height: calc(clamp(108px, 31cqi, 150px) - 30px);
  font: 500 clamp(1.21875rem, calc(1.21875rem + (100cqi - 320px) * .03), 1.40625rem)/1.16 var(--f-serif);
  letter-spacing: -.005em;
}
/* halo: tło karty pod wierszami tytułu (oddziela tekst od winiety) — kopia tytułu z atrybutów, przezroczysta */
.c2-hub-tile__halo { position: absolute; left: 0; top: 0; width: 100%; color: transparent; pointer-events: none; user-select: none; }
.c2-hub-tile__halo-in { background: var(--tb); -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: 0 0 16px 20px var(--tb); }
.c2-hub-tile__halo-in::before { content: attr(data-th); }
.c2-hub-tile__halo-nw { white-space: normal; }
.c2-hub-tile__halo-nw::before { content: attr(data-tl); }
.c2-hub-tile__halo-nw::after { content: "→"; margin-left: .3em; font: 400 .8em var(--f-sans); }
.c2-hub-tile__tx { position: relative; }
/* ostatnie słowo i strzałka: sklejone samym tekstem (twarda spacja, „→” bez spacji, strzałka jako zwykły element
   w wierszu), więc bez nowrap prototypu — przy powiększonym tekście długie słowo może się złamać zamiast wyjść
   poza kartę. Przesunięcie strzałki przy najechaniu: left (position: relative) zamiast transform na inline-block. */
.c2-hub-tile__nw { white-space: normal; }
.c2-hub-tile__arr { margin-left: .3em; color: var(--c-petrol); font: 400 .8em var(--f-sans); }
.c2-hub-tile__d { position: relative; font: 400 .96875rem/1.55 var(--f-sans); color: var(--c-body); }

@media (min-width: 64em) {
  .c2-hub-index { padding: calc(16px + 16 * var(--ks)) var(--px) calc(88px + 88 * var(--ks)); }
  .c2-hub-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .c2-hub-item + .c2-hub-item, .c2-hub-item:nth-child(3n + 4) { margin-top: 0; }
  .c2 .c2-hub-tile { height: 100%; gap: 0; padding: 0; border-radius: 0 28px 0 0; }
  .c2-hub-vig {
    position: relative;
    top: auto;
    right: auto;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: calc(-14px - 14 * var(--ks));
    -webkit-mask-image: radial-gradient(135% 120% at var(--fxd) 22%, #000 50%, transparent 92%), linear-gradient(180deg, #000 46%, transparent 92%);
    mask-image: radial-gradient(135% 120% at var(--fxd) 22%, #000 50%, transparent 92%), linear-gradient(180deg, #000 46%, transparent 92%);
  }
  .c2-hub-vig__img { top: var(--pyd); height: calc(var(--zd) * var(--ar) * 16 / 9); transform: translateY(calc(-1 * var(--pyd))); object-position: var(--pxd) 50%; }
  .c2-hub-tile__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 calc(28px + 28 * var(--ks)) calc(30px + 30 * var(--ks));
  }
  .c2-hub-tile__t {
    max-width: none;
    min-height: 0;
    font-size: calc(clamp(1.5rem, calc(1.5rem + (100cqi - 64rem) * 6 / 416), 1.875rem) + 30 * var(--kh));
    letter-spacing: -.01em;
    color: var(--c-ink);
    transition: color 220ms ease;
  }
  .c2-hub-tile__halo { display: none; }
  .c2-hub-tile__tx { position: static; }
  .c2-hub-tile__arr { position: relative; left: 0; font-size: .78em; transition: left 220ms var(--ease); }
  .c2-hub-tile__d {
    position: static;
    font-size: calc(clamp(.96875rem, calc(.96875rem + (100cqi - 64rem) / 416), 1.03125rem) + 16.5 * var(--kt));
    line-height: 1.6;
  }
  /* najechanie (mysz) i fokus z klawiatury: tło mint, tytuł petrol, strzałka 4 px w prawo (prototyp: stan hov) */
  .c2 .c2-hub-tile:focus-visible { --tb: #E6EEEB; }
  .c2-hub-tile:focus-visible .c2-hub-tile__t { color: var(--c-petrol); }
  .c2-hub-tile:focus-visible .c2-hub-tile__arr { left: 4px; }
}
@media (min-width: 64em) and (hover: hover) {
  .c2 .c2-hub-tile:hover { --tb: #E6EEEB; }
  .c2-hub-tile:hover .c2-hub-tile__t { color: var(--c-petrol); }
  .c2-hub-tile:hover .c2-hub-tile__arr { left: 4px; }
}
@media (prefers-reduced-motion: reduce) { .c2-hub-tile .c2-hub-tile__arr { left: 0; } }
@media (min-width: 80em) {
  .c2-hub-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(clamp(24px, calc(24px + (100cqi - 1280px) * 8 / 160), 32px) + 32 * var(--ks));
  }
}

/* ===================================================================== 03 KONTAKT */
.c2-hub-cta { padding: 44px var(--hub-mx) 56px; background: var(--c-bg); }
.c2-hub-cta__in { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--c-ink); }
.c2-hub-cta__text, .c2-hub-cta__actions, .c2-hub-cta__media { display: contents; }
.c2-hub-cta__t {
  font: 500 clamp(1.625rem, calc(1.625rem + (100cqi - 320px) * .028), 1.875rem)/1.12 var(--f-serif);
  letter-spacing: -.01em;
}
.c2-hub-cta__p { font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-hub-cta__btn { margin-top: 4px; }
.c2 .c2-hub-tel, .c2 .c2-hub-tel:hover {
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font: 500 1rem var(--f-sans);
  color: var(--c-ink);
  text-decoration: none;
}
.c2 .c2-hub-tel:active { color: var(--c-petrol); }
.c2-hub-tel__ic { flex: none; margin: 0 7px 0 4px; }
.c2-hub-tel__num { font-weight: 600; }
.c2-hub-cta__paid { font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-muted); }
.c2-hub-cta__paid-a { font-weight: 600; text-underline-offset: 3px; }
.c2-hub-cta__img { margin-top: 8px; width: 100%; aspect-ratio: 2 / 1; border-radius: 0 28px 0 0; overflow: hidden; background: var(--c-bg); }
.c2-hub-fill, .c2-hub-fill > picture { display: block; width: 100%; height: 100%; }
.c2-hub-cta__pic { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 39%; }

@media (min-width: 64em) {
  .c2-hub-cta { padding: calc(88px + 88 * var(--ks)) var(--px) calc(112px + 112 * var(--ks)); }
  .c2-hub-cta__in {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 0 calc(64px + 64 * var(--ks));
    align-items: center;
    padding-top: calc(40px + 40 * var(--ks));
  }
  .c2-hub-cta__text { display: flex; flex-direction: column; gap: calc(24px + 24 * var(--ks)); max-width: calc(37.5rem + 600 * var(--kt)); }
  .c2-hub-cta__t { line-height: 1.1; font-size: calc(clamp(2rem, calc(2rem + (100cqi - 64rem) * 8 / 416), 2.5rem) + 40 * var(--kh)); }
  .c2-hub-cta__p { font-size: calc(clamp(1.0625rem, calc(1.0625rem + (100cqi - 64rem) / 416), 1.125rem) + 18 * var(--kt)); }
  .c2-hub-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
  .c2-hub-cta__btn { margin-top: 0; }
  .c2 .c2-hub-tel, .c2 .c2-hub-tel:hover { display: inline-flex; justify-content: flex-start; }
  .c2-hub-cta__paid { font-size: calc(.9375rem + 15 * var(--kt)); }
  .c2-hub-cta__media { display: flex; justify-content: flex-end; }
  .c2-hub-cta__img { max-width: 560px; margin-top: 0; border-radius: 0 64px 0 0; }
}
@media (min-width: 64em) and (hover: hover) { .c2 .c2-hub-tel:hover { color: var(--c-petrol); } }