@charset "UTF-8";

/* ============================================
   EUROBELT — nadpisania Cassiopeia (roboczy prototyp)
   ============================================ */

/* Fonty: self-hosted, SIL OFL, pełne wsparcie polskich znaków */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts-custom/ibm-plex-sans/IBMPlexSansVar-Roman.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts-custom/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cassiopeia-font-family-headings: "IBM Plex Sans", sans-serif;
  --cassiopeia-font-family-body: "Inter", sans-serif;
  --cassiopeia-font-weight-headings: 700;
  --cassiopeia-font-weight-normal: 400;

  --cassiopeia-color-brand: #ffffff;
}

/* Header i stopka: płaski ciemny granat (bez domyślnego gradientu) */
/* usunieto 2026-08-19: martwe reguly (nadpisane pozniej albo selektor bez trafien) */

/* Przycisk CTA: jasny niebieski / ciemny tekst (WCAG AA) */
.btn-primary {
  background-color: #06A0DC;
  border-color: #06A0DC;
  color: #042C53;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #058bc0;
  border-color: #058bc0;
  color: #042C53;
}

/* Strona głowna: hero */
.home-hero {
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
  text-align: center;
}

.home-hero p {
  color: #495057;
  margin-bottom: 1.5rem;
}

/* Strona głowna: siatka kategorii Oferty (mod_articles_categories) */
.mod-articlescategories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0 1rem 3rem;
  margin: 0 auto;
  max-width: 1200px;
}

.mod-articlescategories li {
  border: 1px solid #dee2e6;
  border-left: 4px solid #06A0DC;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mod-articlescategories li:hover {
  background-color: #f5fafd;
  border-left-color: #FF5A00;
}

.mod-articlescategories a {
  display: block;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: #231F20;
  text-decoration: none;
}

/* Stopka: 3-kolumnowy układ danych firmy */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-col {
  flex: 1 1 220px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #E0DDD8;
}

.footer-col strong {
  color: #ffffff;
  display: block;
  margin-bottom: 0.25rem;
}

.footer-col a {
  color: inherit;
  text-decoration: none;
}

.footer-col a:hover {
  text-decoration: underline;
}

/* Linki w UI (nie w treści) — bez podkreśleń i zmiany koloru */
a.brand-logo,
a.brand-logo:hover,
a.brand-logo:focus {
  text-decoration: none;
}

.mod-breadcrumbs a {
  text-decoration: none;
  color: inherit;
}
.mod-breadcrumbs a:hover {
  text-decoration: underline;
}

.mod-menu a,
.mod-menu a:hover,
.mod-menu a:focus {
  text-decoration: none;
}

/* Logo w headerze — rozmiar i pozycjonowanie */
.brand-logo img {
  height: 69px !important;
  width: auto !important;
  display: block;
}

/* Tytuł artykułu — nie wygląda jak link */
.page-header h1 a,
.article-header h2 a,
h2.article-header a,
.item-title a {
  text-decoration: none;
  color: inherit;
}

/* Kontener sidebara */
.container-sidebar-left {
  padding-right: 1.5rem;
}

/* Poprawka 2026-07-28: dropdown metismenu (OFERTA w gornym menu) - brak nieprzezroczystego
   tla powodowal nakladanie sie napisow rozwinietego podmenu na tresc pod spodem */
.mod-menu_dropdown-metismenu .mm-collapse {
  background-color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  z-index: 1050;
  border-radius: 0.25rem;
}

/* Poprawka 2026-07-28: kafelki produktow wewnatrz podkategorii/grupy (mod_articles_category,
   liczba pojedyncza) - do tej pory renderowaly sie jako naga lista linkow, bez stylu karty.
   Ten sam problem dotyczyl tez oryginalnego Kurtyn PVC (niezauwazony przy 2 elementach). */
.mod-articlescategory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.mod-articlescategory li {
  border: 1px solid #dee2e6;
  border-left: 4px solid #06A0DC;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mod-articlescategory li:hover {
  background-color: #f5fafd;
  border-left-color: #FF5A00;
}

.mod-articlescategory a {
  display: block;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: #231F20;
  text-decoration: none;
}

/* Licznik artykułów w sidebarze (wariant c, 2026-07-28) */
/* usunieto 2026-08-19: martwa regula (selektor nie pasowal do niczego) */

/* OFERTA dropdown: 2 kolumny — regula przeniesiona 2026-08-03 do
   @media (min-width: 768px) w bloku HEADER-REDESIGN (sekcja 5).
   Globalnie psula panel podmenu na telefonie: 500px szerokosci i 2 kolumny
   na ekranie 360px. */

/* Logo: biała obwódka wokół kół zębatych (widoczność na ciemnym nagłówku) */
/* usunieto 2026-08-19: martwa regula (nadpisana pozniej) */

/* === Przełącznik języka (topbar → prawa strona nagłówka) === */
.container-header {
  position: relative;
}
/* Styl selektora języka — pasuje do ciemnego nagłówka */
#google_translate_element .goog-te-gadget-simple {
  border-radius: 4px !important;
  padding: 3px 8px !important;
}
/* usunieto 2026-08-19: martwe reguly (nadpisane pozniej albo selektor bez trafien) */

/* Chowaj natywny pasek Google Translate */
.goog-te-banner-frame { display: none !important; }
.skiptranslate { display: none !important; }
body { top: 0 !important; }

/* Własny selektor języka */
#lang-switcher {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
}
#lang-select {
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
}
/* usunieto 2026-08-19: martwe reguly (nadpisane pozniej albo selektor bez trafien) */

/* === Topbar: język + szukaj — prawa strona nagłówka (flex-column) === */
.container-topbar {
  position: absolute;
  right: 1.5rem;
  z-index: 100;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  padding: 0;
  background: transparent;
}

