@charset "UTF-8";
/* ============================================================
   KORDIT THEME — main stylesheet entry point
   Atomic design system: tokens → base → atoms → blocks → molecules
   → sections → patterns → components.
   ============================================================ */
/* ============================================================
   DESIGN TOKENS — CSS variable aliases for theme.json presets
   Shorter aliases for daily SCSS use. Source of truth is theme.json.
   ============================================================ */
:root {
  /* Layout */
  --layout-narrow: var(--wp--custom--layout--narrow);
  --layout-content: var(--wp--custom--layout--content);
  --layout-wide: var(--wp--custom--layout--wide);
  /* Palette aliases */
  --primary: var(--wp--preset--color--primary);
  --secondary: var(--wp--preset--color--secondary);
  --ink-3: var(--wp--preset--color--ink-3);
  --accent: var(--wp--preset--color--accent);
  --accent-deep: var(--wp--preset--color--accent-deep);
  --accent-soft: var(--wp--preset--color--accent-soft);
  --accent-2: var(--wp--preset--color--accent-2);
  --accent-2-soft: var(--wp--preset--color--accent-2-soft);
  --light: var(--wp--preset--color--light);
  --subtle: var(--wp--preset--color--subtle);
  --muted: var(--wp--preset--color--muted);
  --background: var(--wp--preset--color--background);
  --dark: var(--wp--preset--color--dark);
  --text-default: var(--primary);
  /* Spacing aliases — 1:1 mapping to theme.json spacingSizes presets.
      Source of truth: theme.json settings.spacing.spacingSizes
      (xs=4, sm=8, md=16, lg=24, xl=32, 2xl=48, 3xl=64, 4xl=88, 5xl=96, 6xl=128) */
  --space-xs: var(--wp--preset--spacing--xs);
  /* 4px */
  --space-sm: var(--wp--preset--spacing--sm);
  /* 8px */
  --space-md: var(--wp--preset--spacing--md);
  /* 16px */
  --space-lg: var(--wp--preset--spacing--lg);
  /* 24px */
  --space-xl: var(--wp--preset--spacing--xl);
  /* 32px */
  --space-2xl: var(--wp--preset--spacing--2-xl);
  /* 48px */
  --space-3xl: var(--wp--preset--spacing--3-xl);
  /* 64px */
  --space-4xl: var(--wp--preset--spacing--4-xl);
  /* 88px */
  --space-5xl: var(--wp--preset--spacing--5-xl);
  /* 96px */
  --space-6xl: var(--wp--preset--spacing--6-xl);
  /* 128px */
  /* Radius */
  --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-ring: var(--wp--custom--shadow--ring);
  /* Motion */
  --transition: var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
  /* Icon sizes */
  --icon-xs: var(--wp--custom--size--icon--xs);
  --icon-sm: var(--wp--custom--size--icon--sm);
  --icon-md: var(--wp--custom--size--icon--md);
  --icon-lg: var(--wp--custom--size--icon--lg);
  --icon-xl: var(--wp--custom--size--icon--xl);
  /* Avatar sizes */
  --avatar-sm: var(--wp--custom--size--avatar--sm);
  --avatar-md: var(--wp--custom--size--avatar--md);
  --avatar-lg: var(--wp--custom--size--avatar--lg);
  --avatar-xl: var(--wp--custom--size--avatar--xl);
  /* Borders */
  --border-hairline: var(--wp--custom--size--border--hairline);
  --border-default: var(--wp--custom--size--border--default);
  --border-thick: var(--wp--custom--size--border--thick);
  /* Navigation tokens (kept from legacy) */
  --nav-gap: 28px;
  --nav-padding-y: 18px;
  --nav-link-color: var(--text-default);
  --nav-link-hover: var(--accent);
  --nav-border-color: rgba(0, 0, 0, 0.08);
  --nav-backdrop: rgba(0, 0, 0, 0.65);
  --nav-menu-bg: var(--background);
  /* ========== ATOMIC COMPONENT TOKENS ==========
      Unified sizes for repeated card/icon/border patterns across all
      patterns. Source of truth — change here, apply everywhere. */
  /* Card icon (granatowy okrąg z ikoną w środku — używany w
      specjalizacje, dlaczego-my, proces, sprawy, cennik phone, kontakt). */
  --card-icon-size: 56px;
  /* circle outer size */
  --card-icon-inner: 24px;
  /* icon img inside */
  --card-icon-bg: var(--primary);
  --card-icon-radius: var(--radius-full);
  /* Process step icon (większa ikona dla wybranych miejsc — proces step). */
  --step-icon-size: 96px;
  --step-icon-inner: 42px;
  /* Card surface (białe karty z border + shadow). */
  --card-bg: var(--background);
  --card-radius: var(--radius-lg);
  --card-border: 1px solid rgba(10, 31, 60, 0.06);
  --card-shadow: var(--shadow-md);
  --card-padding: var(--space-lg);
  /* Borders (subtle hairlines used in separators, dividers, card borders). */
  --border-subtle: rgba(10, 31, 60, 0.06);
  --border-light: rgba(10, 31, 60, 0.18);
  --separator-gold-width: 40px;
  --separator-gold-height: 1px;
  /* On-dark text — białe alpha do użycia w sekcjach z
      backgroundColor:primary lub backgroundColor:dark. */
  --text-on-dark: rgba(255, 255, 255, 1);
  --text-on-dark-subtle: rgba(255, 255, 255, 0.78);
  --text-on-dark-muted: rgba(255, 255, 255, 0.6);
  /* Numbers (eyebrow numbers w kartach typu 01, 02). */
  --num-font-size: clamp(2.5rem, 4vw, 3.25rem);
  --num-stroke-color: rgba(10, 31, 60, 0.18);
  /* ========== TYPOGRAFIA — design system ==========
     ŹRÓDŁO PRAWDY dla wszystkich powtarzalnych typo. Używaj
     tokenów ZAMIAST hardcoded font-size/line-height w SCSS. */
  /* Line-heights — 3 wartości, dobrze odzwierciedlają hierarchię. */
  --lh-tight: 1.15; /* H1/H2 — duże heading, ciasno */
  --lh-snug: 1.3; /* H3/H4/H5 — średnie heading */
  --lh-normal: 1.55; /* body small/cards content */
  --lh-relaxed: 1.7; /* prose w single post (czytelność) */
  /* Body text — desc/excerpt/lede w kartach.
     Używa theme.json fontSize preset `text` (16px), tylko line-height. */
  --prose-desc-size: var(--wp--preset--font-size--text);
  --prose-desc-color: var(--ink-3);
  --prose-desc-lh: var(--lh-normal);
  /* Small text — caption/meta/date. */
  --prose-small-size: var(--wp--preset--font-size--text-small);
  --prose-small-color: var(--muted);
  /* Eyebrow uppercase — używane w "CZYTAJ DALEJ", "SPRAWDŹ ZAKRES",
     labelach kart. NIE używać hardcoded 0.75rem font-weight 600 itp.! */
  --eyebrow-size: var(--wp--preset--font-size--eyebrow);
  --eyebrow-tracking: 0.16em;
  --eyebrow-weight: 600;
  --eyebrow-color: var(--accent-2);
}

/* ============================================================
   RESET + PAGE TRANSITIONS
   ============================================================ */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
}

:where(.wp-site-blocks) > * {
  margin-top: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0 auto;
  padding: 0;
  line-height: 1.6;
  max-width: var(--layout-wide);
  position: relative;
  font-size: 16px;
  color: var(--text-default);
  background-color: var(--background);
}

:root :where(.is-layout-flow) > :last-child {
  margin-block-start: 0;
}

strong {
  font-weight: 600;
}

/* ============================================================
   TYPOGRAPHY — design system source of truth
   ============================================================

   Każdy fontSize preset z theme.json ma TUTAJ swoją kompletną
   definicję typografii: font-size, line-height, font-weight,
   letter-spacing, font-family, text-transform.

   ZASADA: SCSS patternów / sekcji / blocków NIE deklaruje
   font-size, line-height, font-weight, letter-spacing ani
   font-family. Cała typografia idzie przez klasę
   `.has-<slug>-font-size` którą Gutenberg dodaje automatycznie
   gdy w block comment jest `{"fontSize":"<slug>"}`.

   Color NIE jest tutaj — color zawsze przez textColor preset
   w block comment (`{"textColor":"primary"}`).

   Wyjątek: dekoracje (watermark numerów, gigant cyfry) które
   nie pasują do żadnego preseta mogą mieć custom typografię
   w SCSS patternu, ale to powinno być rzadkie.

   ============================================================ */
/* ============================================================
   FONT SIZE PRESETS — heading-1 .. heading-6
   Klient w Gutenbergu wybiera level (h1..h6) — to TYLKO semantyka.
   Rozmiar tekstu wybiera OSOBNO przez fontSize preset, który
   generuje klasę .has-X-font-size. Tu definiujemy KAŻDY preset
   self-contained (size + line-height + letter-spacing).

   NIE stylujemy h1, h2 ... selektorów — semantyczny level NIE
   może wpływać na font-size. Domyślny size per level dostarcza
   theme.json elements.h1..h6 (tylko kiedy preset nie został
   wybrany).
   ============================================================ */
.heading-1,
.has-heading-1-font-size {
  font-size: var(--wp--preset--font-size--heading-1);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

.heading-2,
.has-heading-2-font-size {
  font-size: var(--wp--preset--font-size--heading-2);
  line-height: 1.15;
  letter-spacing: -0.008em;
  margin: 0;
}

.heading-3,
.has-heading-3-font-size {
  font-size: var(--wp--preset--font-size--heading-3);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
}

.heading-4,
.has-heading-4-font-size {
  font-size: var(--wp--preset--font-size--heading-4);
  line-height: 1.25;
  margin: 0;
}

.heading-5,
.has-heading-5-font-size {
  font-size: var(--wp--preset--font-size--heading-5);
  line-height: 1.3;
  margin: 0;
}

.heading-6,
.has-heading-6-font-size {
  font-size: var(--wp--preset--font-size--heading-6);
  line-height: 1.35;
  margin: 0;
}

/* ============================================================
   DISPLAY — gigant tagline (hero, 404)
   ============================================================ */
.has-display-font-size {
  font-size: var(--wp--preset--font-size--display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 400;
  margin: 0;
}

/* ============================================================
   LEDE — intro paragraph pod headingiem sekcji
   ============================================================ */
.has-lede-font-size {
  font-size: var(--wp--preset--font-size--lede);
  line-height: 1.5;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  max-width: 65ch;
}

/* ============================================================
   BODY — domyślny text body
   ============================================================ */
.has-text-font-size {
  font-size: var(--wp--preset--font-size--text);
  line-height: 1.65;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
}

/* ============================================================
   TEXT BIGGER — wyróżniony body (autor name, callout)
   ============================================================ */
.has-text-bigger-font-size {
  font-size: var(--wp--preset--font-size--text-bigger);
  line-height: 1.5;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
}

/* ============================================================
   TEXT SMALL — caption, meta, drobne UI
   ============================================================ */
.has-text-small-font-size {
  font-size: var(--wp--preset--font-size--text-small);
  line-height: 1.55;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
}

/* ============================================================
   EYEBROW — uppercase label nad headingiem, na linkach typu
   "SPRAWDŹ ZAKRES", numerach kart "01", "02", etc.
   ============================================================ */
.has-eyebrow-font-size {
  font-size: var(--wp--preset--font-size--eyebrow);
  line-height: 1;
  letter-spacing: 0.16em;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  text-transform: uppercase;
}

/* ============================================================
   <em> w headingach — global navy secondary akcent.
   Każdy <em> wewnątrz h1..h6 lub .has-heading-*-font-size
   jest renderowany w secondary (jasniejszy navy) bez kursywy.
   ============================================================ */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.wp-block-heading em,
.heading-1 em, .heading-2 em, .heading-3 em, .heading-4 em, .heading-5 em, .heading-6 em,
.has-heading-1-font-size em,
.has-heading-2-font-size em,
.has-heading-3-font-size em,
.has-heading-4-font-size em,
.has-heading-5-font-size em,
.has-heading-6-font-size em,
.has-display-font-size em {
  color: var(--secondary);
  font-style: normal;
}

/* ============================================================
   CONTAINER — content-width wrapper utility
   ============================================================ */
.container {
  width: min(90%, var(--layout-content));
  margin: 0 auto;
}

.container--narrow {
  width: min(90%, var(--layout-narrow));
  margin: 0 auto;
}

/* ============================================================
   EYEBROW — small uppercase label above headings
   Use either as .kordit-eyebrow (manual class) or via paragraph
   block style variation `.is-style-eyebrow` (see blocks/_paragraph.scss).
   ============================================================ */
.kordit-eyebrow {
  align-items: center;
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
  position: relative;
  display: flex;
  gap: 12px;
  margin-left: 0px !important;
}
.kordit-eyebrow::before {
  content: "";
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: currentColor;
}
.kordit-eyebrow.is-centered {
  align-self: center;
}
.kordit-eyebrow.is-centered::after {
  left: 50%;
  transform: translateX(-50%);
}
.kordit-eyebrow.is-sm::after {
  width: 24px;
}
.kordit-eyebrow.is-on-dark {
  color: var(--accent-2-soft);
}

/* ============================================================
   ICON BADGE — circular icon container (kordit/icon-badge block)
   Variants: is-size-{xs,sm,md,lg,xl}, is-variant-{subtle,primary,
   accent,accent-soft,accent-2,white,ghost}.
   Optional label rendered next to icon.
   ============================================================ */
.kordit-icon-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  vertical-align: middle;
}
.kordit-icon-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  line-height: 0;
  transition: var(--transition);
}
.kordit-icon-badge__icon img {
  display: block;
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.kordit-icon-badge:not(:has(.kordit-icon-badge__icon)) {
  gap: 0;
}
.kordit-icon-badge {
  /* When there's no img wrapper (icon-only no-label fallback) */
}
.kordit-icon-badge:not(:has(.kordit-icon-badge__label)) {
  gap: 0;
}
.kordit-icon-badge__label {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text-small);
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}
.kordit-icon-badge {
  /* Size variants */
}
.kordit-icon-badge.is-size-xs .kordit-icon-badge__icon {
  width: 24px;
  height: 24px;
}
.kordit-icon-badge.is-size-sm .kordit-icon-badge__icon {
  width: 32px;
  height: 32px;
}
.kordit-icon-badge.is-size-md .kordit-icon-badge__icon {
  width: 44px;
  height: 44px;
}
.kordit-icon-badge.is-size-lg .kordit-icon-badge__icon {
  width: 56px;
  height: 56px;
}
.kordit-icon-badge.is-size-xl .kordit-icon-badge__icon {
  width: 72px;
  height: 72px;
}
.kordit-icon-badge {
  /* Variant: subtle (default — light bg, primary icon) */
}
.kordit-icon-badge.is-variant-subtle .kordit-icon-badge__icon {
  background: var(--subtle);
  color: var(--primary);
}
.kordit-icon-badge {
  /* Variant: primary (dark navy bg, white icon) */
}
.kordit-icon-badge.is-variant-primary .kordit-icon-badge__icon {
  background: var(--primary);
  color: var(--background);
}
.kordit-icon-badge.is-variant-primary .kordit-icon-badge__icon img {
  filter: brightness(0) invert(1);
}
.kordit-icon-badge {
  /* Variant: accent (blue bg, white icon) */
}
.kordit-icon-badge.is-variant-accent .kordit-icon-badge__icon {
  background: var(--accent);
  color: var(--background);
}
.kordit-icon-badge.is-variant-accent .kordit-icon-badge__icon img {
  filter: brightness(0) invert(1);
}
.kordit-icon-badge {
  /* Variant: accent-soft (light blue bg, accent icon) */
}
.kordit-icon-badge.is-variant-accent-soft .kordit-icon-badge__icon {
  background: var(--accent-soft);
  color: var(--accent);
}
.kordit-icon-badge {
  /* Variant: accent-2 (gold bg, dark icon) */
}
.kordit-icon-badge.is-variant-accent-2 .kordit-icon-badge__icon {
  background: var(--accent-2);
  color: var(--dark);
}
.kordit-icon-badge {
  /* Variant: white (white bg, primary icon — for dark backgrounds) */
}
.kordit-icon-badge.is-variant-white .kordit-icon-badge__icon {
  background: var(--background);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.kordit-icon-badge {
  /* Variant: ghost (transparent, current color border) */
}
.kordit-icon-badge.is-variant-ghost .kordit-icon-badge__icon {
  background: transparent;
  border: var(--border-default) solid currentColor;
  color: inherit;
}

/* ============================================================
   STAT CARD — large number + label ("15+ lat doświadczenia")
   ============================================================ */
.kordit-stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.kordit-stat-card__number {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--display);
  font-weight: 500;
  line-height: 1;
  color: var(--accent-2);
  letter-spacing: -0.02em;
}
.kordit-stat-card__suffix {
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 0.05em;
  color: inherit;
}
.kordit-stat-card__label {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text);
  font-weight: 500;
  line-height: 1.4;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.kordit-stat-card.is-centered {
  align-items: center;
  text-align: center;
}
.kordit-stat-card.is-on-dark .kordit-stat-card__number {
  color: var(--accent-2);
}
.kordit-stat-card.is-on-dark .kordit-stat-card__label {
  color: var(--light);
}

