/*
 * ALX — Modernizacja stron szkoleń (CSS-override)
 * ------------------------------------------------------------------
 * Arkusz nakładkowy (override) do szablonu pojedynczej strony szkolenia
 * na alx.pl, np. /szkolenia/enterprise-linux-rh-124/.
 *
 * ZASADA: nie zmieniamy treści (jest generowana przez CMS) ani układu —
 * tylko delikatnie unowocześniamy wygląd, spójnie z nową stroną główną.
 * Wszystko scope-owane pod realne kontenery tych stron: #content-header
 * (pasek zakładek) oraz #article (treść). Używamy !important, bo globalny
 * arkusz alx.pl (main.css) ma własne, mocne reguły dla .nav/.current itd.
 *
 * Wklej ten plik do CMS jako arkusz ładowany TYLKO na ścieżkach /szkolenia/*.
 *
 * PITFALL (produkcja): globalny main.css ma „gołe" selektory (np. h2 span),
 * które wchodzą w nasze zagnieżdżone tagi — dlatego defensywnie resetujemy
 * span-y w nagłówkach. Nie używamy też dosłownych znaków spoza ASCII w
 * `content` (CMS je psuje przy zapisie) — tylko escape'y CSS.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --alx-sz-navy: #121930;
  --alx-sz-ink: #0d1f2d;
  --alx-sz-blue: #2266b4;
  --alx-sz-blue-2: #5395e3;
  --alx-sz-sky: #72b2ff;
  --alx-sz-orange: #fcb00f;
  --alx-sz-soft: #f4f8fc;
  --alx-sz-line: #dce6f0;
  --alx-sz-muted: #5a6675;
  --alx-sz-font: "Inter", "Open Sans", Arial, Helvetica, sans-serif;
}

/* ================================================================ */
/* PASEK ZAKŁADEK (#content-header)                                  */
/* ================================================================ */

/* WAŻNE — tylko stan „wyjściowy" (góra strony).                      */
/* Pasek zakładek po przewinięciu „przykleja się": JS dodaje klasę    */
/* `.fixed-header` na #lp-stickyTop, a main.css przełącza wtedy        */
/* .lp-contentHeader-middle na position:fixed; width:100%;            */
/* background:#f3f3f3 (pełna szerokość ekranu). W tym stanie NASZE     */
/* style mieszałyby się z produkcyjnym paskiem i wyglądały dziwnie,    */
/* więc WSZYSTKIE reguły zakładek bramkujemy przez                     */
/* `#lp-stickyTop:not(.fixed-header)`. Gdy pasek jest „przyklejony",   */
/* żadna z tych reguł nie pasuje i zostaje czysty produkcyjny main.css.*/

/* Reset dziwnego pozycjonowania .nav z globalnego motywu i ułożenie */
/* zakładek w równy, zawijający się rząd.                            */
#lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav {
  position: static !important;
  right: auto !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: left !important;
  text-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

#lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab {
  display: inline-flex !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

/* Neutralizujemy ozdobniki aktywnej zakładki z motywu (czerwone     */
/* podkreślenie, gradientowe tła, pseudo-elementy).                   */
#lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.current::before,
#lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.current::after {
  content: none !important;
  display: none !important;
}

/* ---- WARIANT DOMYŚLNY: segmentowe „pigułki" --------------------- */
#lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab > a {
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  padding: 9px 16px !important;
  border: 1.5px solid var(--alx-sz-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--alx-sz-ink) !important;
  font-family: var(--alx-sz-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
}

#lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab > a:hover,
#lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab > a:focus {
  border-color: var(--alx-sz-blue) !important;
  background: var(--alx-sz-soft) !important;
  color: var(--alx-sz-blue) !important;
  outline: none !important;
}

#lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab.current > a,
#lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab.current > a:hover,
#lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab.current > a:focus {
  background: var(--alx-sz-blue) !important;
  border-color: var(--alx-sz-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(34, 102, 180, 0.22) !important;
}

/* ---- WARIANT ALT: „podkreślenia" (segment underline) ------------ */
/* Aktywowany tylko gdy <html data-alx-tabs="underline"> (podgląd).  */
html[data-alx-tabs="underline"] #lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab > a {
  padding: 10px 6px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--alx-sz-muted) !important;
  box-shadow: none !important;
}

