/* ══════════════════════════════════════════════════════════════════════════
   WARSTWA MIGRACJI — dopisana przy przenoszeniu treści do bloków Gutenberga.
   Wszystko poniżej ma ZEROWY wpływ na wygląd względem produkcji; służy temu,
   żeby treść dało się edytować blokami (rejestr odstępstw: [O3]).
   ══════════════════════════════════════════════════════════════════════════ */

/* Wrappery blokowe znikają z układu — akapity opakowujące gołe inline i listy
   przerobione na grupy zachowują się jak oryginalne elementy.

   ⚠️ `display: contents` usuwa PUDEŁKO, ale nie zatrzymuje kaskady: opakowanie jest nadal
   elementem <p>, więc łapie każdą regułę celującą w `p` i narzuca tekstowi swoją typografię.
   Na produkcji ten tekst był gołym dzieckiem kontenera i brał jego wartości. Kejs, na którym
   to wyszło: cyfry kroków `.enrollment__step-num` (produkcja 24 px białe, u nas 13 px szare —
   bo `.enrollment__step p` maluje opis kroku). Zmierzone 02.08: 120 takich miejsc na 18 stronach.
   Dziedziczenie wprost przywraca zachowanie sprzed opakowania. */
.lc-inline { display: contents; }
.lc-lista { display: contents; }
/* Selektory z nazwą elementu, bo sama klasa (0,1,0) przegrywa z regułami motywu typu
   `.enrollment__step p` (0,1,1) — jest ich w motywie 83. Zrównanie specyficzności wystarcza:
   warstwa migracji jest doklejana na końcu site.css, więc przy remisie wygrywa.
   Sprawdzone na 15 stronach: rozjazdów typografii 41 → 0. `!important` niepotrzebne. */
p.lc-inline, span.lc-inline, div.lc-inline, li.lc-inline, a.lc-inline {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit;
}

/* Chevron akordeonu: na produkcji był inline SVG w <span class="sp-faq-q__icon">.
   Blok core/details trzyma <summary> jako rich-text, który zjada SVG przy edycji,
   więc ikona wraca jako ::after z tym samym rysunkiem i tym samym obrotem. */
.sp-faq-item > summary::after {
  content: ''; width: 20px; height: 20px; flex-shrink: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  transition: transform 0.2s;
}
.sp-faq-item[open] > summary::after { transform: rotate(180deg); }

/* Blok core/details renderuje treść bez wrappera .sp-faq-a — odtwarzamy odstęp. */
.sp-faq-item > summary + * { margin-top: 0; }

/* [O1] Kontakt: karty mieszczą się w kontenerze (na produkcji wychodziły do 420 px
   przy ekranie 390 i strona przewijała się w poziomie). */
@media (max-width: 768px) {
  /* przyczyna: elementy siatki maja domyslnie min-width:auto, wiec rozpycha je najdluzsze
     nielamliwe slowo (adres, numer telefonu) — stad 420 px przy ekranie 390 */
  .kt-grid > *, .kt-left > *, .kt-ccard__row > * { min-width: 0; }
  .kt-left, .kt-ccard, .kt-quick { max-width: 100%; box-sizing: border-box; }
  .kt-ccard__link, .kt-ccard__sub, .kt-ccard__title { overflow-wrap: anywhere; }
}

/* [O2] Ścieżka zawodowa: siatka trzech kart składa się do jednej kolumny na mobile
   (na produkcji zostawała trzykolumnowa i trzecia karta wychodziła poza ekran). */
@media (max-width: 768px) {
  .ak-wsparcie-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .ak-card--sm { width: auto !important; max-width: 100% !important; min-width: 0; }
}

/* Listing bloga: pierwszy kafel = wyróżniony wpis (produkcja renderowała go osobnym
   markupem .blog-featured; tutaj ta sama pętla WordPressa + CSS, dzięki czemu paginacja
   /blog/page/2/ jest prawdziwa).

   ⚠️ `wp:post-template` renderuje się jako <ul class="blog-grid"> z <li class="wp-block-post">,
   a nasz <article> siedzi DOPIERO w środku <li>. Selektor `.blog-grid > article` nie trafiał
   więc nigdy i wyróżniony wpis nie istniał — listing szedł od razu w trzy równe kolumny
   (znalezione pixel-diffem 02.08). Elementem siatki jest <li>, więc to on dostaje
   `grid-column`, a układ poziomy budujemy na <article> w środku. */