/* ============================================================
   SPECIALTY CARD — icon-badge + title H3 + desc + optional link
   Used for areas of law (prawo cywilne/firmowe/rodzinne/pracownicze).
   ============================================================ */
.kordit-specialty-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--background);
  border: 1px solid var(--light);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  height: 100%;
}
.kordit-specialty-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kordit-specialty-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  color: var(--accent);
  margin-bottom: var(--space-sm);
}
.kordit-specialty-card__icon img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.kordit-specialty-card__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-4);
  font-weight: 400;
  color: var(--primary);
  margin: 0;
  line-height: 1.2;
}
.kordit-specialty-card__desc {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text);
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
  flex: 1;
}
.kordit-specialty-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text-small);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-sm);
}
.kordit-specialty-card__link::after {
  content: "→";
  transition: transform 220ms ease;
}
.kordit-specialty-card__link:hover {
  color: var(--accent-deep);
}
.kordit-specialty-card__link:hover::after {
  transform: translateX(4px);
}
.kordit-specialty-card.is-style-gold .kordit-specialty-card__icon {
  background: var(--accent-2-soft);
  color: var(--accent-2);
}

/* ============================================================
   ACCENT — utility classes for inline highlights
   ============================================================ */
/* <mark> highlight inside headings — used in hero to color part of H1 */
mark.has-inline-color {
  background: transparent;
  padding: 0;
}

mark {
  background: transparent;
  color: var(--accent);
}

/* <kbd> inline accent — dynamiczne podkreślenie słów akcentem złotym.
   Reset browser defaults (mono font, gray bg, border, padding) i
   ustawienie koloru accent-2 (gold). Działa globalnie — gdziekolwiek
   użyjesz <kbd>...</kbd> w treści, fragment dostanie gold color
   z zachowaniem font-family rodzica. */
kbd {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--accent-2);
}

.kordit-accent {
  color: var(--accent);
}

.kordit-accent-2 {
  color: var(--accent-2);
}

/* ============================================================
   CORE/BUTTON — global button system

   BASE styling (wszystkie warianty dziedziczą):
   - padding 14px 28px
   - border 2px solid (transparent w default fill)
   - border-radius var(--radius-md)
   - text-transform uppercase + letter-spacing 0.08em
   - font-weight 600, line-height 1
   - transition smooth color/bg/border

   WARIANTY (od najbardziej dominującego do subtelnego):
   - .is-style-fill (NATYWNY)        — granat solid + biały tekst (default)
   - .is-style-outline (NATYWNY)     — granat ramka + granat tekst
   - .is-style-kordit-gold           — gold solid + biały tekst (premium CTA)
   - .is-style-kordit-outline-light  — biała ramka + biały tekst (dla dark sekcji)
   - .is-style-kordit-link           — sam tekst granat + underline (no padding)

   AUTO-IKONY (via [href^=...]):
   - tel:    → phone before
   - mailto: → message before
   - #       → arrow-right after
   - /       → arrow-right after
   - http    → external-link after
   ============================================================ */
/* -----------------------------------------------------------
   BASE — wszystkie buttony, jeden kształt.
   ----------------------------------------------------------- */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.875rem 2rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--wp--preset--font-size--text-small);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
}

/* -----------------------------------------------------------
   FILL (DEFAULT + .is-style-fill) — granat solid + biały tekst
   -----------------------------------------------------------
   theme.json elements.button daje bg=primary, color=background.
   Tu zerujemy radius/padding na nasze + dodajemy ramkę żeby
   shape pasował 1:1 z outline (ten sam border-width).
*/
.wp-block-button > .wp-block-button__link {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--background);
}

.wp-block-button > .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

/* -----------------------------------------------------------
   OUTLINE (NATYWNY) — nadpisujemy: granat ramka + granat tekst
   ----------------------------------------------------------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--primary);
  color: var(--background);
  border-color: var(--primary);
}

/* -----------------------------------------------------------
   KORDIT-GOLD — gold solid + biały tekst (premium CTA)
   ----------------------------------------------------------- */
.wp-block-button.is-style-kordit-gold > .wp-block-button__link {
  background-color: var(--accent-2);
  color: var(--background);
  border-color: var(--accent-2);
}

.wp-block-button.is-style-kordit-gold > .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--accent-2);
  border-color: var(--accent-2);
}

/* -----------------------------------------------------------
   KORDIT-OUTLINE-LIGHT — biała ramka + biały tekst (dla dark sekcji)
   ----------------------------------------------------------- */
.wp-block-button.is-style-kordit-outline-light > .wp-block-button__link {
  background-color: transparent;
  color: var(--background);
  border-color: var(--background);
}

.wp-block-button.is-style-kordit-outline-light > .wp-block-button__link:hover {
  background-color: var(--background);
  color: var(--primary);
  border-color: var(--background);
}

/* -----------------------------------------------------------
   KORDIT-LINK — sam tekst granat + underline (bez ramki/bg/padding)
   ----------------------------------------------------------- */
.wp-block-button.is-style-kordit-link > .wp-block-button__link {
  padding: 0;
  background-color: transparent;
  color: var(--primary);
  border-color: transparent;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.wp-block-button.is-style-kordit-link > .wp-block-button__link:hover {
  color: var(--accent-2);
  background-color: transparent;
  border-color: transparent;
  text-decoration-thickness: 2px;
}

/* ============================================================
   AUTO-IKONY (przez href attribute) — działają na każdym buttonie.
   Icon = mask-image + currentColor → dziedziczy text-color buttonu.
   ============================================================ */
.wp-block-button__link::before,
.wp-block-button__link::after {
  content: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex: 0 0 auto;
  display: inline-block;
  transition: var(--transition);
}

.wp-block-button__link[href^="tel:"]::before {
  content: "";
  -webkit-mask-image: url("/wp-content/themes/kordit/assets/icons/phone.svg");
  mask-image: url("/wp-content/themes/kordit/assets/icons/phone.svg");
}

.wp-block-button__link[href^="mailto:"]::before {
  content: "";
  -webkit-mask-image: url("/wp-content/themes/kordit/assets/icons/message.svg");
  mask-image: url("/wp-content/themes/kordit/assets/icons/message.svg");
}

.wp-block-button__link[href^="#"]::after {
  content: "";
  -webkit-mask-image: url("/wp-content/themes/kordit/assets/icons/arrow-right.svg");
  mask-image: url("/wp-content/themes/kordit/assets/icons/arrow-right.svg");
}

.wp-block-button__link[href^="/"]::after {
  content: "";
  -webkit-mask-image: url("/wp-content/themes/kordit/assets/icons/arrow-right.svg");
  mask-image: url("/wp-content/themes/kordit/assets/icons/arrow-right.svg");
}

.wp-block-button__link[href^=http]::after {
  content: "";
  -webkit-mask-image: url("/wp-content/themes/kordit/assets/icons/external-link.svg");
  mask-image: url("/wp-content/themes/kordit/assets/icons/external-link.svg");
}

/* Link variant nie powinien mieć ikony auto (jest text-only). */
.wp-block-button.is-style-kordit-link > .wp-block-button__link::before,
.wp-block-button.is-style-kordit-link > .wp-block-button__link::after {
  content: none;
}

/* ============================================================
   PLAIN LINKS poza core/button — opt-in via .has-icon-auto.
   ============================================================ */
a.has-icon-auto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
a.has-icon-auto::before, a.has-icon-auto::after {
  content: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex: 0 0 auto;
  display: inline-block;
}
a.has-icon-auto[href^="tel:"]::before {
  content: "";
  -webkit-mask-image: url("/wp-content/themes/kordit/assets/icons/phone.svg");
  mask-image: url("/wp-content/themes/kordit/assets/icons/phone.svg");
}
a.has-icon-auto[href^="mailto:"]::before {
  content: "";
  -webkit-mask-image: url("/wp-content/themes/kordit/assets/icons/message.svg");
  mask-image: url("/wp-content/themes/kordit/assets/icons/message.svg");
}
a.has-icon-auto {
  /* #anchor → arrow-right after, z transition na translate. */
}
a.has-icon-auto[href^="#"]::after, a.has-icon-auto[href^="/"]::after {
  content: "";
  -webkit-mask-image: url("/wp-content/themes/kordit/assets/icons/arrow-right.svg");
  mask-image: url("/wp-content/themes/kordit/assets/icons/arrow-right.svg");
  transition: transform var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}
a.has-icon-auto[href^=http]::after {
  content: "";
  -webkit-mask-image: url("/wp-content/themes/kordit/assets/icons/external-link.svg");
  mask-image: url("/wp-content/themes/kordit/assets/icons/external-link.svg");
}
a.has-icon-auto {
  /* Hover: arrow slides right (dla wewnętrznych linków). */
}
a.has-icon-auto[href^="#"]:hover::after, a.has-icon-auto[href^="/"]:hover::after {
  transform: translateX(4px);
}

/* ============================================================
   CORE/BUTTONS — wrapper for group of buttons
   ============================================================ */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
@media (max-width: 576px) {
  .wp-block-buttons {
    flex-direction: column;
    gap: var(--space-sm);
    justify-content: flex-start;
    align-items: start;
  }
  .wp-block-buttons .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   CORE/PARAGRAPH — block style variations
   Variants: lede (intro paragraph color override).
   Eyebrow nie jest block style — używaj atomu .kordit-eyebrow
   z styles/atoms/_eyebrow.scss.

   Typografia (font-size/line-height/max-width) jest w klasie
   .has-lede-font-size w styles/base/_typography.scss. Tutaj
   tylko color override dla wariantu is-style-lede.
   ============================================================ */
.wp-block-paragraph.is-style-lede,
p.is-style-lede {
  color: var(--secondary);
}

/* ============================================================
   CORE/GROUP — block style variations + WP layout overrides

   Variant: card-bordered (lekka karta z ramką).
   Dla głównych kart (white bg + shadow) — molekuła .kordit-card.
   ============================================================ */
/* ============================================================
   WP LAYOUT OVERRIDES — bije WP-owe :where() reguły (specyficity 0).
   ============================================================

   WP wstrzykuje do edytora i frontu:
     :root :where(.is-layout-flow) > * { margin-block-start: 24px }
     .is-layout-constrained > :where(:not(.alignXX)) {
         max-width: var(--wp--style--global--content-size);
         margin-left: auto !important;
         margin-right: auto !important;
     }

   Te reguły wymuszają default 24px margin między dziećmi grup i
   centrują content w kolumnach. Nadpisujemy tu z większą specyficity. */
.wp-block-group.is-layout-flow > *,
.wp-block-column.is-layout-flow > *,
.wp-block-cover.is-layout-flow > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.wp-block-group.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide),
.wp-block-column.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide) {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* wp-block-columns same w sobie nie powinno mieć margin (WP wstrzykuje
   margin-block-end ~24px). Wymuszamy 0 — odstępy kontrolujemy SCSS-em
   per pattern. */
.wp-block-columns {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ============================================================
   BLOCK STYLE VARIATIONS
   ============================================================ */
.wp-block-group.is-style-card-elevated {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  transition: var(--transition);
}
.wp-block-group.is-style-card-elevated:has(a):hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.wp-block-group.is-style-card-bordered {
  background: var(--background);
  border: 1px solid var(--light);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  transition: var(--transition);
}
.wp-block-group.is-style-card-bordered:hover {
  border-color: var(--accent);
}

/* ============================================================
   CORE/SEPARATOR — block style variations
   ============================================================ */
.wp-block-separator.is-style-accent {
  border: 0;
  height: 2px;
  background: var(--accent-2);
  opacity: 1;
  width: 60px;
  margin-left: 0;
}

.wp-block-separator.is-style-accent.has-text-align-center,
.wp-block-separator.is-style-accent.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   CORE/IMAGE — base styles, theme.json sets border-radius
   ============================================================ */
.wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   CORE/QUOTE + CORE/PULLQUOTE — domyślne stylowanie cytatów

   Klient wstawia core block w Gutenbergu bez żadnych dodatkowych
   klas i powinien dostać poprawny wygląd. Stylujemy natywne klasy
   WP (.wp-block-quote, .wp-block-pullquote) — NIE custom classy.
   ============================================================ */
/* core/quote — prosty cytat z lewym borderem gold. */
.wp-block-quote {
  margin: 1.5em 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--accent-2);
  background: var(--subtle);
}
.wp-block-quote cite {
  display: block;
  margin-top: var(--space-sm);
  color: var(--muted);
  font-style: normal;
}
.wp-block-quote p:last-child {
  margin-bottom: 0;
}

/* core/pullquote — wyróżniony cytat, większy, wycentrowany,
   z górną i dolną gold linią. */
.wp-block-pullquote {
  margin: 2em 0;
  padding: var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--accent-2);
  border-bottom: 1px solid var(--accent-2);
  text-align: center;
  background: transparent;
}
.wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.wp-block-pullquote p {
  margin: 0;
  color: var(--primary);
}
.wp-block-pullquote cite {
  display: block;
  margin-top: var(--space-md);
  color: var(--accent-2);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.wp-block-pullquote cite::before {
  content: "— ";
}

/* ============================================================
   SECTION HEADER — eyebrow + h2 + lede stack
   Used at top of most sections. Composed of core/* blocks with
   block style variations (.is-style-eyebrow, .is-style-lede).
   ============================================================ */
.kordit-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: 0px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}
.kordit-section-header.is-centered {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.kordit-section-header > h2,
.kordit-section-header > .wp-block-heading {
  margin: 0;
}
.kordit-section-header > p.is-style-lede {
  margin: var(--space-sm) 0 0;
}
.kordit-section-header {
  /* Columns/group dzieci muszą wymusić 100% szerokości,
     bo align-items: flex-start szrinkuje flex-children do contentu —
     co rozjeżdża 2-kolumnowy header (55/45) z H1 łamiącym się na
     pojedyncze słowo. */
}
.kordit-section-header > .wp-block-columns,
.kordit-section-header > .wp-block-group {
  width: 100%;
}

/* ============================================================
   CONTACT CARD — telephone/email/address box with icon
   Reusable in kontakt pattern + footer.
   ============================================================ */
.kordit-contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--background);
  border: 1px solid var(--light);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
