@charset "UTF-8";
/* ============================================================
   THEME STYLE - entry point. Partiale przez @use (sass scala je przy kompilacji).
   Kompilacja: npx sass theme-style.scss:theme-style.css --style=expanded --no-source-map
   ============================================================ */
/* ============================================================
   DESIGN TOKENS - krótkie aliasy do presetów z theme.json.
   Źródło prawdy: theme.json (settings.spacing/typography/color + settings.custom).
   Skala pochodzi 1:1 z projektu Art of Office (src/css/tokens.css w makiecie).
   W komponentach używamy var(--space-*), var(--radius-*) itd. - nie sztywnych px.
   ============================================================ */
:root {
  /* Spacing - 1:1 do theme.json spacingSizes (xs4 sm8 md16 lg24 xl40 2xl64 3xl96 4xl128) */
  --space-xs: var(--wp--preset--spacing--xs);
  --space-sm: var(--wp--preset--spacing--sm);
  --space-md: var(--wp--preset--spacing--md);
  --space-lg: var(--wp--preset--spacing--lg);
  --space-xl: var(--wp--preset--spacing--xl);
  --space-2xl: var(--wp--preset--spacing--2-xl);
  --space-3xl: var(--wp--preset--spacing--3-xl);
  --space-4xl: var(--wp--preset--spacing--4-xl);
  /* Spacing płynny (nie w sliderze edytora - tylko dla SCSS sekcji) */
  --gut: var(--wp--custom--space--gut); /* wcięcie boczne kontenera */
  --sect-y: var(--wp--custom--space--section); /* padding pionowy sekcji */
  --sect-y-tight: var(--wp--custom--space--section-tight);
  /* Radius */
  --radius-xs: var(--wp--custom--radius--xs);
  --radius-sm: var(--wp--custom--radius--sm);
  --radius-md: var(--wp--custom--radius--md);
  --radius-lg: var(--wp--custom--radius--lg);
  --radius-xl: var(--wp--custom--radius--xl);
  --radius-full: var(--wp--custom--radius--full);
  /* Shadow */
  --shadow-sm: var(--wp--custom--shadow--sm);
  --shadow-md: var(--wp--custom--shadow--md);
  --shadow-lg: var(--wp--custom--shadow--lg);
  --shadow-glow: var(--wp--custom--shadow--glow);
  --shadow-glow-strong: var(--wp--custom--shadow--glow-strong);
  /* Motion */
  --transition: var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
  --transition-fast: var(--wp--custom--transition--duration-fast) var(--wp--custom--transition--ease);
  --ease-out: var(--wp--custom--ease--out);
  --ease-io: var(--wp--custom--ease--io);
  --ease-spring: var(--wp--custom--ease--spring);
  /* Layout (szerokości kontenerów) */
  /* Miara wiersza do czytania - węższa niż `narrow`, bo tamten to szerokość
     kolumny układu, a nie długość linii tekstu. */
  --layout-read: var(--wp--custom--layout--read);
  --layout-narrow: var(--wp--custom--layout--narrow);
  --layout-content: var(--wp--custom--layout--content);
  --layout-wide: var(--wp--custom--layout--wide);
  /* Gradienty marki (wyciągnięte z logotypu ART/OFF/ICE) */
  --grad-brand: var(--wp--preset--gradient--brand);
  --grad-brand-r: var(--wp--preset--gradient--brand-r);
  --grad-brand-v: var(--wp--preset--gradient--brand-v);
  --grad-brand-light: var(--wp--preset--gradient--brand-light);
  --grad-soft: var(--wp--preset--gradient--soft);
  --grad-line: var(--wp--preset--gradient--line);
  /* Powierzchnie i obrysy - półprzezroczyste, więc nie nadają się na paletę kolorów */
  --surface-d: var(--wp--custom--surface--on-dark);
  --surface-d-2: var(--wp--custom--surface--on-dark-2);
  --line-d: var(--wp--custom--stroke--dark);
  --line-d-2: var(--wp--custom--stroke--dark-2);
  --line-l: var(--wp--custom--stroke--light);
  --line-l-2: var(--wp--custom--stroke--light-2);
  /* Metryki */
  --hdr-h: var(--wp--custom--metric--header);
  --grid-cell: var(--wp--custom--metric--grid-cell);
}

@media (max-width: 860px) {
  :root {
    --hdr-h: var(--wp--custom--metric--header-mobile);
  }
}
/* ============================================================
   TYPOGRAFIA - nagłówki (.heading-N / .has-heading-N-font-size) i tekst (.has-text-*).
   Rozmiar/interlinia nadaje preset (kontroler "Rozmiar liter"), nie znacznik h1-h6
   (reset gołych tagów jest w assets/scss/global.scss). Źródło presetów: theme.json.

   Skala z makiety Art of Office, przeliczona na px:
     nagłówki proxima-nova (--ffont), tekst adrianna (--sfont).
     proxima-nova ma szersze światła niż grotesk → tracking mniej ujemny.
   ============================================================ */