html[data-alx-tabs="underline"] #lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab > a:hover,
html[data-alx-tabs="underline"] #lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab > a:focus {
  background: transparent !important;
  color: var(--alx-sz-ink) !important;
  border-bottom-color: var(--alx-sz-line) !important;
}

html[data-alx-tabs="underline"] #lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab.current > a,
html[data-alx-tabs="underline"] #lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab.current > a:hover,
html[data-alx-tabs="underline"] #lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav > li.tab.current > a:focus {
  background: transparent !important;
  color: var(--alx-sz-blue) !important;
  border-bottom-color: var(--alx-sz-blue) !important;
  box-shadow: none !important;
}

/* ---- MOBILE: pozwól zakładkom zawijać się i rosnąć w pionie ----- */
/* Produkcyjny main.css poniżej 1024px reflowuje .inner-content do    */
/* zawijającego się flexa: pasek zakładek (.lp-contentHeader-middle,  */
/* 100% szer.), a po nim para przycisków „ZAPISZ SIĘ" + „Ustaw        */
/* powiadomienie..." (po ~50%). Jednocześnie nakłada na samą .nav     */
/* (ul) SZTYWNE height:48px + overflow:hidden (jednorzędowy pasek ze  */
/* scrollem poziomym). Nasze pigułki zawijają się do 2-3 rzędów, ale  */
/* przy tej stałej wysokości ul-a kontener rezerwuje tylko 1 rząd —   */
/* więc kolejne elementy flex (przyciski) nachodzą na ukryte rzędy.   */
/* Pozwalamy ul-owi i kontenerowi urosnąć do realnej wysokości, żeby  */
/* przyciski spadły POD zakładki. Tylko stan „góra" (nie sticky) —    */
/* w stanie .fixed-header reguły i tak nie pasują (czysta produkcja). */
@media (max-width: 1024px) {
  #lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #lp-stickyTop:not(.fixed-header) #content-header .lp-contentHeader-middle .nav {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* ================================================================ */
/* TREŚĆ (#article)                                                  */
/* ================================================================ */

/* Nagłówki sekcji — spójna, nowoczesna typografia z subtelną linią. */
#article h2 {
  font-family: var(--alx-sz-font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--alx-sz-ink) !important;
  margin: 1.7em 0 0.7em !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--alx-sz-line) !important;
}

/* Defensywa: globalny motyw ma reguły typu `h2 span {...}` które     */
/* psują span-y wewnątrz naszych nagłówków — przywracamy dziedziczenie.*/
#article h2 span {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  vertical-align: baseline !important;
}

/* Podnagłówki sekcji (h3) — używane głównie na zakładkach „Terminy"   */
/* i „Konsultacje". Spójne z h2, ale lżejsze: mniejszy stopień, bez    */
/* linii pod spodem, ten sam krój. Dzięki temu treść zakładek nie      */
/* wygląda na „zapomnianą" obok zmodernizowanych h2. Degraduje         */
/* elegancko — na zakładkach bez h3 (Opis, Ceny, Na zamówienie)        */
/* reguła po prostu nie ma do czego się odnieść.                       */
#article h3 {
  font-family: var(--alx-sz-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  color: var(--alx-sz-ink) !important;
  margin: 1.4em 0 0.5em !important;
}

/* Defensywa span-ów w h3 — analogicznie do h2 (globalny motyw ma      */
/* „gołe" reguły typu `h2 span`/`h3 span`, które psują zagnieżdżenia). */
#article h3 span {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  vertical-align: baseline !important;
}

/* Wiersz „Kategorie:" — subtelny, czytelny pasek meta (bez zmiany   */
/* struktury; linki w kolorze marki). Pigułki odpadły, bo między     */
/* linkami CMS wstawia przecinki jako tekst — pasek meta jest         */
/* bezpieczniejszy na setkach stron.                                  */
/* BEZPIECZEŃSTWO: stylujemy TYLKO gdy pierwszy akapit zaczyna się od */
/* etykiety <b> (sygnatura wiersza „Kategorie:"). Dzięki :has() na    */
/* stronach bez kategorii zwykły akapit prozą NIE zostanie zmieniony. */
#article .tabcontentopis > p:first-child:has(> b:first-child) {
  color: var(--alx-sz-muted) !important;
  font-size: 14px !important;
}