/* Pasek szukaj w nagłówku — kompaktowy */
/* usunieto 2026-08-19: martwe reguly (nadpisane pozniej albo selektor bez trafien) */

/* Reset mod_finder — usuń domyślne marginesy/padding, wymuś jeden wiersz */
.container-topbar .mod-finder {
  margin: 0; padding: 0;
}
/* usunieto 2026-08-19: martwe reguly (nadpisane pozniej albo selektor bez trafien) */

/* Wyrównaj wysokość pola szukaj do selektora języka */
.container-topbar .mod-finder .form-control {
  height: auto !important;
  padding: 3px 8px !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  min-height: unset !important;
}

/* ============================================================================
   === HEADER-REDESIGN 2026-08-01 START =======================================
   Zmiana: jasny nagłówek (logo + szukaj + język) + granatowy pasek menu
           full-bleed, zawijanie pozycji menu na desktopie, hamburger < 768px.
   Rollback: usuń wszystko między znacznikami START/END, albo przywróć
             user.css.bak-20260801
   ============================================================================ */

/* --- 1. NAGŁÓWEK: jasne tło (identyczne z tłem treści: --body-bg = #fff) --- */

.container-header {
  color: #231F20;
  box-shadow: none;
  overflow-x: clip;
  overflow-y: visible;
}

/* --- 2. LOGO: zdjęcie białej obwódki (niepotrzebna na jasnym tle) --- */

.brand-logo img {
  filter: none;
}

a.brand-logo,
a.brand-logo:hover,
a.brand-logo:focus,
.container-header .navbar-brand,
.container-header .navbar-brand a {
  color: #231F20;
}

/* --- 3. TOPBAR (szukaj + język) na jasnym tle --- */

.container-header .container-topbar {
  color: #231F20;
}

/* 3a. Selektor języka */
#lang-switcher {
  color: #231F20;
}

#lang-select {
  background: #ffffff;
  border: 1px solid #042C53;
  color: #231F20;
}

#lang-select:hover,
#lang-select:focus {
  border-color: #06A0DC;
  box-shadow: 0 0 0 2px rgba(6, 160, 220, 0.25);
}

#lang-select option {
  background: #ffffff;
  color: #231F20;
}

/* 3b. Widget Google Translate (gdyby był renderowany natywnie) */
#google_translate_element .goog-te-gadget-simple {
  background: #ffffff !important;
  border: 1px solid #042C53 !important;
}

#google_translate_element .goog-te-gadget-simple span,
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span {
  color: #231F20 !important;
}

#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:last-child {
  color: #6c757d !important;
}

/* 3c. Pole wyszukiwania (mod_finder) */
.container-header .mod-finder,
.container-header .mod-finder a:not(.jmodedit) {
  color: #231F20;
}

.container-header .mod-finder a:not(.jmodedit):hover,
.container-header .mod-finder a:not(.jmodedit):focus {
  color: #042C53;
}

.container-topbar .mod-finder .form-control {
  background: #ffffff;
  border: 1px solid #042C53;
  color: #231F20;
}

/* usunieto 2026-08-19: martwa regula (selektor nie pasowal do niczego) */

.container-topbar .mod-finder .form-control:focus {
  background: #ffffff;
  border-color: #06A0DC;
  box-shadow: 0 0 0 2px rgba(6, 160, 220, 0.25);
}

/* Podpowiedzi autosuggest — na wypadek dziedziczenia białego tekstu */
.container-topbar .awesomplete > ul {
  background: #ffffff;
  color: #231F20;
}

/* --- 4. PASEK MENU: granat, full-bleed --- */

.container-header .container-nav {
  position: relative;
  background: transparent;
}

.container-header .container-nav::before {
  content: "";
  position: absolute;
  /* rozciągnięcie poza wyśrodkowaną kolumnę 1320px do krawędzi okna */
  inset: 0 calc(50% - 50vw);
  background: #042C53;
  z-index: 0;
  pointer-events: none;
}

.container-header .container-nav > * {
  position: relative;
  z-index: 1;
}

/* Wrapper <nav> z layoutu collapse-metismenu ma zająć pełną szerokość paska */
.container-header .container-nav > nav.navbar {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* --- 5. DESKTOP (>= 768px): zawijanie pozycji menu w linie --- */

@media (min-width: 768px) {

  .container-header .mod-menu {
    flex-wrap: wrap;
    column-gap: 1.55em;
    row-gap: 0.15rem;
    align-items: center;
  }

  /* odstępy robi gap, nie margines — inaczej pierwsza pozycja
     zawiniętej linii byłaby przesunięta */
  /* usunieto 2026-08-19: martwa regula (nadpisana pozniej) */

  /* dwukolumnowy dropdown Oferty — TYLKO desktop
     (sztywne 500px rozwaliłoby panel mobilny) */
  .metismenu-item.item-102 > .mm-collapse {
    column-count: 2;
    column-gap: 0;
    column-rule: 1px solid #dee2e6;
    width: 500px;
  }
}

/* --- 6. MOBILE (< 768px): hamburger + panel --- */

@media (max-width: 767.98px) {

  /* 6a. Topbar wraca do normalnego przepływu — koniec nachodzenia na logo */
  .container-header .container-topbar {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0.4rem 0.5rem 0;
  }

  .container-topbar .mod-finder .form-control {
  width: 140px;
}

  /* 6b. Przycisk hamburgera */
  .container-header .navbar-toggler {
    background-color: #042C53;
    border: 2px solid #ffffff;
    border-radius: 0.35rem;
    color: #ffffff;
    padding: 0.5rem 0.7rem;
    margin: 0.35rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
  }

  .container-header .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(6, 160, 220, 0.45);
  }

  /* 6c. Ikona: 3 białe kreski rysowane CSS-em
         (niezależne od lazy-loadowanego Font Awesome) */
  .container-header .navbar-toggler .icon-menu {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  font-size: 0;
}

  .container-header .navbar-toggler .icon-menu::before,
.container-header .navbar-toggler .icon-menu::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
}

  .container-header .navbar-toggler .icon-menu::before {
    top: -7px;
  }

  .container-header .navbar-toggler .icon-menu::after {
    top: 7px;
  }

  /* 6d. Rozwinięty panel menu — na granacie, białe napisy */
  .container-header .navbar-collapse {
    padding-bottom: 0.5rem;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span,
  .container-header .mod-menu > li > button {
    display: block;
    padding: 0.55rem 0.25rem;
    color: #ffffff;
  }

  /* usunieto 2026-08-19: martwa regula (nadpisana pozniej) */

  /* 6e. Podmenu OFERTA: swiadomie BEZ nadpisywania tla i koloru tekstu.
         Dziedziczy wyglad z desktopu (biale tlo Cassiopei + domyslny kolor
         linku), bo taki wyglad zostal zaakceptowany. Zmiana 2026-08-03:
         wczesniejszy granat #05203c przegrywal specyficznoscia z regula
         Cassiopei .metismenu.mod-menu .mm-collapse (0-3-0 vs 0-2-0), wiec
         tlo zostawalo biale, a bialy tekst byl niewidoczny. */

  .container-header .mod-menu .mm-collapse a {
    padding: 0.45rem 0.9rem;
    display: block;
  }

}

