/* ===========================================================================
   ARKUSZ — skóra graficzna projektu webG (Rafał 2026-10-29)
   Cała strona udaje arkusz rysunkowy: papier w siatkę, ramka rysunkowa,
   linie wymiarowe, szrafury materiałowe, odręczne dopiski i tabliczka.
   Zasada nadrzędna: na telefonie ramka i ozdoby znikają, treść zostaje.
   =========================================================================== */

:root {
  --papier: #F5F3EE;
  --papier-jasny: #FBFAF7;
  --tusz: #2A2A28;
  --tusz-slaby: rgba(42, 42, 40, 0.45);
  --olowek: #1F3A6E;          /* niebieski długopis — dopiski */
  --zolty: #F4C20D;           /* kolor firmowy — akcenty i przyciski */
  --szary: #6B6860;
  --czarny: #141619;
  --siatka-duza: rgba(31, 58, 110, 0.14);
  --siatka-mala: rgba(31, 58, 110, 0.055);
  --ramka: 14px;              /* odsunięcie ramki arkusza od krawędzi */
}

/* --- papier ---------------------------------------------------------- */

body.arkusz {
  margin: 0;
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--siatka-duza) 1px, transparent 1px),
    linear-gradient(90deg, var(--siatka-duza) 1px, transparent 1px),
    linear-gradient(var(--siatka-mala) 1px, transparent 1px),
    linear-gradient(90deg, var(--siatka-mala) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  color: var(--tusz);
  font-family: Barlow, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Ramka rysunkowa — rysowana nad stroną, nie łapie myszy.
   Na telefonie znika: zabierałaby 28 px z każdej strony. */
.ark-ramka {
  position: fixed;
  inset: var(--ramka);
  border: 2px solid var(--tusz);
  pointer-events: none;
  z-index: 60;
}
.ark-ramka::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--tusz-slaby);
}

.ark-plotno {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

/* --- typografia ------------------------------------------------------ */

.ark-nadtytul {
  font: 500 11px/1.4 Barlow, Arial, sans-serif;
  color: var(--olowek);
  text-transform: uppercase;
  letter-spacing: 3px;
}
.ark-h1 {
  margin: 10px 0 0;
  font: 700 clamp(40px, 7vw, 76px)/0.92 "Big Shoulders Display", "Arial Narrow", Impact, Arial, sans-serif;
  color: var(--czarny);
  text-transform: uppercase;
}
.ark-h2 {
  margin: 0;
  font: 700 clamp(30px, 4.6vw, 50px)/1 "Big Shoulders Display", "Arial Narrow", Impact, Arial, sans-serif;
  color: var(--czarny);
  text-transform: uppercase;
}
.ark-h3 {
  margin: 0;
  font: 700 clamp(20px, 2.6vw, 26px)/1.05 "Big Shoulders Display", "Arial Narrow", Impact, Arial, sans-serif;
  color: var(--czarny);
  text-transform: uppercase;
}
.ark-lead { font-size: clamp(15px, 1.6vw, 17px); color: var(--tekst-2); max-width: 60ch; }
.ark-maly { font-size: 13px; color: var(--szary); }

/* Odręczny dopisek niebieskim długopisem. */
.ark-dopisek {
  font: 500 clamp(16px, 2vw, 20px)/1.25 Caveat, "Comic Sans MS", cursive;
  color: var(--olowek);
}
.ark-dopisek--skos { transform: rotate(-1.5deg); }

/* --- linie i wymiary -------------------------------------------------- */

.ark-os {                       /* oś konstrukcyjna: kreska-kropka */
  height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--tusz-slaby) 0 14px, transparent 14px 20px,
    var(--tusz-slaby) 20px 23px, transparent 23px 29px);
}
.ark-kreska { height: 0; border-top: 1px solid var(--tusz); }
.ark-kreska--slaba { border-top-color: var(--tusz-slaby); }

.ark-wymiar {                   /* linia wymiarowa z ukośnymi zasięgami */
  position: relative;
  height: 0;
  border-top: 1px solid var(--tusz);
}
.ark-wymiar::before,
.ark-wymiar::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 10px;
  height: 0;
  border-top: 1px solid var(--tusz);
  transform: rotate(45deg);
}
.ark-wymiar::before { left: -5px; }
.ark-wymiar::after { right: -5px; }
.ark-wymiar-opis {
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  text-align: center;
  font: 600 12px Barlow, Arial, sans-serif;
  color: var(--tusz);
}

/* --- szrafury materiałowe --------------------------------------------- */

.ark-kostka   { background: repeating-linear-gradient(90deg, rgba(42,42,40,.55) 0 2px, rgba(244,194,13,.42) 2px 22px); }
.ark-podsypka { background: radial-gradient(circle at 8px 8px, rgba(42,42,40,.40) 0 2px, transparent 2px); background-size: 22px 18px; }
.ark-kruszywo { background: radial-gradient(circle at 14px 16px, rgba(42,42,40,.40) 0 4px, transparent 4px),
                            radial-gradient(circle at 40px 50px, rgba(42,42,40,.30) 0 5px, transparent 5px);
                background-size: 72px 74px; }