.kordit-contact-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.kordit-contact-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--avatar-md);
  height: var(--avatar-md);
  background: var(--accent-soft);
  border-radius: var(--radius-full);
  color: var(--accent);
}
.kordit-contact-card__icon img {
  display: block;
  width: 24px;
  height: 24px;
}
.kordit-contact-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.kordit-contact-card__label {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.kordit-contact-card__value {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text-bigger);
  font-weight: 600;
  color: var(--primary);
  margin: 0;
  word-break: break-word;
}

/* ============================================================
   FAQ — accordion using native <details>/<summary>
   ============================================================ */
.kordit-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.kordit-faq-item {
  background: var(--background);
  border: 1px solid var(--light);
  border-radius: var(--radius-md);
  transition: var(--transition);
  overflow: hidden;
}
.kordit-faq-item:hover {
  border-color: var(--accent);
}
.kordit-faq-item[open] {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.kordit-faq-item__question {
  cursor: pointer;
  list-style: none;
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-5);
  font-weight: 400;
  color: var(--primary);
}
.kordit-faq-item__question::-webkit-details-marker {
  display: none;
}
.kordit-faq-item__question::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-full);
  font-size: 1.25rem;
  font-weight: 300;
  transition: var(--transition);
}
.kordit-faq-item[open] .kordit-faq-item__question::after {
  content: "−";
  background: var(--accent);
  color: var(--background);
  transform: rotate(180deg);
}
.kordit-faq-item__answer {
  padding: 0 var(--space-lg) var(--space-lg);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text);
  line-height: 1.6;
  color: var(--ink-3);
}
.kordit-faq-item__answer > * {
  margin: 0 0 var(--space-md);
}
.kordit-faq-item__answer > *:last-child {
  margin-bottom: 0;
}

/* ============================================================
   KORDIT CARD — molekuła karty
   ============================================================

   ŹRÓDŁO PRAWDY dla wszystkich kart z białym tłem w motywie.
   Wszystkie patterny (specjalizacje, dlaczego-my, sprawy, cennik
   info-card) używają tej molekuły zamiast własnych klas.

   Struktura BEM:
   .kordit-card                  — baza (bg, border, radius, shadow, padding)
     .kordit-card__head          — top row (icon + meta) flex space-between
     .kordit-card__icon          — granat 56×56 (var tokeny --card-icon-*)
     .kordit-card__num           — outline cyfra (decoracja prawy róg)
     .kordit-card__title         — typografia z fontSize preset
     .kordit-card__hr            — gold hairline 40×1
     .kordit-card__desc          — typografia z fontSize preset + ink-3
     .kordit-card__link          — eyebrow link z auto-arrow
     .kordit-card__watermark     — decoracja (super subtle ikona w rogu)

   Modyfikatory:
   .kordit-card--horizontal      — row layout zamiast column (np. kordit-case)
   .kordit-card--floating-icon   — ikona wystaje nad kartę (margin-top negative)

   ============================================================ */
.kordit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  transition: var(--transition);
  margin: 0px;
  text-align: left;
}
.kordit-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.kordit-card {
  /* Children powyżej dekoracji z::before/::after watermark. */
}
.kordit-card > * {
  position: relative;
  z-index: 1;
}
.kordit-card {
  /* ------------------------------------------------------------
     HEAD — top row z ikoną i opcjonalnym numerem/meta po prawej.
     ------------------------------------------------------------ */
}
.kordit-card__head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 !important;
}
.kordit-card {
  /* ------------------------------------------------------------
     ICON — granat kwadrat z białą ikoną w środku.
     ------------------------------------------------------------ */
}
.kordit-card__icon {
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  flex: 0 0 auto;
  margin: 0 !important;
  background: var(--card-icon-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kordit-card__icon img {
  width: var(--card-icon-inner);
  height: var(--card-icon-inner);
  display: block;
  filter: brightness(0) invert(1);
}
.kordit-card {
  /* ------------------------------------------------------------
     NUM — outline cyfra w prawym górnym rogu (dekoracja).
     Typografia custom (poza systemem fontSize) bo to specjalny
     outline-text watermark — patrz --num-* tokens w _tokens.scss.
     ------------------------------------------------------------ */
}
.kordit-card__num {
  margin: 0 !important;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--num-font-size);
  font-weight: 400;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px var(--num-stroke-color);
  letter-spacing: -0.02em;
  align-self: flex-start;
}
.kordit-card {
  /* ------------------------------------------------------------
     TITLE — heading z fontSize preset w block comment patternu.
     Tutaj tylko reset margin + width.
     ------------------------------------------------------------ */
}
.kordit-card__title {
  width: 100%;
  margin: 0 !important;
  text-align: left;
  align-self: stretch;
}
.kordit-card {
  /* ------------------------------------------------------------
     HR — krótka gold hairline 40px pod tytułem.
     ------------------------------------------------------------ */
}
.kordit-card__hr {
  width: 40px;
  height: 1px;
  border: 0;
  background: var(--accent-2);
  opacity: 1;
  margin: 0 !important;
  align-self: flex-start;
}
.kordit-card {
  /* ------------------------------------------------------------
     DESC — body text z fontSize preset + textColor:ink-3.
     Tutaj tylko reset margin.
     ------------------------------------------------------------ */
}
.kordit-card__desc {
  margin: 0 !important;
  text-align: left;
  flex: 1 1 auto;
}
.kordit-card {
  /* ------------------------------------------------------------
     LINK — eyebrow uppercase link z auto-arrow (z _button.scss
     has-icon-auto). Typografia z fontSize:eyebrow preset.
     ------------------------------------------------------------ */
}
.kordit-card__link {
  color: var(--accent-2);
  text-decoration: none;
  transition: color var(--transition);
  align-self: flex-start;
}
.kordit-card__link::after {
  width: 14px !important;
  height: 14px !important;
}
.kordit-card__link:hover {
  color: var(--primary);
}
.kordit-card {
  /* ------------------------------------------------------------
     WATERMARK — duża ikona super subtle w prawym dolnym rogu.
     Pojawia się gdy karta ma element z klasą __watermark.
     ------------------------------------------------------------ */
}
.kordit-card__watermark {
  position: absolute !important;
  right: -16px;
  bottom: -16px;
  width: 120px;
  height: 120px;
  margin: 0 !important;
  opacity: 0.05;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 0 !important;
}
.kordit-card__watermark img {
  width: 120px;
  height: 120px;
  display: block;
  filter: brightness(0) saturate(100%) invert(11%) sepia(34%) saturate(2154%) hue-rotate(199deg) brightness(94%) contrast(98%);
}
.kordit-card {
  /* Watermark animuje się na hover karty. */
}
.kordit-card:hover .kordit-card__watermark {
  opacity: 0.08;
  transform: translate(-4px, -4px) rotate(-4deg);
}
.kordit-card {
  /* ------------------------------------------------------------
     BODY — wrapper na title+desc+link gdy karta ma layout
     horizontal (ikona po lewej, body po prawej).
     ------------------------------------------------------------ */
}
.kordit-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
  text-align: left;
}

/* ============================================================
   MODYFIKATOR: --horizontal
   Row layout zamiast column (ikona lewo, body prawo).
   Używane np. w sprawy (kordit-case → kordit-card--horizontal).
   ============================================================ */
.kordit-card--horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-md);
}

/* ============================================================
   MODYFIKATOR: --floating-icon
   Ikona wystaje nad kartę o połowę swojej wysokości (margin-top
   negative). Używane gdy karta jest w grid i chcemy żeby ikona
   "wisała" nad krawędzią. Specjalizacje i sprawy.
   ============================================================ */
.kordit-card--floating-icon .kordit-card__head {
  margin-top: calc(var(--card-icon-size) / -2) !important;
}

/* ============================================================
   SECTION HERO — wrapper for hero patterns (cover + content)
   Pattern hero-prawnik uses core/cover with hero-shade gradient.
   This file holds responsive/layout tweaks for hero contexts.
   ============================================================ */
/* Hero cover — extra padding + responsive headings */
.wp-block-cover.is-hero {
  min-height: 80vh;
  padding-block: var(--space-6xl);
}
@media (max-width: 768px) {
  .wp-block-cover.is-hero {
    min-height: 70vh;
    padding-block: var(--space-5xl);
  }
}

/* Force text inside hero cover to use proper colors */
.wp-block-cover .has-light-color {
  color: var(--light) !important;
}

.wp-block-cover .has-background-color {
  color: var(--background) !important;
}

/* ============================================================
   PATTERN: hero
   Layout: eyebrow → tagline → author → bio → buttons → note
   Cały content wycentrowany wertykalnie w sekcji 86vh.
   ============================================================ */
.kordit-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 86vh;
}
.kordit-hero__inner {
  max-width: 700px;
}
.kordit-hero {
  /* Biały overlay od lewej. */
}
.kordit-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 35%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0) 80%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 768px) {
  .kordit-hero::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 0.8) 100%);
  }
}
.kordit-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%, rgb(255, 255, 255) 100%);
  pointer-events: none;
  z-index: 0;
  height: 100px;
  top: inherit;
  bottom: 0;
}
.kordit-hero > .container {
  position: relative;
  z-index: 1;
}
.kordit-hero {
  /* ------------------------------------------------------------
     INNER — jednolity rytm odstępów. Każde dziecko ma margin-top.
     Pierwsze dziecko bez marginu.
     ------------------------------------------------------------ */
}
.kordit-hero__inner > * {
  margin-top: var(--space-md);
  margin-bottom: 0;
}
.kordit-hero__inner .kordit-hero__bio {
  margin-top: var(--space-xs);
}
.kordit-hero__inner > *:first-child {
  margin-top: 0;
}
.kordit-hero__inner {
  /* Author wyraźnie pod tagline (oddzielony). */
}
.kordit-hero__inner .kordit-hero__author {
  margin-top: var(--space-xl);
}
.kordit-hero {
  /* CTA — większy odstęp od poprzedniego elementu (bio). */
}
.kordit-hero__cta {
  margin-top: var(--space-xl);
}
.kordit-hero {
  /* Note z zegarem — ikona + tekst. */
}
.kordit-hero__note-icon {
  width: var(--icon-md);
  flex: 0 0 auto;
}
.kordit-hero__note-icon img {
  width: var(--icon-md);
  height: var(--icon-md);
  display: block;
}
.kordit-hero {
  /* Responsive — buttony pełna szerokość. */
}
@media (max-width: 768px) {
  .kordit-hero .wp-block-button .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   PATTERN: specjalizacje (bento grid 5 cards)
   Karty używają molekuły .kordit-card (--floating-icon) —
   patrz styles/molecules/_card.scss.

   SCSS handles: bento grid layout, intro positioning.
   ============================================================ */
.kordit-specjalizacje {
  /* padding sekcji jest ustawiany przez block-level style.spacing.padding
     w pattern (section-basic). */
  /* ---------------------------------------------
     COLUMNS — wymuszamy stretch żeby lewa kolumna miała pełną
     wysokość prawej (potrzebne dla sticky). WP `are-vertically-
     aligned-top` ustawia flex-start co zbija sticky-rodzic.
     --------------------------------------------- */
}
.kordit-specjalizacje .wp-block-columns {
  align-items: stretch;
}
.kordit-specjalizacje .wp-block-column {
  /* Kolumna musi być wysoka żeby intro w środku mogło być
     sticky. Stretch z parent + height:100% na column. */
  align-self: stretch;
}
.kordit-specjalizacje {
  /* ---------------------------------------------
     LEFT INTRO — eyebrow + tagline + lede.
     Sticky podczas scrolla.
     --------------------------------------------- */
}
.kordit-specjalizacje__intro {
  position: sticky;
  top: var(--space-6xl);
  padding-left: 0;
  padding-right: 0;
}
.kordit-specjalizacje__intro > * {
  position: relative;
  z-index: 1;
}
.kordit-specjalizacje__intro {
  /* Wyłącz sticky na mobile (gdy kolumny się składają w stack). */
}
@media (max-width: 960px) {
  .kordit-specjalizacje__intro {
    position: relative;
    top: auto;
  }
}
.kordit-specjalizacje {
  /* ---------------------------------------------
     RIGHT BENTO GRID — 6 columns, 2 rows.
     Karty 1+2: span 3 (top row 50/50).
     Karty 3-5: span 2 (bottom row 33/33/33).
     --------------------------------------------- */
}
.kordit-specjalizacje__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-xl) var(--space-md);
}
.kordit-specjalizacje__grid > *:nth-child(1),
.kordit-specjalizacje__grid > *:nth-child(2) {
  grid-column: span 3;
}
.kordit-specjalizacje__grid > *:nth-child(n+3) {
  grid-column: span 2;
}
@media (max-width: 960px) {
  .kordit-specjalizacje__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kordit-specjalizacje__grid > * {
    grid-column: span 1 !important;
  }
}
@media (max-width: 560px) {
  .kordit-specjalizacje__grid {
    grid-template-columns: 1fr;
  }
  .kordit-specjalizacje__grid > * {
    grid-column: span 1 !important;
  }
}