/* === HEADER-REDESIGN 2026-08-01 END ======================================== */

/* ============================================================================
   === HEADER-REDESIGN 2026-08-01 v2 START ====================================
   1) opt-out z Auto Dark Theme przegladarki
   2) hamburger: ostre rogi + napis "Menu"
   3) stopka w granacie + linia copyright
   ============================================================================ */

/* 1. Chrome/Android Auto Dark Theme przemalowywal jasny naglowek na ciemny,
      a biale kreski hamburgera na szare. To jest oficjalny opt-out. */
:root {
  color-scheme: only light;
}

/* 2. Hamburger: ostre rogi + etykieta "Menu" */
@media (max-width: 767.98px) {

  .container-header .navbar-toggler {
    border-radius: 0;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
  }

  .container-header .navbar-toggler .icon-menu,
  .container-header .navbar-toggler .icon-menu::before,
  .container-header .navbar-toggler .icon-menu::after {
    border-radius: 0;
    background: #ffffff;
  }

  .container-header .navbar-toggler::after {
    content: "Menu";
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* 3. Stopka: granat jak pasek menu (bylo #231F20) */
.footer {
  background-color: #042C53;
  background-image: none;
}

/* uklad pionowy: dane firmy w wierszu, copyright pod spodem */
.footer .grid-child {
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 1.25rem;
}

.footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 0.9rem;
  font-size: 0.8rem;
  color: #C9D3E0;
}

/* === HEADER-REDESIGN 2026-08-01 v2 END ===================================== */

/* ============================================================================
   === HEADER-REDESIGN 2026-08-01 v3 START ====================================
   Obnizenie progu zwijania menu z 992px na 768px.
   Cassiopeia trzyma poziomy uklad menu na sztywno w @media (min-width:992px)
   — te reguly trzeba przeniesc na 768px, inaczej w zakresie 768-991px menu
   rozwinelo by sie w pionowa liste zamiast poziomego paska.
   Markup: collapse-metismenu.php ma navbar-expand-md (bylo -lg).
   ============================================================================ */

@media (min-width: 768px) {

  /* poziomy uklad paska menu (port z reguly Cassiopei @992px) */
  .container-header .mod-menu {
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-wrap: wrap;
    column-gap: 1.55em;
    row-gap: 0.15rem;
    align-items: center;
  }

  .container-header .mod-menu > li + li,
  .container-header .metismenu > li + li {
    margin-left: 0;
    border-top: 0;
  }

  /* Cassiopeia podkresla aktywna pozycja ponizej 992px (styl mobilny) —
     w zakresie 768-991px chcemy wygladu desktopowego, bez podkreslenia */
  .container-header .mod-menu > li.active > a,
  .container-header .mod-menu > li.active > span,
  .container-header .mod-menu > li > a:hover {
    text-decoration: none;
  }
}

/* === HEADER-REDESIGN 2026-08-01 v3 END ===================================== */

/* ============================================================================
   === SIDEBAR OFERTA — BLOK SKONSOLIDOWANY 2026-08-03 START ==================

   Zastapil ~28 rozproszonych regul z czterech sesji (2026-07-2x .. 08-03),
   ktore czesciowo sie zwalczaly i wymagaly !important.
   >>> JESLI TRZEBA ZMIENIC KOLORY SIDEBARA — TO JEST JEDYNE MIEJSCE. <<<

   MODEL (jedna zasada na wszystkich trzech poziomach):
     tlo          = poziom zagniezdzenia, NIGDY stan
     pasek akcentu= hover, galaz w sciezce (.active) ORAZ pozycja biezaca
     podkreslenie = hover ORAZ pozycja biezaca — NIE przodek (currentColor)
     pogrubienie  = TYLKO pozycja biezaca (zeby nie zgubic jej przy hover)

   UWAGA na semantyke klas z oferta.php (linie 172-178): pozycja biezaca ma
   OBIE klasy .current i .active; przodkowie maja tylko .active. Dlatego
   "biezaca" celujemy przez .current, a rozwijanie galezi przez .active.
   Mieszanie tych dwoch bylo zrodlem niespojnosci w poprzednich wersjach.

   KONTRASTY TEKSTU (WCAG AA: 4.5:1):
     bialy   na #042C53 ..... 13.9:1  OK
     bialy   na #0B5E8A .....  7.0:1  OK
     #231F20 na #fafafa ..... 15.9:1  OK
   Pasek akcentu: jeden odcien na wszystkich trzech poziomach. Jako element
   graficzny podlega progowi 3:1, nie 4.5:1. Wartosc odcienia stoi w regulach
   nizej w tym bloku — nie powtarzac jej w komentarzu, bo kopia rozjezdza sie
   przy kazdej zmianie koloru.
   Iteracje odcienia: 2026-08-03 ujednolicenie na trzech poziomach,
   2026-08-17 zmiana na akcent pomaranczowy (decyzja klienta; ten sam odcien
   przejmuje takze hover kafli, gdzie wczesniej byl przez przeoczenie granat).
   Warianty przetestowane wczesniej (kolejnosc chronologiczna):
     #F5A623 amber   + #B26A00 dla P3 .... 6.9 / 3.5 / 4.9
     #D9534F ceglany + #F5A093 dla P2 .... 3.5 / 3.5 / 3.8
     #C0392B ceglany jednolity ........... 2.6 / 1.3 / 5.2
   ============================================================================ */

/* ---------- WSPOLNE ---------- */

.oferta-sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oferta-sidebar-menu li {
  list-style: none;
}

/* Bootstrap dorzuca strzalki do pozycji z dziecmi — niepotrzebne */
.oferta-sidebar-menu a::after,
.oferta-sidebar-menu a::before {
  display: none !important;
  content: none !important;
}

/* ---------- POZIOM 1: kategorie glowne (21 pozycji) ---------- */

.oferta-sidebar-menu > li > a {
  display: block;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  background: #042C53;
  color: #ffffff;
  border: 1px solid #042C53;
  border-left: 4px solid #042C53;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* PASEK: hover, galaz w sciezce (.active) ORAZ pozycja biezaca.
   .active obejmuje takze PRZODKA — bez tego pasek znikal z kategorii
   glownej po wejsciu w jej grupe. Poprawka 2026-08-03. */
.oferta-sidebar-menu > li > a:hover,
.oferta-sidebar-menu > li > a:focus,
.oferta-sidebar-menu > li.active > a,
.oferta-sidebar-menu > li.alias-parent-active > a,
.oferta-sidebar-menu > li.current > a {
  color: #ffffff;
  border-left-color: #FF5A00;
}

/* PODKRESLENIE: tylko hover i pozycja biezaca — NIE przodek */
.oferta-sidebar-menu > li > a:hover,
.oferta-sidebar-menu > li > a:focus,
.oferta-sidebar-menu > li.current > a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.oferta-sidebar-menu > li.current > a {
  font-weight: 700;
}

/* ---------- POZIOM 2: podkategorie (42 pozycje) ---------- */

.oferta-sidebar-menu .mod-menu__sub {
  list-style: none;
  margin: 2px 0 0 0;
  padding-left: 0.75rem;
  display: none;
  flex-direction: column;
  gap: 2px;
}

/* galaz rozwija sie gdy rodzic jest w sciezce (.active), nie gdy jest biezacy */
.oferta-sidebar-menu li.active > .mod-menu__sub,
.oferta-sidebar-menu li.alias-parent-active > .mod-menu__sub {
  display: flex;
}

.oferta-sidebar-menu .mod-menu__sub > li > a {
  display: block;
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 400;
  background: #0B5E8A;
  color: #ffffff;
  border: 1px solid #0B5E8A;
  border-left: 4px solid #0B5E8A;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* PASEK: hover, galaz w sciezce (.active) ORAZ pozycja biezaca.
   .active obejmuje takze PRZODKA — bez tego pasek znikal z kategorii
   glownej po wejsciu w jej grupe. Poprawka 2026-08-03. */
.oferta-sidebar-menu .mod-menu__sub > li > a:hover,
.oferta-sidebar-menu .mod-menu__sub > li > a:focus,
.oferta-sidebar-menu .mod-menu__sub > li.active > a,
.oferta-sidebar-menu .mod-menu__sub > li.alias-parent-active > a,
.oferta-sidebar-menu .mod-menu__sub > li.current > a {
  color: #ffffff;
  border-left-color: #FF5A00;
}

/* PODKRESLENIE: tylko hover i pozycja biezaca — NIE przodek */
.oferta-sidebar-menu .mod-menu__sub > li > a:hover,
.oferta-sidebar-menu .mod-menu__sub > li > a:focus,
.oferta-sidebar-menu .mod-menu__sub > li.current > a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.oferta-sidebar-menu .mod-menu__sub > li.current > a {
  font-weight: 700;
}

/* ---------- POZIOM 3: artykuly (article-sublist) ---------- */
/* uwaga: oferta.php emituje te liste wewnatrz <li> na poziomie 1 LUB 2,
   dlatego selektor rozwijania uzywa "li", nie ">" */

.article-sublist {
  list-style: none;
  margin: 2px 0 0;
  padding-left: 0.6rem;
  display: none;
  flex-direction: column;
  gap: 2px;
}

.oferta-sidebar-menu li.active > .article-sublist,
.oferta-sidebar-menu li.current > .article-sublist {
  display: flex;
}

.article-sublist > li > a {
  display: block;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 400;
  background: #fafafa;
  color: #231F20;
  border: 1px solid #c8cacd;
  border-left: 4px solid #fafafa;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.article-sublist > li > a:hover,
.article-sublist > li > a:focus,
.article-sublist > li.sidebar-current > a {
  border-left-color: #FF5A00;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.article-sublist > li.sidebar-current > a {
  font-weight: 700;
}

/* link "wiecej..." — wyrozniony WYLACZNIE kursywa (decyzja 2026-08-18).
   Wczesniej mial przerywana obwodke i jasniejszy szary tekst; obwodki nie bylo
   widac na tle #fafafa, a jasniejszy kolor tylko oslabial czytelnosc. Reszta
   wygladu i pasek akcentu na hover — jak kazda pozycja poziomu 3. */
.article-sublist > li.sidebar-more > a {
  font-style: italic;
}

/* === SIDEBAR OFERTA — BLOK SKONSOLIDOWANY 2026-08-03 END =================== */

/* === Logo +25% — pozycja topbara (2026-08-07, popr.) =====================
   Logo 55→69px podniosło wysokość wiersza logo z ~81px do ~95px
   (grid-child padding .5em=8px + navbar-brand padding .3125rem=5px + img).
   Pierwsza próba (top:50% + translateY) centrowała względem CAŁEGO
   .container-header — a ten obejmuje też granatowy pasek menu, więc topbar
   zjechał nad pasek. Wracamy do offsetu od góry, przeskalowanego:
   1.3rem × (95/81) ≈ 1.5rem → topbar na ~1/3 wysokości wiersza logo.
   Regulacja: niżej → 1.7-1.8rem, wyżej → 1.3rem.
   Mobile (@media max-width:991.98px) ma position:static + top:auto
   z wyższą specyficznością — nietknięty.
   ======================================================================== */
.container-topbar {
  top: 1.5rem;
  transform: none;
}

/* === JUSTOWANIE TRESCI 2026-08-07 START ==================================
   Zyczenie klienta: cala tresc wyjustowana, POZA stronami:
   Start(101), Kontakt(128), Nowosci(129), Pobierz(130 + Certyfikaty 131,
   Formularze 132), Praca(139).

   Sterowanie zmienna --eb-text-align dziedziczona z <body> (Cassiopeia
   wypisuje klase itemid-NNN). Zmiana listy wyjatkow = dopisanie lub
   usuniecie jednej linii z selektora ponizej, nic wiecej.

   SWIADOME DECYZJE (uzgodnione z uzytkownikiem 2026-08-07):
   - BEZ hyphens:auto — klient ocenia wersje bez dzielenia wyrazow.
     Uwaga: w polskim tekscie z dlugimi slowami technicznymi daje to
     szerokie odstepy miedzywyrazowe ("rzeki"). Wlaczenie dzielenia
     wymaga najpierw poprawienia <html lang> na polski (jest en-gb).
   - BEZ wyjatku dla tabel i BEZ wyjatku dla mobile — wersja pelna.
   - Justunek to udokumentowana porazka WCAG F88 (kryt. 1.4.8, poziom AAA).
     Poziom AAA, wiec nie jest to blokada formalna.

   Celowo p/li/td, a NIE kontener — na kontenerze justunek zlapalby
   rowniez naglowki h2/h3 (dwuwierszowy naglowek by sie rozciagnal).
   Klasy zweryfikowane na zywym HTML, nie zgadywane.
   Rollback: usun blok miedzy znacznikami START/END.
   ========================================================================= */

:root {
  --eb-text-align: justify;
}

body.itemid-101,   /* Start    */
body.itemid-128,   /* Kontakt  */
body.itemid-129,   /* Nowosci  */
body.itemid-130,   /* Pobierz  */
body.itemid-131,   /* Pobierz > Certyfikaty */
body.itemid-132,   /* Pobierz > Formularze  */
body.itemid-139 {  /* Praca    */
  --eb-text-align: left;
}

.com-content-article__body p,
.com-content-article__body li,
.com-content-article__body td,
.category-desc p,
.category-desc li,
.category-desc td {
  text-align: var(--eb-text-align);
}

/* === JUSTOWANIE TRESCI 2026-08-07 END ==================================== */

/* === STOPKA: copyright + link zgody na cookies 2026-08-10 START ============
   Copyright do lewej, "Zgoda na cookies" do prawej, w jednej linii.
   Nadpisuje text-align:center z bloku HEADER-REDESIGN (linia ~740).
   Dodatkowo max-width 1200px + margin auto — bez tego linia byla szersza
   niz .footer-inner (kolumny wyzej) i po wyrownaniu do krawedzi widac
   bylo rozjazd na ekranach >1200px. Przy wyśrodkowanym tekscie to nie
   przeszkadzalo, dlatego wyszlo dopiero teraz.
   Na waskich ekranach flex-wrap lamie na dwa wiersze — wtedy centrujemy.
   ========================================================================= */
.footer-copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 1rem;
  text-align: left;
  max-width: 1200px;
  margin: 1rem auto 0;
  padding: 0.9rem 1rem 0;
}

.footer-copyright a#eb-cookie-reopen {
  color: #C9D3E0;
  text-decoration: underline;
  white-space: nowrap;
}

.footer-copyright a#eb-cookie-reopen:hover,
.footer-copyright a#eb-cookie-reopen:focus-visible {
  color: #FF5A00;
}

@media (max-width: 575.98px) {
  .footer-copyright {
    justify-content: center;
    text-align: center;
  }
}

/* Sygnalizacja ograniczonej funkcjonalnosci.
   Gdy uzytkownik odrzucil cookies funkcjonalne (tlumaczenie nie dziala),
   odnosnik jest zolty i pogrubiony. Klase eb-consent-limited na <html>
   nadaje eb-consent.js.

   Kolor: zolty na tle stopki = 12.9:1. Odcien WLASNY dla tego wskaznika -
   od 2026-08-17 NIE jest juz wspolny z akcentem Oferty (tam pomarancz).
   Zmiana koloru akcentu Oferty nie ma tu zadnego wplywu i odwrotnie.

   UWAGA na tlo stopki: .footer ma background-color ustawiany DWUKROTNIE -
   #231F20 w linii ~40 i #042C53 w bloku HEADER-REDESIGN (~722). Obowiazuje
   ta druga. Gdyby ktos usunal pozniejsza regule, zolty trafi na #231F20
   (kontrast nadal dobry, ~19:1), ale warto o tym wiedziec.

   To wskaznik stanu, NIE nagabywanie: brak modala, brak powtarzania,
   link stoi w stopce. Nie przenosic tego wyroznienia w widoczniejsze
   miejsce ani nie zamieniac w wyskakujace przypomnienie. */
html.eb-consent-limited .footer-copyright a#eb-cookie-reopen {
  color: #FFFF00;
  font-weight: 700;
}

/* :focus-visible, NIE :focus (2026-08-19). Klikniecie myszą zostawialo fokus na
   linku, wiec po wyborze "Nie" pogrubienie wchodzilo natychmiast, a zolty kolor
   przegrywal z regula :focus i pojawial sie dopiero po nawigacji. Wygladalo to na
   opoznienie w JS — nie bylo nim. Kolor reakcji = akcent serwisu; stan
   "ograniczony" zostaje zolty (odcien wlasny). */
html.eb-consent-limited .footer-copyright a#eb-cookie-reopen:hover,
html.eb-consent-limited .footer-copyright a#eb-cookie-reopen:focus-visible {
  color: #FF5A00;
}