/* ⚠️ TYLKO na pierwszej stronie listingu. Wyróżniony kafel to „najnowszy wpis" — na
   /blog/page/2/ i dalej nie ma czego wyróżniać, a produkcja tam też tego nie robi
   (zmierzone 04.08: wszystkie kafle 357 px). WordPress oznacza strony paginacji klasą
   `paged` na <body> i to jest jedyny pewny sygnał dostępny CSS-owi. */
body:not(.paged) .blog-grid > li:first-child { grid-column: 1 / -1; }
body:not(.paged) .blog-grid > li:first-child > article.blog-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
body:not(.paged) .blog-grid > li:first-child .blog-card__image img { height: 100%; max-height: 360px; object-fit: cover; }
body:not(.paged) .blog-grid > li:first-child .blog-card__body { padding: 0 8px; }
body:not(.paged) .blog-grid > li:first-child h3 { font-size: 28px; line-height: 1.25; }
@media (max-width: 900px) {
  body:not(.paged) .blog-grid > li:first-child > article.blog-card { grid-template-columns: 1fr; gap: 0; }
  body:not(.paged) .blog-grid > li:first-child h3 { font-size: 20px; }
  body:not(.paged) .blog-grid > li:first-child .blog-card__body { padding: 24px; }
}

/* Wyróżniony wpis na listingu: produkcja renderuje go osobnym markupem `.blog-featured`,
   który NIE MA ramki, tła ani zaokrąglenia — to zwykły kafel na tle strony. U nas ten sam
   element pętli co pozostałe kafle, więc dziedziczył ich obudowę karty (zmierzone 02.08:
   1px ramki, białe tło, radius 20). Zdejmujemy obudowę tylko z pierwszego elementu; obraz
   w środku zachowuje własne zaokrąglenie. */
body:not(.paged) .blog-grid > li:first-child > article.blog-card {
  border: 0; background: transparent; border-radius: 0; box-shadow: none;
}

/* Odsyłacz „więcej" bloku `post-excerpt`. Produkcja ma w tym miejscu `.green-link` (zielony
   #81BD51); blok WordPressa maluje go domyślnym kolorem tekstu (szary #4B5563). */
.wp-block-post-excerpt__more-link {
  color: #81BD51;
  font-weight: 600;
  text-decoration: none;
}
.wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