#article .tabcontentopis > p:first-child:has(> b:first-child) > b:first-child {
  margin-right: 6px !important;
  color: var(--alx-sz-muted) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 12px !important;
}

#article .tabcontentopis > p:first-child:has(> b:first-child) a {
  color: var(--alx-sz-blue) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.16s ease !important;
}

#article .tabcontentopis > p:first-child:has(> b:first-child) a:hover {
  border-bottom-color: var(--alx-sz-blue) !important;
}

/* Link „Pobierz w wersji PDF" — niebieska pigułka (nie pomarańcz;    */
/* pomarańcz rezerwujemy na akcje główne typu „Zapisz się").          */
#article a.call-to-action {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0.5em 0 !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  background: var(--alx-sz-blue) !important;
  color: #ffffff !important;
  font-family: var(--alx-sz-font) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

#article a.call-to-action:hover,
#article a.call-to-action:focus {
  background: var(--alx-sz-blue-2) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(34, 102, 180, 0.24) !important;
}

#article a.call-to-action::after {
  color: #ffffff !important;
}

/* Program — „miękka karta" wokół bloku. NIE ruszamy numeracji        */
/* rzymskiej, separatorów ani treści listy.                          */
#article .program {
  margin: 0.5em 0 1.5em !important;
  padding: 22px 26px !important;
  background: var(--alx-sz-soft) !important;
  border: 1px solid var(--alx-sz-line) !important;
  border-radius: 10px !important;
}

/* Dolne boksy (terminy / powiadomienie) — zaokrąglenie + delikatny   */
/* cień; zachowujemy istniejące kolory i układ. NIE używamy           */
/* overflow:hidden — boksy mają stałą wysokość (~274px), więc clip    */
/* mógłby uciąć interaktywną treść (np. pole/przycisk e-mail).        */
#article .lp-articleBottom-left,
#article .lp-articleBottom-right {
  border-radius: 10px !important;
  box-shadow: 0 6px 20px rgba(18, 25, 48, 0.06) !important;
}

/* FIX (wąski mobile): na telefonach main.css przybija prawy boks do  */
/* sztywnej wysokości (height:272px @max-580, 319px @max-350), bo     */
/* reguła „height:auto" jest u produkcji bramkowana przez przodka     */
/* .contact-section, którego TE strony nie mają (sprawdzone na żywo).  */
/* Przy wąskiej szerokości treść boksu „Żaden termin nie pasuje?"     */
/* (nagłówek + 2 wiersze + label + input + przycisk) jest wyższa niż  */
/* 272px, więc przycisk „ZAPISZ" wychodzi poza dolną krawędź boksu.   */
/* Pozwalamy boksom urosnąć do treści (height:auto), zostawiając      */
/* min-height jako dolną granicę wyglądu. Boksy są w tym zakresie i    */
/* tak ułożone w pionie (width:100% poniżej 760px), więc nie psuje to  */
/* układu obok-siebie na tablecie/desktopie (tam reguły nie sięgają). */
@media only screen and (max-width: 580px) {
  #article .lp-articleBottom-left,
  #article .lp-articleBottom-right {
    height: auto !important;
    min-height: 271px !important;
  }
}

/* Przycisk „Zapisz" w boksie e-mail — spójny promień i kolor marki.  */
#article .lp-sendEmail button {
  border-radius: 8px !important;
  background: var(--alx-sz-blue) !important;
}

#article .lp-sendEmail button:hover {
  background: var(--alx-sz-blue-2) !important;
}