/* === STOPKA: copyright + link zgody na cookies 2026-08-10 END ============== */

/* === BANER ZGODY NA COOKIES 2026-08-10 START (popr. 2) ====================
   Wpasowanie cookieconsent 3.1.0 w palete serwisu.

   TRZY POPRAWKI WZGLEDEM BIBLIOTEKI - kazda z konkretnego powodu:

   1. .cm--bar ma w bibliotece width:100vw. Jednostka vw NIE uwzglednia
      szerokosci paska przewijania, wiec baner wychodzil szerszy niz widoczny
      obszar - na mobile ucinalo przycisk i wymuszalo poziome rolowanie.
      Zamieniamy na width:100% (left:0/right:0 z biblioteki zostaje).

   2. .cm--bar .cm__body ma max-width:55em (~880px) - stad wrazenie
      "zaszytej szerokosci". Podnosimy do 1200px, tyle ma .footer-inner
      i kolumny tresci, wiec baner trzyma sie siatki serwisu.

   3. .cm--bar .cm__btns ma justify-content:space-between, co rozrzucalo
      napis i przyciski na przeciwne konce. Centrujemy, zeby napis
      "Akceptuje ciasteczka z tej witryny:" byl skleony z przyciskami.
      Wymaga selektora z .cm--bar - inaczej biblioteka wygrywa
      specyficznoscia (1 id + 2 klasy kontra 1 id + 1 klasa).

   BREAKPOINT: 640px, taki jak w bibliotece. Wczesniej mialem 575.98px,
   co dawalo rozjazd w zakresie 576-640px (biblioteka juz ukladala
   przyciski w kolumnie, a moje reguly desktopowe jeszcze obowiazywaly).

   Oba przyciski maja IDENTYCZNY wyglad - wymog EDPB, odmowa musi byc
   rownie widoczna jak akceptacja. Nie zmieniac ODRZUC na wyszarzony.
   ========================================================================= */
