/* ===========================================================================
   ARKUSZ H — ASFALT (Rafał 2026-10-29: „dorzuć trochę asfaltu, bo to drogi",
   potem: „asfalt nie przypomina drogi")

   Pierwsza wersja była równym szarym szumem — wyglądała jak papier ścierny.
   Prawdziwa jezdnia ma: widoczne kruszywo (jasne ziarna i ciemne wykruszenia),
   koleiny wypolerowane kołami, przyciemnione krawędzie przy poboczu,
   podłużny szew technologiczny i oznakowanie, które nie jest idealnie białe.
   Wszystko rysowane filtrami i gradientami — zero zdjęć, zero kilobajtów.
   =========================================================================== */

:root {
  --asfalt: #3B3E42;
  --asfalt-ciemny: #2A2C30;
  --farba: #E6E3DA;                 /* farba drogowa po sezonie nie jest biała */

  /* jasne ziarna kruszywa */
  --kruszywo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 .22 .42 .62'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 .84 0 0 0 0 .83 0 0 0 0 .79 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23k)'/%3E%3C/svg%3E");

  /* ciemne wykruszenia i cienie między ziarnami */
  --wykruszenia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 .34 .5'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .05 0 0 0 0 .06 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* --- nawierzchnia ------------------------------------------------------- */

.h-nawierzchnia {
  background-color: var(--asfalt);
  background-image: var(--kruszywo), var(--wykruszenia);
  background-size: 300px 300px, 300px 300px;
  color: var(--farba);
}

/* --- pas jezdni przecinający arkusz ------------------------------------- */
/* Tu dochodzi to, czego nie ma na zwykłym kawałku asfaltu: koleiny wzdłuż
   jezdni i ciemniejsze krawędzie przy poboczu. */

.h-pas {
  position: relative;
  height: 104px;
  border-block: 1px solid var(--tusz);
  overflow: hidden;
  background-color: var(--asfalt);
  background-image:
    var(--kruszywo),
    var(--wykruszenia),
    /* koleiny — pas wypolerowany kołami jest o ton jaśniejszy */
    linear-gradient(180deg, transparent 0 20%, rgba(255,255,255,.055) 24% 33%, transparent 37% 63%, rgba(255,255,255,.055) 67% 76%, transparent 80%),
    /* pobocze: asfalt przy krawędzi jest ciemniejszy i brudniejszy */
    linear-gradient(180deg, rgba(0,0,0,.42) 0, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(0,0,0,.42) 100%);
  background-size: 300px 300px, 300px 300px, auto, auto;
  color: var(--farba);
}

/* krawędzie jezdni — linia ciągła P-7, trochę starta */
.h-pas::before,
.h-pas::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: rgba(230, 227, 218, .62);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22);
}
.h-pas::before { top: 14px; }
.h-pas::after  { bottom: 14px; }

/* linia środkowa P-1: 2 m kreski, 4 m przerwy — w naszej skali 54/108 px */
.h-pas-srodek {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 6px;
  margin-top: -3px;
  background-image:
    var(--wykruszenia),
    repeating-linear-gradient(90deg, var(--farba) 0 54px, transparent 54px 162px);
  background-size: 300px 300px, auto;
  background-blend-mode: multiply, normal;
  opacity: .93;
}
.h-pas--ciagla .h-pas-srodek {
  background-image: var(--wykruszenia), linear-gradient(var(--farba), var(--farba));
}

/* szew technologiczny — styk dwóch wałowań, zawsze gdzieś jest */
.h-pas-szew {
  position: absolute;
  left: 0; right: 0; top: 29%;
  height: 2px;
  background: rgba(0, 0, 0, .34);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}

/* cień pod krawędzią, żeby pas leżał NA arkuszu, a nie w nim */
.h-pas-cien { position: relative; }
.h-pas-cien::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -12px;
  height: 12px;
  background: linear-gradient(rgba(42, 42, 40, .16), transparent);
  pointer-events: none;
}

/* --- panel na asfalcie (wezwanie do kreatora, wezwania na podstronach) --- */

.h-panel {
  position: relative;
  border: 1px solid var(--tusz);
  padding: clamp(24px, 4vw, 44px);
  overflow: hidden;
}
/* oznakowanie krawędziowe wzdłuż lewego boku panelu */
.h-panel::before {
  content: "";
  position: absolute;
  left: 16px; top: 0; bottom: 0;
  width: 5px;
  background: repeating-linear-gradient(180deg,
    rgba(230, 227, 218, .78) 0 34px, transparent 34px 72px);
}
.h-panel > * { position: relative; }