body .heading,
body .heading * {
  font-family: var(--ffont);
}
body .heading-1,
body .heading-1 *,
body .has-heading-1-font-size {
  font-size: var(--wp--preset--font-size--heading-1, 64px);
  font-weight: 800;
  line-height: 110%;
  letter-spacing: -0.028em;
  font-family: var(--ffont);
}
body .heading-2,
body .heading-2 *,
body .has-heading-2-font-size {
  font-size: var(--wp--preset--font-size--heading-2, 48px);
  font-weight: 800;
  line-height: 115%;
  letter-spacing: -0.024em;
  font-family: var(--ffont);
}
body .heading-3,
body .heading-3 *,
body .has-heading-3-font-size {
  font-size: var(--wp--preset--font-size--heading-3, 30px);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.018em;
  font-family: var(--ffont);
}
body .heading-4,
body .heading-4 *,
body .has-heading-4-font-size {
  font-size: 20px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.012em;
  font-family: var(--ffont);
}
body .heading-5,
body .heading-5 *,
body .has-heading-5-font-size {
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  font-family: var(--ffont);
}
body .heading-6,
body .heading-6 *,
body .has-heading-6-font-size {
  font-size: var(--wp--preset--font-size--heading-6, 14px);
  font-weight: 700;
  line-height: 150%;
  font-family: var(--ffont);
}
body .description {
  line-height: 24px;
}
body .has-text-xs-font-size {
  font-size: 12px;
  line-height: 18px;
  font-family: var(--sfont);
}
body .has-text-smaller-font-size {
  font-size: 14px;
  line-height: 22px;
  font-family: var(--sfont);
}
body .has-text-font-size {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--sfont);
}
body .has-text-bigger-font-size {
  font-size: 20px;
  line-height: 30px;
  font-family: var(--sfont);
}
body .has-text-l-font-size {
  font-size: 24px;
  line-height: 34px;
  font-family: var(--sfont);
}
body .has-text-xl-font-size {
  font-size: 30px;
  line-height: 40px;
  font-family: var(--sfont);
}
body {
  /* ══════════════════════════════════════════════════════
     WARIANTY TEKSTU
     Sposób użycia: className na bloku core (patrz docs §4).
     Rozmiar zawsze osobno, presetem "Rozmiar liter".
     ══════════════════════════════════════════════════════ */
}
body .lead {
  color: var(--wp--preset--color--text-muted);
  max-width: 56ch;
}
body .eyebrow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-family: var(--ffont);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--iris);
  line-height: 1.5;
}
body .eyebrow::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  margin-top: 0.45em;
  border-radius: 2px;
  background: var(--grad-brand);
  flex: none;
}
body .label-tech {
  font-family: var(--ffont);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-soft);
}
body .label-accent {
  font-family: var(--ffont);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--iris);
}
body .label-name {
  font-family: var(--ffont);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--text-muted);
}
body .label-value {
  font-family: var(--ffont);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--wp--preset--color--text);
}
body .grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body .text-muted {
  color: var(--wp--preset--color--text-muted);
}
body .text-soft {
  color: var(--wp--preset--color--text-soft);
}
body {
  /* ── warianty na ciemnym tle ──────────────────────────── */
  /* `.section--dark` to cała sekcja, `.on-dark` to wyspa w jasnej sekcji
     (np. nota w łańcuchu dostaw). Warianty tekstu przełączają się tak samo. */
}
body .section--dark .lead,
body .section--dark .text-muted,
body .on-dark .lead,
body .on-dark .text-muted {
  color: var(--wp--preset--color--text-on-dark);
}
body .section--dark .label-value,
body .on-dark .label-value {
  color: var(--wp--preset--color--paper);
}
body .section--dark .text-soft,
body .section--dark .label-tech,
body .section--dark .label-name,
body .on-dark .text-soft,
body .on-dark .label-tech,
body .on-dark .label-name {
  color: var(--wp--preset--color--text-on-dark-soft);
}
body .section--dark .eyebrow,
body .section--dark .label-accent,
body .on-dark .eyebrow,
body .on-dark .label-accent {
  color: var(--wp--preset--color--accent-on-dark);
}
body .section--dark .grad,
body .on-dark .grad {
  background: var(--grad-brand-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   SKALA NA WĄSKIM EKRANIE

   Podmieniamy ZMIENNĄ presetu, nie font-size. WP wypuszcza własną regułę
   `.wp-block-heading.has-heading-N-font-size { font-size: var(...) !important }`,
   więc nadpisanie samego font-size nigdy nie zadziała - trzeba podmienić to,
   co ta reguła czyta.

   Zmienna jest definiowana na .wp-block-heading (nie na :root), dlatego
   nadpisujemy ją w dwóch miejscach: na `body` (dziedziczy w dół, obsługuje
   znaczniki spoza Gutenberga, np. .heading-1 w szablonach CPT) i na samym
   `body .wp-block-heading` (wyższa specyficzność niż reguła WP).
   ============================================================ */
@media only screen and (max-width: 991px) {
  body,
  body .wp-block-heading {
    --wp--preset--font-size--heading-1: 40px;
    --wp--preset--font-size--heading-2: 34px;
    --wp--preset--font-size--heading-3: 26px;
    --wp--preset--font-size--heading-6: 10px;
  }
  body {
    --wp--preset--font-size--text-bigger: 18px;
  }
  body .has-text-bigger-font-size {
    font-size: 18px;
    line-height: 28px;
  }
}
@media only screen and (max-width: 575px) {
  body,
  body .wp-block-heading {
    --wp--preset--font-size--heading-2: 28px;
  }
  body {
    --wp--preset--font-size--text-bigger: 17px;
  }
  body .has-text-bigger-font-size {
    font-size: 17px;
    line-height: 26px;
  }
}
/* ============================================================
   LAYOUT - prymitywy sekcji i kontenera (Art of Office).

   Zasada z makiety: KAŻDA sekcja ma dokładnie jeden .container. Jeśli treść
   ma iść na całą szerokość, container dostaje modyfikator --full zamiast
   wypadać poza sekcję.

   Motyw kratki (.section::before) jest częścią systemu, nie ozdobnikiem
   doklejanym do wybranych sekcji - siedzi na każdej, wygaszony maską do środka,
   i bierze kolor z motywu sekcji (jasny/ciemny).
   ============================================================ */
body {
  /* ── kontener ─────────────────────────────────────────── */
}
body .container {
  width: 100%;
  max-width: var(--layout-content);
  margin-inline: auto;
  padding-inline: var(--gut);
}
body .container--wide {
  max-width: var(--layout-wide);
}
body .container--narrow {
  max-width: var(--layout-narrow);
}
body .container--full {
  max-width: none;
  padding-inline: 0;
}
body .container--bleed-r {
  max-width: none;
  padding-right: 0;
  padding-left: max(var(--gut), (100% - var(--layout-wide)) / 2 + var(--gut));
}
body {
  /* ── sekcja ───────────────────────────────────────────── */
}
body .section {
  position: relative;
  padding-block: var(--sect-y);
  isolation: isolate;
}
body .section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--gl, var(--line-l)) 1px, transparent 1px), linear-gradient(var(--gl, var(--line-l)) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 22%, transparent 76%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 22%, transparent 76%);
}
body .section--dark {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}
body .section--dark::before {
  --gl: var(--line-d);
}
body {
  /* Ciemna sekcja na gradiencie marki. Dokłada się do `.section--dark`,
     nie zastępuje jej - typografia, przyciski i szyna dalej czytają tamtą
     klasę, tutaj zmienia się samo tło. Stoi po niej w pliku, bo obie mają
     tę samą specyficzność i wygrywa kolejność.

     Gradient leży na czarnym podkładzie przy ~0.5 krycia. Nasycona wersja
     z palety (`--grad-brand`) dawała za mały kontrast: `text-on-dark` to
     0.68 białego i na czystym #1889CB schodziło poniżej 3:1. Po przygaszeniu
     najjaśniejszy koniec ma 8.8:1 do bieli. */
}
body .section--grad {
  background: linear-gradient(168deg, rgba(24, 137, 203, 0.5) 0%, rgba(95, 75, 164, 0.48) 52%, rgba(138, 69, 166, 0.55) 100%), var(--wp--preset--color--ink);
}
body {
  /* Wyspa na ciemnym tle wewnątrz jasnej sekcji (np. nota w łańcuchu dostaw).
     Sam kolor tekstu - tło niesie blok, bo bywa gradientem albo zdjęciem.
     Warianty tekstu przełącza _typography.scss. */
}
body .on-dark {
  color: var(--wp--preset--color--paper);
}
body .section--tint {
  background: var(--wp--preset--color--paper-1);
}
body .section--tight {
  padding-block: var(--sect-y-tight);
}
body .section--flush-b {
  padding-bottom: 0;
}
body {
  /* ── dwie kolumny ─────────────────────────────────────── */
}
body .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  body .split {
    grid-template-columns: minmax(0, 1fr);
  }
}
body {
  /* ── nagłówek sekcji ──────────────────────────────────── */
}
body .sect-head {
  display: grid;
  gap: var(--space-lg);
  max-width: 50rem;
  margin-bottom: clamp(2.5rem, 4.5vw, 4.25rem);
}
body .sect-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
body .sect-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(1.5rem, 3vw, 4rem);
}
@media (max-width: 900px) {
  body .sect-head--split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}