/* Paginacja WordPressa w stylu produkcyjnych przycisków listingu. */
.blog-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #E5E7EB; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 14px; color: #4B5563; text-decoration: none; }
.blog-pagination .page-numbers.current { background: #81BD51; border-color: #81BD51; color: #fff; }
.blog-pagination .page-numbers:hover { border-color: #81BD51; color: #232D4B; }

/* Wrappery bloku przycisków (core/button) są przezroczyste — styl niosą klasy .btn z produkcji. */
.wp-block-buttons { display: contents; }
.wp-block-button { display: contents; }
.wp-block-button__link { all: unset; }

/* Formularz do osadzania (/dlaucznia-info/): elementorowa siatka kolumn wystaje o 5 px
   przy 390 px — na produkcji chowal to iframe osadzajacy.
   ⚠️ TYLKO na mobile. Bez ograniczenia zakresu `max-width: 100%` blokuje rozepchnięcie
   wrappera ujemnymi marginesami na desktopie i pola wychodzą 640 zamiast 650 px
   (zmierzone 04.08 na /wstepny-zapis/). */
@media (max-width: 768px) {
  .elementor-form-fields-wrapper > .elementor-field-group { max-width: 100%; }
}

/* Popup exit-intent (odtworzenie mechaniki z produkcji; domyślnie wyłączony — patrz functions.php). */
.lc-popup { display: none; position: fixed; inset: 0; z-index: 9999; }
.lc-popup--otwarty { display: block; }
.lc-popup__tlo { position: absolute; inset: 0; background: rgba(35,45,75,.6); }
.lc-popup__panel { position: relative; max-width: 460px; margin: 10vh auto; background: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.lc-popup__x { position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 28px; line-height: 1; color: #6B7280; cursor: pointer; }
.lc-popup__panel h3 { font-family: 'Inter', sans-serif; font-size: 22px; color: #232D4B; margin-bottom: 8px; }
.lc-popup__panel p { font-size: 15px; color: #4B5563; margin-bottom: 20px; }
.lc-popup__panel input[type=text], .lc-popup__panel input[type=email], .lc-popup__panel input[type=tel] { width: 100%; padding: 12px 16px; border: 1px solid #E5E7EB; border-radius: 10px; margin-bottom: 12px; font-size: 15px; }
.lc-popup__zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #6B7280; margin-bottom: 16px; }
.lc-popup__panel .btn { width: 100%; text-align: center; }

/* FORMULARZE ELEMENTORA — produkcja renderuje je wtyczką, która wnosi własny arkusz.
   Nasz motyw go nie ma, więc pola miały zerową szerokość, select był natywny, a przycisk
   skurczony do tekstu (znalezione pixel-diffem 02.08 na /dlaucznia-info/: korelacja -0,03,
   czyli wizualnie nic wspólnego z produkcją). Wartości zmierzone na żywej produkcji. */
/* Kontenery Elementora nie mają w naszym motywie żadnej szerokości — bez tego formularz
   kurczy się do zawartości (285 px zamiast pełnej szerokości osadzenia). */
.elementor,
.elementor-element,
.elementor-widget,
.elementor-widget-container,
.elementor-widget-form { width: 100%; }
/* ⚠️ Zostaje `flex`. Produkcja ma tu `block` i przy nim formularz jest o 16 px wyższy
   (361 zamiast 345 — wrapper ma ujemny margines dolny, który przy bloku nie obniża rodzica).
   PRÓBOWANE 04.08 i COFNIĘTE: zmiana na `block` nie odzyskała tych 16 px, a zepsuła
   /dlaucznia-info/ (wysokość strony 97,2% → 93% produkcji). Zostaje różnica 16 px na jednej
   sekcji — strona mieści się w paśmie (101,3%), a pola, select i przycisk zgadzają się co do piksela. */
.elementor-form { display: flex; flex-wrap: wrap; gap: 0; width: 100%; }
/* Wrapper pól jest jedynym dzieckiem flexowego <form> — bez jawnej szerokości kurczy się
   do zawartości (295 px zamiast pełnej). */
/* ⚠️ NIE dawać tu `width: 100%`. Wrapper ma ujemne marginesy (-5 px na boki), którymi ma się
   rozeprzeć poza formularz — przy jawnej szerokości 100% nie rośnie, tylko się przesuwa,
   a pola wychodzą o 10 px węższe niż na produkcji (640 zamiast 650, zmierzone 04.08).
   `flex-basis: 100%` wystarcza, żeby nie skurczył się do zawartości (295 px — pierwotny błąd). */
.elementor-form .elementor-form-fields-wrapper { flex: 1 1 100%; display: block; }
/* Produkcja renderuje grupę pola jako FLEX (tak robi Elementor) — u nas był blok, przez co
   odstęp między etykietą a polem wychodził 21 px zamiast 10 i grupa selecta rosła o 11 px. */
.elementor-form .elementor-field-group { width: 100%; margin-bottom: 15px; display: flex; flex-wrap: wrap; align-items: center; }
.elementor-form .elementor-field-label { display: block; width: 100%; flex: 0 0 100%; font-size: 14px; color: #7A7A7A; padding-bottom: 5px; margin-bottom: 10px; }
/* ⚠️ `width/flex-basis: 100%` jest konieczne: grupa pola jest kontenerem flex, więc bez tego
   etykieta siada OBOK pola zamiast nad nim (grupa 51 px zamiast 77 — zmierzone 04.08). */
.elementor-form .elementor-field-textual {
    width: 100%; box-sizing: border-box; padding: 12px 16px;
    border: 1px solid #D8D8D8; border-radius: 6px; font-size: 16px;
    background: #fff; color: #000; font-family: inherit;
}
.elementor-form select.elementor-field-textual { height: 48px; }
.elementor-form .elementor-field-type-acceptance { display: flex; align-items: center; gap: 8px; padding: 0 5px; margin-bottom: 15px; font-size: 16px; color: #4B5563; }
.elementor-form .elementor-field-type-acceptance input { width: auto; flex: 0 0 auto; }
.elementor-form .elementor-button {
    width: 100%; min-height: 40px; padding: 0 24px; border: 0; border-radius: 6px;
    background: #6EA842; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.elementor-form .elementor-button:hover { background: #5f9339; }
/* Dociągnięcie formularza do produkcji — wartości zmierzone 04.08 element po elemencie.
   Wcześniejsze reguły dawały pola o 4 px wyższe (44 zamiast 40), select o 8 px wyższy,
   formularz o 20 px szerszy i przycisk grubszą czcionką. Powód: nasze wartości były
   „rozsądne", a nie zmierzone — padding 12/16 zamiast 5/14 i line-height `normal`
   zamiast konkretnego. */
.elementor-form .elementor-field-textual {
  padding: 5px 14px; font-size: 15px; line-height: 21px; min-height: 40px;
}
.elementor-form select.elementor-field-textual {
  padding: 5px 20px 5px 14px; font-size: 16px; line-height: 25.6px; height: 40px; min-height: 40px;
}
.elementor-form .elementor-button {
  font-family: Roboto, Arial, sans-serif; font-weight: 500; line-height: 15px;
}
/* Zgoda na politykę: produkcja maluje etykietę szarością Elementora, nie kolorem tekstu motywu. */
.elementor-form .elementor-field-option label { color: #7A7A7A; }
/* Kontener formularza: produkcja ma 10 px oddechu po bokach i wnętrze ograniczone do 1140 px.
   Zawężone selektorem `:has`, żeby nie ruszyć /dziekujemy-za-wpisowe-web/ — jedynej innej strony
   na kontenerach Elementora, której odstępy były osobno strojone (patrz docs/qa-parytet.md). */
.e-con:has(.elementor-form) { padding: 0 10px; }
.e-con:has(.elementor-form) > .e-con-inner { padding: 10px 0; max-width: min(100%, 1140px); margin-inline: auto; }

/* Select z własną strzałką: produkcja trzyma opakowanie jako `flex; position: relative`,
   a strzałkę jako `position: absolute` NA polu (prawy brzeg, wyśrodkowana w pionie).
   U nas opakowanie było blokiem, więc strzałka stawała się osobnym wierszem NAD selectem
   i grupa rosła o 11 px (zmierzone 04.08). `pointer-events: none`, żeby klik w strzałkę
   otwierał listę, a nie łapał się na dekoracji. */
/* Grupy pól UKRYTYCH (Kierunek, Data, znaczniki UTM) produkcja wyłącza z układu — u nas
   renderowały się jako wiersze o zerowej wysokości, ale z marginesem 15 px każdy, przez co
   formularz był o 14 px wyższy. */
.elementor-form .elementor-field-type-hidden { display: none; }

.elementor-form .elementor-select-wrapper { display: flex; position: relative; width: 100%; }
.elementor-form .elementor-select-wrapper select { width: 100%; }
.elementor-form .select-caret-down-wrapper {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 11px; height: 18px; pointer-events: none;
}

/* pole telefonu z flagą kraju (wtyczka country-code-field-for-elementor-form) */
.elementor-form .iti { width: 100%; }
.elementor-form .iti input { padding-left: 52px; }

/* Nawigacja prev/next pod wpisem. Produkcja pokazuje sam tytuł ze strzałką; blok
   `post-navigation-link` dokłada etykietę („Poprzedni:"/„Następny:"), której nie da się
   wyłączyć atrybutem — pusty `label` i tak podstawia domyślny. Chowamy ją stylem;
   przez nią pasek rósł o 52 px na mobile. */
.post-single__nav .post-navigation-link__label { display: none; }
.post-single__prev a::before { content: "\2190\00a0"; }
.post-single__next a::after  { content: "\00a0\2192"; }

/* Obrazki jako natywny blok wp:image. WordPress opakowuje je w <figure class="wp-block-image">,
   którego produkcja nie ma — `display: contents` sprawia, że wrapper znika z układu i render
   jest bez zmian, a w edytorze zostaje normalny blok obrazu (podmiana zdjęcia jednym kliknięciem).
   Ten sam wzorzec co `.lc-inline` z transformacji [O3]. */
figure.wp-block-image.lc-img { display: contents; margin: 0; }

/* Pasek admina WordPressa vs przypięty nagłówek (zgłoszenie Tomka 02.08: „brakuje top bar
   menu (rodzic, uczeń)" — widoczne WYŁĄCZNIE po zalogowaniu do WP).
   `.utility-bar` jest `fixed; top: 0` (z-index 101), a pasek admina ma z-index 99999 i tę samą
   pozycję — więc leży na niej i zasłania ją w całości. Na 768 px jest gorzej: pasek admina ma
   46 px, a `nav` siedzi na `top: 0`, czyli znika całe menu.
   Na branzowa.pl te reguły są w motywie globalnie (przyszły z Customizera produkcji); u nas
   trafiły tylko do CSS dwóch podstron — i w dodatku wewnątrz komentarza, więc były martwe.
   Reguły są zakotwiczone w klasie `admin-bar`, której gość nigdy nie dostaje: statyczna
   produkcja i zwykły użytkownik nie widzą po nich śladu. */
.admin-bar .utility-bar { top: 32px; }
.admin-bar .nav { position: fixed; top: 73px; }        /* 41 px (wysokość utility-bar) + 32 */
.admin-bar .nav__mega { top: 153px; }                  /* 121 + 32 */
.admin-bar .sp-webinar-bar { top: 153px; }
@media screen and (max-width: 782px) {
  /* pasek admina rośnie do 46 px, a utility-bar jest już ukryty — nav wchodzi tuż pod pasek */
  .admin-bar .nav { top: 46px; }
  .admin-bar .sp-webinar-bar { top: 126px; }           /* 80 + 46 */
}
@media screen and (max-width: 600px) {
  /* Poniżej 600 px WordPress przestaje przypinać pasek admina (`position: absolute`),
     więc odsuwanie nagłówka zostawiłoby dziurę po przewinięciu. */
  .admin-bar .nav { top: 0; }
  .admin-bar .sp-webinar-bar { top: 80px; }
}

/* Mikro-interakcje hoveru celowały w `svg` (8 reguł w site.css) i przestały cokolwiek łapać,
   gdy ikony zjechały do pseudo-elementów: strzałka w linkach nie odjeżdżała w prawo, ikony
   w kafelkach nie reagowały. Te same przekształcenia, przepisane na pseudo, którego naprawdę
   używa dany kontener (sprawdzone w pomiarze: linki → ::after, kafelki → ::before). */
.green-link:hover::after, .navy-link:hover::after { transform: translateX(6px); }
.trust-bar__item:hover::before { transform: scale(1.2) rotate(5deg); }
.glass-card:hover .glass-card__icon::before,
.reason-card:hover .reason-card__icon::before,
.model-item:hover .model-item__icon::before { animation: float 1.5s ease-in-out infinite; }
/* Przejścia były na samym svg — bez nich przekształcenie skacze zamiast płynąć. */
.green-link::after, .navy-link::after { transition: transform 0.3s; }
.trust-bar__item::before { transition: transform 0.3s; }

/* Pasek webinaru [O7] ma `position: sticky`, ale blok `template-part` opakowuje nagłówek
   w dodatkowy <header>, wysoki dokładnie tyle co pasek — a sticky klei się wyłącznie w obrębie
   pudełka rodzica, więc pasek odjeżdżał z treścią (zmierzone: po przewinięciu 900 px produkcja
   trzyma go na y=121, u nas spadał na y=-779). Na produkcji rodzicem paska jest <body>.
   `display: contents` zdejmuje samo pudełko opakowania; wewnętrzny <header class="header">
   zostaje, więc rola `banner` nie znika z drzewa dostępności. */
header.wp-block-template-part { display: contents; }

/* ── Blog: dobre praktyki przeniesione z branzowa.pl (04.08.2026) ──────────────────
   Mini-bio autora pod wpisem, nagłówki archiwów, siatka archiwum i komunikat pustej listy.
   Klasy 1:1 z branżowej, żeby oba serwisy dało się utrzymywać jednym wzorcem. */
.post-autor { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding: 20px 0 0; border-top: 1px solid #E5E7EB; }
.post-autor__plakietka { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: rgba(129,189,81,0.14); border: 1px solid rgba(129,189,81,0.45); display: flex; align-items: center; justify-content: center; margin: 0; }
.post-autor__plakietka span { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: #4F7D2C; line-height: 1; }
.post-autor__tresc { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.post-autor__nadtytul { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9CA3AF; margin: 0; line-height: 1.4; }
.post-autor__nazwa { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: #232D4B; margin: 0; line-height: 1.4; }
.post-autor__opis { font-size: 14px; line-height: 1.6; color: #4B5563; margin: 0; }
.post-autor__wiecej { font-size: 14px; margin: 2px 0 0; line-height: 1.5; }
.arch-hero__eyebrow { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4F7D2C; margin-bottom: 10px; max-width: none; }
.arch-hero__desc { font-size: 16px; line-height: 1.7; color: #4B5563; max-width: 720px; }
.arch-empty__msg { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 600; color: #232D4B; margin-bottom: 24px; }
.blog-grid--archive { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); justify-content: start; }
/* Archiwum nie ma wyróżnionego pierwszego kafla — to listing /blog/ ma dużą pierwszą pozycję. */
.blog-grid--archive > li:first-child { grid-column: auto; }
.blog-grid--archive > li:first-child > article.blog-card { display: block; border: 1px solid #E5E7EB; background: #fff; border-radius: 20px; }
@media (max-width: 900px) { .blog-grid--archive { grid-template-columns: 1fr; } }
.post-autor { align-items: flex-start; gap: 12px; }