/* Style tylko dla wersji roboczej (new2.proop.pl, AGENTS.md zasada 9). Kolory wyłącznie var(--…) z :root site.css. */

/* ---------- Specjalizacja „Biura rachunkowe” (sandbox.py, accounting_offices) ---------- */
/* 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; }
/* „Biura rachunkowe.” w jednej linii (jak „Transformacja IT.”); na komputerze kolumna tekstu szersza niż przy suwaku 2008/2026 */
@media (min-width: 360px) { .e100 .sb-t1 { white-space: nowrap; } }
@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) → rano (papier) → dom (biel) → dowód (papier) → kontakt (ciemne) */
.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” z jedną kartą (po usługach) */
.sb-spec.svc { background: var(--paper); }
.sb-spec__grid { 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 karta zajmuje dwie z trzech kolumn siatki usług (bez pustej połowy przy krótkim podpisie) */
@media (min-width: 1024px) {
  .sb-spec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .sb-spec__card.svc__card { grid-column: span 2; }
}

/* Rzetelna Firma w stopce, pod hasłem */
.foot__rzf { display: inline-block; margin-top: 22px; border-radius: 8px; opacity: .88; transition: opacity .15s; }
.foot__rzf:hover, .foot__rzf:focus-visible { opacity: 1; }
.foot__rzf img { display: block; width: 112px; height: auto; }
@media (min-width: 560px) and (max-width: 1179px) { .foot__rzf { margin-top: 0; } }

/* Tęcza na „Zadzwoń” z zaskoczenia (sandbox-tecza.js): barwy wariantu 10 z labu new2-zadzwon */
:root { --rb-red: #ff4d4d; --rb-orange: #ff9a1f; --rb-yellow: #ffe14d; --rb-green: #35d07f;
  --rb-cyan: #2ad4f0; --rb-blue: #4a6cff; --rb-violet: #b04dff; }
.btnglow.is-rainbow .btnglow__ring, .btnglow.is-rainbow .btnglow__fg {
  background: conic-gradient(from var(--btnglow-a), var(--rb-red), var(--rb-orange), var(--rb-yellow), var(--rb-green),
    var(--rb-cyan), var(--rb-blue), var(--rb-violet), var(--rb-red)); }

/* Menu z 8 pozycjami (dodane „Specjalizacje”): na komputerze bez „Start” – do strony głównej prowadzi logo;
   w menu na telefonie „Start” zostaje. Na średnich szerokościach węższe odstępy i mniejszy stopień. */
.site-nav .menu li:first-child { display: none; }
@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; } }