body {
  /* ── tekst tylko dla czytnika ekranu ──────────────────── */
  /* Nazwa celu dla odnośnika, który wizualnie jest samą warstwą na karcie.
     Nie `display: none` - to by go schowało także przed czytnikiem. */
}
body .tb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body {
  /* ── linie ────────────────────────────────────────────── */
}
body .rule {
  height: 1px;
  border: 0;
  background: var(--line-l);
}
body .section--dark .rule {
  background: var(--line-d);
}
body .rule--grad {
  background: var(--grad-line);
}

/* ============================================================
   RYTM PIONOWY TREŚCI (blockGap)

   Odstęp między blokami w trybie flow. Wcześniej wypuszczał go WP z theme.json
   rdzenia - sztywne 24 px i selektor `:root :where(...)` o specyficzności
   (0,1,0), przez co każdy blok musiał go przebijać klasą. Filtr w
   includes/support.php zdejmuje tamte reguły, a odstęp bierze się stąd:
   z tokenu i z ZEROWĄ specyficznością (`:where()` liczy się jak 0).

   Dzięki temu dowolna reguła bloku wygrywa bez podnoszenia specyficzności.
   Blok, który układa dzieci własną siatką, i tak zeruje `margin-block` na
   `> *` - siatka daje `gap`, a margines by się z nim dublował.

   Świadomie POZA `body { }` - opakowanie podniosłoby specyficzność do (0,1,0),
   czyli dokładnie tam, skąd uciekamy.
   ============================================================ */
:where(.is-layout-flow, .is-layout-constrained) > * {
  margin-block-start: var(--space-lg);
  margin-block-end: 0;
}

:where(.is-layout-flow, .is-layout-constrained) > :first-child {
  margin-block-start: 0;
}

:where(.is-layout-flex) {
  gap: var(--space-md);
}

:where(.is-layout-grid) {
  gap: var(--space-lg);
}

/* ============================================================
   PRZYCISKI - core/button, 4 warianty zarejestrowane w
   includes/cli/button-styles.php (klasy is-style-typ-*).
   theme.json NIE definiuje wyglądu przycisku (filtr usuwa core elements.button).

   Typografia techniczna: uppercase, mniejszy stopień, rozstaw liter.
   Wszystko na tokenach z theme.json.

   Warianty:
     typ-1          → wypełnienie gradientem marki (główne CTA)
     typ-1-outline  → obwódka z gradientu, wypełnienie przy hover
     typ-2          → biały (na gradientowym pasku CTA)
     typ-2-outline  → przezroczysty z jasną obwódką (na gradientowym pasku)

   Ikona: klasa .ico-* w polu „Zaawansowane → Dodatkowa klasa CSS" bloku
   przycisku. Rysuje ją ::before maską SVG, więc bierze kolor napisu i sama
   zmienia się razem z nim przy najechaniu. Lista klas niżej w pliku.
   ============================================================ */