/* ================================================================ */
/* POZOSTAŁE ZAKŁADKI — wspólne „klocki"                            */
/* ================================================================ */
/* Cztery zakładki spoza „Opisu" (Ceny i rabaty, Terminy, Na        */
/* zamówienie, Konsultacje) modernizujemy tymi samymi, wąsko        */
/* scope'owanymi wzorcami, spójnymi z blokiem „Program":            */
/*   • karta-moduł   — miękkie tło + ramka + promień (jak .program),*/
/*   • plakietka     — mała, zaokrąglona etykieta w kolorze marki,  */
/*   • akapit-lead   — wyróżniony pierwszy akapit, gdy brak nagłówka.*/
/* WSZYSTKO bramkujemy klasą panelu danej zakładki + sygnaturami    */
/* strukturalnymi (:has, :first-of-type, typ taga), żeby na setkach */
/* kursów o innym układzie treści reguły degradowały się elegancko, */
/* a nie psuły wyglądu. Treści (generowanej przez CMS) NIE ruszamy.  */

/* ---- CENY I RABATY (.tabcontentrabaty) -------------------------- */
/* Cena — lekko, bez ciężkiej karty. Sygnatura: pierwszy <p> panelu,  */
/* którego JEDYNYM dzieckiem jest <b> (czyli `<p><b>4190 PLN…</b></p>`).*/
/* Akapit prozą z wplecionym pogrubieniem ma też węzły tekstowe →     */
/* :only-child nie zadziała (bezpieczna degradacja). UWAGA: cały napis */
/* „4190 PLN netto (VAT 23%)" to JEDEN węzeł tekstowy w jednym <b> —   */
/* w czystym CSS nie da się osobno wyciszyć dopisku „netto (VAT 23%)"  */
/* bez zmiany treści CMS; dlatego całość dostaje jeden, lżejszy styl.  */
#article .tabcontentrabaty > p:first-of-type:has(> b:only-child) {
  margin: 0.2em 0 0.9em !important;
}

#article .tabcontentrabaty > p:first-of-type:has(> b:only-child) > b {
  color: var(--alx-sz-blue) !important;
  font-size: 1.3em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* Sekcja „obiady" — delikatna karta wokół akapitu „…nie zawiera      */
/* obiadów…Uwagi:" oraz następującej po nim listy „Uwagi". Sygnatura  */
/* treści: blok bezpośrednio poprzedzający akapit ze zwolnieniem z VAT */
/* (link do /pl/szkolenia-zwolnione-z-vat/). Łączymy <p> + <ul> w     */
/* jedną ciągłą kartę (promień góra/dół, zniesiona przerwa). Gdy       */
/* sygnatury brak — reguły nie działają (bezpieczna degradacja).      */
#article .tabcontentrabaty p:has(+ ul + p a[href*="szkolenia-zwolnione-z-vat"]) {
  margin: 0.3em 0 0 !important;
  padding: 16px 20px 8px !important;
  background: var(--alx-sz-soft) !important;
  border: 1px solid var(--alx-sz-line) !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
}

#article .tabcontentrabaty ul:has(+ p a[href*="szkolenia-zwolnione-z-vat"]) {
  margin: 0 0 1.3em !important;
  padding: 0 20px 14px 38px !important;
  background: var(--alx-sz-soft) !important;
  border: 1px solid var(--alx-sz-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
}

#article .tabcontentrabaty ul:has(+ p a[href*="szkolenia-zwolnione-z-vat"]) li::marker {
  color: var(--alx-sz-blue) !important;
}

/* Lista rabatów — skanowalna. Sygnatura listy: <ul> sąsiadujące tuż  */
/* po nagłówku „Upusty i rabaty" (h2 + ul). Pierwszy h2 („Cena…") ma  */
/* po sobie <p>, więc adjacent-selektor trafia wyłącznie w listę      */
/* rabatów, nie w listę „Uwagi" przy cenie ani w listy zagnieżdżone.  */
#article .tabcontentrabaty > h2 + ul {
  margin: 0.6em 0 1.2em !important;
  padding-left: 1.3em !important;
}

#article .tabcontentrabaty > h2 + ul > li {
  margin: 0.55em 0 !important;
}

#article .tabcontentrabaty > h2 + ul > li::marker {
  color: var(--alx-sz-blue) !important;
}