.h-panel .ark-h2, .h-panel h2, .h-panel h3 { color: var(--farba); }
.h-panel p { color: #CFCCC4; }
.h-panel .ark-dopisek { color: #F4C20D; }

/* kafelki kroków na asfalcie — jak tabliczki przy drodze */
.h-panel .kreator-kroki span {
  background: rgba(42, 44, 48, .78);
  border-color: rgba(230, 227, 218, .32);
  color: #CFCCC4;
}

/* --- czytelność wszystkiego, co leży na asfalcie ------------------------ */
/* Granatowy długopis i ciemny tekst na jezdni giną — przechodzą na farbę
   i na żółty, czyli na kolory, które na drodze faktycznie widać. */

body.arkusz .h-nawierzchnia .ark-lead,
body.arkusz .h-nawierzchnia p,
body.arkusz .h-nawierzchnia li,
body.arkusz .h-nawierzchnia .p-szary { color: #CFCCC4; }
/* Zolty link na asfalcie tak, ale NIE na przyciskach — zolty napis na
   zoltym tle to byl napis niewidzialny. */
body.arkusz .h-nawierzchnia a:not(.ark-przycisk):not(.ark-przycisk-obrys):not(.p-btn):not(.e-trasa):not(.ark-menu-mob-cta) { color: var(--zolty); }
body.arkusz .h-nawierzchnia .ark-przycisk { background: var(--zolty); color: var(--czarny); border: 1px solid var(--tusz); }
body.arkusz .h-nawierzchnia .ark-przycisk-obrys { border-color: var(--farba); color: var(--farba); }
body.arkusz .h-nawierzchnia .ark-przycisk-obrys:hover { background: var(--farba); color: var(--asfalt); }
body.arkusz .h-nawierzchnia .ark-nadtytul,
body.arkusz .h-nawierzchnia .p-nad { color: var(--zolty); }
body.arkusz .h-nawierzchnia .ark-nadtytul::before,
body.arkusz .h-nawierzchnia .p-nad::before { border-top-color: var(--zolty); }
body.arkusz .h-nawierzchnia .ark-nadtytul::after,
body.arkusz .h-nawierzchnia .p-nad::after { border-color: var(--zolty); }
body.arkusz .h-nawierzchnia .ark-dopisek { color: var(--zolty); }

/* --- wezwanie na podstronach (.p-cta) ----------------------------------- */
/* .p-cta ma własne tło w arkusz-podstrony.css o wyższej wadze — nawierzchnia
   musi być równie konkretna, inaczej zostaje krem i białe litery na kremie. */

body.arkusz .p-cta.h-nawierzchnia {
  background-color: var(--asfalt);
  background-image: var(--kruszywo), var(--wykruszenia);
  background-size: 300px 300px, 300px 300px;
  color: var(--farba);
  border-block: 1px solid var(--tusz);
}
body.arkusz .p-cta.h-nawierzchnia .p-h2 { color: var(--farba); }
body.arkusz .p-cta.h-nawierzchnia .p-btn-czarny { background: var(--zolty); color: var(--czarny); }
body.arkusz .p-cta.h-nawierzchnia .p-btn-obrys { border-color: var(--farba); color: var(--farba); }
body.arkusz .p-cta.h-nawierzchnia .p-btn-obrys:hover { background: var(--farba); color: var(--asfalt); }

/* --- próbka nawierzchni w legendzie ------------------------------------- */

.h-probka {
  display: inline-block;
  width: 38px; height: 18px;
  vertical-align: -4px;
  border: 1px solid var(--tusz);
  background-color: var(--asfalt);
  background-image: var(--kruszywo), var(--wykruszenia);
  background-size: 300px 300px, 300px 300px;
}

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

@media (max-width: 560px) {
  .h-pas { height: 74px; }
  .h-pas::before { top: 10px; }
  .h-pas::after { bottom: 10px; }
  .h-pas-srodek { background-image: var(--wykruszenia), repeating-linear-gradient(90deg, var(--farba) 0 32px, transparent 32px 96px); }
  .h-panel::before { left: 9px; }
}