/* ============================================================
   PATTERN: dlaczego-my (4 pillary)
   Karty używają molekuły .kordit-card (z __watermark) — patrz
   styles/molecules/_card.scss.

   SCSS handles: grid layout, gradient overlays, tagline hairlines,
   kicker color, lede gold border.
   ============================================================ */
/* ============================================================
   .kordit-bg-section — reusable: bg image + white gradient
   fade na górze i dole + container nad gradientem.
   Stosować razem z .has-background i style.backgroundImage na
   kordit/section-basic. Używana w dlaczego-my i kontakt-help (cennik).
   ============================================================ */
.kordit-bg-section,
.kordit-dlaczego-my {
  position: relative;
  overflow: hidden;
  /* Gradient overlay od góry i od dołu. z-index:0 — pod containerem. */
}
.kordit-bg-section::before,
.kordit-dlaczego-my::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.kordit-bg-section::after,
.kordit-dlaczego-my::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.kordit-bg-section > .container,
.kordit-dlaczego-my > .container {
  position: relative;
  z-index: 2;
}

/* Modyfikator — bez fade'u od góry (twarde przejście od poprzedniej
   sekcji, np. gdy poprzednia sekcja ma zdjęcie dotykające krawędzi). */
.kordit-bg-section--no-top-fade::before {
  display: none;
}

.kordit-dlaczego-my {
  /* Kicker, lede — typografia z fontSize presetów w patternie. */
}
.kordit-dlaczego-my__kicker {
  margin: var(--space-md) 0 0 !important;
}
.kordit-dlaczego-my__dot {
  color: var(--accent-2);
}
.kordit-dlaczego-my {
  /* Lede z gold border-left jak quote. */
}
.kordit-dlaczego-my {
  /* ============================================================
     GRID — 4 pillary.
     ============================================================ */
}
.kordit-dlaczego-my__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  position: relative;
  z-index: 2;
}
@media (max-width: 1024px) {
  .kordit-dlaczego-my__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .kordit-dlaczego-my__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   .kordit-card-grid — reusable grid kart (3-col / 4-col).
   Wykorzystuje WP layout:grid z columnCount, tu tylko nadajemy
   gap + responsive. Stosować razem z block layout grid.
   ============================================================ */
.kordit-card-grid {
  gap: var(--space-md);
  position: relative;
  z-index: 2;
}
@media (max-width: 1024px) {
  .kordit-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .kordit-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   .kordit-section-tagline — reusable: italic center text z
   gold hairline po obu stronach. Layout flex z block comment
   (justifyContent:center, flexWrap:nowrap, verticalAlignment:center).
   ============================================================ */
.kordit-section-tagline,
.kordit-dlaczego-my__tagline {
  position: relative;
  z-index: 2;
  margin-top: var(--space-lg);
}
.kordit-section-tagline::before, .kordit-section-tagline::after,
.kordit-dlaczego-my__tagline::before,
.kordit-dlaczego-my__tagline::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(184, 137, 63, 0.5) 50%, transparent 100%);
  min-width: 60px;
}
.kordit-section-tagline > p,
.kordit-section-tagline .kordit-section-tagline__text,
.kordit-section-tagline .kordit-dlaczego-my__tagline-text,
.kordit-dlaczego-my__tagline > p,
.kordit-dlaczego-my__tagline .kordit-section-tagline__text,
.kordit-dlaczego-my__tagline .kordit-dlaczego-my__tagline-text {
  margin: 0;
  font-style: italic;
  flex: 0 0 auto;
  max-width: 640px;
}

/* ============================================================
   PATTERN: proces (3 kroki)
   Header (jak dlaczego-my): eyebrow → 2-kol (H2 / lede).
   Timeline (3 kolumny) z dashed gold connector.
   Dolny CTA: biała karta 2-kol (tekst lewo / button prawo).

   Typografia 100% przez fontSize presety w block comment.
   SCSS handles: header positioning, timeline grid, connector,
   CTA card styling, step layout, responsive.
   ============================================================ */
.kordit-proces {
  position: relative;
  overflow: hidden;
  background-color: var(--background);
}
.kordit-proces > .container {
  position: relative;
  z-index: 1;
}
.kordit-proces {
  /* ============================================================
     HEADER — eyebrow + 2-kol (H2 / lede). Layout obsługuje
     Gutenberg, tu tylko subtle wyciszenie H2.
     ============================================================ */
}
.kordit-proces__header h2 {
  opacity: 0.85;
}
.kordit-proces {
  /* ============================================================
     TIMELINE — dowolna liczba kroków w rzędzie z dashed connector.
     auto-fit minmax(200px) — sam dobiera 3/4/5 kolumn w zależności
     od szerokości containera. Wrap na 2-col/1-col w media queries.
     ============================================================ */
}
.kordit-proces__timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3xl);
  position: relative;
  /* Dashed gold line między kółkami ikon. */
}
.kordit-proces__timeline::before {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(184, 137, 63, 0.55) 0%, rgba(184, 137, 63, 0.55) 50%, transparent 50%);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .kordit-proces__timeline {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .kordit-proces__timeline::before {
    display: none;
  }
}
.kordit-proces {
  /* ============================================================
     DOLNY CTA — biała karta elevated, gold radial akcent.
     Layout 60/40 (tekst lewo / button prawo) obsługuje
     Gutenberg columns. Tutaj tylko bg/border/padding/radial.
     ============================================================ */
}
.kordit-proces__cta {
  position: relative;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-xl) var(--space-3xl);
  overflow: hidden;
  /* Boczne wcięcia od krawędzi sekcji + max-width żeby karta
     nie była full-width (lepsza czytelność tekstu). */
  max-width: 1100px;
  margin-inline: auto;
  /* Gold radial akcent w prawym górnym rogu. */
}
.kordit-proces__cta::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(184, 137, 63, 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.kordit-proces__cta > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .kordit-proces__cta {
    padding: var(--space-lg);
    margin-inline: var(--space-md);
    /* Mobile: button pełna szerokość. */
  }
  .kordit-proces__cta .wp-block-button .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }
  .kordit-proces__cta {
    /* Mobile: button w buttons-grupie wyrównany do lewej. */
  }
  .kordit-proces__cta .wp-block-buttons {
    justify-content: flex-start !important;
  }
}
.kordit-proces {
  /* CTA title — <em> dostaje gold accent (override globalnego em). */
}
.kordit-proces__cta-title {
  margin: 0 !important;
}
.kordit-proces__cta-title em {
  color: var(--accent-2);
  font-style: normal;
}
.kordit-proces {
  /* CTA desc — odstęp od tytułu. */
}
.kordit-proces__cta-desc {
  margin: var(--space-sm) 0 0 !important;
}

/* ============================================================
   STEP — numer-watermark gigant + kółko ikony NA WIERZCHU.
   ============================================================ */
.kordit-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md) !important;
  padding: 0;
  z-index: 1;
}
.kordit-step__top {
  position: relative;
  width: 100%;
  gap: 0 !important;
  align-items: center;
  min-height: 96px;
  z-index: 2;
}
.kordit-step {
  /* Numer-watermark — DEKORACJA typograficzna (poza systemem fontSize).
     Domyślnie skala XL (01/02/03 — pojedyncze cyfry).
     Modyfikator --years gdy step pokazuje rocznik (2003 — 2008). */
}
.kordit-step__num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 400;
  line-height: 1;
  color: var(--primary);
  opacity: 0.06;
  letter-spacing: -0.04em;
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
  height: 0;
  overflow: visible;
  /* Modyfikator dla długich tekstów (lata typu "2003 — 2008").
     Watermark absolute z bazy zastąpiony eyebrow-style chip
     po prawej od ikony (order:2 w flex __top). */
}
.kordit-step__num--years {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  order: 2;
  font-size: var(--wp--preset--font-size--eyebrow);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  line-height: 1;
  color: var(--accent-2);
  opacity: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  height: auto;
  overflow: visible;
  white-space: nowrap;
  margin: 0 0 0 var(--space-md) !important;
  flex: 0 0 auto;
  align-self: center;
}
.kordit-step {
  /* Granatowy kwadrat z białą ikoną. */
}
.kordit-step__icon {
  width: var(--step-icon-size);
  height: var(--step-icon-size);
  flex: 0 0 auto;
  margin: 0 !important;
  background: var(--card-icon-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 8px var(--background);
}
.kordit-step__icon img {
  width: var(--step-icon-inner);
  height: var(--step-icon-inner);
  display: block;
  filter: brightness(0) invert(1);
}
.kordit-step {
  /* Title + desc — typografia z fontSize presetów. */
}
.kordit-step__title {
  width: 100%;
  margin: var(--space-md) 0 0 !important;
  text-align: left;
}
.kordit-step__desc {
  margin: 0 !important;
  text-align: left;
}

/* ============================================================
   PATTERN: sprawy (3 case studies)
   Layout 2-kol: lewo intro (sticky) + prawo 3 karty kordit-card.
   Karty używają molekuły .kordit-card (--floating-icon).
   ============================================================ */
.kordit-sprawy {
  position: relative;
  /* Gradient overlay od góry i od dołu. */
}
.kordit-sprawy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.kordit-sprawy::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.kordit-sprawy .wp-block-columns {
  align-items: stretch;
}
.kordit-sprawy .wp-block-column {
  align-self: stretch;
}
.kordit-sprawy {
  /* ---------------------------------------------
     LEFT INTRO — eyebrow + H2 + lede, sticky podczas scrolla.
     --------------------------------------------- */
}
.kordit-sprawy__intro {
  position: sticky;
  top: var(--space-6xl);
  padding-left: 0;
  padding-right: 0;
}
.kordit-sprawy__intro > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 960px) {
  .kordit-sprawy__intro {
    position: relative;
    top: auto;
  }
}
.kordit-sprawy {
  /* ---------------------------------------------
     RIGHT LIST — 3 karty pionowo z odstępem.
     --------------------------------------------- */
}
.kordit-sprawy__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ============================================================
   PATTERN: cennik (60/40 split — lista cen + sidebar sticky)
   Header: eyebrow + 2-kol (H2 / intro) jak dlaczego-my.
   Lewa kolumna: lista pozycji + button.
   Prawa kolumna sticky: 3 karty kordit-card (info + telefon).
   ============================================================ */
