/*
 * companysite.css — drobne korekty czytelności NA WIERZCHU motywu „prointega”.
 *
 * Arkusz ładowany jest jako OSTATNI (po bootstrap/bootstrap-theme/style.css),
 * więc dokłada wyłącznie kosmetyczne poprawki i punktowe nadpisania. Celowo
 * NIE nadpisuje agresywnie motywu — ma jedynie zapewnić, że treść części
 * publicznej (lista artykułów, widok artykułu, karuzela) jest czytelna i nie
 * „goła”.
 */

/* --- Nagłówek: logo motywu -------------------------------------------------
 * Motyw stylizuje globalny <h1> jako logo (grafika `images/pilogo.png`,
 * `text-indent: -999em`). Chcemy, aby ten efekt dotyczył WYŁĄCZNIE logo w
 * nagłówku, a nie tytułów treści (lista/artykuł). Logo pozostaje więc w
 * nagłówku, a poniżej przywracamy normalne <h1> wewnątrz treści.
 */
.navbar-brand h1 {
    /* Logo wyśrodkowane w pasku nagłówka; wymiary z motywu pozostają. */
    margin: 0 !important;
}

/* --- Treść: kontener i marginesy ------------------------------------------ */
.site-main {
    /* Odstęp od nagłówka i stopki + oddech po bokach w wąskich oknach. */
    padding-top: 24px;
    padding-bottom: 32px;
    min-height: 60vh;
}

/* Przywrócenie normalnych tytułów wewnątrz treści publicznej. Bez tego globalny
 * <h1> motywu zamieniłby nagłówki „Artykuły”, tytuł artykułu oraz nagłówki list
 * ofert pracy (/oferty-pracy/) i wydarzeń (/wydarzenia/) na grafikę logo. */
.home h1,
.article-list h1,
.news-list h1,
.jobs-list h1,
.article .article__title {
    width: auto;
    height: auto;
    text-indent: 0;
    background: none;
    margin: 0 0 16px !important;
    padding: 0;
    font-size: 2em;
    color: #333;
}

/* Lista artykułów — czytelna typografia i odstępy. */
.article-list {
    max-width: 960px;
    margin: 0 auto;
}
.article-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.article-list__item {
    padding: 12px 0;
    border-bottom: 1px dotted #c9cccf;
}
.article-list__link {
    font-size: 1.15em;
}
.article-list__date {
    display: block;
    margin-top: 4px;
    color: #82868a;
    font-size: 0.9em;
}
.article-list__empty,
.article-list__out-of-range {
    padding: 24px 0;
    color: #82868a;
}
.article-list__pagination {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Widok artykułu — ograniczona szerokość wiersza dla czytelności. */
.article {
    max-width: 820px;
    margin: 0 auto;
}
.article__date {
    display: block;
    margin: 4px 0 20px;
    color: #82868a;
    font-size: 0.9em;
}
.article__content {
    line-height: 1.6;
}
.article__content img {
    max-width: 100%;
    height: auto;
}
.article__attachments {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px dotted #c9cccf;
}

/* Karuzela partnerów — wyśrodkowanie i odstępy (komponent ma własny styl
 * osadzony, tu dokładamy jedynie marginesy i centrowanie logotypów). */
.partner-carousel {
    max-width: 960px;
    margin: 32px auto;
    text-align: center;
}
.partner-carousel__slide img {
    max-width: 100%;
    height: auto;
}

/* --- Stopka ----------------------------------------------------------------
 * Czytelna stopka w kolorystyce motywu (#82868a). Osobne klasy, aby nie
 * kolidować z `footer.fixed-footer` z motywu (którego tu nie używamy). */
.site-footer {
    margin-top: 40px;
    padding: 28px 0;
    background: #82868a;
    color: #fff;
    box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.15);
}
.site-footer a {
    color: #fff;
    text-decoration: underline;
}
.site-footer__name {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 8px;
}
.site-footer__address {
    font-style: normal;
    line-height: 1.6;
}
/* --- Nagłówek sekcji „partnerzy" -------------------------------------------
 * Motyw stylizuje każdy <h2> jako wyśrodkowaną ramkę o stałej szerokości 360px,
 * co łamie nagłówek „Jesteśmy oficjalnym partnerem:" na kilka linii. Tu
 * nadpisujemy WYŁĄCZNIE nagłówek sekcji partnerów: do lewej, bez ramki, pełna
 * szerokość i w jednej linii. `margin` wymaga `!important`, bo reguła bazowa
 * motywu używa `margin: 10px auto!important`. */
.partners h2 {
    border: 0;
    width: auto;
    max-width: none;
    margin: 10px 0 !important;
    padding: 16px 0;
    text-align: left;
    white-space: nowrap;      /* jedna linia */
}

/* --- Pełnoszerokościowe tła sekcji strony głównej --------------------------
 * base.html opakowuje treść w <div class="container site-main">, a bootstrapowy
 * .container ma ograniczoną szerokość (750/970/1170px) z marginesami auto.
 * Dlatego kolorowe/obrazkowe tła sekcji strony głównej nie dochodziły do
 * krawędzi okna. Techniką „full-bleed" rozciągamy KAŻDĄ sekcję najwyższego
 * poziomu strony głównej na pełną szerokość viewportu (100vw, wyśrodkowanie
 * ujemnym marginesem), zachowując tło motywu na całej szerokości. Dotyczy
 * WYŁĄCZNIE strony głównej (body.home) i tylko bezpośrednich sekcji w
 * .site-main — zagnieżdżona <section class="partner-carousel"> pozostaje bez
 * zmian. Treść wewnątrz sekcji pozostaje wyśrodkowana (max-width). */
body.home .site-main > section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Zapobiega poziomemu przewijaniu od 100vw przy obecnym pasku przewijania. */
    max-width: 100vw;
}

/* Treść sekcji wyśrodkowana i ograniczona szerokością, aby po rozciągnięciu
 * tła same teksty/obrazy nie sięgały krawędzi ekranu. Wrapper wewnętrzny
 * (bezpośrednie dzieci sekcji) centrowany do szerokości zbliżonej do dawnego
 * kontenera. */