#cc-main {
  --cc-font-family: inherit;
  --cc-bg: #042C53;
  --cc-primary-color: #ffffff;
  --cc-secondary-color: #C9D3E0;
  --cc-btn-primary-bg: #06A0DC;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: #06A0DC;
  --cc-btn-primary-hover-bg: #058BC0;
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: #058BC0;
  --cc-btn-secondary-bg: #06A0DC;
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-border-color: #06A0DC;
  --cc-btn-secondary-hover-bg: #058BC0;
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-hover-border-color: #058BC0;
  --cc-btn-border-radius: 3px;
  --cc-link-color: #ffffff;
  --cc-separator-border-color: rgba(255,255,255,0.18);
}

/* 1. Koniec poziomego rolowania na mobile */
#cc-main .cm--bar {
  width: 100%;
  max-width: 100%;
}

/* 2. Szerzej na PC, w siatce serwisu */
#cc-main .cm--bar .cm__body,
#cc-main .cm--bar .cm__links {
  max-width: 1200px;
}

#cc-main .cm__title:empty {
  display: none;
}

#cc-main .cm__desc {
  font-size: 0.86rem;
  line-height: 1.5;
}

#cc-main .cm__desc a {
  text-decoration: underline;
}

/* 3. Napis sklejony z przyciskami, cala linia wycentrowana */
#cc-main .cm--bar .cm__btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 0.9rem;
}