.kordit-cennik {
  position: relative;
  z-index: 1;
  background-color: var(--background);
}
.kordit-cennik::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.kordit-cennik > .container {
  position: relative;
  z-index: 1;
}
.kordit-cennik {
  /* ============================================================
     LISTA POZYCJI CENOWYCH — każdy row rozdzielony hairline.
     ============================================================ */
}
.kordit-cennik__list {
  display: flex;
  flex-direction: column;
  background: var(--background);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.kordit-cennik__list .kordit-price-row + .kordit-price-row {
  border-top: 1px solid var(--border-subtle);
}
.kordit-cennik__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ============================================================
   PRICE ROW — pozycja cennika (ikona + tytuł/sub + cena).
   To NIE jest .kordit-card — to row w liście, inny visual.
   ============================================================ */
.kordit-price-row {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  align-items: center;
  gap: var(--space-lg);
  background: transparent;
  transition: background-color var(--transition);
}
.kordit-price-row:hover {
  background-color: rgba(244, 246, 251, 0.5);
}
.kordit-price-row__icon {
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  flex: 0 0 auto;
  margin: 0;
  background: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kordit-price-row__icon img {
  width: var(--card-icon-inner);
  height: var(--card-icon-inner);
  display: block;
  filter: brightness(0) invert(1);
}
.kordit-price-row__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kordit-price-row__title {
  margin: 0;
  min-width: 180px;
}
.kordit-price-row__title strong {
  font-weight: 400;
}
.kordit-price-row__sub {
  margin: 0;
}
.kordit-price-row__sub:empty {
  display: none;
}
.kordit-price-row__price {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--wp--preset--font-family--heading);
  line-height: 1;
  color: var(--primary);
  text-align: right;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 4px;
  white-space: nowrap;
  justify-content: end;
}
.kordit-price-row__pre {
  color: var(--accent-2);
  font-size: 0.6em;
  letter-spacing: 0.02em;
  font-weight: 400;
  text-align: right;
}
.kordit-price-row__amount {
  color: var(--primary);
  font-weight: 400;
}
.kordit-price-row__suf {
  color: var(--ink-3);
  font-size: 0.45em;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  letter-spacing: 0.02em;
  grid-column: 1/-1;
  text-align: right;
}
.kordit-price-row__note {
  margin: 0;
  flex: 0 0 auto;
  max-width: 200px;
  text-align: right;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .kordit-price-row {
    padding: var(--space-md);
    gap: var(--space-md);
  }
  .kordit-price-row__icon {
    width: 40px;
    height: 40px;
  }
  .kordit-price-row__icon img {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   PRICING TABLE — pełna tabela cennikowa per kategoria
   (używana na stronie /cennik/, NIE na homepage).
   ============================================================ */
.kordit-pricing-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.kordit-pricing-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.kordit-pricing-group__title {
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--light);
}
.kordit-pricing-group {
  /* Wewnątrz grupy — wiersze cennika tworzą stack z hairline borders. */
}
.kordit-pricing-group .kordit-price-row {
  margin: 0;
  padding-block: var(--space-md);
}
.kordit-pricing-group .kordit-price-row + .kordit-price-row {
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================
   PATTERN: o-mnie (split: photo lewo + bio prawo)
   Layout:
     - Lewo (45%): zdjęcie (bez radius, bez cienia, siada na kolejnej sekcji)
     - Prawo (55%): eyebrow + H2 + lede + bio paragrafy + button

   Typografia 100% przez fontSize presety w block comment.
   SCSS handles: layout alignment, photo styling, rytm odstępów.
   ============================================================ */
.kordit-o-mnie {
  /* Intro — left-aligned content (override kordit-section-header centering). */
}
.kordit-o-mnie__intro {
  padding: 0;
  align-items: flex-start;
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.kordit-o-mnie__intro > * {
  align-self: flex-start;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  margin-top: var(--space-md);
}
.kordit-o-mnie__intro > *:first-child {
  margin-top: 0;
}
.kordit-o-mnie__intro {
  /* Lede — większy odstęp pod H2. */
}
.kordit-o-mnie__intro .kordit-o-mnie__lede {
  margin-top: var(--space-md);
}
.kordit-o-mnie__intro {
  /* Button — duży odstęp od ostatniego bio. */
}
.kordit-o-mnie__intro .kordit-o-mnie__button {
  margin-top: var(--space-xl);
}
.kordit-o-mnie {
  /* ============================================================
     LEWA KOLUMNA — zdjęcie. Bez cienia, bez radius — żeby ładnie
     siadało na kolejnej sekcji (sekcja nie ma padding-bottom).
     ============================================================ */
}
.kordit-o-mnie__photo {
  margin: 0;
  width: 100%;
}
.kordit-o-mnie__photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ============================================================
   STATS LIST — split layout: sticky intro lewa, lista hairline prawa.
   Używane w sekcji "Doświadczenie w faktach" na /o-mnie/.
   ============================================================ */
.kordit-o-mnie-stats__intro {
  position: sticky;
  top: var(--space-6xl);
  padding-left: 0;
  padding-right: 0;
  align-items: flex-start;
  text-align: left;
}
.kordit-o-mnie-stats__list {
  display: flex;
  flex-direction: column;
}

/* Pojedynczy wiersz statystyki — duża liczba lewo, tytuł+sub prawo.
   Rozdzielone hairlinami (góra/dół) zamiast kart. */
.kordit-stat-row {
  margin: 0;
  padding: var(--space-lg) 0;
  align-items: center;
  gap: var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
}
.kordit-stat-row:first-of-type {
  padding-top: 0;
}
.kordit-stat-row:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.kordit-stat-row__value {
  margin: 0;
  flex: 0 0 auto;
  min-width: 140px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--accent-2);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.kordit-stat-row__suffix {
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 0.05em;
}
.kordit-stat-row__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kordit-stat-row__title {
  margin: 0;
}
.kordit-stat-row__sub {
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .kordit-stat-row {
    gap: var(--space-md);
  }
  .kordit-stat-row__value {
    min-width: auto;
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
}

/* ============================================================
   PATTERN: faq (split: intro sticky + lista core/details)
   Layout 42/58 — intro lewo sticky, lista FAQ prawo.
   Items używają tokenów --card-* (białe karty z border + shadow).
   ============================================================ */
.kordit-faq {
  position: relative;
  z-index: 1;
  background-color: var(--background);
}
.kordit-faq .wp-block-columns {
  align-items: stretch;
}
.kordit-faq .wp-block-column {
  align-self: stretch;
}
.kordit-faq__intro {
  position: sticky;
  top: var(--space-6xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media (max-width: 960px) {
  .kordit-faq__intro {
    position: relative;
    top: auto;
  }
}
.kordit-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ============================================================
   FAQ ITEM — core/details (wp-block-details).
   ============================================================ */
.kordit-faq__item {
  position: relative;
  margin: 0;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.kordit-faq__item:hover {
  border-color: rgba(184, 137, 63, 0.4);
  box-shadow: var(--card-shadow);
}
.kordit-faq__item[open] {
  border-color: rgba(184, 137, 63, 0.5);
  box-shadow: var(--shadow-md);
}
.kordit-faq__item > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-6);
  line-height: 1.35;
  font-weight: 400;
  color: var(--primary);
  transition: color var(--transition);
}
.kordit-faq__item > summary::-webkit-details-marker {
  display: none;
}
.kordit-faq__item > summary::marker {
  content: "";
}
.kordit-faq__item > summary:hover {
  color: var(--accent-2);
}
.kordit-faq__item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background-color: var(--primary);
  border-radius: var(--radius-full);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
  -webkit-mask-size: 60%;
  mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color var(--transition), transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.kordit-faq__item[open] > summary {
  color: var(--accent-2);
}
.kordit-faq__item[open] > summary::after {
  background-color: var(--accent-2);
  transform: rotate(45deg);
}
.kordit-faq__item > p,
.kordit-faq__item > .wp-block-paragraph {
  margin: 0 var(--space-lg) var(--space-md);
  padding-top: 0;
}
.kordit-faq__item > *:not(summary):not(p):not(.wp-block-paragraph) {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
  margin-bottom: var(--space-md);
}

/* ============================================================
   PATTERN: kontakt (granatowa sekcja)
   Layout:
     - 2-kol 50/50: lewo (eyebrow + H2 + lede + CTA telefon + alt + trust lista),
                    prawo biała karta CF7
     - Pod spodem 2 karty lokalizacji z mapami
   ============================================================ */
.kordit-kontakt {
  position: relative;
  z-index: 1;
}
.kordit-kontakt .wp-block-columns {
  align-items: stretch;
}
.kordit-kontakt .wp-block-column {
  align-self: stretch;
}
.kordit-kontakt a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.kordit-kontakt a:hover {
  color: var(--accent-2);
}
.kordit-kontakt__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.kordit-kontakt__title {
  margin: 0;
}
.kordit-kontakt__title em {
  color: var(--accent-2);
  font-style: normal;
}
.kordit-kontakt__lede {
  margin: 0;
  color: var(--text-on-dark-subtle);
  max-width: 52ch;
}
.kordit-kontakt__phone {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--background);
  border: 1px solid var(--background);
  border-radius: var(--card-radius);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.kordit-kontakt__phone a {
  color: var(--primary);
}
.kordit-kontakt__phone a:hover {
  color: var(--accent);
}
.kordit-kontakt__phone:has(a):hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.kordit-kontakt__phone-icon {
  flex: 0 0 auto;
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border-radius: var(--radius-md);
}
.kordit-kontakt__phone-icon img {
  width: var(--card-icon-inner);
  height: var(--card-icon-inner);
  display: block;
  filter: brightness(0) invert(1);
}
.kordit-kontakt__phone-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kordit-kontakt__phone-label {
  margin: 0;
  color: var(--primary);
}
.kordit-kontakt__phone-number {
  margin: 0;
  white-space: nowrap;
}
.kordit-kontakt__phone-number a {
  color: var(--primary);
}
.kordit-kontakt__alt {
  margin: 0;
  color: var(--text-on-dark-subtle);
}
.kordit-kontakt__alt a {
  color: var(--background);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.kordit-kontakt__alt a:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}
.kordit-kontakt__trust {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}
.kordit-kontakt__trust li {
  position: relative;
  padding-left: calc(20px + var(--space-sm));
  color: var(--text-on-dark-subtle);
  font-size: var(--wp--preset--font-size--text-small);
}
.kordit-kontakt__trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: var(--accent-2);
  border-radius: 50%;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg 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'><polyline points='20 6 9 17 4 12'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg 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'><polyline points='20 6 9 17 4 12'/></svg>");
  -webkit-mask-size: 70%;
  mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.kordit-kontakt__locations {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.kordit-kontakt__form {
  position: sticky;
  top: var(--space-6xl);
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
.kordit-kontakt__form a {
  color: var(--accent);
}
.kordit-kontakt__form a:hover {
  color: var(--accent-deep);
}
@media (max-width: 960px) {
  .kordit-kontakt__form {
    position: relative;
    top: auto;
  }
}
.kordit-kontakt__form-title {
  margin: 0;
}
.kordit-kontakt__form-title em {
  color: var(--accent-2);
  font-style: normal;
}
.kordit-kontakt__form-lede {
  margin: var(--space-xs) 0 var(--space-lg);
}

/* ============================================================
   LOCATION CARD — od zera, czysto, kompaktowo.
   Layout: mapa lewo (180px) / body prawo.
   Body (stack vertical, gap space-sm):
     - H6 label "SIEDZIBA GŁÓWNA" (eyebrow gold)
     - row: pin granat 24×24 + adres (text-bigger primary bold)
     - row: zegar granat 24×24 + (time + note pod sobą)
     - directions (text-small ink-3)
     - CTA "Zobacz dojazd →" (eyebrow gold)
   ============================================================ */
.kordit-location {
  display: flex;
  flex-direction: row;
  background: var(--card-bg);
  color: var(--primary);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.kordit-location:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.kordit-location__map {
  position: relative;
  flex: 0 0 230px;
  align-self: stretch;
  min-height: 200px;
  background: var(--subtle);
  overflow: hidden;
}
.kordit-location__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.kordit-location__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md);
}
.kordit-location__body > p,
.kordit-location__body > h6,
.kordit-location__body p,
.kordit-location__body h6 {
  margin: 0;
  line-height: 1.3;
}
.kordit-location__row {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}
.kordit-location__row-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
}
.kordit-location__row-icon img {
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(0) saturate(100%) invert(11%) sepia(34%) saturate(2154%) hue-rotate(199deg) brightness(94%) contrast(98%);
}
.kordit-location__row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kordit-location__row-title {
  font-weight: 600;
}
.kordit-location__row-sub {
  color: var(--muted);
  line-height: 1.4;
}
.kordit-location__cta-wrap {
  margin-top: auto;
}
.kordit-location__cta {
  color: var(--accent-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.kordit-location__cta:hover {
  color: var(--primary);
}

/* ============================================================
   CF7 FORM — floating labels, czysty layout.
   ============================================================ */
.kordit-kontakt__form .wpcf7,
.kordit-kontakt-page__form-card .wpcf7 {
  margin: 0;
  padding: 0;
}
.kordit-kontakt__form .wpcf7 p,
.kordit-kontakt__form .wpcf7 .form-field,
.kordit-kontakt-page__form-card .wpcf7 p,
.kordit-kontakt-page__form-card .wpcf7 .form-field {
  margin: 0;
  padding: 0;
}
.kordit-kontakt__form .wpcf7 .wpcf7-form,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.kordit-kontakt__form .wpcf7 .form-row,
.kordit-kontakt-page__form-card .wpcf7 .form-row {
  display: flex;
  gap: var(--space-md);
}
.kordit-kontakt__form .wpcf7 .form-row > .form-field,
.kordit-kontakt-page__form-card .wpcf7 .form-row > .form-field {
  flex: 1 1 50%;
  min-width: 0;
}
@media (max-width: 480px) {
  .kordit-kontakt__form .wpcf7 .form-row,
  .kordit-kontakt-page__form-card .wpcf7 .form-row {
    flex-direction: column;
  }
}
.kordit-kontakt__form .wpcf7 .wpcf7-form-control-wrap,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-form-control-wrap {
  position: relative;
  display: block;
}
.kordit-kontakt__form .wpcf7 .kordit-form-field__label,
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field__label {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  padding: 0 6px;
  background: var(--background);
  color: var(--muted);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text-small);
  pointer-events: none;
  transition: top var(--transition), font-size var(--transition), color var(--transition);
}
.kordit-kontakt__form .wpcf7 .kordit-form-field__label span[aria-hidden=true],
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field__label span[aria-hidden=true] {
  color: var(--accent-2);
}
.kordit-kontakt__form .wpcf7 .kordit-form-field.is-focused .kordit-form-field__label,
.kordit-kontakt__form .wpcf7 .kordit-form-field.is-filled .kordit-form-field__label,
.kordit-kontakt__form .wpcf7 .kordit-form-field:has(.wpcf7-not-valid) .kordit-form-field__label,
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field.is-focused .kordit-form-field__label,
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field.is-filled .kordit-form-field__label,
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field:has(.wpcf7-not-valid) .kordit-form-field__label {
  top: 0;
  font-size: 0.7rem;
  color: var(--primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.kordit-kontakt__form .wpcf7 .kordit-form-field.is-focused .kordit-form-field__label,
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field.is-focused .kordit-form-field__label {
  color: var(--accent-2);
}
.kordit-kontakt__form .wpcf7 .kordit-form-field:has(.wpcf7-not-valid) .kordit-form-field__label,
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field:has(.wpcf7-not-valid) .kordit-form-field__label {
  color: #c0392b;
}
.kordit-kontakt__form .wpcf7 .kordit-form-field:has(textarea) .kordit-form-field__label,
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field:has(textarea) .kordit-form-field__label {
  top: var(--space-md);
  transform: none;
}
.kordit-kontakt__form .wpcf7 .kordit-form-field:has(textarea).is-focused .kordit-form-field__label,
.kordit-kontakt__form .wpcf7 .kordit-form-field:has(textarea).is-filled .kordit-form-field__label,
.kordit-kontakt__form .wpcf7 .kordit-form-field:has(textarea.wpcf7-not-valid) .kordit-form-field__label,
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field:has(textarea).is-focused .kordit-form-field__label,
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field:has(textarea).is-filled .kordit-form-field__label,
.kordit-kontakt-page__form-card .wpcf7 .kordit-form-field:has(textarea.wpcf7-not-valid) .kordit-form-field__label {
  top: 0;
}
.kordit-kontakt__form .wpcf7 input[type=text],
.kordit-kontakt__form .wpcf7 input[type=email],
.kordit-kontakt__form .wpcf7 input[type=tel],
.kordit-kontakt__form .wpcf7 textarea,
.kordit-kontakt-page__form-card .wpcf7 input[type=text],
.kordit-kontakt-page__form-card .wpcf7 input[type=email],
.kordit-kontakt-page__form-card .wpcf7 input[type=tel],
.kordit-kontakt-page__form-card .wpcf7 textarea {
  width: 100%;
  padding: var(--space-md);
  background: var(--background);
  border: 1px solid var(--light);
  border-radius: var(--radius-md);
  color: var(--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text-small);
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.kordit-kontakt__form .wpcf7 input[type=text]:focus,
.kordit-kontakt__form .wpcf7 input[type=email]:focus,
.kordit-kontakt__form .wpcf7 input[type=tel]:focus,
.kordit-kontakt__form .wpcf7 textarea:focus,
.kordit-kontakt-page__form-card .wpcf7 input[type=text]:focus,
.kordit-kontakt-page__form-card .wpcf7 input[type=email]:focus,
.kordit-kontakt-page__form-card .wpcf7 input[type=tel]:focus,
.kordit-kontakt-page__form-card .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(184, 137, 63, 0.15);
}
.kordit-kontakt__form .wpcf7 textarea,
.kordit-kontakt-page__form-card .wpcf7 textarea {
  resize: vertical;
  min-height: 110px;
  padding-top: var(--space-lg);
}
.kordit-kontakt__form .wpcf7 .wpcf7-acceptance,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-acceptance {
  display: block;
}
.kordit-kontakt__form .wpcf7 .wpcf7-acceptance .wpcf7-list-item,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.kordit-kontakt__form .wpcf7 .wpcf7-acceptance input[type=checkbox],
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-acceptance input[type=checkbox] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent-2);
  cursor: pointer;
}
.kordit-kontakt__form .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
  color: var(--ink-3);
  font-size: var(--wp--preset--font-size--text-small);
  line-height: 1.4;
  cursor: pointer;
}
.kordit-kontakt__form .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label a,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label a {
  color: var(--accent);
  text-decoration: underline;
}
.kordit-kontakt__form .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label a:hover,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label a:hover {
  color: var(--accent-deep);
}
.kordit-kontakt__form .wpcf7 .wpcf7-submit,
.kordit-kontakt__form .wpcf7 input[type=submit],
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-submit,
.kordit-kontakt-page__form-card .wpcf7 input[type=submit] {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--accent-2);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-md);
  color: var(--background);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.kordit-kontakt__form .wpcf7 .wpcf7-submit:hover,
.kordit-kontakt__form .wpcf7 input[type=submit]:hover,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-submit:hover,
.kordit-kontakt-page__form-card .wpcf7 input[type=submit]:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.kordit-kontakt__form .wpcf7 .wpcf7-not-valid-tip,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--space-xs);
  color: #c0392b;
  font-size: var(--wp--preset--font-size--text-small);
  line-height: 1.4;
}
.kordit-kontakt__form .wpcf7 .wpcf7-not-valid,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-not-valid {
  border-color: #c0392b !important;
}
.kordit-kontakt__form .wpcf7 .wpcf7-acceptance.wpcf7-not-valid,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-acceptance.wpcf7-not-valid {
  border: 0 !important;
}
.kordit-kontakt__form .wpcf7 .wpcf7-acceptance + .wpcf7-not-valid-tip,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-acceptance + .wpcf7-not-valid-tip {
  margin-top: var(--space-xs);
}
.kordit-kontakt__form .wpcf7 .wpcf7-response-output,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--wp--preset--font-size--text-small);
  line-height: 1.4;
}
.kordit-kontakt__form .wpcf7 .wpcf7-response-output:empty,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-response-output:empty {
  display: none;
}
.kordit-kontakt__form .wpcf7 .wpcf7-response-output:not(:empty),
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-response-output:not(:empty) {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
}
.kordit-kontakt__form .wpcf7 [data-status=invalid] .wpcf7-response-output:not(:empty),
.kordit-kontakt__form .wpcf7 [data-status=failed] .wpcf7-response-output:not(:empty),
.kordit-kontakt__form .wpcf7 [data-status=spam] .wpcf7-response-output:not(:empty),
.kordit-kontakt__form .wpcf7 [data-status=aborted] .wpcf7-response-output:not(:empty),
.kordit-kontakt__form .wpcf7 [data-status=unaccepted] .wpcf7-response-output:not(:empty),
.kordit-kontakt-page__form-card .wpcf7 [data-status=invalid] .wpcf7-response-output:not(:empty),
.kordit-kontakt-page__form-card .wpcf7 [data-status=failed] .wpcf7-response-output:not(:empty),
.kordit-kontakt-page__form-card .wpcf7 [data-status=spam] .wpcf7-response-output:not(:empty),
.kordit-kontakt-page__form-card .wpcf7 [data-status=aborted] .wpcf7-response-output:not(:empty),
.kordit-kontakt-page__form-card .wpcf7 [data-status=unaccepted] .wpcf7-response-output:not(:empty) {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
  border: 1px solid rgba(192, 57, 43, 0.3);
}
.kordit-kontakt__form .wpcf7 [data-status=sent] .wpcf7-response-output:not(:empty),
.kordit-kontakt-page__form-card .wpcf7 [data-status=sent] .wpcf7-response-output:not(:empty) {
  background: rgba(39, 174, 96, 0.1);
  color: #27ae60;
  border: 1px solid rgba(39, 174, 96, 0.3);
}
.kordit-kontakt__form .wpcf7 .wpcf7-spinner,
.kordit-kontakt-page__form-card .wpcf7 .wpcf7-spinner {
  display: none;
}
.kordit-kontakt__form .wpcf7 [data-status=submitting] .wpcf7-spinner,
.kordit-kontakt-page__form-card .wpcf7 [data-status=submitting] .wpcf7-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: var(--space-sm);
  border: 2px solid rgba(184, 137, 63, 0.3);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  animation: kordit-spin 0.8s linear infinite;
}