body.home .site-main > section > * {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

/* Zabezpieczenie przed poziomym paskiem przewijania wynikającym z różnicy
 * między 100vw a szerokością okna pomniejszoną o pionowy pasek przewijania.
 * Ograniczone do strony głównej. */
body.home {
    overflow-x: hidden;
}

/* --- Nagłówek partnerów w kolumnie treści (po full-bleed) ------------------
 * Po rozciągnięciu sekcji strony głównej na pełną szerokość (full-bleed
 * powyżej) reguła `.partners h2` z `width:auto; max-width:none;
 * margin:10px 0 !important` nadpisywała generyczne centrowanie
 * `body.home .site-main > section > *` (max-width:1170px; margin auto) — przez
 * co nagłówek „Jesteśmy oficjalnym partnerem:" przyklejał się do lewej krawędzi
 * OKNA zamiast do lewej krawędzi wyśrodkowanej kolumny 1170px. Tu, bardziej
 * szczegółowym selektorem (większa specyficzność niż `.partners h2` i niż
 * generyczna reguła sekcji), przywracamy nagłówek do wyśrodkowanej kolumny:
 * blok wyśrodkowany przez `margin: ... auto`, tekst nadal do lewej, bez ramki,
 * w jednej linii. */
body.home .site-main > section.partners h2 {
    max-width: 1170px;
    width: auto;
    margin: 10px auto !important;   /* auto po bokach → wyśrodkowanie bloku w kolumnie 1170px */
    text-align: left;               /* tekst nadal do lewej */
    border: 0;
    padding: 16px 0;
    white-space: nowrap;            /* jedna linia */
    box-sizing: border-box;
}


/* --- Logo w nagłówku (pilogo.png) ------------------------------------------ */
.navbar-brand__logo { height: 54px; width: auto; display: block; }

/* --- Logo UE po prawej stronie paska --------------------------------------- */
.navbar-ue-logo { height: 48px; width: auto; display: inline-block; float: right; margin: 12px 0; }

/* --- Pasek nagłówka: jeden rząd na całą szerokość (logo | menu | logo UE) ---
 * Rozciągamy pasek na pełną szerokość i układamy trzy elementy w jednej linii,
 * wyśrodkowane pionowo: pilogo (lewa), menu (środek), LogoUE (prawa). Zakres
 * ograniczony do <header>, aby NIE ruszać kontenerów treści (.site-main) ani
 * stopki (.site-footer), które również używają .container. Bez bootstrapowego
 * JS wymuszamy widoczność menu (.navbar-collapse) i neutralizujemy floaty
 * motywu, aby to flexbox decydował o rozmieszczeniu. */

/* Pełna szerokość paska — nadpisuje max-width: 1200px z motywu. */
body > header .navbar {
    max-width: none;
    width: 100%;
}

/* Kontener nagłówka jako rząd flex na całą szerokość okna. */
body > header .navbar > .container {
    display: flex;
    align-items: center;        /* wspólne centrowanie pionowe trzech elementów */
    width: 100%;
    max-width: none;            /* nie 1170px bootstrapa — pełna szerokość */
    min-height: 72px;           /* mieści wyższe logo (54px) z oddechem */
    padding: 0 20px;            /* oddech od krawędzi okna */
    box-sizing: border-box;
}

/* Lewa strona — pilogo. Bez floatu, bez marginesów motywu. */
body > header .navbar .navbar-header {
    float: none;
    margin: 0;
    flex: 0 0 auto;
}
body > header .navbar .navbar-brand {
    float: none;
    padding: 8px 0;
    margin: 0;
    height: auto;
}

/* Środek — menu. Wymuszona widoczność (brak JS-owego toggle), rośnie i
 * dosuwa pozycje do prawej (bliżej LogoUE). */
body > header .navbar .navbar-collapse {
    display: flex !important;   /* nie pozwól bootstrapowi ukryć menu */
    flex: 1 1 auto;
    justify-content: flex-end;  /* menu bliżej prawej (przy LogoUE) */
    align-items: center;
    padding: 0;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
body > header .navbar .site-nav {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* Pozycje menu w poziomie, wyśrodkowane pionowo, bez floatów. */
body > header .navbar .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    float: none;
}
body > header .navbar .site-nav__item {
    float: none;
}

/* Prawa strona — LogoUE. Bez floatu; trzyma się prawej dzięki flexowi. */
body > header .navbar .navbar-ue-logo {
    float: none;
    margin: 0 0 0 16px;         /* odstęp od menu */
    flex: 0 0 auto;
}

/* --- Ujednolicony styl nagłówków sekcji strony głównej --------------------
 * Wszystkie nagłówki sekcji (poza hero) mają wyglądać jak „Jesteśmy oficjalnym
 * partnerem:": wyjustowane do lewej, bez ramki, w wyśrodkowanej kolumnie 1170px,
 * w jednej linii. Hero (section.index) celowo pomijamy. Reguła uogólnia
 * istniejący styl `section.partners h2` na wszystkie siedem sekcji strony
 * głównej (news, partners, offer, clients, euprograms, employee, contact).
 * Nagłówek oferty jest teraz <h2>, więc również go obejmuje. */
body.home .site-main > section.news h2,
body.home .site-main > section.partners h2,
body.home .site-main > section.offer h2,
body.home .site-main > section.clients h2,
body.home .site-main > section.euprograms h2,
body.home .site-main > section.employee h2,
body.home .site-main > section.contact h2 {
    max-width: 1170px;
    width: auto;
    margin: 10px auto !important;   /* auto po bokach → wyśrodkowanie bloku w kolumnie 1170px */
    text-align: left;               /* tekst nadal do lewej */
    border: 0;
    padding: 16px 0;
    white-space: nowrap;            /* jedna linia — spójnie z regułą partners */
    box-sizing: border-box;
}

/* Kotwice sekcji: odsuń cel skoku spod przyklejonego nagłówka strony głównej.
 * Nagłówek strony głównej jest `position: fixed` (motyw: body.home > header),
 * więc bez tego odsunięcia skok do `#news` itd. chowałby sekcję pod paskiem.
 * 90px ≈ wysokość przyklejonego nagłówka z oddechem (min-height ~72px). */
body.home .site-main > section[id] {
    scroll-margin-top: 90px;
}

/* --- Mapa w sekcji Kontakt: zawsze widoczna ------------------------------
 * Motyw ustawia elementom z klasą `.animate` opacity:0 i odsłania je dopiero,
 * gdy sekcja dostanie klasę `current` (przez JS motywu). Aby osadzona mapa
 * Google była widoczna niezależnie od tego mechanizmu, wymuszamy pełną
 * widoczność dla iframe mapy w sekcji kontaktu. */
body.home .site-main > section.contact iframe.map {
    opacity: 1;
}
/* --- Sekcja Kontakt: wyśrodkowanie tekstu w kolumnach górnego wiersza ------
 * Dane firmy (lewa) i dane kontaktowe (prawa) w górnym wierszu mają być
 * wyśrodkowane. Dolny wiersz (dane rejestrowe) jest już wyśrodkowany klasą
 * `text-center` i pozostaje bez zmian. */
body.home .site-main > section.contact .contact-info__company,
body.home .site-main > section.contact .contact-info__details {
    text-align: center;
}

/* --- Menu górne: wyśrodkowanie ---------------------------------------------
 * Wcześniej menu było dosunięte do prawej (justify-content: flex-end). Teraz
 * wyśrodkowujemy pozycje w przestrzeni między logo (pilogo) a LogoUE. Reguły
 * nadpisują wcześniejsze ustawienie wyrównania paska nagłówka. */
body > header .navbar .navbar-collapse { justify-content: center; }
body > header .navbar .site-nav { justify-content: center; }
body > header .navbar .site-nav__list { justify-content: center; }

/* Nagłówek sekcji „Produkty” — spójny z pozostałymi (jak „Jesteśmy oficjalnym partnerem:”). */
body.home .site-main > section.products h2 {
    max-width: 1170px;
    width: auto;
    margin: 10px auto !important;
    text-align: left;
    border: 0;
    padding: 16px 0;
    white-space: nowrap;
    box-sizing: border-box;
}

/* --- Boxy produktów (sekcja „Produkty”) ------------------------------------
 * Do czterech boxów w rzędzie (kolumny Bootstrap `col-md-3` → 25% przy ≥768px).
 * Motywowa reguła 20% dotyczy wyłącznie `article.col-md-3`, a nasze kolumny to
 * `div.col-md-3` z wewnętrznym `article.product-box` (bez klasy `col-md-3`),
 * więc nie jest nadpisywana. Używamy własnej klasy `.product-box`, bo motywowy
 * `article.product` jest przeznaczony dla ikon 190px. Box: tytuł (link) i
 * kilka linijek skrótu treści przyciętych wielowierszowo (line-clamp). */
body.home .site-main > section.products .products-list { margin-top: 20px; }
.product-box {
    border: 1px solid #f3f3f3;
    padding: 14px;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
    background: #fff;
}
.product-box__title { margin: 0 0 8px; font-size: 1.15em; line-height: 1.3; }
.product-box__title a { color: #82868a; }
.product-box__title a:hover { color: #428bca; }
.product-box__excerpt {
    margin: 0 0 8px;
    font-size: 0.95em;
    line-height: 1.4;
    /* Przytnij skrót do kilku linijek (wielowierszowy ellipsis). */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Wyrównaj wysokości boxów w rzędzie (flex na rzędzie bootstrapowym). */
body.home .site-main > section.products .products-list { display: flex; flex-wrap: wrap; }
body.home .site-main > section.products .products-list > [class*="col-"] { display: flex; margin-bottom: 20px; }

/* --- Boxy „Najnowsze wydarzenia” (3 kolumny): tytuł, kreska, treść, link --- */
.news-box { height: 100%; box-sizing: border-box; }
.news-box__title { margin: 0 0 8px; font-size: 1.15em; line-height: 1.3; }
.news-box__rule { border: 0; border-top: 2px solid #82868a; margin: 8px 0; }
.news-box__content {
    /* Pełna treść przycięta do kilku linii (wielowierszowy ellipsis) ORAZ
       twardy limit wysokości 520px jako bezpiecznik — treść nigdy nie
       przekracza 520px niezależnie od długości wierszy. */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 520px;
    margin-bottom: 8px;
}
/* Równa wysokość boxów w rzędzie. */
body.home .site-main > section.news .row { display: flex; flex-wrap: wrap; }
body.home .site-main > section.news .row > [class*="col-"] { display: flex; margin-bottom: 20px; }
/* Przycisk „Zobacz więcej” sekcji wydarzeń — wyśrodkowany pod boxami. */
body.home .site-main > section.news .news-more { text-align: center; margin-top: 10px; }

/* --- Strona /wydarzenia/ (lista wszystkich wydarzeń jeden pod drugim) ------ */
.news-list__items { list-style: none; padding: 0; margin: 0; }
.news-list__item { margin-bottom: 32px; }
.news-list__rule { border: 0; border-top: 2px solid #82868a; margin: 8px 0; }

/* --- Boxy newsów: usuń dublującą się belkę i niebieski link w tytule -------
 * Motyw dokłada `border-bottom` każdemu <h4> w sekcji news
 * (`body section.news h4`), co razem z naszym <hr class="news-box__rule">
 * dawało DWIE belki między tytułem a treścią. Zdejmujemy belkę z tytułu
 * (zostaje jawny <hr>). Dodatkowo link w tytule domyślnie jest niebieski —
 * ustawiamy kolor tekstu sekcji (#82868a) także w stanie hover. */
body.home .site-main > section.news .news-box__title {
    border-bottom: 0;
}
body.home .site-main > section.news .news-box__title a,
body.home .site-main > section.news .news-box__title a:hover,
body.home .site-main > section.news .news-box__title a:focus {
    color: #82868a;
    text-decoration: none;
}

/* --- Sekcja „Projekty dofinansowane”: bez wyśrodkowania -------------------
 * Motyw centruje treść sekcji euprograms (akapity `text-align: center`,
 * obrazy `margin: 0 auto`). Usuwamy wyśrodkowanie — treść do lewej, obrazy
 * bez automatycznego centrowania. Zakres ograniczony do strony głównej. */
body.home .site-main > section.euprograms p {
    text-align: left;
}
body.home .site-main > section.euprograms img {
    margin: 0;
    text-align: left;
    /* max-width: 100% chroni wstawione obrazy treści przed wyjściem poza
     * wyśrodkowaną kolumnę (max 1170px); height: auto zachowuje proporcje. */
    max-width: 100%;
    height: auto;
}

/* --- Sekcja „Projekty dofinansowane”: wewnętrzny kontener treści -----------
 * Treść strony UE (richtext) wstrzykiwana jest jako luźne elementy wprost do
 * sekcji full-bleed (100vw). Opakowujemy ją w kontener o stałej szerokości
 * kolumny (1170px, wyśrodkowany), aby obrazy richtext — w tym Wagtailowy
 * `full-width` — nie wychodziły poza obszar sekcji. */
body.home .site-main > section.euprograms .euprograms-content {
    max-width: 1170px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
body.home .site-main > section.euprograms .euprograms-content img {
    max-width: 100%;
    height: auto;
}
/* Wagtailowy `full-width` obraz ma zajmować pełną szerokość KONTENERA, nie okna. */
body.home .site-main > section.euprograms .euprograms-content img.full-width {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Strona /oferty-pracy/: lista stanowisk bez wypunktowania -------------
 * Oferty pracy renderują się jako <ul class="jobs-list__items"> / <li>. Bez
 * resetu <ul> pokazywałby domyślne kropki wypunktowania i lewe wcięcie.
 * Kolejne stanowiska rozdziela pozioma kreska na całą szerokość kolumny treści:
 * realizowana jako górny border na każdej pozycji POZA pierwszą, dzięki czemu
 * linia pojawia się TYLKO MIĘDZY pozycjami i obejmuje pełną szerokość kolumny. */
.jobs-list__items { list-style: none; padding: 0; margin: 0; }
.jobs-list__item { margin-bottom: 32px; padding-top: 32px; border-top: 2px solid #82868a; }
.jobs-list__items > .jobs-list__item:first-child { padding-top: 0; border-top: 0; }

/* --- Strona /oferty-pracy/: okrągły obrazek (lewo) + blok treści (prawo) ----
 * Każda pozycja to wiersz flex: okrągły obrazek stanowiska po LEWEJ, a po
 * PRAWEJ blok (.jobs-list__body) z tytułem i treścią. align-items:flex-start
 * ustawia obrazek u góry obok tytułu (nie centruje go względem długiej treści).
 * Okrągła maska (border-radius 50% + overflow hidden) o średnicy 170px z obrazem
 * tła (figure) pokrywającym koło; po najechaniu kursorem figure delikatnie się
 * powiększa (zoom), przycięty do koła. Wszystkie selektory ograniczone do klas
 * .jobs-list__..., aby nic poza stroną ofert pracy nie zostało naruszone.
 * Koło odsunięte 80px od lewej krawędzi kolumny treści, odstęp koło↔treść 40px. */
.jobs-list__position {
    display: flex;
    align-items: flex-start;
    gap: 40px;            /* odstęp koło ↔ treść = 40px */
    padding-left: 80px;   /* koło zaczyna się 80px od lewej krawędzi kolumny treści */
    box-sizing: border-box;
}
.jobs-list__avatar {
    flex: 0 0 auto;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 2px solid #82868a;
    box-sizing: border-box;
}
.jobs-list__avatar-figure {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
    transition: transform 0.4s ease-in;
}
.jobs-list__avatar:hover .jobs-list__avatar-figure {
    transform: scale(1.2);
}
/* Prawy blok rośnie i wypełnia resztę wiersza; min-width:0 zapobiega przelewaniu
 * długiej treści poza kolumnę (typowy fix dla elementów flex). */
.jobs-list__body {
    flex: 1 1 auto;
    min-width: 0;
}
/* Tytuł w bloku treści — odstęp pod tytułem przed treścią. */
.jobs-list__body .jobs-list__title {
    margin: 0 0 8px;
}

/* --- Sekcja „Poszukujemy pracowników…” (employee) na stronie głównej -------
 * Okrągłe ikony stanowisk: obrazek (job_image) jako tło koła z delikatnym
 * zoomem po najechaniu, a na wierzchu tytuł stanowiska na półprzezroczystej
 * plakietce. Całe koło jest odnośnikiem do /oferty-pracy/. Stanowiska bez
 * obrazka pokazują koło w kolorze motywu (#82868a) z samym tytułem. Odtwarza
 * efekt „employee-item” z dawnej strony głównej. Centrowanie tytułu przez
 * flexbox na kole, figura tła pozostaje absolutnie pozycjonowana pod spodem. */
body.home .site-main > section.employee .employee-grid { margin-top: 20px; }
.employee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 200px;
    height: 200px;
    max-width: 100%;
    margin: 20px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ffffff;
    background: #82868a;              /* fallback gdy brak obrazka */
    box-sizing: border-box;
    text-align: center;
}
.employee-item__figure {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    margin: 0;
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
    transition: transform 0.4s ease-in;
    z-index: 1;
}
.employee-item:hover .employee-item__figure { transform: scale(1.2); }
.employee-item__title {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0;
    padding: 6px 10px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    pointer-events: none;
    max-width: 90%;
    box-sizing: border-box;
}

/* Kotwice stanowisk (/oferty-pracy/#slug): odsuń cel skoku, aby pozycja nie
 * chowała się pod górnym paskiem nagłówka. */
.jobs-list__item[id] { scroll-margin-top: 90px; }

/* === WARSTWA RESPONSYWNA (mobile) ===========================================
 * Reguły @media dopisane NA KOŃCU pliku (companysite.css ładowany jako ostatni
 * arkusz). Pozycja na końcu jest istotna: przy równej specyficzności decyduje
 * kolejność, a reguły mobilne muszą nadpisać desktopowe reguły paska nagłówka
 * zdefiniowane wyżej w tym pliku.
 *
 * Konwencja breakpointów (spójna z design.md):
 *   - <= 767.98px → układ mobilny (Menu_Mobilne, hamburger).
 *   - >= 768px    → układ poziomy (desktop, bez zmian; 768px = desktop).
 *   - <= 479.98px → dodatkowe korekty najwęższych ekranów (kolejne zadania).
 * Wartości 767.98/479.98 domykają zakres tuż poniżej progu bez nakładania na
 * `min-width: 768px` (standard m.in. Bootstrap 4+), eliminując lukę przy
 * ułamkowych szerokościach (device pixel ratio > 1).
 *
 * Kolejne zadania (4.2, 4.3, 5.x, 6.x, 7.x) dopisują reguły do odpowiednich
 * bloków @media poniżej.
 * ------------------------------------------------------------------------- */

/* --- Baza przycisku hamburgera (niezależna od breakpointu) -----------------
 * Reset wyglądu natywnego <button>. Widoczność steruje wyłącznie @media:
 * domyślnie ukryty (desktop), odsłaniany w zakresie mobilnym poniżej. */
.nav-toggle {
    display: none;              /* domyślnie ukryty; @media mobilne go odsłania */
    padding: 10px;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    line-height: 0;
}

/* --- Kreski ikony hamburgera (niezależne od breakpointu) -------------------
 * Wym. 3.8 — ikona musi być widoczna z kontrastem >= 3:1 względem tła paska.
 * Każda kreska ma jawny rozmiar i ciemny kolor #333 (~10:1 na białym #fff,
 * bezpiecznie powyżej 3:1). Przycisk jest flex-direction:column, więc kreski
 * układają się pionowo i są wyśrodkowane. */
.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #333;
    border-radius: 1px;
}
.nav-toggle__bar + .nav-toggle__bar {
    margin-top: 4px;            /* odstęp między kreskami */
}

/* === @media (max-width: 767.98px) — UKŁAD MOBILNY ===========================
 * Zakres telefonów: hamburger widoczny, Menu_Poziome ukryte. Panel mobilny,
 * pasek, sekcje strony głównej i podstrony dokładają kolejne zadania. */
@media (max-width: 767.98px) {

    /* Wym. 1.1 — Przycisk_Hamburgera widoczny w Gornym_Pasku. Jako flex, aby
     * wyśrodkować kreski ikony pionowo w kolejnych zadaniach. */
    .nav-toggle {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* Wym. 1.2 — ukrycie Menu_Poziomego (Panel_Rozwijany zwinięty domyślnie).
     * Nadpisujemy desktopową regułę `body > header .navbar .navbar-collapse
     * { display: flex !important }` o tej samej specyficzności, również z
     * `!important`, ustawiając display:none. */
    body > header .navbar .navbar-collapse {
        display: none !important;
    }

    /* Stan otwarty: klasa `nav-open` na <body> (sterowana przez JS) odsłania
     * Panel_Rozwijany. Selektor `body.nav-open > header ...` ma WYŻSZĄ
     * specyficzność (dodatkowa klasa stanu) niż reguła ukrywająca powyżej,
     * więc wygrywa deterministycznie — bez „wyścigu" !important. Pozycjonowanie
     * i wygląd panelu dokłada zadanie 4.2. */
    body.nav-open > header .navbar .navbar-collapse {
        display: block !important;
    }

    /* --- Fallback bez JS / z JS (progressive enhancement, Wym. 12.1) -------
     * Szablon oznacza dokument jako `<html class="no-js">`; skrypt
     * `companysite.js` zamienia tę klasę na `js` możliwie wcześnie. Dzięki temu
     * CSS może rozróżnić tryb z JS i bez JS i zapewnić dostępną nawigację
     * niezależnie od JavaScriptu (graceful degradation).
     *
     * TRYB BEZ JS (`html.no-js`): klasa `body.nav-open` nigdy nie jest
     * ustawiana (brak skryptu), więc domyślne ukrycie panelu pozostawiłoby
     * menu nieosiągalne. Dlatego przy `html.no-js` Panel_Rozwijany pozostaje
     * w NORMALNYM przepływie, widoczny jako pionowa lista pod paskiem: menu
     * działa bez zwijania (brak hamburgera do obsługi). Nadpisujemy więc
     * ukrycie (`display: block !important`) oraz pozycjonowanie `fixed`
     * z zadania 4.2 — panel wraca do `position: static`, aby NIE był nakładką
     * nad treścią, lecz zwykłym blokiem w przepływie pod paskiem. Pionowy
     * układ listy (`#site-nav-panel .site-nav__list { flex-direction: column }`)
     * obowiązuje nadal, bo jest kluczowany na `#site-nav-panel`.
     *
     * TRYB Z JS (`html.js`): bez zmian. Domyślne ukrycie panelu (`display:none`)
     * i jego odsłanianie przez `body.nav-open` (zadanie 4.1) oraz pozycjonowanie
     * `fixed` (zadanie 4.2) pozostają NIETKNIĘTE. Celowo NIE dokładamy osobnej
     * reguły ukrywającej kluczowanej na `html.js`: miałaby ona wyższą
     * specyficzność niż `body.nav-open > header ...` (dodatkowy człon `html`)
     * i chowałaby panel także w stanie otwartym, psując sterowanie hamburgerem.
     * Wystarczy więc dodać tylko nadpisanie dla trybu bez JS poniżej —
     * w trybie z JS selektory `html.no-js ...` po prostu nie pasują.
     *
     * TRYB BEZ JS (`html.no-js`): nadpisujemy domyślne ukrycie panelu, bo bez
     * skryptu `body.nav-open` nigdy nie powstaje. Selektor `html.no-js body >
     * header .navbar .navbar-collapse` ma wyższą specyficzność (dodatkowy człon
     * `html.no-js`) niż reguła ukrywająca z zadania 4.1, więc wygrywa
     * deterministycznie i odsłania panel w normalnym przepływie. */
    html.no-js body > header .navbar .navbar-collapse {
        display: block !important;
    }
    /* Panel w normalnym przepływie (nie nakładka) — neutralizujemy fixed
     * pozycjonowanie i ograniczenia wysokości z reguły `#site-nav-panel`
     * (zadanie 4.2), tak aby panel płynął pod paskiem jak zwykły blok, a nie
     * nakładka nad treścią. `html.no-js #site-nav-panel` (id + klasa) ma wyższą
     * specyficzność niż `#site-nav-panel`, więc nadpisuje pozycjonowanie. */
    html.no-js #site-nav-panel {
        position: static;
        top: auto;
        max-height: none;
        overflow-y: visible;
        box-shadow: none;
    }

    /* --- Panel_Rozwijany pod paskiem (pozycjonowanie) ----------------------
     * Wym. 2.1, 2.6: górna krawędź panelu przylega do dolnej krawędzi
     * Gornego_Paska (odstęp 0px) i panel leży NAD treścią, nie zasłonięty
     * przez pasek. Na body.home nagłówek jest `position: fixed` (motyw), więc
     * panel również pozycjonujemy `position: fixed; top: 72px` (72px = wysokość
     * paska z `min-height: 72px` kontenera nagłówka), rozciągnięty na całą
     * szerokość (left:0; right:0). z-index 99 — tuż poniżej nagłówka (theme
     * header ma z-index:100), a powyżej treści strony, więc panel wysuwa się
     * spod paska bez zasłaniania go.
     *
     * Reguła dotyczy panelu niezależnie od strony; dla podstron (header w
     * zwykłym flow) `position: fixed; top: 72px` również dosuwa panel do dołu
     * paska bez zasłaniania (pasek jest u góry viewportu). */
    #site-nav-panel {
        position: fixed;
        top: 72px;              /* dolna krawędź paska (min-height 72px) */
        left: 0;
        right: 0;
        margin: 0;              /* odstęp 0px od paska */
        z-index: 99;            /* nad treścią, tuż pod nagłówkiem (z-index 100) */
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        /* Wym. 2.8 — przewijanie, gdy lista wyższa niż obszar pod paskiem. */
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Wym. 2.1/2.2 — animacja rozwijania/zwijania 150–300ms. */
        transition: opacity 200ms ease, visibility 200ms ease;
    }

    /* --- Panel_Rozwijany: pionowa lista pozycji (Wym. 2.3) -----------------
     * Nadpisujemy desktopowy poziomy układ listy (flex-wrap:wrap; justify
     * flex-end/center). Każda pozycja w osobnym wierszu, pełna szerokość. */
    #site-nav-panel .site-nav {
        width: 100%;
        display: block;
    }
    #site-nav-panel .site-nav__list {
        display: flex;
        flex-direction: column;
        align-items: stretch;       /* pozycje na pełną szerokość panelu */
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #site-nav-panel .site-nav__item {
        float: none;
        width: 100%;                /* osobny wiersz, pełna szerokość */
    }
    #site-nav-panel .site-nav__link {
        display: block;             /* pełna szerokość klikalnego obszaru */
        width: 100%;
        box-sizing: border-box;
        padding: 12px 20px;
        /* Wym. 3.8 — tekst linku musi mieć kontrast >= 4.5:1 względem białego
         * (#ffffff) tła panelu. Motywowy #82868a daje tylko ~3.7:1, dlatego na
         * panelu mobilnym wymuszamy #333 (~10:1 na białym), bezpiecznie powyżej
         * 4.5:1. Zakres ograniczony do #site-nav-panel, więc desktop bez zmian. */
        color: #333;
    }
    #site-nav-panel .site-nav__link:hover,
    #site-nav-panel .site-nav__link:focus {
        color: #333;                /* stan hover/focus pozostaje czytelny (~10:1) */
    }

    /* --- Górny pasek: Logo_Firmy | Hamburger | LogoUE w jednym rzędzie -----
     * Wym. 5.1–5.5. Kontener paska pozostaje rzędem flex (jak na desktopie),
     * ale na mobile wymuszamy brak zawijania, redukujemy padding i skalujemy
     * oba logo, tak aby trzy elementy zmieściły się w jednym wierszu w granicach
     * viewportu — bez poziomego przewijania. */

    /* Wym. 5.1 — jeden rząd bez zawijania; mniejszy padding kontenera (Wym. 5.3,
     * 5.4). min-width:0 pozwala elementom flex kurczyć się poniżej rozmiaru
     * zawartości, co eliminuje wypychanie poza viewport. */
    body > header .navbar > .container {
        flex-wrap: nowrap;
        padding: 0 10px;            /* redukcja paddingu (z 20px) — więcej miejsca */
        min-width: 0;
    }

    /* Logo_Firmy (lewa) i blok LogoUE (prawa) nie mogą rosnąć; mogą się kurczyć.
     * overflow:hidden chroni przed wypchnięciem rzędu, gdy zawartość jest szersza. */
    body > header .navbar .navbar-header {
        min-width: 0;
        overflow: hidden;
    }

    /* Wym. 5.4 — Logo_Firmy skalowane w dół (z 54px). Przy typowych telefonach
     * 40px mieści się komfortowo obok hamburgera i LogoUE. Dolny limit (24px)
     * dla najwęższych ekranów dokłada @media (max-width: 479.98px) poniżej. */
    .navbar-brand__logo {
        height: 40px;
    }

    /* Wym. 5.2 — LogoUE pozostaje widoczne, wysokość nie mniejsza niż 24px.
     * Skalujemy z 48px do 36px (nadal > 24px), odsuwając nieco od hamburgera. */
    .navbar-ue-logo {
        height: 36px;
    }
    body > header .navbar .navbar-ue-logo {
        margin: 0 0 0 8px;          /* mniejszy odstęp niż desktopowe 16px */
        flex: 0 0 auto;
    }

    /* Hamburger w rzędzie nie może się kurczyć (pozostaje w pełni klikalny),
     * z lekkim odstępem od Logo_Firmy. Mniejszy padding oszczędza szerokość. */
    .nav-toggle {
        flex: 0 0 auto;
        padding: 8px;
        margin: 0 4px;
    }

    /* --- Nagłówki sekcji strony głównej: zawijanie na mobile ---------------
     * Wym. 6.1–6.5. Reguły bazowe wymuszają pojedynczą linię nagłówków sekcji
     * (`white-space: nowrap`) przez trzy zestawy selektorów:
     *   1) zbiorczy `body.home .site-main > section.{news,partners,offer,
     *      clients,euprograms,employee,contact} h2`,
     *   2) `body.home .site-main > section.products h2`,
     *   3) `.partners h2` oraz `body.home .site-main > section.partners h2`.
     * Na telefonach `nowrap` wypycha długie nagłówki poza prawą krawędź
     * viewportu (poziome przewijanie). Tu odwracamy to WYŁĄCZNIE dla ≤767.98px:
     * nagłówki zawijają się do kolejnych wierszy (Wym. 6.1), mieszczą się w
     * granicach szerokości treści (Wym. 6.2, 6.5), a ekstremalnie długie słowa
     * są łamane w obrębie wyrazu (Wym. 6.4). Układ ≥768px (pojedyncza linia —
     * Wym. 6.3) zachowują niezmienione reguły bazowe.
     *
     * Łańcuch selektorów odwzorowuje reguły bazowe (`body.home .site-main >
     * section.X h2`), więc specyficzność jest co najmniej równa; dodatkowo
     * `!important` na `white-space` gwarantuje nadpisanie `nowrap` niezależnie
     * od kolejności, a `overflow-wrap` i `word-break` domykają łamanie słów. */
    body.home .site-main > section.news h2,
    body.home .site-main > section.partners h2,
    body.home .site-main > section.products h2,
    body.home .site-main > section.offer h2,
    body.home .site-main > section.clients h2,
    body.home .site-main > section.euprograms h2,
    body.home .site-main > section.employee h2,
    body.home .site-main > section.contact h2 {
        white-space: normal !important;   /* Wym. 6.1 — zawijanie zamiast nowrap */
        overflow-wrap: break-word;        /* Wym. 6.2/6.5 — łamanie długich wierszy */
        word-break: break-word;           /* Wym. 6.4 — łamanie ekstremalnie długich słów */
    }

    /* --- Układ jednokolumnowy sekcji strony głównej (Wym. 7.1) -------------
     * Sekcje strony głównej używają siatki Bootstrap (col-md-*, col-sm-*),
     * a dwie z nich (products, news) mają dodatkowo rzędy flex zdefiniowane
     * w regułach bazowych:
     *   body.home .site-main > section.products .products-list { display:flex; flex-wrap:wrap }
     *   body.home .site-main > section.news .row { display:flex; flex-wrap:wrap }
     * z kolumnami `> [class*="col-"] { display:flex }`.
     * Na telefonach (≤767.98px) wszystkie kolumny Bootstrap w obrębie sekcji
     * mają układać się w POJEDYNCZEJ kolumnie pionowej: 100% szerokości,
     * jedna pod drugą, w kolejności źródłowej. Zerujemy więc szerokości siatki
     * (float:none; width/flex-basis/max-width:100%), nadpisując bootstrapowe
     * `col-*` niezależnie od breakpointu klasy. Dla rzędów flex (products,
     * news) dodatkowo przełączamy rząd w kolumnę, aby kolumny nie dzieliły
     * jednego wiersza. Kolejność źródłowa zostaje zachowana (brak order/
     * reverse). Łańcuch selektorów odwzorowuje reguły bazowe
     * (`body.home .site-main > section ...`), więc specyficzność jest co
     * najmniej równa, a pozycja na końcu pliku zapewnia pierwszeństwo. */
    body.home .site-main > section [class*="col-"] {
        float: none;
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Rzędy flex (products, news): z poziomego na pionowy, aby kolumny
     * ustawiały się jedna pod drugą na pełną szerokość. */
    body.home .site-main > section.products .products-list,
    body.home .site-main > section.news .row {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    /* --- Full-bleed bez poziomego scrolla (Wym. 7.2, 7.4, 7.5, 11.1, 11.6)
     * Sekcje strony głównej są full-bleed (`width:100vw; margin-left:
     * calc(50% - 50vw)`), co jest bezpieczne tylko wtedy, gdy dokument nie
     * udostępnia poziomego scrolla — 100vw bywa szersze od obszaru treści
     * (szerokość paska przewijania). `overflow-x:hidden` na `body.home`
     * domyka ewentualną nadwyżkę i gwarantuje brak poziomego przewijania
     * mimo techniki Full_Bleed. (Reguła istnieje już w warstwie desktopowej;
     * reafirmujemy ją tutaj, aby intencja była jawna w zakresie mobilnym.) */
    body.home {
        overflow-x: hidden;
    }

    /* Wym. 7.4/11.6 — obrazy w sekcjach strony głównej skalowane do szerokości
     * kontenera, z zachowaniem proporcji (bez zniekształceń i bez wypychania
     * treści poza viewport). */
    body.home .site-main > section img {
        max-width: 100%;
        height: auto;
    }

    /* --- Sekcja employee — okrągłe stanowiska (Wym. 8.1–8.5) ----------------
     * Desktop ustala koło 200x200px. Na telefonach (480–767px) zmniejszamy je
     * do 160px, utrzymując proporcje 1:1 (width == height) i okrągły kształt.
     * `margin: 20px auto` (reguła bazowa) wyśrodkowuje koło równymi marginesami
     * lewym/prawym (Wym. 8.2). Rozmiar 160px mieści się w zakresie 96–160px
     * (Wym. 8.3) i gwarantuje brak przycinania oraz poziomego scrolla (Wym. 8.1).
     * Łańcuch selektora odwzorowuje bazowy `.employee-item`, a pozycja na końcu
     * pliku zapewnia pierwszeństwo przy równej specyficzności. */
    .employee-item {
        width: 160px;
        height: 160px;
        margin: 20px auto;
    }

    /* Wym. 8.4/8.5 — podpis tytułu w całości, bez obcinania wielokropkiem,
     * czcionka ≥14px; tekst zawija się do kolejnych wierszy zamiast być
     * przycinany, zachowując wyśrodkowanie poziome (text-align:center z koła).
     * Dłuższe słowa łamiemy w obrębie wyrazu, by nie wypychały treści. */
    .employee-item__title {
        font-size: 14px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* --- Mapa Google w sekcji Kontakt (Wym. 7.3) ---------------------------
     * Osadzona mapa (`iframe.map`) ma zadeklarowane w atrybutach stałe wymiary
     * desktopowe (szeroki iframe), co na telefonach wypychałoby treść poza
     * viewport i generowało poziomy scroll. Na telefonach (≤767.98px)
     * ograniczamy ją do 100% szerokości kontenera nadrzędnego i skalujemy
     * wysokość do stałej, czytelnej wartości (~280px), tak aby mapa nie
     * przekraczała szerokości viewportu. Łańcuch selektora odwzorowuje regułę
     * bazową (`body.home .site-main > section.contact iframe.map`), więc
     * specyficzność jest co najmniej równa, a pozycja na końcu pliku zapewnia
     * pierwszeństwo. `opacity:1` z warstwy desktopowej pozostaje nienaruszone. */
    body.home .site-main > section.contact iframe.map {
        width: 100%;         /* Wym. 7.3 — pełna szerokość kontenera, nie iframe */
        max-width: 100%;     /* Wym. 7.3 — bez przekroczenia szerokości viewportu */
        height: 280px;       /* skalowana, czytelna wysokość na telefonach */
    }

    /* --- Podstrona /oferty-pracy/ — Wpis_Oferty (Wym. 9.1–9.5) --------------
     * Desktop ustawia wiersz flex: okrągły awatar po LEWEJ (170x170px, odsunięty
     * 80px od lewej, gap 40px do treści). Na telefonach (≤767.98px) przestawiamy
     * układ na pionowy (flex-direction:column): awatar NAD blokiem treści
     * (Wym. 9.1). `align-items:center` wyśrodkowuje awatar w poziomie, a oba
     * elementy — awatar i blok treści — zajmują pełną dostępną szerokość.
     * Redukujemy padding-left z 80px do 16px oraz gap z 40px do 16px (Wym. 9.2).
     * Łańcuch selektora odwzorowuje regułę bazową (`.jobs-list__position`),
     * a pozycja na końcu pliku zapewnia pierwszeństwo przy równej specyficzności. */
    .jobs-list__position {
        flex-direction: column;   /* Wym. 9.1 — awatar nad treścią */
        align-items: center;      /* Wym. 9.1 — awatar wyśrodkowany w poziomie */
        padding-left: 16px;       /* Wym. 9.2 — padding-left ≤16px (z 80px) */
        padding-right: 16px;      /* symetria, by treść nie dotykała krawędzi */
        gap: 16px;                /* Wym. 9.2 — gap ≤16px (z 40px) */
    }

    /* Wym. 9.1/9.4 — oba elementy na pełną dostępną szerokość kontenera; awatar
     * jako flex-item ze stałym rozmiarem (poniżej) zostaje wyśrodkowany przez
     * align-items:center, a blok treści rozciąga się na całą szerokość. */
    .jobs-list__body {
        width: 100%;
    }

    /* Wym. 9.1 — awatar skalowany w dół ze 170px do ~120px na telefonach
     * (480–767px), z zachowaniem proporcji 1:1 (width == height). Dla
     * najwęższych ekranów (<480px) dalszą redukcję do ≤96px dokłada
     * @media (max-width: 479.98px) poniżej (Wym. 9.3). Awatar nie może się
     * kurczyć poniżej zadanego rozmiaru (flex:0 0 auto z reguły bazowej). */
    .jobs-list__avatar {
        width: 120px;
        height: 120px;
    }

    /* --- Listy wydarzeń i artykułów oraz paginacja (Zadanie 6.2) -----------
     * Wym. 10.1/11.2 — kontener listy wydarzeń (`main.news-list`) w granicach
     * viewportu, bez poziomego scrolla. Wym. 10.2/11.4 — kontener listy
     * artykułów (`.article-list`, bazowo max-width:960px) ograniczony do pełnej
     * szerokości rodzica na telefonach. `box-sizing:border-box` sprawia, że
     * padding treści mieści się w 100% szerokości (nie dokłada się do niej).
     * `overflow-wrap:break-word` łamie bardzo długie słowa/linki, które mogłyby
     * rozepchnąć kontener poza viewport. */
    .news-list,
    .article-list {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

    /* Wym. 10.3/11.4 — elementy paginacji zawijają się do kolejnych wierszy
     * (flex-wrap:wrap), dzięki czemu przy wąskim viewportcie „Poprzednia /
     * status / Następna" nie wypychają szerokości poza granice viewportu i nie
     * powstaje poziomy scroll. Łańcuch selektora odwzorowuje regułę bazową
     * (`.article-list__pagination`); pozycja na końcu pliku daje pierwszeństwo. */
    .article-list__pagination {
        flex-wrap: wrap;
    }

    /* --- Widok artykułu: typografia i obrazy (Zadanie 6.3) ----------------
     * Wym. 10.4/10.6 — kontener artykułu (bazowo max-width:820px) ograniczony
     * do pełnej szerokości rodzica na telefonach; box-sizing:border-box sprawia,
     * że padding treści mieści się w 100% szerokości i nie rozpycha strony. */
    .article {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Wym. 10.5 — tekst główny artykułu: font-size ≥16px, line-height ≥1.5.
     * Bazowo .article__content ma line-height:1.6 (spełnia ≥1.5), tu ustawiamy
     * oba wprost, by wymóg był jawnie gwarantowany na telefonach niezależnie
     * od stylów motywu. */
    .article__content {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Wym. 10.4/10.6 — obrazy treści nie przekraczają szerokości kontenera i
     * zachowują proporcje (potwierdzenie reguły bazowej w kontekście mobilnym). */
    .article__content img {
        max-width: 100%;
        height: auto;
    }

    /* Wym. 11.6 — pojedyncze elementy szersze niż viewport (tabele, bloki kodu,
     * osadzone ramki) ograniczane do szerokości kontenera lub przewijane
     * wyłącznie lokalnie, bez wywoływania poziomego scrolla całej strony.
     * Tabele i <pre> jako blok z lokalnym overflow-x:auto; iframe skalowany. */
    .article__content table,
    .article__content pre {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
    .article__content iframe {
        max-width: 100%;
    }
}

/* === @media (max-width: 479.98px) — KOREKTY NAJWĘŻSZYCH EKRANÓW =============
 * Breakpoint_Waski (Wym. 5.5): przy skrajnej ciasnocie zmniejszamy w pierwszej
 * kolejności Logo_Firmy do jego minimalnej wysokości 24px, zachowując widoczność
 * Przycisku_Hamburgera i LogoUE (LogoUE utrzymane > 24px). */
@media (max-width: 479.98px) {

    /* Wym. 5.5 — Logo_Firmy do minimalnej wysokości 24px przy ciasnocie. */
    .navbar-brand__logo {
        height: 24px;
    }

    /* LogoUE trzymane powyżej dolnej granicy 24px (Wym. 5.2). */
    .navbar-ue-logo {
        height: 30px;
    }

    /* Dalsza redukcja paddingu kontenera i odstępów, by wykluczyć poziomy
     * scroll na ekranach ~320px (Wym. 5.3). */
    body > header .navbar > .container {
        padding: 0 6px;
    }
    body > header .navbar .navbar-ue-logo {
        margin: 0 0 0 4px;
    }
    .nav-toggle {
        padding: 6px;
        margin: 0 2px;
    }

    /* Wym. 8.3 — na najwęższych ekranach (<480px) zmniejszamy koło do 140px,
     * w zakresie 96–140px (i wciąż w dozwolonych 96–160px), utrzymując
     * proporcje 1:1 i wyśrodkowanie równymi marginesami (margin:... auto
     * z reguły w zakresie 767.98px / bazowej). Zapobiega przycinaniu i
     * poziomemu scrollowi przy ciasnych viewportach ~320px (Wym. 8.1, 8.2). */
    .employee-item {
        width: 140px;
        height: 140px;
    }

    /* Wym. 9.3 — na najwęższych ekranach (<480px) awatar Wpisu_Oferty skalowany
     * do 96x96px (górna granica dozwolonego ≤96px), z zachowaniem proporcji 1:1.
     * Nadpisuje 120px z zakresu 767.98px, gwarantując brak poziomego scrolla
     * przy ciasnych viewportach ~320px (Wym. 9.4). */
    .jobs-list__avatar {
        width: 96px;
        height: 96px;
    }
}

/* === @media (min-width: 768px) — UKŁAD POZIOMY (DESKTOP) ====================
 * 768px i więcej = desktop (Wym. 4.4). Desktop pozostaje bez zmian względem
 * stanu sprzed wprowadzenia hamburgera (Wym. 1.5, 12.3) — jedyną zmianą jest
 * ukrycie Przycisku_Hamburgera. */
@media (min-width: 768px) {

    /* Wym. 1.4 — Przycisk_Hamburgera ukryty; Menu_Poziome działa jak dotąd
     * (reguły bazowe `body > header .navbar .navbar-collapse` pozostają). */
    .nav-toggle {
        display: none;
    }
}

/* === @media (prefers-reduced-motion: reduce) — OGRANICZENIE ANIMACJI =======
 * Użytkownicy z preferencją ograniczenia ruchu (ustawienie systemowe) nie
 * powinni widzieć animacji przejścia panelu. Wyłączamy `transition` dodane w
 * zadaniu 4.2 (`transition: opacity 200ms ease, visibility 200ms ease`), dzięki
 * czemu otwieranie/zamykanie Menu_Mobilnego jest natychmiastowe. Stan końcowy i
 * pełna funkcjonalność pozostają bez zmian (Wym. 2.1, 2.2 — identyczny efekt,
 * tylko bez animacji). */
@media (prefers-reduced-motion: reduce) {
    #site-nav-panel {
        transition: none;
    }
}