/* Specjalizacje (new/specjalizacje.py, przeniesione z new2 2026-10-27: sandbox.css i sandbox-specjalizacje.css).
   Ładowane na całej witrynie, bo menu ma osiem pozycji. Kolory wyłącznie var(--…) z :root site.css. */

/* ---------- podstrona specjalizacji ---------- */
/* hero E100: grafika z labu (E017) w kolumnie obok tekstu; klasa .e017 daje jej kolory i ruch, styl pasa wyłączony */
.e100 .e100__media.sb-art { max-width: 600px; padding: 0; background: none; overflow: visible; }
.e100 .sb-t1 { display: block; }
/* nazwa branży w jednej linii tam, gdzie się mieści (krótkie nazwy); długie łamią się normalnie */
@media (min-width: 1000px) { .e100.e100--full.sb-hero .e100__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* linki z pozycji zakresu i z dowodu do usług, podstron i realizacji */
.sb-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 6px; color: var(--blue);
  font: 600 14.5px/1.3 var(--text); text-decoration: underline 1px var(--mx-blue-40-t); text-underline-offset: 4px; overflow-wrap: anywhere; }
.sb-link:hover { text-decoration-color: var(--orange); }
.sb-link svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* rytm teł: hero (ciemne) → zakres (biel) → backup (papier) → praca z domu (biel) → dowód (papier) → kontakt (ciemne);
   jeden z pasów przechodzi w ciemny wariant (specjalizacje.py, tone_dark) */
.sb-take { background: var(--white); }
.sb-proof { background: var(--paper); border-top: 1px solid var(--line-light); }
.sb-proof .cs-tile { background: var(--white); }
/* zastrzeżenie z realizacji Akwadrat pod kaflami: wyniku nie przenosimy na inne firmy */
.sb-proof__note { max-width: 720px; margin: 14px 0 0; font: 500 13px/1.5 var(--mono); color: var(--muted); }
.sb-proof__more { margin: 22px 0 0; }
.sb-proof .sb-link { font-size: 16px; }

/* ---------- strona główna: sekcja „Specjalizacje” (po usługach, ciemna: rytm.css), cztery karty ---------- */
.sb-spec__grid { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.sb-spec__go { display: inline-flex; color: var(--blue); }
.sb-spec__go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) {
  .sb-spec__card.svc__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .svc .sb-spec__card .svc__art .g2-media { border-bottom: 0; border-right: 1px solid var(--line-light); }
  .sb-spec__card .svc__body { gap: 10px; padding: 28px 32px; }
}
/* na komputerze siatka 2 × 2 */
@media (min-width: 1024px) { .sb-spec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

/* ---------- menu z siedmioma pozycjami (dodane „Specjalizacje”, bez „Start” – Adrian 2026-10-27: do strony głównej
   prowadzi logo; build.py nie wstawia „Start” do menu nagłówka). Na średnich szerokościach węższe odstępy i mniejszy
   stopień. ---------- */
@media (max-width: 1439px) { .site-nav .menu a { padding: 10px 8px; font-size: 15px; } }
@media (max-width: 1279px) { .site-nav .menu a { padding: 10px 6px; font-size: 14.5px; } }
@media (max-width: 1060px) { .site-nav .menu a { padding: 10px 5px; font-size: 14px; } }
/* UK i RU (cyrylica szersza): bez tego nagłówek wychodził poza .wrap po rosyjsku o 14 px przy 981 px i o 7 px przy
   1440 px (pomiar 2026-10-27, 8 pozycji menu) */
@media (min-width: 981px) and (max-width: 1099px) { html:is([lang="uk"], [lang="ru"]) .site-nav .menu a { padding: 10px 4px; font-size: 14px; } }
@media (min-width: 1280px) { html:is([lang="uk"], [lang="ru"]) .site-nav .menu a { padding-inline: 8px; } }