/* ===========================================================================
   ARKUSZ — PODSTRONY (webG, Rafał 2026-10-29)

   Podstrony webE były ciemne (#141619 / #1E2125). Zamiast przepisywać
   czternaście plików z ręki, ta warstwa przemalowuje ich gotowe klasy
   .p-* / .e-* / .a-* na papier i tusz. Wczytywana ZAWSZE jako ostatnia,
   więc wygrywa z podstrony.css; tam gdzie strona ma styl w atrybucie
   (hero z tłem, ciemne opakowanie) używamy !important — bo inaczej
   atrybut wygrywa z arkuszem.

   Zasada kolorów: żółty zostaje kolorem firmowym w WYPEŁNIENIACH
   (przyciski, podkreślenia), ale żółty NAPIS na papierze jest nieczytelny,
   więc wszędzie, gdzie żółty był tekstem, wchodzi niebieski długopis.
   =========================================================================== */

/* --- korpus strony ---------------------------------------------------- */

body.arkusz .ark-korpus {
  background: transparent;
  color: var(--tusz);
  font-family: Barlow, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
/* Linki, ktore sa przyciskami, maja wlasne kolory — ogolna regula
   nie moze ich przejmowac, bo przy najechaniu napis zlewal sie z tlem. */
body.arkusz a:not(.ark-przycisk):not(.ark-przycisk-obrys):not(.p-btn):not(.e-trasa):not(.ark-menu-mob-cta):not(.ark-marka):not(.p-karta) { color: var(--olowek); text-decoration: none; }
body.arkusz a:not(.ark-przycisk):not(.ark-przycisk-obrys):not(.p-btn):not(.e-trasa):not(.ark-menu-mob-cta):not(.ark-marka):not(.p-karta):hover { color: var(--czarny); }
body.arkusz a { text-decoration: none; }

/* --- hero podstrony ---------------------------------------------------- */
/* Zdjęcie zostaje, ale schodzi pod papier — jak fotka z budowy podłożona
   pod kalkę. Napis siedzi na jasnej stronie, więc jest czytelny. */

body.arkusz .p-hero {
  background-color: var(--papier) !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 1px solid var(--tusz);
}
body.arkusz .p-hero::before {
  background: linear-gradient(90deg,
    rgba(245, 243, 238, .985) 0%,
    var(--papier-p) 38%,
    rgba(245, 243, 238, .62) 70%,
    rgba(245, 243, 238, .42) 100%);
}
body.arkusz .p-hero::after {          /* siatka milimetrowa na wierzchu */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--siatka-mala) 1px, transparent 1px),
    linear-gradient(90deg, var(--siatka-mala) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
}
body.arkusz .p-hero .a-wrap { z-index: 1; }

body.arkusz .p-okruchy { color: var(--szary); font-size: 13px; }
body.arkusz .p-okruchy a { color: var(--olowek); }
body.arkusz .p-okruchy span[aria-hidden] { color: var(--tusz-slaby); }

body.arkusz .p-nad {
  color: var(--olowek);
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 500;
}
body.arkusz .p-h1,
body.arkusz .p-h2,
body.arkusz .p-h3 { color: var(--czarny); }
body.arkusz .p-lead { color: var(--tekst-2); font-size: 17px; }
body.arkusz .p-szary,
body.arkusz .p-naglowek-sekcji p { color: var(--szary); }

/* Żółta kreska pod nagłówkiem działu — ten sam znak co na stronie głównej. */
body.arkusz .p-hero .p-h1::after {
  content: "";
  display: block;
  width: 180px;
  max-width: 60%;
  border-top: 3px solid var(--zolty);
  margin-top: 16px;
}

/* --- sekcje ------------------------------------------------------------ */

body.arkusz .p-ciemna {
  background: var(--papier-jasny);
  border-block: 1px solid var(--tusz-slaby);
}
body.arkusz .p-dzial { scroll-margin-top: 130px; }

/* --- filtry ------------------------------------------------------------ */

body.arkusz .p-filtr {
  border: 1px solid var(--tusz);
  color: var(--tusz);
  background: var(--papier-jasny);
  font-size: 12px;
  letter-spacing: 1px;
  min-height: 40px;
}
body.arkusz .p-filtr:hover { border-color: var(--olowek); color: var(--olowek); }
body.arkusz .p-filtr[aria-pressed="true"] {
  background: var(--zolty);
  border-color: var(--tusz);
  color: var(--czarny);
}

/* --- karty ------------------------------------------------------------- */