#cc-main .cm--bar .cm__btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

/* Odstepy robi gap, wiec kasujemy marginesy biblioteki - inaczej sumuja sie. */
#cc-main .cm--bar:not(.cm--inline) .cm__btn + .cm__btn,
#cc-main .cm--bar:not(.cm--inline) .cm__btn-group + .cm__btn-group {
  margin-left: 0;
  margin-top: 0;
}

#cc-main .eb-cc-label {
  color: #ffffff;
  font-size: 0.86rem;
  white-space: nowrap;
}

#cc-main .cm--bar .cm__btn {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Mobile: napis nad przyciskami, przyciski pelnej szerokosci.
   Biblioteka sama przelacza .cm__btns na kolumne przy 640px. */
@media screen and (max-width: 640px) {
  #cc-main .eb-cc-label {
    white-space: normal;
    text-align: center;
    width: 100%;
  }

  #cc-main .cm--bar .cm__btn {
    min-width: 0;
  }
}

/* === BANER ZGODY NA COOKIES 2026-08-10 END ================================ */

/* ------------------------------------------------------------------
   Zdjecia obok siebie w tresci artykulu i w opisie kategorii.
   EUR-HOSTING 2026-08-12.
   Powod: przy migracji sasiadujace zdjecia trafily do osobnych akapitow
   albo dostaly <br> miedzy soba, wiec ustawialy sie jedno pod drugim.
   Na starej stronie stały obok siebie (tam byly komorkami tabeli).
   Zakres: TYLKO akapit, ktorego jedynym dzieckiem jest <img>, oraz
   <br> stojacy dokladnie MIEDZY dwoma obrazami.
   Nie dotyczy: <p><a><img></a></p> (tabletki PDF/INFO), miniatur w
   tabelach grup (<td>), kafli, sidebara, naglowka i stopki.
   Wymaga selektora :has() - przegladarki bez niego pokaza stan obecny
   (zdjecia jedno pod drugim), czyli degradacja jest bezpieczna.
   Cofniecie: usunac ten blok.
   ------------------------------------------------------------------ */
