@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ==========================================================================
   AuditSolutions 2026 — style podstron przebudowanych z makiet.
   Reguly globalne z makiet zostaly ograniczone do kontenera .as2026,
   zeby nie nadpisywaly szablonu Helix Ultimate na reszcie strony.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Makiety byly samodzielnymi dokumentami i zakladaly, ze maja na wlasnosc
   cale okno: wlasne tlo, wyzerowane marginesy i sekcje na pelna szerokosc.
   Artykul w Joomli jest fragmentem w cudzym dokumencie, wiec te warunki
   odtwarzamy lokalnie, wewnatrz kontenera .as2026.
   -------------------------------------------------------------------------- */

.as2026 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #23283A;

  /* zamiast body { background } */
  background: #F5F8FC;

  /* zamiast body { margin: 0 } */
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;

  /* zamiast sekcji rozciagnietych na cale okno: ujemne marginesy wypychaja
     kontener poza ograniczenie szablonu. Wewnetrzne ramki makiet maja wlasne
     max-width: 1280px, wiec tresc wraca na srodek sama. */
  /* 100vw obejmuje takze pasek przewijania, a tresc ma do dyspozycji mniej.
     Bez poprawki kontener wystaje w lewo i nie dociaga do prawej krawedzi.
     Szerokosc paska mierzy skrypt i podaje jako --pasek-przewijania. */
  margin-left: calc(50% - 50vw + var(--pasek-przewijania, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--pasek-przewijania, 0px) / 2);
}

/* UWAGA: nie przycinac przepelnienia na kontenerach artykulu
   (.article-details, .sp-column). Przyciecie na elemencie nadrzednym
   obcina rozciagniecie i niebieskie tlo konczy sie na szerokosci szablonu,
   mimo ze pomiar elementu nadal pokazuje pelna szerokosc. */