/* Procent rabatu jako plakietka — KAŻDY wiodący procent (10%, 7%, 5%,*/
/* 5%, 3%, 3%). Lista rabatów jest identyczna na wszystkich kursach:   */
/* sześć pozycji procentowych to dzieci o pozycjach 1,3,4,5,6,7 (poz.2 */
/* to zagnieżdżony <ul> przy „10%"). Ograniczamy zasięg do pierwszych  */
/* siedmiu dzieci (`:nth-child(-n+7)`), więc plakietkę dostaje tylko   */
/* wiodące <b> pozycji procentowych, a dłuższe zdaniowe pogrubienia    */
/* niżej (np. „oferta rabatowa…", „Przy zgłoszeniach…") zostają zwykłe.*/
/* (`:not(:only-child)` zawodził: węzły tekstowe nie liczą się do      */
/* :only-child, więc „10% + tekst" było traktowane jak only-child.)    */
#article .tabcontentrabaty > h2 + ul > li:nth-child(-n + 7) > b:first-child {
  display: inline-block !important;
  margin-right: 6px !important;
  padding: 1px 10px !important;
  border-radius: 999px !important;
  background: rgba(34, 102, 180, 0.1) !important;
  color: var(--alx-sz-blue) !important;
  font-weight: 800 !important;
  font-size: 0.95em !important;
  line-height: 1.5 !important;
}

/* ---- TERMINY (.tabcontentterminy) ------------------------------ */
/* Listy w treści — brandowane markery i czytelniejsze odstępy.       */
/* Tylko #article (lewa kolumna treści); prawej kolumny z terminami   */
/* (poza #article) NIE ruszamy.                                       */
#article .tabcontentterminy ul {
  margin: 0.5em 0 1.1em !important;
  padding-left: 1.4em !important;
}

#article .tabcontentterminy ul li {
  margin: 0.35em 0 !important;
}

#article .tabcontentterminy ul li::marker {
  color: var(--alx-sz-blue) !important;
}

/* Tryby i lokalizacje jako rząd plakietek. Etykiety trybów/lokalizacji*/
/* (dzienne, weekendowe, wieczorowe, stacjonarnie, zdalnie) używają    */
/* <b>; daty harmonogramu używają <strong>, a proza siedzi w <p> — więc*/
/* celowanie w `li b` daje spójne plakietki niezależnie od pozycji <b> */
/* w zdaniu i NIE dotyka dat ani akapitów. Dłuższe <b> w innym kursie  */
/* degradują się do brandowanego highlightu.                          */
#article .tabcontentterminy ul li b {
  display: inline-block !important;
  margin: 1px 2px !important;
  padding: 1px 10px !important;
  border-radius: 999px !important;
  background: rgba(34, 102, 180, 0.1) !important;
  color: var(--alx-sz-blue) !important;
  font-weight: 700 !important;
  font-size: 0.95em !important;
  line-height: 1.5 !important;
}

/* Blok „Zajęcia online na żywo … - organizacja" — nagłówek h3 + dwa  */
/* akapity wokół linku „kursy zdalne". Subtelne, lekko szare tło „dla */
/* ładności" (bez akcentu/ramki) + wyciszony tekst; łączymy nagłówek  */
/* i oba akapity w jeden wizualny blok (promień góra/dół, zniesione   */
/* przerwy). Sygnatura: link a[href*="kursy-zdalne"] (drugi akapit) +  */
/* akapit przed nim + h3 dwa elementy wcześniej. Nagłówek lekko       */
/* przygaszony (#3c4858 — ciemniejszy od muted, jaśniejszy od ink),   */
/* żeby współgrał z wyciszonym tekstem, ale wciąż czytał się jak      */
/* nagłówek (rozmiar/grubość z ogólnej reguły #article h3).           */
#article .tabcontentterminy h3:has(+ p + p a[href*="kursy-zdalne"]) {
  margin: 0.6em 0 0 !important;
  padding: 16px 20px 8px !important;
  background: #f6f8fa !important;
  border-radius: 8px 8px 0 0 !important;
  color: #3c4858 !important;
}

#article .tabcontentterminy p:has(+ p a[href*="kursy-zdalne"]) {
  margin: 0 !important;
  padding: 2px 20px 10px !important;
  background: #f6f8fa !important;
  border-radius: 0 !important;
  color: var(--alx-sz-muted) !important;
}