body.arkusz .p-karta {
  background: var(--papier-jasny);
  color: var(--tusz);
  border: 1px solid var(--tusz);
}
body.arkusz .p-karta:hover { border-color: var(--olowek); }
body.arkusz .p-karta-foto { background: var(--papier); border-bottom: 1px solid var(--tusz); }
body.arkusz .p-karta-foto img { filter: saturate(.92); }
body.arkusz .p-licznik {
  background: var(--papier);
  color: var(--czarny);
  border: 1px solid var(--tusz);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
body.arkusz .p-chip {
  color: var(--olowek);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
}
body.arkusz .p-karta-opis p { color: var(--tekst-2); }

/* --- metryka realizacji = tabliczka rysunkowa -------------------------- */

body.arkusz .p-metryka {
  background: var(--tusz-slaby);
  border: 1px solid var(--tusz);
  gap: 1px;
}
body.arkusz .p-metryka div { background: var(--papier-jasny); }
body.arkusz .p-metryka dt {
  color: var(--szary);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 1px;
}
body.arkusz .p-metryka dd { color: var(--czarny); font-size: 15px; }

/* --- galeria i lightbox ------------------------------------------------ */
/* Lightbox zostaje ciemny — zdjęcie ogląda się na czarnym tle, i na
   papierowej stronie też. To jedyne miejsce, gdzie łamiemy paletę. */

body.arkusz .p-galeria a { background: var(--papier-jasny); border: 1px solid var(--tusz-slaby); }
body.arkusz .p-galeria a:focus-visible { outline: 3px solid var(--olowek); }

/* --- listy, pliki ------------------------------------------------------ */

body.arkusz .p-lista li::before { background: var(--zolty); outline: 1px solid var(--tusz); }
body.arkusz .p-zakres { background: var(--tusz-slaby); border: 1px solid var(--tusz); gap: 1px; }
body.arkusz .p-zakres > div { background: var(--papier-jasny); }
body.arkusz .p-zakladki a {
  border: 1px solid var(--tusz);
  background: var(--papier-jasny);
  color: var(--tusz);
  font-size: 12px;
  letter-spacing: 1px;
}
body.arkusz .p-zakladki a:hover { border-color: var(--tusz); background: var(--zolty); color: var(--czarny); }
body.arkusz .p-foto-duze { border: 1px solid var(--tusz); }

body.arkusz .p-plik {
  background: var(--papier-jasny);
  border: 1px solid var(--tusz);
  color: var(--tusz);
}
body.arkusz .p-plik:hover { border-color: var(--olowek); }
body.arkusz .p-plik small { color: var(--szary); }
body.arkusz .p-plik-ikona { background: var(--zolty); color: var(--czarny); border: 1px solid var(--tusz); }

/* --- wideo -------------------------------------------------------------- */

body.arkusz .p-wideo-karta { background: var(--papier-jasny); border: 1px solid var(--tusz); }
body.arkusz .p-wideo-karta span { color: var(--szary); font-size: 14px; }

/* --- aktualności -------------------------------------------------------- */

body.arkusz .p-wpisy { background: var(--tusz-slaby); border: 1px solid var(--tusz); gap: 1px; }
body.arkusz .p-wpis { background: var(--papier-jasny); color: var(--tusz); }
body.arkusz .p-wpis img { border: 1px solid var(--tusz); }
body.arkusz .p-wpis time { color: var(--olowek); font-weight: 500; letter-spacing: 2px; font-size: 11px; }
body.arkusz .p-wpis p { color: var(--tekst-2); }
body.arkusz .p-wpis .p-dalej { color: var(--czarny); }
body.arkusz .p-wpis .p-dalej span,
body.arkusz .p-wpis:hover .p-dalej { color: var(--czarny); border-bottom: 2px solid var(--zolty); }

/* --- wezwanie do działu ------------------------------------------------- */

body.arkusz .p-cta { background: #FFF6D1; color: var(--czarny); border-block: 1px solid var(--tusz); }
body.arkusz .p-cta .p-h2 { color: var(--czarny); }
body.arkusz .p-btn { font-size: 13px; letter-spacing: 1px; min-height: 44px; box-sizing: border-box; }
body.arkusz .p-btn-czarny { background: var(--czarny); color: var(--zolty); }
body.arkusz .p-btn-obrys { border: 2px solid var(--czarny); color: var(--czarny); }
body.arkusz .p-btn-obrys:hover { background: var(--czarny); color: var(--zolty); }
body.arkusz .p-btn-zolty { background: var(--zolty); color: var(--czarny); border: 1px solid var(--tusz); }

body.arkusz .p-nawig-proj { background: var(--tusz-slaby); border: 1px solid var(--tusz); gap: 1px; }
body.arkusz .p-nawig-proj a { background: var(--papier-jasny); color: var(--tusz); }
body.arkusz .p-nawig-proj a:hover { background: #FFF6D1; }
body.arkusz .p-nawig-proj small { color: var(--szary); font-weight: 500; font-size: 10px; }

body.arkusz .p-uwaga {
  border-left: 4px solid var(--zolty);
  background: #FFF6D1;
  color: #2A2610;
  font-size: 14px;
  border-top: 1px solid var(--tusz-slaby);
  border-right: 1px solid var(--tusz-slaby);
  border-bottom: 1px solid var(--tusz-slaby);
}

/* --- resztki ciemnego motywu ze stron ---------------------------------- */
/* Kilka podstron ma własne bloki w atrybutach style — te trzy klasy
   dotyczą elementów, które inaczej zostałyby czarnymi plamami. */

body.arkusz .e-pin { background: var(--zolty); border: 2px solid var(--czarny); }
body.arkusz .a-dash { height: 14px; }
body.arkusz .e-social a { border-color: var(--tusz); color: var(--tusz); }
body.arkusz .e-social a:hover { background: var(--zolty); color: var(--czarny); border-color: var(--tusz); }

/* --- nagłówek: wersja z menu pod przyciskiem --------------------------- */

body.arkusz .ark-marka { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
body.arkusz .ark-marka img { height: 44px; width: auto; display: block; }
body.arkusz .ark-marka .ark-nazwa,
body.arkusz .ark-marka .ark-podnazwa { display: block; }

.ark-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-left: auto;
  background: var(--papier-jasny);
  border: 1px solid var(--tusz);
  color: var(--tusz);
  cursor: pointer;
}
.ark-burger[aria-expanded="true"] { background: var(--zolty); }

.ark-menu-mob { display: flex; flex-direction: column; background: var(--papier-jasny); border-top: 1px solid var(--tusz); padding: 4px 18px 14px; }
.ark-menu-mob[hidden] { display: none; }
.ark-menu-mob a {
  color: var(--tusz);
  font: 600 13px Barlow, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tusz-slaby);
  text-decoration: none;
}
.ark-menu-mob a:last-child { border-bottom: 0; }
.ark-menu-mob a[aria-current="page"] { color: var(--olowek); }
.ark-menu-mob .ark-menu-mob-cta {
  margin-top: 12px;
  background: var(--zolty);
  color: var(--czarny);
  text-align: center;
  padding: 15px;
  border: 1px solid var(--tusz);
}

.ark-przycisk--maly { padding: 11px 16px; font-size: 12px; min-height: 40px; }

@media (max-width: 1100px) {
  .ark-pasek .ark-menu a { font-size: 11px; }
  .ark-pasek .ark-menu { gap: 14px; }
}
@media (max-width: 900px) {
  .ark-pasek .ark-menu,
  .ark-pasek .ark-przycisk--maly { display: none; }
  .ark-burger { display: flex; }
  body.arkusz .ark-marka img { height: 38px; }
  body.arkusz .ark-pasek-tresc { flex-wrap: nowrap; gap: 10px; padding: 10px 0; }
  body.arkusz .ark-nazwa { font-size: 15px; }
  body.arkusz .ark-podnazwa { font-size: 9px; letter-spacing: 1px; }

  /* Na wąskim ekranie napis hero nie ma gdzie uciec od zdjęcia —
     przykrywamy fotkę prawie całkiem, czytelność przed ozdobą. */
  body.arkusz .p-hero::before {
    background: linear-gradient(180deg,
      rgba(245, 243, 238, .985) 0%,
      var(--papier-p) 72%,
      var(--papier-p) 100%);
  }
}
@media (max-width: 560px) {
  body.arkusz .p-lead { font-size: 15px; }
  body.arkusz .p-btn { display: block; text-align: center; width: 100%; }
  body.arkusz .p-cta .a-wrap { padding-block: 34px; }
}


/* --- linki, ktore sa przyciskami ----------------------------------------
   Kazda podstrona ma w swoim <style> stara regule ciemnego motywu
   (a{color:#F4C20D}, a:hover{color:#FFE066}). Dlatego kolor napisu na
   przycisku musi byc podany wprost i dla spoczynku, i dla najechania —
   inaczej przy kursorze robi sie zolty napis na zoltym tle.
   Na asfalcie (webH) wygrywaja reguly z arkusz-asfalt.css, bo maja
   w selektorze dodatkowa klase .h-nawierzchnia. */

body.arkusz a.ark-przycisk,
body.arkusz a.ark-przycisk:hover,
body.arkusz a.ark-przycisk:focus-visible { color: var(--czarny); }

body.arkusz a.ark-przycisk-obrys,
body.arkusz a.ark-przycisk-obrys:focus-visible { color: var(--czarny); }
body.arkusz a.ark-przycisk-obrys:hover { color: var(--zolty); }

body.arkusz a.p-btn-czarny,
body.arkusz a.p-btn-czarny:hover { color: var(--zolty); }
body.arkusz a.p-btn-obrys { color: var(--czarny); }
body.arkusz a.p-btn-obrys:hover { color: var(--zolty); }   /* tlo czernieje */
body.arkusz a.p-btn-zolty,
body.arkusz a.p-btn-zolty:hover { color: var(--czarny); }

body.arkusz a.e-trasa,
body.arkusz a.e-trasa:hover { color: var(--czarny); }
body.arkusz a.ark-menu-mob-cta,
body.arkusz a.ark-menu-mob-cta:hover { color: var(--czarny); }

/* logo i karta realizacji nie sa przyciskami, ale tez byly wylaczone
   z ogolnej reguly — bez tego wracaly do zoltego ze starego motywu */
body.arkusz a.ark-marka,
body.arkusz a.ark-marka:hover { color: var(--tusz); }
body.arkusz a.p-karta,
body.arkusz a.p-karta:hover { color: var(--tusz); }