/* Kopia serwis-2/typeframe/mobil-20.css (port do Astro 11.09.2026). Reguły rytmu
   i typografii zawężone do stron 2.0 (main.r20) przez :where(), bez zmiany
   specyficzności - strony z builda 1.0 w tej samej ramie ich nie dostają. */
/* ===== WARSTWA MOBILNA SERWISU 2.0 - wspólna rama siedmiu stron =====
   Dołączany do każdego prototypu ZA blokiem <style>, więc przy równej
   specyficzności wygrywa. Desktop 1440 px nietykalny: wszystko poniżej
   siedzi w media queries.

   Progi kanonu (werdykt Piotra 04.08.2026, etap mobilny 1.0):
     1080 px - tablet; tu wchodzi menu, bo pełny pasek przestaje się mieścić
      719 px - pełny mobile (prototypy 2.0 liczą próg od 719)

   Reguły twarde, których ta warstwa nie łamie:
   - bez JavaScriptu cała treść widoczna (bloki .zw20 przychodzą otwarte,
     zwija je skrypt wyłącznie poniżej progu),
   - prefers-reduced-motion respektowany,
   - animacje nie zostawiają elementów z opacity: 0,
   - stopnie pisma nie schodzą poniżej 11,5 px, cele dotykowe >= 24 px.

   Kolejność sekcji: 1 rama i shell, 2 menu mobilne, 3 rytm pionowy,
   4 typografia, 5 bloki zwijane, 6 pasek działania, 7 stopka,
   8 cele dotykowe, 9 spokój ruchu. */

/* ===== 1. RAMA I SHELL ===== */

/* Menu wchodzi dopiero poniżej 1080 px - na desktopie nie istnieje
   nawet w drzewie dostępności. */
.menu-mobi { display: none; }
.pasek-akcji { display: none; }