.com-content-article__body p:has(> img:only-child),
.category-desc p:has(> img:only-child) {
	display: inline-block;
	vertical-align: top;
	margin: 0 .75rem .75rem 0;
}
.com-content-article__body img + br:has(+ img),
.category-desc img + br:has(+ img) {
	display: none;
}
.com-content-article__body img,
.category-desc img {
	vertical-align: top;
}
.com-content-article__body img + img,
.category-desc img + img {
	margin-left: .75rem;
}

/* Kafel biezacego produktu w oknie kroczacym (2026-08-12). Pasek ma CELOWO ten sam
   odcien akcentu co pozycja biezaca w sidebarze Oferty — to jeden spojny sygnal
   "jestes tutaj", nie zbieg okolicznosci. Regula stoi PO ":hover", zeby pasek
   biezacego nie ustepowal przy najechaniu. */
.mod-articlescategory li.eb-kafle-current {
  border-left-color: #FF5A00;
}

/* Siatka zdjec 100x100 w tabeli opisu kategorii (2026-08-14).
   Uzycie: klasa na tabeli, obok table-borderless align-middle:
     <table class="table table-borderless align-middle eb-foto-siatka-100-100">
   object-fit: cover kadruje, wiec komorka jest wypelniona bez deformacji i bez pasow.
   Miniatury w <td> sa poza zasiegiem regul "zdjecia obok siebie" (blok wyzej) -
   te dotycza <p><img></p> i nagich <img>, nie komorek tabeli. */
.eb-foto-siatka-100-100 td img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  display: block;
  margin: 4px;
}
/* ===== START gradient naglowka (2026-08-17) ==============================
   Przelacznik wariantu: --eb-kropki  0 = przejscie plynne, 1 = kropkowane.
   Rollback: usun wszystko miedzy START i END.
   ======================================================================== */