#article .tabcontentterminy p:has(a[href*="kursy-zdalne"]) {
  margin: 0 0 1.2em !important;
  padding: 10px 20px 16px !important;
  background: #f6f8fa !important;
  border-radius: 0 0 8px 8px !important;
  color: var(--alx-sz-muted) !important;
}

/* ---- NA ZAMÓWIENIE + KONSULTACJE — karty-callout ---------------- */
/* Obie zakładki to krótkie bloki tekstu (+ CTA przy „Na zamówienie").*/
/* Ujmujemy całość panelu w spójną kartę-callout (miękkie tło, ramka, */
/* promień) — bliźniaczo do siebie i do bloku „Program".              */
#article .tabcontentnazamowienie,
#article .tabcontentkonsultacje {
  margin: 0.5em 0 1.5em !important;
  padding: 22px 26px !important;
  background: var(--alx-sz-soft) !important;
  border: 1px solid var(--alx-sz-line) !important;
  border-radius: 10px !important;
}

/* Pierwszy element w karcie nie powinien dokładać górnego marginesu  */
/* (zbiłby pionowy rytm karty). Dotyczy nagłówka „Konsultacje…" (h3)  */
/* oraz akapitu-lead w „Na zamówienie".                               */
#article .tabcontentnazamowienie > p:first-of-type,
#article .tabcontentkonsultacje > h3:first-child {
  margin-top: 0 !important;
}

/* „Na zamówienie" nie ma nagłówka — pierwszy akapit pełni rolę leadu.*/
#article .tabcontentnazamowienie > p:first-of-type {
  font-size: 1.08em !important;
  line-height: 1.6 !important;
  color: var(--alx-sz-ink) !important;
}

/* Brandowane linki inline we wszystkich czterech panelach (z         */
/* wykluczeniem CTA-pigułki, która ma własny styl). Spójne z linkami  */
/* w wierszu „Kategorie". Obejmuje m.in. „osobnej stronie" (cennik),  */
/* „kursy zdalne"/„adresy" (terminy) oraz link „kontaktu" w           */
/* „Konsultacjach" (mid-zdanie — zostaje ładnym linkiem, nie pillem). */
#article .tabcontentrabaty a:not(.call-to-action),
#article .tabcontentterminy a:not(.call-to-action),
#article .tabcontentnazamowienie a:not(.call-to-action),
#article .tabcontentkonsultacje a:not(.call-to-action) {
  color: var(--alx-sz-blue) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.16s ease !important;
}

#article .tabcontentrabaty a:not(.call-to-action):hover,
#article .tabcontentterminy a:not(.call-to-action):hover,
#article .tabcontentnazamowienie a:not(.call-to-action):hover,
#article .tabcontentkonsultacje a:not(.call-to-action):hover {
  border-bottom-color: var(--alx-sz-blue) !important;
}

/* Końcowy link „kontakt" jako niebieski pill CTA, spójny z           */
/* a.call-to-action. W „Na zamówienie" to samodzielny akapit „Lub     */
/* prosimy o kontakt.". W „Konsultacjach" backend wydzielił link do   */
/* osobnego <p> na końcu (klasa .szkolenie-konsultacje-kontakt) —     */
/* tam również pill. Selektor z .tabcontentkonsultacje + p + .class   */
/* (1,2,2) bije ogólną regułę linku inline powyżej (1,2,1).           */
#article .tabcontentnazamowienie p a[href="/pl/kontakt/"],
#article .tabcontentkonsultacje p a.szkolenie-konsultacje-kontakt {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  background: var(--alx-sz-blue) !important;
  color: #ffffff !important;
  font-family: var(--alx-sz-font) !important;
  font-weight: 700 !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

#article .tabcontentnazamowienie p a[href="/pl/kontakt/"]:hover,
#article .tabcontentnazamowienie p a[href="/pl/kontakt/"]:focus,
#article .tabcontentkonsultacje p a.szkolenie-konsultacje-kontakt:hover,
#article .tabcontentkonsultacje p a.szkolenie-konsultacje-kontakt:focus {
  background: var(--alx-sz-blue-2) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(34, 102, 180, 0.24) !important;
}