body .wp-block-button .wp-block-button__link {
  --btn-h: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: var(--btn-h);
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), color var(--transition), background-position 0.7s var(--ease-out);
}
body .wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px);
}
body .wp-block-button .wp-block-button__link:active {
  transform: translateY(0);
  transition-duration: 80ms;
}
body .wp-block-button .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(102deg, transparent 34%, rgba(255, 255, 255, 0.42) 48%, transparent 62%);
  transform: translateX(-115%);
  pointer-events: none;
  transition: transform 0.85s var(--ease-out);
}
body .wp-block-button .wp-block-button__link:hover::after {
  transform: translateX(115%);
}
body .wp-block-button.btn-sm .wp-block-button__link {
  --btn-h: 42px;
  padding-inline: var(--space-md);
  font-size: 12px;
}
body .wp-block-button {
  /* ── TYP 1 - wypełnienie gradientem marki ──────────── */
}
body .wp-block-button.is-style-typ-1 .wp-block-button__link {
  color: var(--wp--preset--color--paper);
  background: var(--grad-brand);
  background-size: 210% 100%;
  background-position: 0% 50%;
  box-shadow: var(--shadow-glow);
}
body .wp-block-button.is-style-typ-1 .wp-block-button__link:hover {
  background-position: 100% 50%;
  box-shadow: var(--shadow-glow-strong);
}
body .wp-block-button {
  /* ── TYP 1 OUTLINE - obwódka z gradientu ───────────── */
}
body .wp-block-button.is-style-typ-1-outline .wp-block-button__link {
  color: var(--wp--preset--color--text);
  background: linear-gradient(var(--wp--preset--color--paper), var(--wp--preset--color--paper)) padding-box, var(--grad-brand) border-box;
  border: 1.5px solid transparent;
}
body .wp-block-button.is-style-typ-1-outline .wp-block-button__link:hover {
  color: var(--wp--preset--color--paper);
  background: var(--grad-brand) padding-box, var(--grad-brand) border-box;
  box-shadow: var(--shadow-glow);
}
body .wp-block-button {
  /* ── TYP 2 - biały (na gradientowym pasku CTA) ─────── */
}
body .wp-block-button.is-style-typ-2 .wp-block-button__link {
  color: var(--wp--preset--color--iris);
  background: var(--wp--preset--color--paper);
}
body .wp-block-button.is-style-typ-2 .wp-block-button__link:hover {
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.45);
}
body .wp-block-button {
  /* ── TYP 2 OUTLINE - przezroczysty z jasną obwódką ─── */
}
body .wp-block-button.is-style-typ-2-outline .wp-block-button__link {
  color: var(--wp--preset--color--paper);
  background: transparent;
  border: 1.5px solid var(--line-d-2);
}
body .wp-block-button.is-style-typ-2-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--paper);
}
body .wp-block-button {
  /* ── LINK ZE STRZAŁKĄ - odnośnik, nie przycisk ─────── */
  /* Prowadzi dalej, więc nie ma prowadzić wzroku: zdejmujemy wysokość,
     tło, wersaliki i smugę światła. Podkreślenie rysuje gradient w tle
     (oba pseudoelementy są zajęte: ::before to strzałka, ::after smuga). */
}
body .wp-block-button.is-style-typ-link .wp-block-button__link {
  --btn-h: auto;
  height: auto;
  padding: var(--space-xs) 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  color: var(--wp--preset--color--iris);
  background-image: var(--grad-brand);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 0% 2px;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: none;
  transition: color var(--transition), background-size 0.5s var(--ease-out);
}
body .wp-block-button.is-style-typ-link .wp-block-button__link:hover {
  transform: none;
  background-position: left bottom;
  background-size: 100% 2px;
}
body .wp-block-button.is-style-typ-link .wp-block-button__link::after {
  content: none;
}
body .wp-block-button.is-style-typ-link .wp-block-button__link::before {
  content: "";
  order: 2;
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  transition: transform var(--transition);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
body .wp-block-button.is-style-typ-link .wp-block-button__link:hover::before {
  transform: translateX(4px);
}
body .section--dark .wp-block-button.is-style-typ-link .wp-block-button__link,
body .on-dark .wp-block-button.is-style-typ-link .wp-block-button__link {
  color: var(--wp--preset--color--accent-on-dark);
  background-image: var(--grad-brand-light);
}
body .section--dark .wp-block-button.is-style-typ-1-outline .wp-block-button__link {
  color: var(--wp--preset--color--paper);
  background: linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink)) padding-box, var(--grad-brand) border-box;
}
body .section--dark .wp-block-button.is-style-typ-1-outline .wp-block-button__link:hover {
  background: var(--grad-brand) padding-box, var(--grad-brand) border-box;
}
body .wp-block-buttons {
  gap: var(--space-md);
  align-items: center;
}
body {
  /* ══════════════════════════════════════════════════════
     IKONY W PRZYCISKU
     Maska SVG + tło z currentColor: ikona przejmuje kolor napisu, także
     w hoverze, więc nie trzeba osobnych wersji na jasne i ciemne tło.
     Użycie: „Zaawansowane → Dodatkowa klasa CSS" na bloku przycisku.
     Dostępne: ico-katalog, ico-wycena, ico-telefon, ico-pobierz.
     ══════════════════════════════════════════════════════ */
}
body .wp-block-button[class*=ico-] .wp-block-button__link::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
body .wp-block-button.ico-katalog .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 2.5H6.5a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8.5l-6-6Z'/%3E%3Cpath d='M13.5 2.5v6h6'/%3E%3Cpath d='M8.5 13h7M8.5 17h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 2.5H6.5a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8.5l-6-6Z'/%3E%3Cpath d='M13.5 2.5v6h6'/%3E%3Cpath d='M8.5 13h7M8.5 17h5'/%3E%3C/svg%3E");
}
body .wp-block-button.ico-wycena .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h18v11H3z'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h18v11H3z'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
body .wp-block-button.ico-telefon .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 16.9v3a2 2 0 0 1-2.2 2 19.6 19.6 0 0 1-8.5-3.1 19.3 19.3 0 0 1-6-6A19.6 19.6 0 0 1 1.7 4.2a2 2 0 0 1 2-2.2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L7.6 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2.1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 16.9v3a2 2 0 0 1-2.2 2 19.6 19.6 0 0 1-8.5-3.1 19.3 19.3 0 0 1-6-6A19.6 19.6 0 0 1 1.7 4.2a2 2 0 0 1 2-2.2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L7.6 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2.1Z'/%3E%3C/svg%3E");
}
body .wp-block-button.ico-pobierz .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12M7.5 11l4.5 4.5 4.5-4.5'/%3E%3Cpath d='M4 20.5h16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12M7.5 11l4.5 4.5 4.5-4.5'/%3E%3Cpath d='M4 20.5h16'/%3E%3C/svg%3E");
}
body {
  /* ── mobile ───────────────────────────────────────────── */
}
@media only screen and (max-width: 575px) {
  body .wp-block-buttons {
    flex-wrap: nowrap;
    gap: var(--space-sm);
    width: 100%;
  }
  body .wp-block-button {
    min-width: 0;
    flex: 1 1 0;
  }
  body .wp-block-button .wp-block-button__link {
    --btn-h: 46px;
    width: 100%;
    padding-inline: var(--space-md);
    gap: var(--space-xs);
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  body .wp-block-button[class*=ico-] .wp-block-button__link::before {
    width: 14px;
    height: 14px;
  }
}

/* ============================================================
   FORMULARZ - wygląd pól Contact Form 7.

   Prymityw globalny, nie styl bloku. Te reguły siedziały w `layout/kontakt`,
   dopóki formularz stał tylko tam. Od czasu kreatora zapytania ten sam
   formularz renderuje się w DWÓCH miejscach (sekcja na stronie i warstwa
   kreatora), a styl zamknięty w `.tb-kontakt` nie sięgał do drugiego -
   pola w kreatorze wyglądały jak goły HTML.

   Blok `layout/kontakt` zostawia sobie to, co dotyczy SEKCJI: aurorę,
   układ dwóch kolumn i białą kartę pod formularzem.
   ============================================================ */
body {
  /* `[hidden]` MUSI być wypisane. Reguła przeglądarki `[hidden]{display:none}`
     ma specyficzność (0,1,0), a `body .tb-form__pole` (0,1,1) - czyli własne
     `display` wygrywa i atrybut przestaje działać. Kroki formularza chowają
     grupy pól właśnie atrybutem. */
}
body .tb-form__krok[hidden],
body .tb-form__pole[hidden],
body .tb-form__siatka[hidden],
body .tb-form__stopka[hidden] {
  display: none;
}
body {
  /* Pole ze spisem stron wypełnia JS - klient ogląda listę wyżej,
     nie w textarei. Nie `type=hidden`, bo CF7 takiego pola nie ma. */
}
body .tb-form__strony {
  display: none;
}
body {
  /* ── siatka pól ───────────────────────────────────────── */
}
body .tb-form__siatka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
}
body .tb-form__pole {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}
body .tb-form__pole--cala {
  grid-column: 1/-1;
}
body .tb-form__pole > label,
body .tb-form__etykieta {
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--wp--preset--color--text-muted);
  /* „(opcjonalnie)" przy etykiecie - ten sam stopień pisma, lżejszy ton. */
}
body .tb-form__pole > label i,
body .tb-form__etykieta i {
  font-style: normal;
  font-weight: 400;
  color: var(--wp--preset--color--text-soft);
}
body {
  /* CF7 opakowuje każdą kontrolkę w dodatkowy <span>. Musi być blokiem,
     inaczej pole nie rozciąga się na szerokość komórki siatki. */
}
body .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
body {
  /* ── kontrolki ────────────────────────────────────────── */
}
body input[type=text],
body input[type=email],
body input[type=tel],
body textarea,
body select {
  width: 100%;
  padding: 0.82rem 0.95rem;
  border: 1px solid var(--line-l-2);
  border-radius: var(--radius-sm);
  background: var(--wp--preset--color--paper-1);
  font-family: var(--sfont);
  font-size: 0.94rem;
  color: var(--wp--preset--color--text);
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
body input[type=text]::placeholder,
body input[type=email]::placeholder,
body input[type=tel]::placeholder,
body textarea::placeholder,
body select::placeholder {
  color: var(--wp--preset--color--text-soft);
}
body input[type=text]:focus,
body input[type=email]:focus,
body input[type=tel]:focus,
body textarea:focus,
body select:focus {
  outline: 0;
  border-color: var(--wp--preset--color--indigo);
  background: var(--wp--preset--color--paper);
  box-shadow: 0 0 0 4px rgba(74, 99, 196, 0.14);
}
body {
  /* `height` wprost, nie samo `min-height`: CF7 renderuje textarea z atrybutem
     `rows`, a ten wygrywa z minimalną wysokością i pole wychodziło na 218 px. */
}
body textarea {
  height: 118px;
  min-height: 118px;
  resize: vertical;
}
body {
  /* ── chipy kategorii ──────────────────────────────────── */
  /* CF7 daje listę pól wyboru; my chowamy kwadraciki i zamieniamy podpisy
     w klikalne pigułki. Stan zaznaczenia idzie z `input:checked + span`,
     bo w markupie wtyczki podpis stoi zaraz za polem. */
}
body .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
body .wpcf7-list-item {
  margin: 0;
}
body .wpcf7-checkbox .wpcf7-list-item-label {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-l-2);
  border-radius: var(--radius-full);
  background: var(--wp--preset--color--paper-1);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: 500;
  color: var(--wp--preset--color--text-muted);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
body .wpcf7-checkbox input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
body .wpcf7-checkbox input[type=checkbox]:checked + .wpcf7-list-item-label {
  border-color: transparent;
  background: var(--grad-brand);
  color: var(--wp--preset--color--paper);
  box-shadow: 0 8px 20px -8px rgba(74, 99, 196, 0.8);
}
body .wpcf7-checkbox input[type=checkbox]:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--wp--preset--color--azure);
  outline-offset: 2px;
}
body {
  /* ── zgoda ────────────────────────────────────────────── */
  /* Tu kwadracik zostaje widoczny: zgoda ma wyglądać na świadomy odhaczony
     checkbox, nie na pigułkę do przypadkowego kliknięcia. */
}
body .tb-form__zgoda {
  font-size: var(--wp--preset--font-size--text-xs);
  line-height: 1.5;
  color: var(--wp--preset--color--text-soft);
}
body .tb-form__zgoda .wpcf7-form-control-wrap {
  display: inline;
  width: auto;
}
body .tb-form__zgoda .wpcf7-acceptance .wpcf7-list-item {
  display: inline;
}
body .tb-form__zgoda {
  /* Reset motywu zdejmuje natywny wygląd pól (`appearance: none`), więc
     kwadracik trzeba narysować samemu - inaczej po zgodzie zostaje samo
     wcięcie i nie widać, że jest co kliknąć. `accent-color` tu nie
     pomoże, bo działa tylko na kontrolce natywnej. */
}
body .tb-form__zgoda input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-right: 0.35rem;
  border: 1px solid var(--line-l-2);
  border-radius: 5px;
  background: var(--wp--preset--color--paper-1);
  vertical-align: -3px;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