@keyframes kordit-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .kordit-kontakt__phone {
    padding: var(--space-md);
    gap: var(--space-md);
  }
  .kordit-location {
    flex-direction: column;
  }
  .kordit-location__map {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16/9;
    min-height: 0;
  }
  .kordit-location__body {
    padding: var(--space-md);
  }
}
/* ============================================================
   PATTERN: kontakt-page (strona /kontakt/)
   3 sekcje, każda kordit/section-basic + container.
   Karty = .kordit-card (head + ikona + num + title + hr + content + desc)
   — identyczna struktura jak dlaczego-my / specjalizacje / sprawy.

   Tu tylko regulujemy stack i specyficzne elementy treści
   (lista kontaktów, checklist, adres, godziny, IBAN, form-card).
   Używaj z szablonem "page-clean".
   ============================================================ */
.kordit-kontakt-page {
  /* Stack dwóch kart w lewej kolumnie strefy 1. */
}
.kordit-kontakt-page__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  height: 100%;
}
.kordit-kontakt-page__stack > .kordit-card {
  flex: 1 1 auto;
}
.kordit-kontakt-page {
  /* Lista kontaktów (tel/mail/fax) — ikona po lewej + tekst/link. */
}
.kordit-kontakt-page__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-self: stretch;
}
.kordit-kontakt-page__contacts li {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
}
.kordit-kontakt-page__contacts a {
  color: var(--primary);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--text-bigger);
  font-weight: 500;
  transition: color var(--transition);
}
.kordit-kontakt-page__contacts a:hover {
  color: var(--accent-2);
}
.kordit-kontakt-page__contact-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(63%) sepia(56%) saturate(420%) hue-rotate(2deg) brightness(91%) contrast(90%);
}
.kordit-kontakt-page {
  /* Checklist (✓ gold) — używana w "Bez zobowiązań" i "Płatności online". */
}
.kordit-kontakt-page__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-self: stretch;
}
.kordit-kontakt-page__checklist li {
  list-style: none;
  margin: 0;
  position: relative;
  padding-left: 28px;
  line-height: 1.5;
  color: var(--primary);
}
.kordit-kontakt-page__checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 18px;
  height: 18px;
  background-color: var(--accent-2);
  -webkit-mask: url("/wp-content/themes/kordit/assets/icons/shield-check.svg") center/contain no-repeat;
  mask: url("/wp-content/themes/kordit/assets/icons/shield-check.svg") center/contain no-repeat;
}
.kordit-kontakt-page {
  /* Adres lokalizacji. */
}
.kordit-kontakt-page__address {
  font-style: normal;
  line-height: 1.55;
  margin: 0;
  align-self: stretch;
  color: var(--primary);
}
.kordit-kontakt-page__address strong {
  font-weight: 600;
}
.kordit-kontakt-page {
  /* Pojedyncza linia godzin — bold primary. */
}
.kordit-kontakt-page__hours-line {
  margin: 0;
  font-weight: 500;
  align-self: stretch;
}
.kordit-kontakt-page {
  /* IBAN / e-Doręczenia — mono code blok. */
}
.kordit-kontakt-page__iban {
  margin: 0;
  align-self: stretch;
}
.kordit-kontakt-page__iban code {
  display: inline-block;
  padding: 10px 14px;
  background: var(--subtle);
  color: var(--primary);
  border: 1px solid var(--light);
  border-radius: var(--radius-sm);
  font-family: var(--wp--preset--font-family--mono, monospace);
  letter-spacing: 0.02em;
  word-spacing: 0.15em;
  line-height: 1.3;
  word-break: break-all;
}
.kordit-kontakt-page {
  /* Form-card — CF7 wewnątrz .kordit-card. */
}
.kordit-kontakt-page__form-card .wpcf7 {
  width: 100%;
  margin-top: 0;
}
.kordit-kontakt-page {
  /* Płatności online — lista metod z gold tag chipem + labelem. */
}
.kordit-kontakt-page__paymethods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-self: stretch;
}
.kordit-kontakt-page__paymethods li {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
}
.kordit-kontakt-page__paytag {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 4px 10px;
  background: var(--accent-2-soft);
  color: var(--accent-2);
  border-radius: var(--radius-sm);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.kordit-kontakt-page__paylabel {
  color: var(--primary);
  font-size: var(--wp--preset--font-size--text-small);
  text-decoration: none;
  transition: color var(--transition);
}
.kordit-kontakt-page__paylabel:is(a):hover {
  color: var(--accent-2);
}
.kordit-kontakt-page {
  /* RWD — 3-col i 2-col stack do 1col na mobile. */
}
@media (max-width: 900px) {
  .kordit-kontakt-page__row .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ============================================================
   PATTERN: blog (home / category / single)
   Composed of:
   - section header (eyebrow + h1 + lede) — kordit-section-header
   - category pills filter (poziomy chip menu)
   - grid 3-col z kartami postów (is-style-card-elevated)
   - single post layout (760px reading width)

   Wszystko prefiksowane .kordit-blog* zgodnie z atomic system LM.
   ============================================================ */
/* ━━ ARCHIVE / HOME ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kordit-blog,
.kordit-page {
  padding-block: var(--space-2xl);
}

.kordit-blog__inner,
.kordit-page__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* Header bloga (kicker + H1 + lede) — wspólny dla .kordit-blog__header
   i .kordit-page__header (page.html — o-mnie, kontakt, etc.). */
.kordit-blog__header,
.kordit-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.kordit-blog__header > *,
.kordit-page__header > * {
  margin: 0;
}

/* Category title — pojedynczy wizualny H1 składający się z 2 części:
     "Kategoria"  + "Nazwa" (z cudzysłowem)
   gdzie "Nazwa" jest w secondary kolorze (jak <em>). Oba to <h1>
   z heading-1 fontSize, inline obok siebie przez flex. */
.kordit-blog__category-title {
  gap: 0.35em !important;
  align-items: baseline;
}
.kordit-blog__category-title > * {
  margin: 0 !important;
}

.kordit-blog__category-name {
  color: var(--secondary);
  /* Polskie cudzysłowy „...” dookoła nazwy kategorii. */
}
.kordit-blog__category-name::before {
  content: "„";
}
.kordit-blog__category-name::after {
  content: "”";
}

/* Wrapper bloku filtrów (heading + chips list). */
.kordit-blog__filters-wrap {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-md);
}

.kordit-blog__filters-title {
  margin: 0;
}

/* Kategorie jako poziome pills (chip menu).
   wp-block-categories renderuje <ul class="wp-block-categories-list">
   z <li class="cat-item"> i tekstem "Dla firm" w <a>, a licznik
   "(2)" jako TEXT NODE bezpośrednio w <li> (poza <a>!). Dlatego
   stylujemy CAŁY <li> jako chip, nie tylko <a>. */
.kordit-blog__filters {
  /* Outer group flex — żeby <ul> "Wszystkie" było obok kategorii. */
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.kordit-blog__filters .wp-block-categories-list,
.kordit-blog__filters .wp-block-categories,
.kordit-blog__filters ul {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.kordit-blog__filters {
  /* Całe <li> jest chip-em — count "(2)" jest text node w <li>.
     Klikalność na cały <li> przez <a>::after absolute (rozciąga
     hit area linka na cały chip). */
}
.kordit-blog__filters li,
.kordit-blog__filters .cat-item {
  list-style: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  margin: 0;
  background: var(--background);
  border: 1px solid var(--light);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--wp--custom--transition--duration) var(--wp--custom--transition--ease), color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease), border-color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}
.kordit-blog__filters li a,
.kordit-blog__filters .cat-item a {
  color: var(--primary);
  text-decoration: none;
  transition: inherit;
  /* Rozciąga klikalność <a> na cały <li> (chip area). */
}
.kordit-blog__filters li a::after,
.kordit-blog__filters .cat-item a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.kordit-blog__filters li:hover,
.kordit-blog__filters .cat-item:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: rgba(255, 255, 255, 0.7);
}
.kordit-blog__filters li:hover a,
.kordit-blog__filters .cat-item:hover a {
  color: var(--background);
}
.kordit-blog__filters {
  /* Active category — gold fill. */
}
.kordit-blog__filters .current-cat,
.kordit-blog__filters li.current-cat,
.kordit-blog__filters .cat-item.current-cat {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: rgba(255, 255, 255, 0.85);
}
.kordit-blog__filters .current-cat a,
.kordit-blog__filters li.current-cat a,
.kordit-blog__filters .cat-item.current-cat a {
  color: var(--background);
}

/* Grid postów — 3 kolumny desktop, 2 tablet, 1 mobile. */
.kordit-blog__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.kordit-blog__grid > li,
.kordit-blog__grid > .wp-block-post {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 960px) {
  .kordit-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .kordit-blog__grid {
    grid-template-columns: 1fr;
  }
}