@media (max-width: 1080px) {
  .shell { width: calc(100% - 48px); }

  /* Pasek: logo z lewej, Kontakt i hamburger z prawej. Rząd linków schodzi
     do panelu - sześć pozycji zawijało się na trzy wiersze i zjadało
     ćwierć pierwszego ekranu (pomiar 390 px: 149 px samego paska). */
  .pasek-nawi { position: relative; }
  .nawi { flex-wrap: nowrap; gap: 0 18px; padding: 13px 0; }
  .nawi .logo { margin-right: auto; font-size: 25px; }
  .nawi > .menu { display: none; }
  .nawi .akcja { margin-left: 0; gap: 14px; }
  .nawi .kreska { display: none; }
  /* Cel dotyku przycisku 78×37 px - do 44 px wysokości (etap 2 audytu, 13.09.2026). */
  .nawi .cta { padding: 11px 16px; font-size: 12.5px; }

  /* ===== 2. MENU MOBILNE - details/summary, bez JavaScriptu =====
     Ten sam mechanizm co w serwisie 1.0 (werdykt Piotra 04.08.2026):
     natywne rozwijanie, animowane wejście, zamknięcie skokowe. */
  .menu-mobi { display: block; }
  .menu-mobi > summary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 0; font-size: 13px; color: #f3f1ea;
    list-style: none; cursor: pointer; user-select: none;
  }
  .menu-mobi > summary::-webkit-details-marker { display: none; }
  .menu-mobi__ikona { position: relative; width: 22px; height: 11px; }
  .menu-mobi__ikona::before,
  .menu-mobi__ikona::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 1.5px;
    background: currentColor; transition: transform .22s ease, top .22s ease;
  }
  .menu-mobi__ikona::before { top: 1px; }
  .menu-mobi__ikona::after { top: 9px; }
  .menu-mobi[open] .menu-mobi__ikona::before { top: 5px; transform: rotate(45deg); }
  .menu-mobi[open] .menu-mobi__ikona::after { top: 5px; transform: rotate(-45deg); }

  /* Panel: granatowa płachta przez całą szerokość okna, pozycje dużą
     typografią display - tak samo jak w 1.0, żeby serwis mówił jednym
     językiem także w nawigacji. */
  .menu-mobi > nav {
    position: absolute; top: 100%; right: 0; left: 0; z-index: 30;
    display: flex; flex-direction: column;
    max-height: calc(100dvh - 74px); overflow-y: auto;
    padding: 6px 24px 30px;
    background: var(--dark, #272F3A); color: var(--paper-light, #f3f1ea);
    box-shadow: 0 24px 40px rgba(23, 26, 24, .22);
  }
  .menu-mobi[open] > nav { animation: menu20-wejscie .22s ease; }
  .menu-mobi > nav a {
    padding: 16px 0; border-bottom: 1px solid rgba(243, 241, 234, .14);
    font-family: var(--display, "Inter Tight", sans-serif);
    font-size: 26px; font-weight: 400; letter-spacing: -.035em; line-height: 1.05;
    color: #f3f1ea;
  }
  .menu-mobi > nav a[aria-current] { color: var(--orange, #ee7049); }
  .menu-mobi > nav a:last-child {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 4px; border-bottom: 0;
  }

  /* Liczby hero (Wiedza) po zwinięciu siatki do jednej kolumny stawały
     w słupku pod tekstem, zostawiając pustą prawą połowę ekranu.
     Na tablecie idą w rząd; na telefonie wracają do słupka niżej. */
  :where(.r20) .hero .liczby { grid-auto-flow: column; justify-content: start;
    gap: clamp(28px, 5vw, 64px); }
}

@media (max-width: 719px) {
  /* Na telefonie rząd też się broni, ale liczby muszą zejść ze 104 px -
     w słupku trzy metryki zjadały pół pierwszego ekranu. */
  :where(.r20) .hero .liczby { gap: 6vw; }
  :where(.r20) .hero .liczby b { font-size: clamp(40px, 13vw, 56px); }
  :where(.r20) .hero .liczby span span { font-size: 11.5px; letter-spacing: .06em; }
}

@keyframes menu20-wejscie { from { opacity: 0; transform: translateY(-10px); } }

/* Pion sekcji na tablecie (etap 2 audytu, 13.09.2026; audyt głównej pkt 16): między 720
   a 1080 px treść stoi już w jednej-dwóch kolumnach, a sekcje trzymały desktopowe 76-144 px
   góra i dół. Ten sam wzorzec i te same wyjątki co na telefonie. Górna granica 60 px:
   przy 76 px kilka sekcji o mniejszym pionie (.funkcje, .dst, .dowod) rosło zamiast maleć. */
@media (min-width: 720px) and (max-width: 1080px) {
  main:where(.r20) > section[class]:not(.hero) { padding-block: clamp(46px, 6vw, 60px); }
  main:where(.r20) > section.ocena[class] { padding-bottom: 0; }
  :where(.r20) section > .pas { padding-block: clamp(38px, 5vw, 52px); }
}

@media (max-width: 719px) {
  .shell { width: calc(100% - 34px); }
  /* Pasek działania (52 px) zasłaniał element z fokusem po przeskoku klawiaturą
     albo kotwicą (audyt 13.09.2026, pkt 2) - przewijanie zostawia mu miejsce. */
  html { scroll-padding-bottom: 64px; }
  /* Przycisk hero ma na desktopie white-space: nowrap; przy odstępach tekstu
     WCAG 1.4.12 na telefonie wychodził poza ekran (audyt 13.09.2026, pkt 8). */
  .akcje .przycisk { text-align: center; }
  /* To samo dla przycisku i kanałów w zamknięciu stron (.akcje-koniec) - przy odstępach
     tekstu na 320 px dawały poziomy przelew (audyty Prowadzenie ZPI pkt 5, Dla kogo pkt 4). */
  .przycisk, .kanaly { white-space: normal; }
  .nawi { padding: 11px 0; }
  .nawi .logo { font-size: 23px; }
  .menu-mobi > nav { max-height: calc(100dvh - 66px); padding-inline: 17px; }
  .menu-mobi > nav a { font-size: 24px; }

  /* ===== 3. RYTM PIONOWY =====
     Odstępy desktopu (76-144 px góra i dół) na telefonie robiły z każdej
     sekcji osobny ekran pustki. Wszystkie sekcje mają wzorzec
     `padding: X 0`, więc jedna reguła je wyrównuje; wyjątki niżej. */
  main:where(.r20) > section[class]:not(.hero) { padding-block: 46px; }
  main:where(.r20) > section.ocena[class] { padding-bottom: 0; }
  /* Selektor musi być związany z sekcją: klasa `.pas` niesie na głównej
     pasmo werdyktu, a na monitoringu pasek słupka w tablicy funkcji -
     sam `.pas` rozdymał tam każdy pasek do 76 px. */
  :where(.r20) section > .pas { padding-block: 38px; }

  /* Odstęp między głową sekcji a jej treścią - to drugie źródło pionu. */
  .czym .grid, .ocena .grid, .spojnosc .grid, .podzial .glowa,
  .dowod .glowa, .os .glowa, .wiedza .glowa, .faq-krotkie .glowa,
  .czlowiek .grid, .faq-pelne .glowa { gap: 22px; }
  .os ol, .podzial dl, .dowod .liczby, .wiedza .wejscia,
  .faq-krotkie dl, .czlowiek .grid, .faq-pelne .siatka { margin-top: 28px; }
  .dowod .benchmark, .os .niepowodzenia { margin-top: 30px; padding-top: 24px; }

  /* ===== 4. TYPOGRAFIA MOBILNA =====
     Zasada etapu: na telefonie tekst nie maleje. Rosną nagłówki drugiego
     stopnia (na desktopie clamp schodzi do 38 px, co obok 38-px h1 gubi
     hierarchię) i leady; maleją tylko elementy dekoracyjne. */
  :where(.r20) h2 { font-size: clamp(30px, 8.2vw, 36px); line-height: 1.0; }
  :where(.r20) .etykieta { font-size: 11.5px; letter-spacing: .05em; }
  :where(.r20) .stopka-sekcji { margin-top: 26px; font-size: 15.5px; }

  /* Kicker hero: na telefonie zdanie łamie się na trzy wiersze, a kropka
     sygnału przy align-items: center siadała w środku bloku i wyglądała
     jak wcięcie akapitu. Ma stać przy pierwszym wierszu. */
  :where(.r20) .hero .kicker { align-items: flex-start; }
  :where(.r20) .hero .kicker i { margin-top: 4px; }
}

/* ===== 5. BLOKI ZWIJANE .zw20 =====
   Wzorzec przeniesiony z 1.0 (werdykt Piotra 05.08.2026: „strony za długie,
   nikt nie dojedzie do 20%; treść ma się zwijać, klik rozwija"). Blok
   przychodzi z serwera OTWARTY - zwija go skrypt mobil-20.js wyłącznie
   poniżej 719 px. Bez JavaScriptu i na desktopie treść jest kompletna.

   Zwijamy ODPOWIEDZI i OPISY, nigdy TYTUŁÓW: czytelnik zawsze widzi pełny
   spis tego, co na stronie jest, i sam decyduje, co rozwinąć. */
.zw20 > summary { display: block; list-style: none; }
.zw20 > summary::-webkit-details-marker { display: none; }
.zw20-znak { display: none; }
/* Na desktopie summary miało 0 px, bez nazwy, a stało w kolejności tabulacji - Enter zwijał
   treść bez widocznej kontrolki (audyt 13.09.2026, WCAG 2.4.7 i 4.1.2). details[open] bez
   widocznego summary renderuje treść, więc na desktopie summary znika całkiem.
   Tylko summary PUSTE (same znaki zwijania) - w działach, artykułach, procedurze i analizie
   summary niesie tytuł sekcji i musi zostać. */
@media (min-width: 720px) { .zw20 > summary:not(:has(> :not(.zw20-znak))) { display: none; } }

@media (max-width: 719px) {
  .zw20 > summary { cursor: pointer; position: relative; }
  .zw20-znak {
    display: inline-block; min-height: 24px; margin-top: 12px; padding-bottom: 3px;
    border-bottom: 1px solid var(--orange-tekst, #b24019);
    font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; color: var(--orange-tekst, #b24019);
  }
  /* Blok otwarty musi dać się zwinąć - stąd drugi znak zamiast pustego
     <summary>, w które nie było jak trafić. */
  .zw20[open] > summary .zw20-znak { display: none; }
  /* Znak „Zwiń" w pustym summary stykał się z tekstem rozwiniętego bloku (audyt Dla kogo pkt 10). */
  .zw20[open] > summary:not(:has(> :not(.zw20-znak))) { margin-bottom: 10px; }
  .zw20[open] > summary .zw20-znak--zwin { display: inline-block; }
  .zw20:not([open]) > summary .zw20-znak--zwin { display: none; }
  /* Na granacie pomarańcz wraca do pełnej mocy - na jasnym tle schodzi
     o kilka stopni (werdykt kontrastu 01.08.2026, 2,42:1). */
  .os .zw20-znak, .czlowiek .zw20-znak, .pas .zw20-znak,
  .granat .zw20-znak, .skrzynka--granat .zw20-znak, .miedzy .zw20-znak, .slownik-pelny .zw20-znak,
  .przyklady-branze .zw20-znak, .metoda .zw20-znak {
    color: var(--orange, #ee7049); border-bottom-color: var(--orange, #ee7049);
  }
}

/* ===== 5a. TABLICA FUNKCJI (monitoring) =====
   Poniżej 860 px wiersz łamie się na dwie linie (werdykt H1). Bez jawnych
   obszarów siatki automatyczne rozmieszczanie wypychało liczbę do trzeciej
   linii: etykieta następnej funkcji lądowała na pasku poprzedniej,
   a przy dwóch najdłuższych paskach liczby w ogóle nie było widać. */
@media (max-width: 860px) {
  /* Kolumny jawnie - bez nich liczby tablicy były ucinane na 320 px (audyt ZPI w przykładach 13.09.2026, pkt 6). */
  .slupki li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nazwa ile" "tor tor"; align-items: baseline; }
  .slupki .nazwa { grid-area: nazwa; }
  .slupki .ile { grid-area: ile; }
  .slupki .tor { grid-area: tor; align-self: center; }
}

/* ===== 5b. GĘSTOŚĆ KART I LIST (ZPI w przykładach) =====
   Karty branż i studiów mają na desktopie oddech dwukolumnowej siatki;
   w jednej kolumnie ten sam oddech mnoży się przez sześć i sekcja rośnie
   o dwa ekrany. Odstępy schodzą, treść zostaje. */
@media (max-width: 719px) {
  .przyklady-branze .karta { padding: 22px 0 20px; }
  .przyklady-branze .karta h3 { margin-top: 8px; }
  .przyklady-branze .stopka-karty { padding-top: 16px; gap: 8px 20px; }
  .przyklady-branze .karty { margin-top: 26px; }
  .studia .karty { margin-top: 26px; gap: 18px; }
}

/* ===== 6. PASEK DZIAŁANIA U DOŁU =====
   Strona sprzedażowa na telefonie: kciuk ma być zawsze przy akcji, a nie
   po przewinięciu dziewięciu tysięcy pikseli do sekcji kontaktowej.
   Dwa kanały wprost z briefu: rozmowa i telefon. */
@media (max-width: 719px) {
  .pasek-akcji {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 40;
    display: grid; grid-template-columns: 1fr auto;
    background: var(--dark, #272F3A);
    box-shadow: 0 -1px 0 rgba(243, 241, 234, .18), 0 -12px 30px rgba(23, 26, 24, .16);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .pasek-akcji a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 18px;
    font-size: 14px; font-weight: 500; color: #f3f1ea;
  }
  .pasek-akcji .glowna-akcja { background: var(--orange, #ee7049); color: #171a18; }
  .pasek-akcji .telefon { border-left: 1px solid rgba(243, 241, 234, .2); }
  .pasek-akcji .telefon i { font-style: normal; font-size: 16px; }
  /* Pasek zasłaniałby koniec strony - stopka dostaje miejsce pod nim.
     Strona Kontakt paska nie ma (prowadziłby sam do siebie), więc i tego
     marginesu nie dostaje. */
  body:has(.pasek-akcji) { padding-bottom: 52px; }
  /* Na pierwszym ekranie pasek dublowałby wezwanie z hero, więc skrypt
     chowa go do czasu, aż czytelnik zjedzie poniżej hero. Bez JavaScriptu
     klasa nie wchodzi i pasek stoi od początku - nic się nie gubi. */
  .pasek-akcji--ukryty { transform: translateY(100%); }
  .pasek-akcji { transition: transform .25s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .pasek-akcji { transition: none; }
}

/* ===== 7. STOPKA =====
   Cztery kolumny katalogu to na telefonie 1106 px, czyli 8-18% każdej
   strony. Nawigacje idą w dwie szpalty, slot subskrypcji na pełną
   szerokość, dane rejestrowe drobniej. */
@media (max-width: 719px) {
  .stopa20 .kolumny { grid-template-columns: 1fr; gap: 20px; padding: 26px 0 20px; }
  .stopa20 .kol nav { grid-template-columns: 1fr 1fr; gap: 8px 20px; }
  .stopa20 .kol nav a { padding: 2px 0; }
  .stopa20 .f-etykieta { margin-bottom: 8px; }
  .stopa20 .opis { margin-bottom: 8px; font-size: 13.5px; }
  .stopa20 .kontakt-duzy { font-size: 20px; gap: 6px; }
  .stopa20 .adresat { margin-top: 8px; font-size: 12.5px; }
  .stopa20 .dol { flex-direction: column; gap: 6px; padding: 12px 0 22px; }
}


/* ===== 8. CELE DOTYKOWE =====
   WCAG 2.2 AA: 24 px. Linki nawigacji stopki miały 22 px, odsyłacz kart
   branżowych i celów hero 23 i 22 px. */
@media (max-width: 1080px) {
  .stopa20 .kol nav a, .stopa20 .f-legal a,
  .menu-mobi > nav a { min-height: 24px; }
  /* Linki w wierszu prawnym są inline - min-height na nich nie działał (realnie 16 px). */
  .stopa20 .f-legal a { display: inline-block; padding: 4px 0; }
  .stopa20 .kontakt-duzy a { padding: 2px 0; }
  :where(.r20) .czytaj, :where(.r20) .cel { display: inline-flex; align-items: center; min-height: 26px; }
}

/* ===== 9. SPOKÓJ RUCHU ===== */
@media (prefers-reduced-motion: reduce) {
  .menu-mobi[open] > nav { animation: none; }
  .menu-mobi__ikona::before, .menu-mobi__ikona::after { transition: none; }
}