body .tb-form__zgoda input[type=checkbox]:checked {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6.5-11 11-5-5'/%3E%3C/svg%3E") center/11px no-repeat, var(--grad-brand);
}
body .tb-form__zgoda input[type=checkbox]:focus-visible {
  outline: 2px solid var(--wp--preset--color--azure);
  outline-offset: 2px;
}
body .tb-form__zgoda a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body {
  /* ── stopka formularza ────────────────────────────────── */
}
body .tb-form__stopka {
  margin-top: var(--space-md);
}
body {
  /* Przycisk wysyłki. CF7 renderuje <input type="submit">, a ten nie ma
     pseudoelementów - strzałkę niesie więc otaczający <span>, on też
     robi miejsce na nią prawym wcięciem przycisku. */
}
body .tb-form__wyslij {
  position: relative;
  display: inline-block;
  /* Kręciołek CF7 stoi w markupie zaraz za przyciskiem i w układzie
     rozpychał otoczkę o kilkadziesiąt pikseli - a strzałka liczy swoją
     pozycję od jej PRAWEJ krawędzi, więc lądowała obok przycisku,
     nie na nim. Wyjmujemy go z układu i sadzamy z boku. */
}
body .tb-form__wyslij .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--space-sm));
  translate: 0 -50%;
  margin: 0;
}
body .tb-form__wyslij::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-lg);
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  pointer-events: none;
  /* Maska SVG + tło z currentColor, tak samo jak przy klasach
     .ico-* przycisków (_buttons.scss) - ikona bierze wtedy kolor
     napisu i nie trzeba osobnej wersji na jasne i ciemne tło. */
  color: var(--wp--preset--color--paper);
  background: currentcolor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.4s var(--ease-out);
}
body .tb-form__wyslij:hover::after {
  transform: translateX(4px);
}
body .tb-form__wyslij {
  /* Strzałka to pseudoelement otoczki, więc sama nie wie o wyłączonym
     przycisku - `:has()` przenosi na nią ten stan. */
}
body .tb-form__wyslij:has(.wpcf7-submit[disabled])::after {
  opacity: 0.45;
}
body .tb-form__wyslij {
  /* `transform: none`, NIE `translateY(-50%)`. Pionowe wyśrodkowanie robi tu
     osobna właściwość `translate`, a `transform` się z nią SKŁADA - nie
     zastępuje jej. Wpisany tu drugi raz -50% dokładał się do pierwszego
     i strzałka wyskakiwała nad przycisk. Widać to było tylko przy wyłączonym
     przycisku, czyli zanim klient zaznaczy zgodę. */
}
body .tb-form__wyslij:has(.wpcf7-submit[disabled]):hover::after {
  transform: none;
}
body .wpcf7-submit {
  height: 52px;
  padding-inline: var(--space-xl) calc(var(--space-xl) + 24px);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--grad-brand);
  background-size: 210% 100%;
  background-position: 0% 50%;
  box-shadow: var(--shadow-glow);
  font-family: var(--ffont);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--paper);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background-position 0.7s var(--ease-out);
}
body .wpcf7-submit:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: var(--shadow-glow-strong);
}
body .wpcf7-submit:active {
  transform: translateY(0);
}
body .wpcf7-submit {
  /* CF7 trzyma przycisk wyłączony, dopóki nie ma zgody - to jego
     zachowanie, nie błąd. Ma jednak wyglądać na wyłączony, a nie na
     zepsuty: gasimy go i zdejmujemy uniesienie przy najechaniu. */
}
body .wpcf7-submit[disabled] {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}
body .wpcf7-submit[disabled]:hover {
  transform: none;
  background-position: 0% 50%;
  box-shadow: none;
}
body {
  /* ── komunikaty ───────────────────────────────────────── */
}
body .wpcf7-response-output {
  margin: var(--space-md) 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(74, 99, 196, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(74, 99, 196, 0.1);
  font-size: var(--wp--preset--font-size--text-smaller);
  color: var(--wp--preset--color--iris);
}
body .wpcf7-form.invalid .wpcf7-response-output,
body .wpcf7-form.unaccepted .wpcf7-response-output,
body .wpcf7-form.failed .wpcf7-response-output {
  border-color: rgba(196, 74, 92, 0.32);
  background: rgba(196, 74, 92, 0.1);
  color: #a83248;
}
body .wpcf7-not-valid-tip {
  margin-top: 0.3rem;
  font-size: var(--wp--preset--font-size--text-xs);
  color: #a83248;
}
body .wpcf7-not-valid {
  border-color: rgba(196, 74, 92, 0.5);
}
body .wpcf7-spinner {
  margin-left: var(--space-sm);
}
body {
  /* Jedna kolumna na wąskim ekranie. Poza `.tb-kontakt`, bo formularz stoi
     teraz także w kreatorze. */
}
@media only screen and (max-width: 560px) {
  body .tb-form__siatka {
    grid-template-columns: minmax(0, 1fr);
  }
  body {
    /* Kręciołek siedzi NA PRAWO od przycisku, a ten zajmuje na telefonie
       niemal całą kartę - wystawał poza jej krawędź (i poza ekran, bo strona
       ma `overflow-x: clip`). Sadzamy go w lewym wcięciu przycisku: pokazuje
       się tylko na czas wysyłki, więc nie walczy o miejsce z napisem. */
  }
  body .tb-form__wyslij .wpcf7-spinner {
    left: var(--space-md);
  }
}

/* ============================================================
   ROZWIJANE SZCZEGÓŁY - natywny core/details.

   Prymityw globalny, bo używa go i treść wpisu, i sekcje FAQ na podstronach.
   Blok jest natywny (Gutenberg, znacznik <details>), więc rozwijanie działa
   bez JS-u, a wyszukiwarki widzą treść odpowiedzi także przy zamkniętym
   pytaniu. Własny akordeon na JS byłby tu stratą po obu stronach.

   Wygląd: karta jak wszędzie w motywie - obrys hairline, promień `md`,
   tło `paper`. Strzałkę rysujemy sami, bo domyślny trójkącik przeglądarki
   wygląda inaczej w każdej z nich.
   ============================================================ */
body .wp-block-details {
  /* Padding niesie summary, nie karta: <summary> jest jedynym
     klikalnym elementem natywnego <details>, więc gdy padding siedzi
     na karcie, jej brzegi nie rozwijają odpowiedzi. Z paddingiem
     w środku zamknięta karta jest klikalna od krawędzi do krawędzi. */
  padding: 0;
  border: 1px solid var(--line-l);
  border-radius: var(--radius-md);
  background: var(--wp--preset--color--paper);
  transition: border-color var(--transition-fast);
}
body .wp-block-details:hover {
  border-color: var(--wp--preset--color--iris);
}
body .wp-block-details > :not(summary) {
  margin-block: 0;
  padding-inline: var(--space-lg);
}
body .wp-block-details > :not(summary) + :not(summary) {
  margin-block-start: var(--space-md);
}
body .wp-block-details > :not(summary):last-child {
  padding-bottom: var(--space-lg);
}
body .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  font-family: var(--ffont);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
body .wp-block-details summary::-webkit-details-marker {
  display: none;
}
body .wp-block-details summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentcolor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--transition);
}
body .wp-block-details[open] > summary::after {
  transform: rotate(180deg);
}
body {
  /* Po otwarciu odstęp pytanie-odpowiedź wraca do rytmu md
     (pełny lg z paddingu summary robił dziurę). */
}
body .wp-block-details[open] > summary {
  padding-bottom: var(--space-md);
}
body .wp-block-details[open] {
  border-color: var(--wp--preset--color--paper-3);
}