/* ━━ CARD ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kordit-blog-card {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0 !important;
  height: 100%;
  overflow: hidden;
  transition: transform var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
  padding-top: var(--card-padding) !important;
  padding-bottom: var(--space-md) !important;
}
.kordit-blog-card > * {
  margin: 0;
}
.kordit-blog-card:hover {
  transform: translateY(-4px);
}
.kordit-blog-card:hover .kordit-blog-card__image img {
  transform: scale(1.04);
}
.kordit-blog-card:hover .kordit-blog-card__title a {
  color: var(--accent-2);
}

/* Image — 16/10 aspect, rounded, overflow hidden dla hover scale. */
.kordit-blog-card__image {
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--radius-md, 12px);
  aspect-ratio: 16/10;
}
.kordit-blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.kordit-blog-card__image a {
  display: block;
}

.kordit-blog-card .wp-block-post-terms a {
  text-decoration: none;
}

.kordit-blog-card__title {
  margin: 0;
}
.kordit-blog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}

.kordit-blog-card__excerpt {
  margin: 0;
  color: var(--ink-3);
}
.kordit-blog-card__excerpt p {
  margin: 0;
}

.kordit-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--light);
  color: var(--muted);
  justify-content: space-between;
}
.kordit-blog-card__meta > * {
  margin: 0;
}
.kordit-blog-card__meta .kordit-blog-card__sep {
  opacity: 0.5;
}

.kordit-blog-card__more {
  margin-left: auto;
  color: var(--accent-2);
  text-decoration: none;
  transition: color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}
.kordit-blog-card__more:hover {
  color: var(--primary);
}

/* ━━ PAGINATION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kordit-blog__pagination {
  margin-top: var(--space-3xl) !important;
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}
.kordit-blog__pagination .wp-block-query-pagination-previous,
.kordit-blog__pagination .wp-block-query-pagination-next,
.kordit-blog__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--background);
  border: 1px solid var(--light);
  border-radius: var(--radius-md, 8px);
  color: var(--primary);
  text-decoration: none;
  transition: background var(--wp--custom--transition--duration) var(--wp--custom--transition--ease), color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease), border-color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}
.kordit-blog__pagination .wp-block-query-pagination-previous:hover,
.kordit-blog__pagination .wp-block-query-pagination-next:hover,
.kordit-blog__pagination .page-numbers:hover {
  background: var(--primary);
  color: var(--background);
  border-color: var(--primary);
}
.kordit-blog__pagination .wp-block-query-pagination-previous.current,
.kordit-blog__pagination .wp-block-query-pagination-next.current,
.kordit-blog__pagination .page-numbers.current {
  background: var(--accent-2);
  color: var(--background);
  border-color: var(--accent-2);
}

/* ━━ SINGLE POST ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kordit-blog-single {
  padding-block: var(--space-2xl);
}

.kordit-blog-single__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.kordit-blog-single__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.kordit-blog-single__header > * {
  margin: 0;
}

.kordit-blog-single__category {
  color: var(--accent-2);
}
.kordit-blog-single__category a {
  color: inherit;
  text-decoration: none;
}

.kordit-blog-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  color: var(--muted);
}
.kordit-blog-single__meta > * {
  margin: 0;
}
.kordit-blog-single__meta .kordit-blog-single__sep {
  opacity: 0.5;
}

/* Cover image — full width, rounded. */
.kordit-blog-single__cover {
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--radius-lg, 16px);
  aspect-ratio: 16/9;
  box-shadow: 0 10px 30px -12px rgba(10, 31, 60, 0.18);
}
.kordit-blog-single__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content prose — TYLKO rytm pionowy + dekoracje.
   Typografia (fontSize, color, font-family) z theme.json + _typography.scss. */
.kordit-blog-single__content {
  /* Rytm pionowy tylko dla bezpośrednich dzieci. */
}
.kordit-blog-single__content > * {
  margin: 0 0 1em 0;
}
.kordit-blog-single__content > h2,
.kordit-blog-single__content > h3,
.kordit-blog-single__content > h4,
.kordit-blog-single__content > h5,
.kordit-blog-single__content > h6 {
  margin: 1.75em 0 0.5em 0;
}
.kordit-blog-single__content {
  /* Underline dla raw text linków (NIE buttonsy/karty/embedy). */
}
.kordit-blog-single__content > p a,
.kordit-blog-single__content > ul a,
.kordit-blog-single__content > ol a,
.kordit-blog-single__content > blockquote a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}
.kordit-blog-single__content > p a:hover,
.kordit-blog-single__content > ul a:hover,
.kordit-blog-single__content > ol a:hover,
.kordit-blog-single__content > blockquote a:hover {
  color: var(--accent-deep);
}
.kordit-blog-single__content > ul,
.kordit-blog-single__content > ol {
  padding-left: 1.5em;
}
.kordit-blog-single__content > ul li,
.kordit-blog-single__content > ol li {
  margin: 0.3em 0;
}
.kordit-blog-single__content {
  /* Inline code — bg + radius, font-family z theme. */
}
.kordit-blog-single__content p code,
.kordit-blog-single__content li code {
  padding: 2px 6px;
  background: var(--subtle);
  border-radius: 4px;
}
.kordit-blog-single__content {
  /* Inline images w treści. */
}
.kordit-blog-single__content > figure.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

/* Footer single — separator + tagi. */
.kordit-blog-single__footer {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--light);
  color: var(--muted);
}
.kordit-blog-single__footer .wp-block-post-terms a {
  display: inline-block;
  margin-right: var(--space-xs);
  padding: 4px 10px;
  background: var(--subtle);
  border-radius: 999px;
  color: var(--primary);
  text-decoration: none;
  transition: background var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}
.kordit-blog-single__footer .wp-block-post-terms a:hover {
  background: var(--accent-2);
  color: var(--background);
}

/* ============================================================
   PATTERN: strona kategorii (category_page)
   Sekcje: header page (hero) → cat-services (karty nawigacyjne)
   → cat-usp (3 wyróżniki) → cat-cta (telefon + formularz).

   Karty reużywają molekuły .kordit-card. Tutaj tylko layout
   gridów + centrowanie CTA — typografia/spacing przez presety.
   ============================================================ */
/* ------------------------------------------------------------
   cat-services — siatka kart nawigacyjnych do child-podstron.
   Równy grid auto-fit; karty floating-icon mają zapas u góry
   na wystającą ikonę.
   ------------------------------------------------------------ */
.kordit-cat__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl) var(--space-md);
  margin-top: calc(var(--card-icon-size) / 2);
}
@media (max-width: 960px) {
  .kordit-cat__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .kordit-cat__grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   cat-usp — 3 karty wyróżników. Wyrównanie wysokości kolumn,
   żeby karty były równe niezależnie od długości tekstu.
   ------------------------------------------------------------ */
.kordit-cat-usp__grid {
  align-items: stretch;
}
.kordit-cat-usp__grid .wp-block-column {
  display: flex;
}
.kordit-cat-usp__grid .kordit-card {
  width: 100%;
}

/* cat-cta — reużywa wzorca .kordit-o-mnie (2 kolumny: tekst +
   zdjęcie radcy). Styling w patterns/_o-mnie.scss. */
/* ============================================================
   PATTERN: pojedyncza oferta (service_page)
   Sekcje: hero → empatia → 3 kroki → zakres (tło) → cennik
   → przykład z praktyki → FAQ → CTA.

   Reużywa: .kordit-card, .kordit-price-row (z cennika),
   .kordit-bg-section (tło+gradient), .kordit-faq, .kordit-o-mnie.
   Tu tylko gridy i kilka dropasowań specyficznych dla oferty.
   ============================================================ */
/* hero — zdjęcie po prawej, dociśnięte do dołu jak w o-mnie hero. */
.kordit-offer__hero-img {
  margin: 0;
}
.kordit-offer__hero-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* 3 kroki — równy grid 3-kolumnowy. */
.kordit-offer-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl) var(--space-md);
  margin-top: calc(var(--card-icon-size) / 2);
}
@media (max-width: 960px) {
  .kordit-offer-steps__grid {
    grid-template-columns: 1fr;
  }
}

/* zakres — karty 2-kolumnowe, równa wysokość. */
.kordit-offer-scope__grid {
  align-items: stretch;
}
.kordit-offer-scope__grid .wp-block-column {
  display: flex;
}
.kordit-offer-scope__grid .kordit-card {
  width: 100%;
}

/* empatia — zdjęcie po prawej (desktop). */
.kordit-offer-empathy__img {
  margin: 0;
}
.kordit-offer-empathy__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* mobile: grafika na górze (przed tekstem). WP składa kolumny < 782px. */
@media (max-width: 781px) {
  .kordit-offer-empathy .wp-block-columns {
    flex-direction: column-reverse;
  }
}

/* powiązane sprawy — grid kart poziomych (ikona + tytuł-link + opis). */
.kordit-offer-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (max-width: 700px) {
  .kordit-offer-related__grid {
    grid-template-columns: 1fr;
  }
}

.kordit-related-card {
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--background);
  border: 1px solid var(--light);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.kordit-related-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kordit-related-card__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
}
.kordit-related-card__icon img {
  width: 26px;
  height: 26px;
  display: block;
}
.kordit-related-card h3 {
  margin: 0;
}
.kordit-related-card h3 a {
  color: var(--primary);
  text-decoration: none;
}
.kordit-related-card h3 a:hover {
  color: var(--accent);
}
.kordit-related-card p {
  margin: 0;
}

/* cennik oferty — lista wierszy (reużywa .kordit-price-row). */
.kordit-offer-pricing__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* przykład z praktyki — 3 kroki jako karty, ostatnia (efekt) granat. */
.kordit-offer-case__grid {
  align-items: stretch;
}
.kordit-offer-case__grid .wp-block-column {
  display: flex;
}
.kordit-offer-case__grid .kordit-card {
  width: 100%;
}

.kordit-offer-case__step .kordit-offer-case__num {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-3);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent-2);
}
.kordit-offer-case__step {
  /* karta "Efekt" — granat, biały tekst (mocne zamknięcie historii). */
}
.kordit-offer-case__step--result {
  background: var(--primary);
}
.kordit-offer-case__step--result .wp-block-heading,
.kordit-offer-case__step--result p {
  color: var(--background);
}
.kordit-offer-case__step--result .kordit-offer-case__num {
  -webkit-text-stroke-color: var(--accent-2);
}

/* ============================================================
   FAQ — accordion na natywnym core/details (zwijane).
   Reużywa stylu z molecules/_faq.scss (.kordit-faq-item).
   Schema FAQPage generuje filtr Yoasta (inc/seo.php).
   ============================================================ */
details.kordit-faq-item {
  background: var(--background);
  border: 1px solid var(--light);
  border-radius: var(--radius-md);
  transition: var(--transition);
  overflow: hidden;
  margin: 0;
}
details.kordit-faq-item:hover {
  border-color: var(--accent);
}
details.kordit-faq-item[open] {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
details.kordit-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-6);
  font-weight: 400;
  line-height: 1.3;
  color: var(--primary);
}
details.kordit-faq-item > summary::-webkit-details-marker {
  display: none;
}
details.kordit-faq-item > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-full);
  font-size: 1.25rem;
  font-weight: 300;
  transition: var(--transition);
}
details.kordit-faq-item[open] > summary::after {
  content: "−";
  background: var(--accent);
  color: var(--background);
}
details.kordit-faq-item .kordit-faq-item__answer {
  margin: 0;
  padding: 0 var(--space-lg) var(--space-lg);
}

/* sticky kolumna intro (np. cennik oferty) — przez klasę, nie inline. */
.kordit-section-header.is-position-sticky {
  position: sticky;
  top: 100px;
}

/* ============================================================
   SITE HEADER — logo lewo, nav środek, CTA telefon prawo.
   Nav używa core/page-list (wp:page-list) z auto-hierarchią
   parent/child WP. Submenusy pojawiają się on hover/focus.
   CTA = core/button is-style-kordit-gold + auto-słuchawka
   (z [href^="tel:"]).
   ============================================================ */
/* Header positioning lives na outer <header.wp-block-template-part>
   (patrz styles/navigation/basic.scss). Tutaj tylko visual styling
   wewnętrznego diva .site-header + nav layout. */
.site-header {
  background: transparent !important;
  border-bottom: 1px solid transparent;
  transition: background-color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease), box-shadow var(--wp--custom--transition--duration) var(--wp--custom--transition--ease), border-color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}
.site-header__inner {
  align-items: center;
}
.site-header {
  /* Hamburger toggle — desktop hidden, mobile widoczny po prawej. */
}
.site-header__toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.site-header__toggle {
  display: none;
  order: 99;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(10, 31, 60, 0.15);
  border-radius: var(--radius-md);
  padding: 0;
  margin-left: var(--space-md);
  z-index: 1002;
  transition: border-color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}
.site-header__toggle:hover {
  border-color: var(--accent-2);
}
.site-header__toggle-bar {
  width: 22px;
  height: 2px;
  background-color: var(--primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}
.site-header {
  /* Backdrop — overlay za drawerem, klik zamyka (label for=toggle). */
}
.site-header__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 22, 48, 0.55);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
.site-header {
  /* Otwarty drawer: hamburger → X, backdrop widoczny, nav slide-in. */
}
.site-header__toggle-input:checked ~ .site-header__toggle .site-header__toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.site-header__toggle-input:checked ~ .site-header__toggle .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header__toggle-input:checked ~ .site-header__toggle .site-header__toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.site-header {
  /* Nav środek — rośnie, zawartość centrowana. */
}
.site-header__nav {
  flex: 1 1 auto;
  margin: 0 var(--space-xl);
}
@media (max-width: 960px) {
  .site-header__nav {
    margin: 0 var(--space-md);
  }
}
.site-header {
  /* CTA telefon — prawo, bez margin. */
}
.site-header__cta {
  flex: 0 0 auto;
  margin: 0 !important;
}

/* ---------------------------------------------
   PAGE-LIST jako menu poziome.
   Reset domyślnego listy + flex layout.
   --------------------------------------------- */
.site-header__nav .wp-block-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}