.container-header {
  --eb-biel: 420px;      /* 360 - czysta biel od lewej krawedzi kolumny (logo ~312px) */
  --eb-strefa: 480px;    /* szerokosc strefy przejscia (360 -> 480, 2026-08-18) */
  --eb-kropki: 0;        /* 0 albo 1 */
  --eb-raster: 6px;      /* skok siatki kropek */
  --eb-kropka: 1.6px;    /* promien kropki */

  --eb-stop1: max(var(--eb-biel), calc(50% - 660px + var(--eb-biel)));
  --eb-a: calc(var(--eb-stop1) + var(--eb-strefa) * var(--eb-kropki));
  --eb-b: calc(var(--eb-stop1) + var(--eb-strefa));
  /* Stopy lagodzace koncowke rampy - usuwaja pasmo Macha ("smuge") na styku
     rampy z jednolitym kolorem. Stopnie przesuniete w LEWO (2026-08-18):
     jasna czesc przechodzi szybciej, a na ciemna - gdzie oko lapie banding -
     zostaje wiecej miejsca i wiecej stopni. Gotowe hexy, nie color-mix, zeby ta
     sama rampa dzialala w obu deklaracjach (fallback i oklab). */
  --eb-s1: calc(var(--eb-stop1) + var(--eb-strefa) * 0.10);
  --eb-s2: calc(var(--eb-stop1) + var(--eb-strefa) * 0.22);
  --eb-s3: calc(var(--eb-stop1) + var(--eb-strefa) * 0.35);
  --eb-s4: calc(var(--eb-stop1) + var(--eb-strefa) * 0.48);
  --eb-s5: calc(var(--eb-stop1) + var(--eb-strefa) * 0.60);
  --eb-s6: calc(var(--eb-stop1) + var(--eb-strefa) * 0.72);
  --eb-s7: calc(var(--eb-stop1) + var(--eb-strefa) * 0.84);
  --eb-s8: calc(var(--eb-stop1) + var(--eb-strefa) * 0.93);

  background-color: #ffffff;

  /* fallback sRGB */
  background-image: linear-gradient(to right,
    #ffffff 0,
    #ffffff var(--eb-a),
    #E4EDF2 var(--eb-s1),
    #C5D8E2 var(--eb-s2),
    #9CBFD1 var(--eb-s3),
    #75A5BE var(--eb-s4),
    #548EAD var(--eb-s5),
    #3A7CA1 var(--eb-s6),
    #24709A var(--eb-s7),
    #146290 var(--eb-s8),
    #0B5E8A var(--eb-b),
    #0B5E8A 100%);

  /* wersja wlasciwa - gladsza interpolacja, starsze przegladarki ignoruja */
  background-image: linear-gradient(in oklab to right,
    #ffffff 0,
    #ffffff var(--eb-a),
    #E4EDF2 var(--eb-s1),
    #C5D8E2 var(--eb-s2),
    #9CBFD1 var(--eb-s3),
    #75A5BE var(--eb-s4),
    #548EAD var(--eb-s5),
    #3A7CA1 var(--eb-s6),
    #24709A var(--eb-s7),
    #146290 var(--eb-s8),
    #0B5E8A var(--eb-b),
    #0B5E8A 100%);
}

/* Warstwa kropek. z-index:-1 - maluje sie nad tlem rodzica, pod jego trescia,
   wiec nie moze przykryc logo ani menu. Przy --eb-kropki:0 jest niewidoczna. */
.container-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--eb-kropki);
  background-image: radial-gradient(circle,
    #06A0DC var(--eb-kropka), transparent calc(var(--eb-kropka) + 0.1px));
  background-size: var(--eb-raster) var(--eb-raster);
  -webkit-mask-image: linear-gradient(to right,
    transparent var(--eb-stop1), #000 var(--eb-b));
          mask-image: linear-gradient(to right,
    transparent var(--eb-stop1), #000 var(--eb-b));
}
/* ===== END gradient naglowka ============================================ */

/* ===== START glob przy przelaczniku jezyka (2026-08-18) ===================
   W tresci modulu mod-custom174 stoi emoji U+1F310 w <span>. Emoji nie
   przyjmuje koloru (glif kolorowy z fontu systemowego), wiec zeby dac globowi
   granat marki, emoji jest CHOWANE przez font-size:0, a ikona rysowana w
   ::before z Font Awesome (Joomla laduje joomla-fontawesome.min.css).
   Tresci modulu nie ruszamy - podmiana glifu na <i class="fa-..."> wymagalaby
   edycji modulu, a to zmiana w tresci, nie w stylu.
   Obrys: cztery drop-shadow bez rozmycia, lancuchowo - kazdy filtr dziala na
   wyniku poprzedniego, wiec kontur przylega do krawedzi glifu. Wczesniejsza
   wersja z text-shadow (wycofana) dawala aureole z luka - rozmycie zamiast
   obrysu. Obrys jest potrzebny, bo na szerokim oknie ikona lezy na #0B5E8A,
   gdzie granat sam ma kontrast ok. 2.3:1.
   Rollback: usun wszystko miedzy START i END.
   ========================================================================= */
#lang-switcher > span {
  font-size: 0;          /* chowa emoji, span zostaje jako kontener */
  filter: none;          /* obrys przenosi sie na ikone w ::before */
}
#lang-switcher > span::before {
  content: "\f0ac";      /* fa-globe */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  color: #042C53;
  /* Obrys przez text-shadow, 8 kierunkow, bez rozmycia. Wersja z lancuchem
     drop-shadow (wycofana 2026-08-18) gubila w Chromium prawa krawedz: kazdy
     filtr rasteryzuje sie osobno i przesuniecie 0.5px zaokragla sie do zera.
     Ikona FA jest jednobarwnym glifem fontu, wiec text-shadow ja obejmuje -
     przy emoji (glif kolorowy) nie dzialalo, dlatego wczesniej byl filter. */
  text-shadow:
     0.5px 0 0 #ffffff, -0.5px 0 0 #ffffff, 0 0.5px 0 #ffffff, 0 -0.5px 0 #ffffff,
     0.5px 0.5px 0 #ffffff, -0.5px 0.5px 0 #ffffff,
     0.5px -0.5px 0 #ffffff, -0.5px -0.5px 0 #ffffff;
}
/* ===== END glob ========================================================== */

/* === START galeria zdjec z podpisami (2026-08-19) =========================
   figure.image to kszalt, ktory TinyMCE generuje SAM po wlaczeniu "Image caption"
   (System -> Plugins -> Editor - TinyMCE -> profil Set 0). Podpis stoi w HTML PO
   obrazie, a kolejnosc odwraca CSS -> podpis WIDZIMY nad zdjeciem, jak na starej
   stronie. Dzieki temu nasz HTML i to, co operator wstawi z panelu, to jeden kszalt
   i jedna regula. Nie zmieniac na wlasna klase.
   .eb-galeria daje siatke 2-kolumnowa i uzywana jest tylko tam, gdzie odtwarzamy
   uklad tabelaryczny starej strony (art. 300, opis kat. 70). Bez wrappera zdjecia
   250px ukladaja sie po trzy w rzedzie. Rollback: usunac blok START..END. */
.com-content-article__body figure.image,
.category-desc figure.image {
  display: flex;
  flex-direction: column-reverse;
  margin: 0 0 1rem;
}
.com-content-article__body figure.image img,
.category-desc figure.image img {
  display: block;
  /* Rozmiar WYMUSZONY, nie naturalny. Dwa powody: Cassiopeia ma w rdzeniu
     img{width:100%}, ktore w gridzie rozwiazuje sie do szerokosci kolumny (zdjecia
     rosna i plyna przy zmianie szerokosci okna), a przy naturalnym rozmiarze kazdy
     przyszly plik o innych wymiarach rozjedzie rzad. 250x167 = wymiary plikow
     w tych galeriach; object-fit chroni przed deformacja, gdyby ktos wstawil inny. */
  width: 250px;
  height: 167px;
  max-width: 100%;
  object-fit: cover;
}
.com-content-article__body figure.image figcaption,
.category-desc figure.image figcaption {
  font-size: 0.9rem;
  line-height: 1.3;
  margin: 0 0 0.35rem;
  text-align: left;
}
.com-content-article__body .eb-galeria,
.category-desc .eb-galeria {
  display: grid;
  /* Kolumny STALE 250px = szerokosc zdjecia. Nie 1fr (wolna przestrzen ladowala
     w przerwe miedzy kolumnami i odstep plynal ze szerokoscia okna) i nie max-content
     (kolumna mierzy sie po najdluzszym podpisie, ktory nie mial gdzie sie zlamac,
     wiec dlugie podpisy rozpychaly odstep). Sztywna szerokosc daje jedno i drugie:
     staly odstep i podpisy lamane w 2-3 linie. */
  grid-template-columns: repeat(2, 250px);
  justify-content: start;
  /* odstep pionowy = poziomy, celowo */
  gap: 1rem;
  margin: 0 0 1rem;
}
/* Telefon: dwie kolumny ZOSTAJA (decyzja 2026-08-19) — zdjecia sa male, wiec para
   miesci sie obok siebie, a uklad jest ten sam co na desktopie. Zmniejszamy je
   proporcjonalnie do dostepnej szerokosci. */
@media (max-width: 575.98px) {
  .com-content-article__body .eb-galeria,
  .category-desc .eb-galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .com-content-article__body .eb-galeria figure.image img,
  .category-desc .eb-galeria figure.image img {
    width: 100%;
    height: auto;
  }
}
/* === END galeria zdjec z podpisami ======================================== */