.ark-beton    { background: repeating-linear-gradient(45deg, rgba(42,42,40,.28) 0 1px, transparent 1px 7px),
                            repeating-linear-gradient(135deg, rgba(42,42,40,.28) 0 1px, transparent 1px 7px); }
.ark-grunt    { background: repeating-linear-gradient(135deg, rgba(42,42,40,.26) 0 1px, transparent 1px 9px); }
.ark-projekt  { background: repeating-linear-gradient(45deg, rgba(31,58,110,.20) 0 1px, transparent 1px 8px); }

/* --- elementy -------------------------------------------------------- */

.ark-karta {
  background: var(--papier-jasny);
  border: 1px solid var(--tusz);
  padding: 18px;
  box-sizing: border-box;
}
.ark-karta--zolta { background: #FFF6D1; border-left: 4px solid var(--zolty); }

.ark-przycisk,
.ark-przycisk-obrys {
  display: inline-block;
  font: 700 13px Barlow, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 15px 24px;
  min-height: 44px;
  box-sizing: border-box;
}
.ark-przycisk { background: var(--zolty); color: var(--czarny); }
.ark-przycisk:hover { background: #ffd43b; }
.ark-przycisk-obrys { border: 2px solid var(--czarny); color: var(--czarny); padding: 13px 22px; }
.ark-przycisk-obrys:hover { background: var(--czarny); color: var(--zolty); }

.ark-kolo-detalu {              /* koło z numerem detalu */
  width: 44px; height: 44px;
  border: 1px dashed var(--tusz);
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 15px Barlow, Arial, sans-serif;
  background: var(--papier-p);
}

/* Tabliczka rysunkowa — stopka każdej podstrony. */
.ark-tabliczka { border: 1px solid var(--tusz); background: var(--papier-p); }
.ark-tabliczka-wiersz { display: flex; border-bottom: 1px solid var(--tusz); }
.ark-tabliczka-wiersz:last-child { border-bottom: 0; }
.ark-tabliczka-etykieta {
  width: 120px; flex: 0 0 120px;
  border-right: 1px solid var(--tusz-slaby);
  padding: 6px 10px;
  font: 500 9px Barlow, Arial, sans-serif;
  color: var(--szary);
  text-transform: uppercase; letter-spacing: 1px;
}
.ark-tabliczka-wartosc { flex: 1; padding: 6px 10px; font-size: 12px; color: var(--czarny); }

/* Podziałka liniowa i strzałka północy. */
.ark-podzialka { height: 10px; border: 1px solid var(--tusz);
  background: repeating-linear-gradient(90deg, var(--tusz) 0 30px, var(--papier) 30px 60px); }
.ark-polnoc { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 26px solid var(--tusz); }

/* --- nawigacja -------------------------------------------------------- */

.ark-pasek {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier-p);
  backdrop-filter: blur(2px);
}
/* Kreska zamykajaca pasek konczy sie tam, gdzie ramka arkusza — wczesniej
   szla az do krawedzi okna i przecinala ramke (uwaga Rafala 29.10). */
.ark-pasek .ark-plotno { border-bottom: 1px solid var(--tusz); }
.ark-pasek-tresc { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
/* Tabliczka z nazwa firmy siada w rogu ramki arkusza, a nie w srodku strony —
   na rysunku opis zawsze trzyma sie krawedzi (uwaga Rafala 29.10). */
.ark-pasek .ark-plotno { max-width: none; padding-left: 40px; padding-right: 40px; }
.ark-znak { width: 46px; height: 46px; flex: 0 0 46px; background: var(--czarny); color: var(--zolty);
  font: 700 12px/46px "Big Shoulders Display", "Arial Narrow", Impact, Arial, sans-serif;
  text-align: center; text-transform: uppercase; }
.ark-nazwa { font: 700 18px/1 "Big Shoulders Display", "Arial Narrow", Impact, Arial, sans-serif;
  color: var(--czarny); text-transform: uppercase; }
.ark-podnazwa { font-size: 10px; color: var(--szary); text-transform: uppercase; letter-spacing: 2px; }
.ark-menu { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.ark-menu a { font: 500 12px Barlow, Arial, sans-serif; color: var(--tusz); text-decoration: none;
  text-transform: uppercase; letter-spacing: 1px; padding: 10px 0; }
.ark-menu a:hover, .ark-menu a[aria-current="page"] { border-bottom: 2px solid var(--zolty); }

/* --- siatki ----------------------------------------------------------- */

.ark-rzad { display: flex; flex-wrap: wrap; gap: 24px; }
.ark-kol-2 > * { flex: 1 1 420px; min-width: 0; }
.ark-kol-3 > * { flex: 1 1 300px; min-width: 0; }
.ark-kol-4 > * { flex: 1 1 240px; min-width: 0; }

.ark-sekcja { padding-block: clamp(36px, 6vw, 72px); }
.ark-sekcja + .ark-sekcja { border-top: 1px solid var(--tusz-slaby); }

/* --- telefon ---------------------------------------------------------- */

@media (max-width: 900px) {
  .ark-ramka { display: none; }              /* ramka zabierałaby szerokość */
  .ark-plotno { padding: 0 18px; }
  body.arkusz {
    background-size: 60px 60px, 60px 60px, 15px 15px, 15px 15px;  /* siatka gęstsza, mniej natarczywa */
  }
  .ark-menu { gap: 14px; }
  .ark-menu a { font-size: 11px; }
  /* Pasek jest tu wyzszy niz na monitorze — przez przezroczystosc przebijala
     tresc przewijana pod spodem i wygladalo to na blad. Krycie na pelne. */
  .ark-pasek { background: var(--papier); }
}

@media (max-width: 560px) {
  body.arkusz { font-size: 15px; }

  /* Nagłówek: logo i nazwa w jednym rzędzie, menu pod spodem w dwóch
     równych rzędach — wszystkie sześć pozycji widoczne, nic nie chowamy. */
  .ark-pasek-tresc { flex-wrap: wrap; gap: 10px; padding: 10px 0; }
  .ark-znak { width: 38px; height: 38px; flex: 0 0 38px; line-height: 38px; font-size: 10px; }
  .ark-pasek-tresc > img { height: 36px !important; }
  .ark-nazwa { font-size: 15px; }
  .ark-podnazwa { font-size: 9px; letter-spacing: 1px; }
  .ark-menu { margin-left: 0; width: 100%; justify-content: flex-start; gap: 4px 16px; }
  .ark-menu a { padding: 4px 0; font-size: 11px; letter-spacing: .5px; }

  /* Nadtytuł rysunku: 3 px światła między literami łamało go na dwa wiersze. */
  .ark-nadtytul { font-size: 10px; letter-spacing: 1.2px; }
  .ark-przycisk, .ark-przycisk-obrys { display: block; text-align: center; width: 100%; box-sizing: border-box; }
  .ark-tabliczka-etykieta { width: 92px; flex: 0 0 92px; }
  .ark-dopisek--skos { transform: none; }    /* przekrzywiony tekst na wąskim ekranie się nie mieści */
}

/* Kto wyłączył animacje, dostaje stronę bez ruchu — u nas i tak wszystko
   jest czytelne w bezruchu, więc po prostu gasimy przejścia. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* --- kursor w ksztalcie olowka (tylko mysz, tylko monitor) ---------------
   Na dotyku i na waskim ekranie nie ma kursora, wiec nic tam nie ustawiamy.
   Na przyciskach i linkach zostaje zwykla rączka — inaczej nie bylo by widac,
   co jest klikalne. Pole tekstowe zostaje belka. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  body, body.arkusz { cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTIgMTIpIj48ZyBzdHJva2U9IiMyQTJBMjgiIHN0cm9rZS13aWR0aD0iMS4xIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWdvbiBwb2ludHM9IjIsMTIgNyw5LjYgNywxNC40IiBmaWxsPSIjMkEyQTI4Ii8+PHBvbHlnb24gcG9pbnRzPSI3LDkuNiAxMSw4LjkgMTEsMTUuMSA3LDE0LjQiIGZpbGw9IiNFOEQ3QTgiLz48cmVjdCB4PSIxMSIgeT0iOC45IiB3aWR0aD0iNy42IiBoZWlnaHQ9IjYuMiIgZmlsbD0iI0Y0QzIwRCIvPjxyZWN0IHg9IjE4LjYiIHk9IjguNyIgd2lkdGg9IjEuNiIgaGVpZ2h0PSI2LjYiIGZpbGw9IiNDOUMzQjQiLz48cmVjdCB4PSIyMC4yIiB5PSI5LjEiIHdpZHRoPSIxLjYiIGhlaWdodD0iNS44IiBmaWxsPSIjRDk4QjdBIi8+PC9nPjwvZz48L3N2Zz4=") 2 22, auto; }
  /* w rysunkach olowek zostaje takze nad elementami klikalnymi */
  .hero-rysunek, .hero-rysunek *, .przekroj, .przekroj *, .os, .os * { cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTIgMTIpIj48ZyBzdHJva2U9IiMyQTJBMjgiIHN0cm9rZS13aWR0aD0iMS4xIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWdvbiBwb2ludHM9IjIsMTIgNyw5LjYgNywxNC40IiBmaWxsPSIjMkEyQTI4Ii8+PHBvbHlnb24gcG9pbnRzPSI3LDkuNiAxMSw4LjkgMTEsMTUuMSA3LDE0LjQiIGZpbGw9IiNFOEQ3QTgiLz48cmVjdCB4PSIxMSIgeT0iOC45IiB3aWR0aD0iNy42IiBoZWlnaHQ9IjYuMiIgZmlsbD0iI0Y0QzIwRCIvPjxyZWN0IHg9IjE4LjYiIHk9IjguNyIgd2lkdGg9IjEuNiIgaGVpZ2h0PSI2LjYiIGZpbGw9IiNDOUMzQjQiLz48cmVjdCB4PSIyMC4yIiB5PSI5LjEiIHdpZHRoPSIxLjYiIGhlaWdodD0iNS44IiBmaWxsPSIjRDk4QjdBIi8+PC9nPjwvZz48L3N2Zz4=") 2 22, auto; }
}