/* Top-level item. */
.site-header__nav .wp-block-pages-list__item {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Link top-level. */
.site-header__nav .wp-block-pages-list__item__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  color: var(--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}
.site-header__nav .wp-block-pages-list__item__link:hover, .site-header__nav .wp-block-pages-list__item__link:focus-visible {
  color: var(--accent-2);
}

/* Current page → gold + underline. Ancestor (parent w nawigacji) też gold. */
.site-header__nav .wp-block-pages-list__item.current-menu-item > .wp-block-pages-list__item__link,
.site-header__nav .wp-block-pages-list__item.current-menu-ancestor > .wp-block-pages-list__item__link,
.site-header__nav .wp-block-pages-list__item .wp-block-pages-list__item__link[aria-current=page] {
  color: var(--accent-2);
}

/* Top-level current/ancestor — dodatkowy underline accent pod linkiem. */
.site-header__nav > .wp-block-page-list > .wp-block-pages-list__item.current-menu-item > .wp-block-pages-list__item__link,
.site-header__nav > .wp-block-page-list > .wp-block-pages-list__item.current-menu-ancestor > .wp-block-pages-list__item__link {
  position: relative;
  font-weight: 700;
}

.site-header__nav > .wp-block-page-list > .wp-block-pages-list__item.current-menu-item > .wp-block-pages-list__item__link::before,
.site-header__nav > .wp-block-page-list > .wp-block-pages-list__item.current-menu-ancestor > .wp-block-pages-list__item__link::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 2px;
  background: var(--accent-2);
  border-radius: 2px;
}

/* Item z dropdownem — chevron ▼ po linku. */
.site-header__nav .wp-block-pages-list__item.has-child > .wp-block-pages-list__item__link::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 4px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 2.5l3 3 3-3' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 2.5l3 3 3-3' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
  flex: 0 0 auto;
}

/* ---------------------------------------------
   SUBMENU — dropdown absolute pod parent.
   Ukryty domyślnie, pojawia się on hover/focus.
   --------------------------------------------- */
.site-header__nav .wp-block-navigation__submenu-container {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: var(--space-sm) 0;
  list-style: none;
  background: var(--background);
  border: 1px solid rgba(10, 31, 60, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--wp--custom--transition--duration) var(--wp--custom--transition--ease), transform var(--wp--custom--transition--duration) var(--wp--custom--transition--ease), visibility 0s linear var(--wp--custom--transition--duration);
  z-index: 100;
}

/* Show submenu on hover OR keyboard focus-within. */
.site-header__nav .wp-block-pages-list__item.has-child:hover > .wp-block-navigation__submenu-container,
.site-header__nav .wp-block-pages-list__item.has-child:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Obróć chevron on hover. */
.site-header__nav .wp-block-pages-list__item.has-child:hover > .wp-block-pages-list__item__link::after,
.site-header__nav .wp-block-pages-list__item.has-child:focus-within > .wp-block-pages-list__item__link::after {
  transform: rotate(180deg);
}

/* Submenu items — pełna szerokość, blok, padding side. */
.site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item {
  display: block;
  width: 100%;
}

.site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item__link {
  display: block;
  padding: 10px var(--space-md);
  color: var(--primary);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--wp--preset--font-size--text-small);
  font-weight: 400;
  white-space: nowrap;
}
.site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item__link:hover, .site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item__link:focus-visible {
  color: var(--accent-2);
  background: rgba(184, 137, 63, 0.06);
}

/* Submenu items z .has-child mają chevron W PRAWO (►) zamiast w dół. */
.site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item__link::after {
  display: none;
}

.site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item.has-child > .wp-block-pages-list__item__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item.has-child > .wp-block-pages-list__item__link::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M2.5 1l3 3-3 3' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M2.5 1l3 3-3 3' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
  flex: 0 0 auto;
}

/* ---------------------------------------------
   SUB-SUBMENU (level 3) — rozwija się w PRAWO.
   Wewnątrz submenu: parent.has-child → nested
   container pozycjonowany absolute top:0 left:100%.
   --------------------------------------------- */
.site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
  top: 0;
  left: 100%;
  margin-left: 4px;
  transform: translateX(8px);
}

.site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item.has-child:hover > .wp-block-navigation__submenu-container,
.site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item.has-child:focus-within > .wp-block-navigation__submenu-container {
  transform: translateX(0);
}

/* Obróć chevron sub-itemu on hover (z prawo na prawo-dół wizualnie =
   delikatne podkreślenie aktywności). */
.site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item.has-child:hover > .wp-block-pages-list__item__link::after,
.site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item.has-child:focus-within > .wp-block-pages-list__item__link::after {
  transform: translateX(2px);
}

/* ---------------------------------------------
   RESPONSIVE — mobile.
   --------------------------------------------- */
@media (max-width: 960px) {
  .site-header__nav .wp-block-page-list {
    gap: var(--space-md);
  }
  .site-header__nav .wp-block-pages-list__item__link {
    font-size: 0.75rem;
  }
}
@media (max-width: 768px) {
  /* Layout: logo lewo, CTA + hamburger prawo. */
  .site-header__inner {
    flex-wrap: nowrap;
    gap: var(--space-sm);
  }
  /* Pokaż hamburger po prawej. */
  .site-header__toggle {
    display: flex;
  }
  /* CTA telefon → tylko ikona (ukryty tekst). */
  .site-header__cta {
    order: 98;
    margin-left: auto !important;
  }
  .site-header__cta .wp-block-button__link[href^="tel:"] {
    font-size: 0;
    padding: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .site-header__cta .wp-block-button__link[href^="tel:"]::before {
    width: 20px;
    height: 20px;
    margin: 0;
  }
  /* Drawer — slide-in z prawej, zamknięty domyślnie. */
  .site-header__nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: min(85vw, 320px);
    height: 100vh;
    margin: 0;
    padding: 5rem var(--space-lg) var(--space-lg);
    background: var(--background);
    box-shadow: -4px 0 24px rgba(7, 22, 48, 0.2);
    z-index: 1001;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Drawer otwarty. */
  .site-header__toggle-input:checked ~ .site-header__nav {
    transform: translateX(0);
  }
  .site-header__toggle-input:checked ~ .site-header__backdrop {
    display: block;
    opacity: 1;
  }
  /* Lista pionowa w drawerze. */
  .site-header__nav .wp-block-page-list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }
  .site-header__nav .wp-block-pages-list__item {
    width: 100%;
    border-bottom: 1px solid rgba(10, 31, 60, 0.08);
  }
  .site-header__nav .wp-block-pages-list__item:last-child {
    border-bottom: none;
  }
  .site-header__nav .wp-block-pages-list__item__link {
    display: flex;
    width: 100%;
    padding: var(--space-md) 0;
    font-size: var(--wp--preset--font-size--text);
  }
  /* Submenu w drawerze — collapsable. Domyślnie schowane,
     rozwija się po kliku na parent (JS dodaje .is-open). */
  .site-header__nav .wp-block-navigation__submenu-container {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: rgba(10, 31, 60, 0.03);
    margin: 0;
    padding: var(--space-xs) 0;
    min-width: 0;
  }
  /* .is-open na parent .has-child → pokaż jego bezpośredni submenu. */
  .site-header__nav .wp-block-pages-list__item.has-child.is-open > .wp-block-navigation__submenu-container {
    display: block;
  }
  /* Nested level 3 — też statyczne, nie absolute. */
  .site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    top: auto;
    left: auto;
    margin-left: 0;
    transform: none;
    padding-left: var(--space-md);
  }
  /* Chevron: domyślnie w dół, obrócony w górę gdy .is-open. */
  .site-header__nav .wp-block-pages-list__item.has-child.is-open > .wp-block-pages-list__item__link::after {
    transform: rotate(180deg);
  }
  .site-header__nav .wp-block-navigation__submenu-container .wp-block-pages-list__item.has-child > .wp-block-pages-list__item__link::after {
    display: none;
  }
  /* Logo mniejsze na mobile. */
  .site-header .wp-block-site-logo img,
  .site-header .custom-logo {
    width: 100px !important;
    height: auto !important;
  }
}
/* Slide-down keyframe dla affixed state (.is-scrolled). */
@keyframes kordit-header-slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
/* ============================================================
   STRONY BEZ HERO — body NIE jest .home.
   Outer header staje się static (normal flow) + biały bg + dark text.
   Dotyczy: blog, single, archive, category, tag, 404, page bez hero.
   Positioning outer header siedzi w basic.scss; tu tylko colors. */
body:not(.home) .site-header {
  background: var(--background) !important;
  border-bottom-color: rgba(10, 31, 60, 0.08);
  animation: none !important;
  /* Dark text na białym tle */
}
body:not(.home) .site-header .wp-block-pages-list__item__link,
body:not(.home) .site-header .site-header__nav a {
  color: var(--primary) !important;
}
body:not(.home) .site-header {
  /* Active state — gold, override !important z reguły wyżej. */
}
body:not(.home) .site-header .wp-block-pages-list__item.current-menu-item > .wp-block-pages-list__item__link,
body:not(.home) .site-header .wp-block-pages-list__item.current-menu-ancestor > .wp-block-pages-list__item__link,
body:not(.home) .site-header .wp-block-pages-list__item__link[aria-current=page] {
  color: var(--accent-2) !important;
}
body:not(.home) .site-header .custom-logo,
body:not(.home) .site-header .wp-block-site-logo img {
  filter: none !important;
  /* override invert na ciemne logo */
}

/* Home: header transparent nad hero. Hamburger bar = white, gdy nie .is-scrolled. */
body.home .site-header:not(.is-scrolled) .site-header__toggle-bar {
  background-color: #fff;
}

body.home .site-header:not(.is-scrolled) .site-header__toggle {
  border-color: rgba(255, 255, 255, 0.35);
}

/* ============================================================
   FOOTER — granatowy site-wide footer
   Layout:
     TOP    — 4 kolumny: brand + 3 menu (specjalizacje / kancelaria / kontakt)
     HR     — alpha biały
     BOTTOM — copyright (lewo) + legal links (prawo)
   ============================================================ */
.site-footer {
  color: rgba(255, 255, 255, 0.78);
}
.site-footer a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: var(--transition);
}
.site-footer a:hover {
  color: var(--accent-2);
}
.site-footer {
  /* ━━ TOP — 4 kolumny ─────────────────────────────────────── */
}
.site-footer__top {
  gap: var(--space-3xl) clamp(40px, 5vw, 72px);
  align-items: flex-start;
  padding-bottom: var(--space-2xl);
}
.site-footer__col {
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.site-footer__col--brand {
  flex: 1.2 1 240px;
  max-width: 300px;
  gap: var(--space-lg);
}
.site-footer__col {
  /* Kontakt potrzebuje więcej miejsca przez e-Doręczenia code. */
}
.site-footer__col:last-child {
  flex: 1.4 1 260px;
}
.site-footer {
  /* ━━ BRAND ───────────────────────────────────────────────── */
}
.site-footer__logo,
.site-footer .wp-block-site-logo {
  margin: 0;
}
.site-footer__logo img,
.site-footer .wp-block-site-logo img {
  filter: brightness(0) invert(1);
  max-width: 220px;
  height: auto;
  display: block;
}
.site-footer__tag {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
}
.site-footer__social {
  display: flex;
  gap: 10px;
}
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.site-footer__social-link img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: var(--transition);
}
.site-footer__social-link:hover img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(63%) sepia(56%) saturate(420%) hue-rotate(2deg) brightness(91%) contrast(90%);
}
.site-footer {
  /* ━━ COLUMN HEADING — eyebrow z gold kreską ─────────────── */
}
.site-footer__heading {
  margin: 0 0 var(--space-sm);
  padding-bottom: 12px;
  position: relative;
  color: var(--accent-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.site-footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--accent-2);
  border-radius: 1px;
}
.site-footer {
  /* ━━ MENU LISTS ──────────────────────────────────────────── */
}
.site-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-footer__menu li {
  margin: 0;
  padding: 0;
}
.site-footer__menu a,
.site-footer__menu .site-footer__menu-static {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
}
.site-footer__menu a > span,
.site-footer__menu .site-footer__menu-static > span {
  flex: 1 1 auto;
  min-width: 0;
}
.site-footer__menu a:hover .site-footer__menu-chev {
  transform: translateX(4px);
}
.site-footer {
  /* Gold filter dla SVG ikon — odwzorowuje --accent-2 (#b8893f). */
}
.site-footer__menu-icon, .site-footer__menu-chev {
  flex: 0 0 auto;
  filter: brightness(0) saturate(100%) invert(63%) sepia(56%) saturate(420%) hue-rotate(2deg) brightness(91%) contrast(90%);
}
.site-footer__menu-icon {
  width: 20px;
  height: 20px;
}
.site-footer__menu-chev {
  width: 14px;
  height: 14px;
  transition: transform var(--wp--custom--transition--duration) ease;
}
.site-footer__menu-static {
  cursor: default;
}
.site-footer {
  /* e-Doręczenia row — multi-line z code block. */
}
.site-footer__menu-edor {
  margin-top: var(--space-sm);
}
.site-footer__menu-edor .site-footer__menu-static {
  align-items: flex-start;
  padding-top: 8px;
}
.site-footer__edor-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site-footer__edor-label {
  color: rgba(255, 255, 255, 0.6);
}
.site-footer__menu-edor code {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  font-family: var(--wp--preset--font-family--mono, monospace);
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0;
  line-height: 1.3;
  white-space: nowrap;
}
.site-footer {
  /* ━━ HR ──────────────────────────────────────────────────── */
}
.site-footer__hr {
  margin: 0;
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.site-footer {
  /* ━━ BOTTOM BAR ──────────────────────────────────────────── */
}
.site-footer__bottom {
  gap: var(--space-md) clamp(20px, 3vw, 40px);
  padding-top: var(--space-xl);
}
.site-footer__copy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}
.site-footer__legal {
  gap: clamp(20px, 3vw, 40px);
}
.site-footer__legal p {
  margin: 0;
}
.site-footer__legal a {
  color: rgba(255, 255, 255, 0.55);
}
.site-footer__legal a:hover {
  color: var(--accent-2);
}

/* ━━ RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-footer__top {
    flex-direction: column;
  }
  .site-footer__col, .site-footer__col--brand {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ============================================================
   SITE LOGO — header logo sizing
   ============================================================ */
.wp-block-site-logo img {
  width: auto;
  height: auto;
}

/*# sourceMappingURL=theme.css.map */