/* ── siatka FAQ ────────────────────────────────────────────── */
/* Dwie kolumny na szerokim ekranie, jedna na wąskim. Pytania są krótkie,
   więc w jednej kolumnie na 1560 px zostawałyby pół ekranu pustki obok. */
body .tb-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: start;
}
body .tb-faq > * {
  margin-block: 0;
}
@media only screen and (max-width: 900px) {
  body .tb-faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   IKONY - bazowy wygląd <svg class="icon"> z includes/icons.php.
   Zestaw jest kreskowy: obrys bierze kolor z currentColor, wypełnienia brak.
   Bez tego SVG spada na domyślne fill:black i wychodzą czarne kwadraty.

   Selektor `svg.icon` (nie samo `.icon`) świadomie - theme-style.scss ma
   `body svg { height: auto }` (0,1,1), które inaczej zjada wysokość ikony.
   ============================================================ */
body svg.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body svg.icon--fill {
  fill: currentColor;
  stroke: none;
}

/* ============================================================
   EFEKTY - aurora, ziarno, reveal (Art of Office).
   Globalne, bo używa ich więcej niż jedna sekcja (hero, pasek CTA).
   Animujemy wyłącznie transform - rozmycie liczy się raz.
   ============================================================ */
/* ══════════════════ AURORA (żywe tło gradientowe) ══════════════════ */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}