.as2026 a { color: #FF6600; text-decoration: none; }
.as2026 a:hover { color: #CC5200; }

/* --- zakladki: przyciski --- */
.as2026 .tab-btn {
  background: transparent;
  color: #6B7280;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

.as2026 .tab-btn.active {
  background: #F5F8FC;
  color: #0A3866;
  border-bottom-color: #FF6600;
}

/* --- zakladki: panele ---
   Makiety uzywaja dwoch konwencji. QA opiera sie na identyfikatorach
   i potrzebuje display:flex, pozostale na atrybutach data-* i block.
   Rozdzielone selektorem, zeby jedna nie nadpisywala drugiej.          */
.as2026 .tab-panel { display: none; }
.as2026 .tab-panel[id^="panel-"].active { display: flex; }
.as2026 .tab-panel[data-panel].active   { display: block; }

/* --- kategorie na stronie Zrealizowane projekty --- */
.as2026 [class^="grp-"][class$="-panel"] { display: none; }
.as2026 [class^="grp-"][class$="-panel"].active { display: block; }
.as2026 .grp-btn-active { background: #FFF1E6 !important; border-color: #FF6600 !important; }
.as2026 .grp-btn-active .grp-label { color: #FF6600 !important; }

/* --- skracanie opisow do trzech linii --- */
.as2026 .clamp3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Makiety powstaly jako plansze 1440x900 i nie maja zadnych regul dla waskich
   ekranow. Szerokosci sa plynne, wiec nic sie nie rozjezdza, ale siatki
   trzy- i czterokolumnowe zostalyby takie takze na telefonie. Skladamy je.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .as2026 [style*="grid-template-columns"],
  .as-cia [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .as2026 [style*="grid-template-columns"],
  .as-cia [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* wiersze ustawione w poziomie maja sie zawijac zamiast sciskac */
  .as2026 [style*="display: flex"],
  .as-cia [style*="display: flex"] {
    flex-wrap: wrap;
  }
  /* wewnetrzne dopelnienie 64 px zjada polowe ekranu telefonu */
  .as2026 [style*="max-width: 1280px"],
  .as-cia [style*="max-width: 1600px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* --------------------------------------------------------------------------
   Kafle na stronie glownej. Ta sama stylistyka co podstrony, ale BEZ
   rozciagania na cale okno - maja trzymac szerokosc tresci, tak jak
   dotychczasowe zajawki artykulow.
   -------------------------------------------------------------------------- */

.as2026-kafle {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #23283A;
}

.as2026-kafle a { color: #FF6600; text-decoration: none; }
.as2026-kafle a:hover { color: #CC5200; }

/* Caly kafel ma byc klikalny, ale kafel zawiera juz odnosnik "Czytaj wiecej",
   a odnosnika nie wolno zagniezdzac w odnosniku - przegladarka rozrywa wtedy
   strukture. Zamiast opakowywac kafel, rozciagamy istniejacy odnosnik na cala
   jego powierzchnie warstwa ::after. */
.as2026-kafle [style*="grid-template-columns"] > div {
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}

.as2026-kafle [style*="grid-template-columns"] > div a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

.as2026-kafle [style*="grid-template-columns"] > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(10, 56, 102, .10);
}

@media (max-width: 640px) {
  .as2026-kafle [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .as2026-kafle [style*="max-width: 1280px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ==========================================================================
   Odnosnik "Materialy wideo" na prawo od loga.
   Pasek nawigacyjny rysuje Helix z menu wskazanego w ustawieniach szablonu
   i siedzi w kolumnie NA LEWO od loga - po prawej stronie da sie postawic
   tylko osobny modul. Stad ten jeden odnosnik musi sam odtworzyc wyglad
   pozostalych pozycji menu (patrz .sp-megamenu-parent > li > a).
   ========================================================================== */
#sp-top1 > .sp-column { width: 100%; }

/* Pasek kontaktowy zostaje przy prawej krawedzi, odnosnik przy logu. */
#sp-top1 > .sp-column > .sp-module:first-child { margin-right: auto; }

.menu-obok-loga a {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  padding: 0 15px;
  line-height: 1;
}

/* --- odnosnik obok loga: ustawienie, wysokosc, kolor -------------------- */

/* Kolumna loga (col-lg-2) jest szersza niz samo logo i zostawia po nim okolo
   90 px pustki - stad odnosnik odsuwal sie od loga. Kolumna dostaje szerokosc
   wlasnej zawartosci, sasiednia bierze reszte. Odstep dopasuje sie sam,
   gdyby logo kiedys zmienilo rozmiar. */
@media (min-width: 1210px) {
  #sp-header #sp-logo { flex: 0 0 auto; width: auto; max-width: none; }
  #sp-header #sp-top1 { flex: 1 1 auto; width: auto; max-width: none; }

  /* Wyrownanie do gory, nie do srodka: przy srodkowaniu polozenie odnosnika
     zalezy od wysokosci calego pudelka modulu, ktora narzuca Helix i trudno
     ja przewidziec. Przy wyrownaniu do gory dopelnienie liczy sie wprost od
     gornej krawedzi wiersza, wiec 29 px trafia dokladnie w linie pozycji
     paska nawigacyjnego. Ujemny margines znosi 15 px rynny kolumny - odstep
     od loga wychodzi taki sam jak po jego lewej stronie. */
  #sp-top1 > .sp-column > .sp-module:first-child {
    align-self: flex-start;
    margin-left: -15px;
    flex-shrink: 0;
  }
  .menu-obok-loga { padding-top: 29px; }
}

/* Flex zamiast zwyklego bloku - odnosnik przestaje byc elementem liniowym,
   wiec nie dochodzi odstep wiersza i gora pudelka rowna sie dopelnieniu. */
.menu-obok-loga {
  display: flex;
  align-items: flex-start;
}

/* Bez tego napis lamal sie na dwie linie i odnosnik byl dwa razy wyzszy
   niz pozycje paska nawigacyjnego. */
.menu-obok-loga a { white-space: nowrap; }

/* Kolor. Blok stylow z ustawien szablonu ma `a, a:link, a:visited { color: #ea5906 }`.
   `a:visited` ma te sama szczegolowosc co `.menu-obok-loga a`, a stoi dalej
   w kaskadzie - i dlatego wygrywal pomaranczowy. Stad !important. */
.menu-obok-loga a,
.menu-obok-loga a:link,
.menu-obok-loga a:visited { color: #0063af !important; }

.menu-obok-loga a:hover,
.menu-obok-loga a:focus { color: #ea5906 !important; }

/* Ponizej 1400 px brakuje w naglowku miejsca na logo, pasek nawigacyjny, ten
   odnosnik i pelny pasek kontaktowy w jednej linii - kolumna kontaktowa
   spadala pod spod. Pasek kontaktowy dostaje prawo zlamania sie na dwie linie
   (adres i telefony osobno), co zwalnia okolo 200 px. Powyzej 1400 px bez zmian. */
@media (min-width: 992px) and (max-width: 1399px) {
  #sp-top1 .hc-info { white-space: normal; text-align: right; }
  #sp-top1 .hc-info .hc-item { display: block; }
}

/* 992-1209 px: ta sama wysokosc co wyzej, ale bez zmiany szerokosci kolumn
   i bez zakazu kurczenia - inaczej kolumna kontaktowa spada pod spod. Pasek
   nawigacyjny bywa w tym zakresie lamany na dwa wiersze (stan zastany, nie
   skutek tej zmiany), wiec rownosc nie zawsze jest tu osiagalna. */
@media (min-width: 992px) and (max-width: 1209px) {
  #sp-top1 > .sp-column > .sp-module:first-child { align-self: flex-start; }
  .menu-obok-loga { padding-top: 29px; }
}

/* Na waskim ekranie kolumny ukladaja sie jedna pod druga. Odnosnika NIE
   chowamy: w menu rozwijanym go nie ma (Helix rysuje tam menu-pl, a ta pozycja
   siedzi w menu ukrytym), wiec bylby z telefonu nieosiagalny. */
/* Telefon: kolumna z odnosnikiem i paskiem kontaktowym ma razem okolo 600 px
   szerokosci wlasnej, a miejsca jest 360. Bez zawijania wiersz flex wypychal
   pierwszy element POZA lewa krawedz - odnosnik "Materialy wideo" zaczynal sie
   na -112 px i widac bylo z niego koncowke "DEO". Zawijamy wiersz i dajemy
   kazdemu modulowi cala szerokosc, jeden pod drugim. */
@media (max-width: 991px) {
  /* Naglowek ma narzucona sztywna wysokosc 50 px, a na telefonie jego kolumny
     ustawiaja sie jedna pod druga i maja razem prawie 200 px. Nadmiar wylewal
     sie poza naglowek i logo z paskiem kontaktowym ladowaly NA banerze.
     Zrodlo tych 50 px: szablon Helix nie podstawil wartosci do zmiennej
     --header_height - w arkuszu siedzi doslownie tekst "$header_height_xs",
     wiec kazde `height: var(--header_height)` jest niepoprawne i wysokosc
     bierze sie z jakiegos zapasowego zapisu. Nie da sie tego przebic
     szczegolowoscia, bo nie wiadomo, ktora to regula - stad !important. */
  #sp-header {
    height: auto !important;
    min-height: 0;
  }

  /* Logo stalo na pozycji 0, przyklejone do krawedzi ekranu, podczas gdy
     reszta naglowka jest wysrodkowana - jego kolumna ma wyrownanie do lewej,
     co na szerokim ekranie jest w porzadku, bo logo sasiaduje tam z paskiem
     nawigacyjnym. Na telefonie kolumny stoja jedna pod druga i logo musi
     trzymac ten sam srodek co reszta. */
  #sp-logo > .sp-column {
    justify-content: center;
  }

  #sp-top1 > .sp-column {
    flex-wrap: wrap;
    justify-content: center;
  }
  #sp-top1 > .sp-column > .sp-module {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Modul z ukrytym odnosnikiem nie ma zajmowac wiersza. */
  #sp-top1 > .sp-column > .sp-module:first-child {
    flex: 0 0 auto;
  }
  /* Na telefonie odnosnika tu nie ma - jest w panelu bocznym, wiec pod logiem
     tylko dublowal pozycje. Na szerokim ekranie ZOSTAJE: hamburger ma klase
     `d-lg-none`, wiec od 992 px panel jest niedostepny i to jedyne dojscie
     do tej podstrony z nawigacji. */
  .menu-obok-loga {
    display: none;
  }

  /* Pasek kontaktowy: adres e-mail i dwa telefony w jednej linii maja okolo
     440 px, a miejsca jest 360 - `white-space: nowrap` z ustawien szablonu
     wypychal poczatek adresu poza lewa krawedz. Pozwalamy sie zlamac i
     ukladamy jedno pod drugim, wysrodkowane. */
  #sp-top1 .hc-info {
    white-space: normal;
    text-align: center;
  }
  #sp-top1 .hc-info .hc-item {
    display: block;
    margin: 2px 0;
  }
  #sp-top1 .header-contact-box {
    width: 100%;
    justify-content: center;
  }
}

/* Zakladki as-tab na waskim ekranie: pasek juz sie zawija (flex-wrap w tresci),
   ale przyciski sa wtedy za ciasne na palec - podnosimy wysokosc dotyku. */
@media (max-width: 640px) {
  .as-tab {
    flex: 1 1 auto;
    min-height: 44px;
  }
}

/* ==========================================================================
   Panel boczny na telefonie: "Materialy wideo" jest osobnym modulem, bo ta
   pozycja siedzi w menu ukrytym (w pasku na szerokim ekranie ma jej nie byc).
   Dwa moduly to dwie listy i miedzy "Publikacje" a "Materialy wideo" robila
   sie dziura 20 px - lista rozpadala sie wzrokowo na dwie grupy.

   Zmierzone na zywym elemencie, nie zgadniete: modul ma margines dolny 20 px,
   lista 15 px, marginesy sie zwijaja, wiec widac wiekszy z nich. Wyzerowanie
   samego modulu zostawia 15 px, samej listy - nadal 20 px. Dopiero oba naraz
   daja ciagla liste.

   !important jest konieczne: regula bez niego przegrywa z czyms bardziej
   szczegolowym w arkuszach szablonu, czego nie udalo mi sie namierzyc
   (przegladarkowy przeglad regul zwracal niepelne wyniki).
   ========================================================================== */
.offcanvas-inner > .sp-module,
.offcanvas-inner ul.menu {
  margin-bottom: 0 !important;
}