/* Plamy światła dryfują po nieregularnych torach. Każda ma inny czas trwania
   i inne przesunięcie startu, więc układ nigdy się nie powtarza w oczywisty
   sposób. */
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.78;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.aurora__blob--a {
  width: 50vw;
  height: 50vw;
  left: -14vw;
  top: -18vw;
  background: radial-gradient(circle, rgba(24, 137, 203, 0.95), rgba(24, 137, 203, 0.25) 42%, transparent 68%);
  animation: swim-a 31s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.aurora__blob--b {
  width: 42vw;
  height: 42vw;
  right: -10vw;
  top: -6vw;
  background: radial-gradient(circle, rgba(148, 66, 178, 0.95), rgba(138, 69, 166, 0.22) 44%, transparent 70%);
  animation: swim-b 24s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  animation-delay: -6s;
}

.aurora__blob--c {
  width: 38vw;
  height: 38vw;
  left: 30vw;
  bottom: -20vw;
  background: radial-gradient(circle, rgba(95, 75, 164, 0.9), rgba(95, 75, 164, 0.2) 45%, transparent 72%);
  animation: swim-c 38s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
  animation-delay: -14s;
}

/* czwarta, mała i szybsza - daje wrażenie głębi */
.aurora__blob--d {
  width: 22vw;
  height: 22vw;
  right: 24vw;
  bottom: -4vw;
  background: radial-gradient(circle, rgba(56, 120, 196, 0.85), transparent 66%);
  filter: blur(56px);
  opacity: 0.6;
  animation: swim-d 19s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes swim-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  27% {
    transform: translate3d(7vw, 5vw, 0) scale(1.14);
  }
  53% {
    transform: translate3d(3vw, 10vw, 0) scale(1.02);
  }
  78% {
    transform: translate3d(9vw, 2vw, 0) scale(1.1);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes swim-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1.04);
  }
  32% {
    transform: translate3d(-8vw, 7vw, 0) scale(0.94);
  }
  61% {
    transform: translate3d(-2vw, 12vw, 0) scale(1.12);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1.04);
  }
}
@keyframes swim-c {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  24% {
    transform: translate3d(-9vw, -6vw, 0) scale(1.16);
  }
  49% {
    transform: translate3d(5vw, -10vw, 0) scale(0.96);
  }
  73% {
    transform: translate3d(10vw, -3vw, 0) scale(1.08);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes swim-d {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  38% {
    transform: translate3d(-6vw, -8vw, 0) scale(1.22);
  }
  69% {
    transform: translate3d(4vw, -4vw, 0) scale(0.9);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
/* ══════════════════ ZIARNO (zabija banding gradientów) ══════════════════ */
.grain {
  position: absolute;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 7s steps(6) infinite;
}

@keyframes grain-shift {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-3%, 2%);
  }
  40% {
    transform: translate(2%, -3%);
  }
  60% {
    transform: translate(-2%, -2%);
  }
  80% {
    transform: translate(3%, 1%);
  }
  100% {
    transform: translate(0, 0);
  }
}
/* ══════════════════ REVEAL (wjazd przy scrollu) ══════════════════ */
/* bez filter: blur() - rozmycie dużych bloków przy scrollu gubi klatki.
   Opóźnienie startu ustawia --rd na elemencie (np. style="--rd:140ms"). */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.7s var(--ease-out) var(--rd, 0ms), transform 0.7s var(--ease-out) var(--rd, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* W edytorze bloków nie ma obserwatora scrolla - treść musi być widoczna
   od razu, inaczej blok wygląda w canvasie na pusty. */
.block-editor-block-list__layout [data-reveal],
.is-root-container [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
/* ============================================================
   SZYNA - poziomy pas kart przewijany strzałkami.
   Prymitywy globalne, bo używa ich więcej niż jedna sekcja (kategorie,
   katalogi, realizacje, opinie). Sam pas budują sekcje u siebie - tutaj
   siedzą kontrolki i zachowanie przewijania.

   Bez biblioteki: pas to zwykły kontener z `overflow-x: auto` i zatrzaskiem
   (`scroll-snap`), a strzałki przesuwają go o szerokość kolumny.
   JS: assets/js/szyna.js (pasek postępu i wygaszanie strzałek na końcach).
   ============================================================ */
body .szyna {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body .szyna::-webkit-scrollbar {
  display: none;
}
body .szyna > * {
  scroll-snap-align: start;
}
body {
  /* ── kontrolki ────────────────────────────────────────── */
}
body .szyna-ctl {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
body {
  /* `[hidden]` MUSI być wypisane: `display: flex` wyżej przebija regułę
     przeglądarki `[hidden]{display:none}`. Chowa karuzela.js, gdy sekcja
     ma mniej niż dwie okładki - nie ma czego przewijać. */
}
body .szyna-ctl[hidden] {
  display: none;
}
body .szyna-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line-l-2);
  border-radius: var(--radius-full);
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--text);
  cursor: pointer;
  transition: transform 0.45s var(--ease-out), background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
body .szyna-btn:hover {
  transform: translateY(-2px);
  border-color: transparent;
  background: var(--grad-brand);
  color: var(--wp--preset--color--paper);
  box-shadow: var(--shadow-glow);
}
body .szyna-btn .icon {
  width: 18px;
  height: 18px;
}
body .szyna-btn[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
body .szyna-btn--wstecz .icon {
  transform: rotate(180deg);
}
body .section--dark .szyna-btn {
  border-color: var(--line-d-2);
  background: var(--surface-d-2);
  color: var(--wp--preset--color--paper);
}
body {
  /* ── pasek postępu ───────────────────────────────────── */
  /* Szerokość wprost, nie `flex: 1`. Kontrolki bywają w kontenerze zwijanym
     do treści (justify-self: end), a tam `flex: 1` nie ma czego rozdzielić
     i pasek dostawał zero szerokości - czyli znikał. */
}
body .szyna-pasek {
  position: relative;
  flex: none;
  width: clamp(120px, 20vw, 260px);
  height: 2px;
  border-radius: 2px;
  background: var(--line-l-2);
  overflow: hidden;
}
body .szyna-pasek i {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--grad-brand);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform 0.5s var(--ease-out);
}
body .section--dark .szyna-pasek {
  background: var(--line-d-2);
}
body {
  /* ── licznik ─────────────────────────────────────────── */
  /* Alternatywa dla paska tam, gdzie widać jedną pozycję naraz (karuzela
     katalogów) - wtedy „gdzie jestem" mówi numer, nie długość wypełnienia. */
}
body .szyna-licznik {
  font-family: var(--ffont);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  text-align: center;
  color: var(--wp--preset--color--text-soft);
}
body .szyna-licznik b {
  color: var(--wp--preset--color--text);
}
body .section--dark .szyna-licznik {
  color: var(--wp--preset--color--text-on-dark-soft);
}
body .section--dark .szyna-licznik b {
  color: var(--wp--preset--color--paper);
}

/* ── kanwa edytora ─────────────────────────────────────── */
/* Strzałki, pasek postępu i licznik to sterowanie widokiem, nie treść -
   a w kanwie edytora JS motywu nie chodzi, więc nic nie robią. Zostawione
   zajmowały miejsce w układzie i kusiły do klikania. W edytorze pasy kart
   przewija się natywnym suwakiem.

   Selektor poza `body { }`, bo `.is-root-container` bywa też korzeniem
   podglądu wzorca, który nie zawsze siedzi w kanwie z <body>. */
.is-root-container .szyna-ctl,
.block-editor-block-list__layout .szyna-ctl {
  display: none;
}

/* Skoro strzałek nie ma, pas musi dać się przewinąć czymś innym - wracamy
   więc do natywnego suwaka, który front chowa na rzecz paska postępu. */
.is-root-container .szyna,
.block-editor-block-list__layout .szyna {
  scrollbar-width: thin;
}
.is-root-container .szyna::-webkit-scrollbar,
.block-editor-block-list__layout .szyna::-webkit-scrollbar {
  display: block;
  height: 8px;
}

/* ============================================================
   TREŚĆ REDAKCYJNA - proza pisana natywnymi blokami Gutenberga.

   Wyniesione z templates/cpt/post/single/assets/style.scss do globala,
   bo ten sam rytm noszą podstrony z tekstem (polityka prywatności,
   regulamin), a arkusz wpisu ładuje się tylko na blogu.

   Kolumna czytania siedzi tu, na .tb-tresc: blok trzyma miarę wiersza
   sam z siebie, niezależnie od tego, w czym stoi. We wpisie
   .tb-wpis-tresc nadpisuje --kolumna tą samą wartością - bez zmiany.
   ============================================================ */
.tb-tresc {
  --kolumna: var(--layout-read);
}
.tb-tresc > * {
  max-width: var(--kolumna);
  margin-inline: auto;
}
.tb-tresc {
  /* ── rytm pionowy ─────────────────────────────────────── */
  /* Zerowanie marginesów list PRZED regułami rytmu i przez :where()
     (zerowa specyficzność): zapisane wprost po rytmie, miało tę samą
     wagę co `> * + *` i jako późniejsze ZJADAŁO odstęp przed listą. */
}
.tb-tresc :where(ul, ol) {
  margin-block: 0;
}
.tb-tresc > * {
  margin-block: 0;
}
.tb-tresc > * + * {
  margin-block-start: var(--space-lg);
}
.tb-tresc {
  /* Nagłówek dzieli tekst na części, więc bierze więcej powietrza NAD sobą,
     a mniej pod - ma się kleić do tego, co zapowiada. */
}
.tb-tresc > * + :is(h2, h3, h4, h5, h6) {
  margin-block-start: var(--space-2xl);
}
.tb-tresc > :is(h2, h3, h4, h5, h6) + * {
  margin-block-start: var(--space-md);
}
.tb-tresc {
  /* Media i separatory oddychają szerzej niż akapity. */
}
.tb-tresc > * + :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-columns, .wp-block-embed, .wp-block-table, .wp-block-separator, .wp-block-buttons),
.tb-tresc > :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-columns, .wp-block-embed, .wp-block-table, .wp-block-separator, .wp-block-buttons) + * {
  margin-block-start: var(--space-2xl);
}
.tb-tresc {
  /* ── wyjścia poza kolumnę ─────────────────────────────── */
  /* Domyślnie blok trzyma się kolumny czytania. Szerokość zmienia się
     kontrolką „Wyrównanie” w edytorze - to natywny sposób WordPressa,
     więc klient nie musi znać żadnych klas motywu.

     `margin-inline: calc(50% - 50vw)` nie: kontener ma własny padding
     i tekst wjechałby pod krawędź ekranu. Wystarczy zdjąć ograniczenie -
     rodzic (`.container`) i tak przycina do swojej szerokości. */
}
.tb-tresc > .alignwide {
  width: min(100%, 1100px);
  max-width: none;
  margin-inline: auto;
}
.tb-tresc > .alignfull {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}
.tb-tresc {
  /* Nagłówki NIE są stylowane po tagach. Typografię niosą presety
     z _typography.scss (.has-heading-N-font-size) - nagłówek w treści
     ma mieć wybrany rozmiar w edytorze, jak wszędzie indziej w motywie.
     Tu zostaje tylko rytm pionowy (marginesy wyżej). */
  /* ── akapit i listy ───────────────────────────────────── */
}
.tb-tresc > p,
.tb-tresc > ul,
.tb-tresc > ol,
.tb-tresc .wp-block-list {
  line-height: 1.65;
}
.tb-tresc {
  /* Globalny reset daje `ul` padding 15px - tu wcięcie ma być czytelne,
     nie przypadkowe. Zerowanie marginesów list siedzi wyżej, PRZED rytmem. */
}
.tb-tresc ul,
.tb-tresc ol {
  padding-left: var(--space-lg);
}
.tb-tresc li + li {
  margin-top: var(--space-xs);
}
.tb-tresc li > ul,
.tb-tresc li > ol {
  margin-top: var(--space-xs);
}
.tb-tresc a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--iris);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity var(--transition-fast);
}
.tb-tresc a:not(.wp-block-button__link):hover {
  opacity: 0.75;
}
.tb-tresc strong {
  color: var(--wp--preset--color--text);
}
.tb-tresc {
  /* ── cytat ────────────────────────────────────────────── */
}
.tb-tresc blockquote,
.tb-tresc .wp-block-quote {
  /* Bez `margin-inline: 0` - to ono wypychało cytat z kolumny czytania
     na lewą krawędź kontenera, przebijając `margin-inline: auto`
     z `.tb-tresc > *`. Domyślne 40 px przeglądarki i tak znika,
     bo `auto` jest mocniejsze. */
  padding-left: var(--space-lg);
  border-left: 2px solid var(--wp--preset--color--iris);
}
.tb-tresc blockquote p,
.tb-tresc .wp-block-quote p {
  margin-block: 0;
  font-family: var(--ffont);
  font-size: var(--wp--preset--font-size--text-bigger);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.tb-tresc blockquote p + p,
.tb-tresc blockquote cite,
.tb-tresc .wp-block-quote p + p,
.tb-tresc .wp-block-quote cite {
  margin-top: var(--space-sm);
}
.tb-tresc blockquote cite,
.tb-tresc .wp-block-quote cite {
  display: block;
  font-family: var(--sfont);
  font-size: var(--wp--preset--font-size--text-smaller);
  font-style: normal;
  color: var(--wp--preset--color--text-muted);
}
.tb-tresc {
  /* ── obrazek i galeria ────────────────────────────────── */
}
.tb-tresc figure {
  margin: 0;
}
.tb-tresc img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.tb-tresc figcaption {
  margin-top: var(--space-sm);
  font-size: var(--wp--preset--font-size--text-smaller);
  color: var(--wp--preset--color--text-muted);
}
.tb-tresc {
  /* Galeria rdzenia jedzie flexem z własnym `gap` - podmieniamy go na token,
     żeby odstęp w galerii zgadzał się z resztą strony. */
}
.tb-tresc .wp-block-gallery.has-nested-images {
  gap: var(--space-md);
}
.tb-tresc .wp-block-gallery.has-nested-images figure {
  margin: 0;
}
.tb-tresc {
  /* ── kolumny ──────────────────────────────────────────── */
}
.tb-tresc .wp-block-columns {
  gap: var(--space-xl);
}
@media only screen and (max-width: 780px) {
  .tb-tresc .wp-block-columns {
    gap: var(--space-lg);
  }
}
.tb-tresc .wp-block-column > * + * {
  margin-block-start: var(--space-md);
}
.tb-tresc {
  /* ── tabela ───────────────────────────────────────────── */
  /* Hairline'y zamiast czarnych ramek z motywu startowego. Tabela bywa
     szersza od ekranu, więc dostaje własny pasek przewijania - inaczej
     rozpycha całą stronę w poziomie. */
}
.tb-tresc .wp-block-table {
  overflow-x: auto;
}
.tb-tresc table {
  width: 100%;
  border-collapse: collapse;
}
.tb-tresc table th,
.tb-tresc table td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line-l);
  text-align: left;
  vertical-align: top;
}
.tb-tresc table th {
  font-family: var(--ffont);
  font-weight: 700;
  background: var(--wp--preset--color--paper-1);
}
.tb-tresc {
  /* ── separator ────────────────────────────────────────── */
}
.tb-tresc .wp-block-separator {
  height: 1px;
  border: 0;
  background: var(--line-l);
  opacity: 1;
  /* Bez skracania do 6 rem z `margin-inline: 0` - to wypychało kreskę
     na lewą krawędź kontenera, poza kolumnę czytania. Separator bierze
     szerokość kolumny, tak jak każdy inny blok. */
}
.tb-tresc {
  /* ── kod ──────────────────────────────────────────────── */
}
.tb-tresc code,
.tb-tresc pre {
  font-family: var(--mono);
  font-size: var(--wp--preset--font-size--text-smaller);
}
.tb-tresc :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  background: var(--wp--preset--color--paper-1);
}
.tb-tresc pre {
  padding: var(--space-lg);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-md);
  background: var(--wp--preset--color--paper-1);
  overflow-x: auto;
}
.tb-tresc {
  /* Rozwijane szczegóły (core/details) mają wygląd GLOBALNY -
     assets/scss/_details.scss. Ten sam blok stoi w sekcjach FAQ
     na podstronach i musi tam wyglądać tak samo. */
}

html {
  scroll-padding-top: calc(var(--hdr-h) + var(--space-lg));
  /* clip zamiast hidden: przycina wystające elementy (peek w sliderach),
     ale NIE tworzy kontenera przewijania - position:fixed/sticky działa dalej */
  overflow-x: clip;
}

body {
  font-family: var(--sfont);
  font-size: 16px;
  line-height: 24px;
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body img,
body svg {
  max-width: 100%;
  height: auto;
}
body a {
  color: inherit;
  text-decoration: none;
}
body ol {
  list-style-type: auto;
  padding-left: 15px;
  margin: 15px 0px;
}
body ul {
  padding-left: 15px;
  list-style-type: disc;
  margin: 15px 0px;
}
body table {
  width: 100%;
}
body strong,
body b {
  font-weight: 600;
}

::selection {
  background: var(--wp--preset--color--iris);
  color: var(--wp--preset--color--paper);
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--azure);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

#wpadminbar {
  position: fixed !important;
  bottom: 0;
  top: auto !important;
}