/* ============================================================
   RYSIE.ORG — skórka wizualna na Twenty Twenty-Four
   Źródło designu: motyw Grav `rysie` (rysie2.hmcloud.pl)
   ============================================================
   Zasada: nie dotykamy szablonów ani treści. Całość to warstwa
   CSS nakładana na bloki. Kolejność sekcji jak w oryginalnym
   style.css Grava, żeby dało się je zestawiać obok siebie.
   ============================================================ */

/* --- Open Sans (hostowany u nas) ----------------------------- */
/* Plik zmienny, wagi 300–800, podzbiory latin i latin-ext (polskie znaki).
   Lokalnie, a nie z fonts.gstatic.com — przeglądarka nie łączy się z Google,
   więc adres IP odwiedzającego nigdzie nie wychodzi. Licencja w
   assets/fonts/open-sans/LICENCJA.txt. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/open-sans/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/open-sans/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/open-sans/open-sans-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/open-sans/open-sans-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Zmienne ------------------------------------------------ */
:root {
  --clr-primary:       #ffaf3f;
  --clr-primary-dark:  #c8800a;
  --clr-primary-light: #ffd07a;
  --clr-primary-bg:    #fff9ef;

  --clr-text:          #1f1f1f;
  --clr-text-muted:    #555;
  --clr-border:        #E0D9CE;
  --clr-bg:            #FFFFFF;
  --clr-bg-light:      #F8F5F0;

  /* Jeden krój w całym serwisie. Nazwa --rysie-font-serif została, żeby nie
     przepisywać kilkudziesięciu reguł — dziś wskazuje na ten sam krój. */
  --rysie-font-sans:  "Open Sans", system-ui, -apple-system, sans-serif;
  --rysie-font-serif: "Open Sans", system-ui, -apple-system, sans-serif;

  --radius:    6px;
  --shadow:    0 2px 12px rgba(0,0,0,.08);
  --shadow-md: 0 4px 24px rgba(0,0,0,.12);

  --rysie-max-w: 1140px;
}

/* Przemapowanie palety motywu. Wszystkie bloki korzystające z
   presetów TT4 (base / contrast / accent) przejmują kolory Rysi
   bez ruszania ustawień w Edytorze witryny. */
body {
  --wp--preset--color--base:      var(--clr-bg);
  --wp--preset--color--base-2:    var(--clr-bg-light);
  --wp--preset--color--contrast:  var(--clr-text);
  --wp--preset--color--contrast-2: var(--clr-text-muted);
  --wp--preset--color--contrast-3: var(--clr-border);
  --wp--preset--color--accent:    var(--clr-primary);
  --wp--preset--color--accent-2:  var(--clr-primary-dark);
  --wp--preset--color--accent-3:  var(--clr-primary-light);
  --wp--preset--color--accent-4:  var(--clr-primary-bg);

  --wp--preset--font-family--body:    var(--rysie-font-sans);
  --wp--preset--font-family--heading: var(--rysie-font-serif);

  /* Grav trzyma kolumnę treści na 1140px, TT4 domyślnie na 1280px. */
  --wp--style--global--wide-size: var(--rysie-max-w);
}

/* --- Podstawy ----------------------------------------------- */
body {
  font-family: var(--rysie-font-sans);
  line-height: 1.7;
  color: var(--clr-text);
  background: var(--clr-bg);
}

.wp-site-blocks a:where(:not(.wp-element-button)) {
  color: var(--clr-primary-dark);
  text-decoration: none;
}
.wp-site-blocks a:where(:not(.wp-element-button)):hover {
  text-decoration: underline;
}

/* --- Typografia --------------------------------------------- */
.wp-site-blocks :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--rysie-font-serif);
  line-height: 1.3;
  color: var(--clr-text);
}

.wp-block-post-title,
main > h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: .75rem;
}

.entry-content h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); margin-top: 1.75rem; margin-bottom: .75rem; }
.entry-content h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); margin-top: 1.5rem; margin-bottom: .6rem; }

.entry-content figcaption {
  font-size: .85rem;
  color: var(--clr-text-muted);
  font-style: italic;
  margin-top: .4rem;
}

.entry-content blockquote {
  border-left: 4px solid var(--clr-primary);
  padding-left: 1rem;
  margin-block: 1.25rem;
  color: var(--clr-text-muted);
  font-style: italic;
}

/* --- Nagłówek i nawigacja ----------------------------------- */
/* Uwaga na strukturę: szablony `podstrona` i `pois` renderują nagłówek
   i stopkę jako zwykłe <div>, bez <header>/<footer> i bez klasy
   wp-block-template-part. Dlatego celujemy pozycją w .wp-site-blocks,
   a nie nazwą znacznika — inaczej skórka ominęłaby 6 z 10 podstron.
   Strona-wizytówka (page-id-11) nie ma nawigacji, więc :has() jej nie łapie
   i zostaje nietknięta. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) {
  background: var(--clr-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Pasek logo — zwarty, bez rozjeżdżania się kolumn na wąskich ekranach. */
/* Pasek logo+menu bywa zagnieżdżony różnie głęboko zależnie od szablonu,
   więc celujemy w ten zestaw kolumn, który zawiera nawigację. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-columns:has(.wp-block-navigation) {
  align-items: center;
  gap: 1rem;
  margin-block: 0;
  padding: .6rem 1.25rem;
  max-width: var(--rysie-max-w);
  margin-inline: auto;
  border-bottom: 1px solid var(--clr-border);
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-image img {
  max-height: 48px;
  width: auto;
}

/* Logo prowadzi na stronę główną. Odnośnik jest domyślnie elementem
   liniowym, więc obejmował tylko 20 z 48 px wysokości obrazka — klikalny
   był pasek przez środek logo. `display: block` rozciąga go na cały znak. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-image a {
  display: block;
  line-height: 0;
}

/* Szerokości kolumn nagłówka (20/70/15%) siedzą w stylach inline z edytora,
   więc bez !important nie ustąpią. Logo dostaje własną szerokość, nawigacja
   resztę, a pusta trzecia kolumna znika — dzięki temu menu mieści się
   w jednym rzędzie, jak w Gravie. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-column:has(> figure) {
  flex: 0 0 auto !important;
}
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-column:has(> .wp-block-navigation) {
  flex: 1 1 auto !important;
}
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-column:not(:has(*)) {
  display: none !important;
}

/* Pasek nawigacyjny w kolorze marki. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation {
  background: var(--clr-primary) !important;
  border-radius: var(--radius);
  padding: 0 .25rem;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation .wp-block-navigation-item__content {
  padding: .85rem .7rem;
  color: #2a1800;
  font-family: var(--rysie-font-sans);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background .15s;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation .wp-block-navigation-item__content:hover {
  background: rgba(0,0,0,.10);
  color: #1a0e00;
  text-decoration: none;
}

/* Aktywna podstrona: zamiast ciemnej plamy na pomarańczowym pasku —
   podkreślenie od spodu. Plama zlewała się z tłem i wyglądała jak brud. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
  background: transparent;
  color: #1a0e00;
  box-shadow: inset 0 -3px 0 #1a0e00;
  text-decoration: none;
}

/* Rozwijane podmenu — biała karta z cieniem, jak w Gravie. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation .wp-block-navigation__submenu-container {
  background: #fff;
  min-width: 220px;
  border: 1px solid var(--clr-border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  padding-block: .4rem;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--clr-text);
  font-weight: 600;
  padding: .5rem 1rem;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--clr-primary-bg);
  color: var(--clr-primary-dark);
}

/* --- Nawigacja mobilna (nakładka pełnoekranowa) -------------- */
/* Domyślnie nakładka ma białe tło, a pomarańcz zostaje tylko na kontenerze
   listy — wygląda to jak pływający prostokąt na bieli. Pozycje są
   wyśrodkowane z odstępem 19 px, podmenu dostają białe ramki z reguły dla
   rozwijanego menu na desktopie, a przyciski otwarcia i zamknięcia mają
   24×24 px, czyli poniżej progu wygodnego dotyku.
   Prefiks nagłówka jest konieczny: bez niego reguły desktopowe (ta sama
   klasa, wyższa specyficzność) wygrywały i podmenu zostawało wąskie. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--clr-primary) !important;
  padding: 0 !important;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  margin: 0 !important;
  padding: 3.25rem 0 2rem !important;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch !important;
  gap: 0 !important;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  display: block;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .9rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 700;
  color: #2a1800 !important;
  border-bottom: 1px solid rgba(0,0,0,.10);
  text-align: left;
}

/* Podmenu: pełna szerokość, wcięcie zamiast ramki, przyciemnione tło. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  background: rgba(0,0,0,.07) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding-left: 2.75rem !important;
  font-weight: 400;
  font-size: .95rem !important;
  border-bottom-color: rgba(0,0,0,.07);
}

/* Dotknięcie pozycji podmenu na telefonie zapalało jasne tło #fff9ef
   z reguły hoveru rozwijanego menu na desktopie — przycisk robił się biały
   i wypadał z układu. Na nakładce mobilnej stan dotyku ma być spójny
   z resztą: lekkie przyciemnienie, ten sam kolor tekstu. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active,
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active {
  background: rgba(0,0,0,.13) !important;
  color: #1a0e00 !important;
}

/* Bez podświetlenia dotyku rysowanego przez przeglądarkę na Androidzie. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  -webkit-tap-highlight-color: rgba(0,0,0,.08);
}

/* Aktywna podstrona w menu mobilnym — pasek z lewej zamiast podkreślenia. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
  background: rgba(0,0,0,.13) !important;
  box-shadow: inset 4px 0 0 #1a0e00 !important;
}

/* Przyciski otwarcia i zamknięcia: wygodny cel dotyku (min. 44 px).
   WAŻNE: tylko w zakresie, w którym WordPress w ogóle je pokazuje.
   Bez tego ograniczenia `display: flex` nadpisywał ukrycie i hamburger
   z krzyżykiem wyskakiwały na pasku przy pełnej szerokości ekranu. */
@media (max-width: 599px) {
  /* Zamknięte menu: hamburger był wyśrodkowany w szerokim pomarańczowym
     pasku i wyglądał jak zgubiony. Dosuwamy go do prawej krawędzi. */
  .wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation {
    display: flex;
    justify-content: flex-end;
    padding: 0 .25rem !important;
  }

  .wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container-open,
  .wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container-close {
    padding: .6rem !important;
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container-close {
    top: .5rem !important;
    right: .75rem !important;
    color: #2a1800;
  }
}

/* Obrys fokusu: widoczny, ale dopasowany do pomarańczowego tła. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
  outline: 2px solid #1a0e00;
  outline-offset: -2px;
}
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open a:focus:not(:focus-visible) {
  outline: none;
}

/* Podmenu przy prawej krawędzi rozwijamy w lewo. Karta ma 220 px i przy
   oknie 900–1024 px wystawała poza widok, przez co CAŁA strona przewijała
   się w poziomie (scrollWidth 1083 przy oknie 1024). Trzy ostatnie pozycje
   menu kotwiczymy prawą krawędzią do rodzica. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__container > li:nth-last-child(-n+3) > .wp-block-navigation__submenu-container {
  left: auto;
  right: 0;
}

/* Między hamburgerem (600 px) a pełną szerokością menu łamało się na dwa
   wiersze. Przy oknie 900 px pozycje zajmowały 664 px w kontenerze 749 px,
   ale odstęp blockGap 19,2 px × 6 przerw dokładał 115 px — razem 779 px,
   przez co „Kontakt” spadał do drugiego wiersza. Ciaśniejsze odstępy
   i mniejsza czcionka mieszczą wszystkie siedem pozycji w jednym rzędzie. */
@media (max-width: 1200px) and (min-width: 601px) {
  .wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation .wp-block-navigation-item__content {
    padding: .75rem .45rem;
    font-size: .8rem;
    letter-spacing: 0;
  }
  .wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation__container {
    gap: .4rem !important;
  }
}

/* --- Nagłówek: ta sama budowa na każdym szablonie ------------ */
/* Na szablonach `podstrona`/`pois` nagłówek siedzi w kolumnie, która nie
   rozciąga się na pełną szerokość — menu i hero kończyły się na 1123 px,
   podczas gdy na Aktualnościach szły do 1290/1440. Rozprostowujemy. */
.wp-site-blocks > :first-child:has(.wp-block-navigation),
.wp-site-blocks > :first-child:has(.wp-block-navigation) > .wp-block-column {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 100% !important;
}

/* Pasek logotypów partnerów pod hero występuje na 6 z 9 podstron i nie ma
   go na pozostałych — kolejne źródło „przeskoku" przy zmianie zakładki.
   Do osobnego potraktowania później, razem z logotypami funduszy. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) > .wp-block-column > figure.wp-block-image,
.wp-site-blocks > :first-child:has(.wp-block-navigation) > figure.wp-block-image {
  display: none !important;
}

/* --- Hero: slider ------------------------------------------- */
/* Każda podstrona ma dziś własne zdjęcie i własną nakładkę (logotypy UE,
   różne liczniki), przez co nagłówek skakał przy przechodzeniu między
   zakładkami. Ujednolicamy: stała wysokość, ten sam zestaw zdjęć,
   zero tekstu. Slajdy wstrzykuje rysie-hero.js. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-cover {
  height: 420px;
  min-height: 420px;
  max-height: 420px;
  padding: 0;
  overflow: hidden;
  background: #1a1514;
  /* Blok ma ustawioną w edytorze ramkę 10/50/50 px. Slajdy pozycjonujemy
     absolutnie, a te liczą się od krawędzi wewnątrz ramki — bez wyzerowania
     zdjęcie byłoby węższe od nagłówka o 100 px i krótsze o 60 px. */
  border: 0 !important;
  /* Część szablonów dokłada coverowi 19 px marginesu dolnego, część nie.
     Zerujemy, żeby odstęp pod sliderem był ten sam na każdej podstronie —
     właściwy odstęp daje już padding <main>. */
  margin: 0 !important;
}

/* Oryginalne tło Cover ustępuje miejsca slajdom. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-cover__image-background,
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-cover__video-background {
  display: none !important;
}

/* Przyciemnienie z edytora — przy zdjęciach bez tekstu tylko je brudzi. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-cover__background {
  background: none !important;
  opacity: 0 !important;
}

/* Nakładka: logotypy funduszy i liczniki. Do osobnego potraktowania
   później — na razie znika z nagłówka w całości. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-cover__inner-container {
  display: none !important;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .rysie-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .rysie-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .rysie-hero-slide.is-active {
  opacity: 1;
}

/* Delikatne ściemnienie u dołu, żeby zdjęcie nie ścinało się
   twardą krawędzią z białą treścią pod spodem. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-cover.rysie-hero-ready::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(26,21,20,0), rgba(26,21,20,.28));
  pointer-events: none;
  z-index: 1;
}

/* --- Hero: liczniki ------------------------------------------ */
/* Wartości z zakładki „Liczniki" w panelu. PHP wypisuje je ukryte w stopce,
   rysie-hero.js przenosi do slidera. */
.rysie-liczniki[hidden] {
  display: none !important;
}

.wp-site-blocks > :first-child:has(.wp-block-navigation) .rysie-liczniki {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  max-width: calc(100% - 48px);
  color: #fff;
}

/* Bez ramki pod licznikami czytelność daje mocniejsze ściemnienie dołu
   zdjęcia — tylko na stronach, które liczniki mają. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-cover.rysie-hero-ready:has(.rysie-liczniki:not([hidden]))::after {
  height: 190px;
  background: linear-gradient(to bottom, rgba(26,21,20,0), rgba(26,21,20,.72));
}

.rysie-licznik {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 250px;
  padding: 0 22px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.rysie-licznik:first-child {
  padding-left: 0;
}
.rysie-licznik + .rysie-licznik {
  border-left: 1px solid rgba(255, 255, 255, .3);
}

.rysie-licznik__liczba {
  font-family: var(--rysie-font-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--clr-primary);
  font-variant-numeric: tabular-nums;
}

.rysie-licznik__opis {
  font-family: var(--rysie-font-sans);
  font-size: .78rem;
  line-height: 1.35;
  color: #f3eee6;
}

@media (max-width: 782px) {
  .wp-site-blocks > :first-child:has(.wp-block-navigation) .rysie-liczniki {
    left: 14px;
    bottom: 14px;
    max-width: calc(100% - 28px);
  }
  .rysie-licznik {
    padding: 0 12px;
  }
  .rysie-licznik__liczba {
    font-size: 1.9rem;
  }
  .rysie-licznik__opis {
    font-size: .7rem;
  }
}

/* Zanim JS wstrzyknie slajdy, pokazujemy zdjęcie z bloku — bez tego
   przy wyłączonym JS nagłówek byłby pustą ciemną belką. */
.wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-cover:not(.rysie-hero-ready) .wp-block-cover__image-background {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Układ strony: jedna szerokość na wszystkich szablonach --- */
/* Przed zmianą tekst zaczynał się na 150 px przy Aktualnościach i na 195 px
   na pozostałych podstronach, przy szerokości 720 vs 1050 px — stąd wrażenie
   przeskoku przy zmianie zakładki. Teraz każdy szablon dostaje ten sam
   wyśrodkowany kontener. */
.wp-site-blocks:has(.wp-block-navigation) > main,
.wp-site-blocks > .wp-block-group > .wp-block-columns.alignwide {
  max-width: var(--rysie-max-w);
  margin-inline: auto;
  box-sizing: border-box;
}

.wp-site-blocks > .wp-block-group > .wp-block-columns.alignwide {
  gap: 2rem;
  padding-block: 2.5rem;
  align-items: start;
}

.wp-site-blocks:has(.wp-block-navigation) > main {
  padding-block: 2.5rem;
}

/* Bloki oznaczone w edytorze jako pełnoekranowe rozpychały układ poza
   wspólny kontener — w obrębie treści sprowadzamy je do jego szerokości. */
.wp-site-blocks:has(.wp-block-navigation) > main .alignfull {
  max-width: 100%;
  margin-inline: auto;
}

/* Wewnątrz wspólnego kontenera znosimy odstępy poziome dodane przez motyw.
   Inaczej tekst na szablonie `podstrona` zaczynał się 64 px dalej niż
   na Aktualnościach. */
.wp-site-blocks:has(.wp-block-navigation) > main .has-global-padding {
  padding-inline: 0;
}

/* Szablony motywu `single`, `archive` i `search` dokładają grupie z tytułem
   własny `padding-top: var(--wp--preset--spacing--50)` (104 px) na wierzch
   40 px, które `main` dostaje już z reguły wyżej. Przez to odstęp pod
   sliderem wynosił na wpisach 163 px zamiast 59 px jak na stronach.
   Zerujemy tylko górę pierwszej grupy — właściwy odstęp daje `main`.
   Motyw wpisuje ten padding stylem inline, więc bez !important nie ustąpi. */
.wp-site-blocks:has(.wp-block-navigation) > main > .wp-block-group:first-child {
  padding-top: 0 !important;
}

/* Edytor wygenerował dla bloku treści na tych podstronach własne
   ograniczenie `max-width: 80%` z wyśrodkowaniem — to ono spychało tekst
   do środka. W obrębie wspólnego kontenera je znosimy. */
.wp-site-blocks:has(.wp-block-navigation) > main [class*="wp-container-core-post-content"] > *,
.wp-site-blocks:has(.wp-block-navigation) > main [class*="wp-container-core-group"] > * {
  max-width: 100%;
}

/* Na węższych ekranach kontener potrzebuje marginesu od krawędzi okna. */
@media (max-width: 1200px) {
  .wp-site-blocks:has(.wp-block-navigation) > main,
  .wp-site-blocks > .wp-block-group > .wp-block-columns.alignwide {
    padding-inline: 1.25rem;
  }
}

/* --- Sponsorzy pod treścią (szablon page-with-sidebar) ------- */
/* Wcześniej blok „Wspierają nas” siedział w wąskiej kolumnie 30% obok
   treści (sumy kolumn szablonu dawały 145%, więc flexbox dodatkowo je
   dusił) i loga wychodziły ciasno. Teraz ta sama część szablonu — bez
   duplikowania jedenastu obrazków — jest wywoływana pod treścią, na pełną
   szerokość strony, tym samym kontenerem co reszta układu. */
.rysie-sponsorzy {
  max-width: var(--rysie-max-w);
  margin-inline: auto;
  padding-block: 1.5rem 2.5rem;
  border-top: 1px solid var(--clr-border);
}

@media (max-width: 1200px) {
  .rysie-sponsorzy { padding-inline: 1.25rem; }
}

.rysie-sponsorzy__logos {
  gap: 2rem 2.75rem !important;
  align-items: center;
}

/* Loga mają bardzo różne, przypadkowe rozmiary (część z jawną szerokością
   w stylu inline, część z całych, dużych oryginałów). Zamiast poprawiać
   jedenaście osobnych bloków, narzucamy wspólną wysokość, ignorując inline
   `style="width:…"` z edytora poprzez !important. */
.rysie-sponsorzy__logos .wp-block-image {
  margin: 0;
}

.rysie-sponsorzy__logos .wp-block-image img {
  width: auto !important;
  height: 64px !important;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 600px) {
  .rysie-sponsorzy__logos {
    gap: 1.5rem 2rem !important;
  }
  .rysie-sponsorzy__logos .wp-block-image img {
    height: 48px !important;
  }
}

/* --- Lista aktualności -------------------------------------- */
.wp-block-post-template {
  margin: 0;
  padding: 0;
  list-style: none;
}

li.wp-block-post {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--clr-border);
}
li.wp-block-post:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

li.wp-block-post .wp-block-post-title {
  font-family: var(--rysie-font-serif);
  font-size: 1.15rem;
  line-height: 1.4;
  margin: 0 0 .35rem;
}
li.wp-block-post .wp-block-post-title a { color: var(--clr-text); }
li.wp-block-post .wp-block-post-title a:hover {
  color: var(--clr-primary-dark);
  text-decoration: none;
}

li.wp-block-post .wp-block-post-excerpt__excerpt {
  font-size: .9rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin-bottom: .5rem;
}

li.wp-block-post .wp-block-post-excerpt__more-text a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--clr-primary-dark);
  letter-spacing: .02em;
}
li.wp-block-post .wp-block-post-excerpt__more-text a:hover {
  color: var(--clr-primary);
  text-decoration: none;
}

li.wp-block-post .wp-block-post-date {
  font-size: .8rem;
  color: var(--clr-text-muted);
}

/* Separator wewnątrz karty dubluje kreskę karty — chowamy. */
li.wp-block-post .wp-block-separator { display: none; }

/* Miniatura, jeśli zostanie dodana do pętli w Edytorze witryny. */
li.wp-block-post .wp-block-post-featured-image img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* --- Paginacja ---------------------------------------------- */
.wp-block-query-pagination {
  gap: .4rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--clr-border);
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--clr-text);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.wp-block-query-pagination a:hover {
  background: var(--clr-primary-bg);
  border-color: var(--clr-primary);
  text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
  font-weight: 700;
}

.wp-block-query-pagination .page-numbers.dots { border: none; }

/* --- Sidebar ------------------------------------------------ */
/* Cały sidebar to jeden blok grupy — robimy z niego kartę widgetu. */
aside.wp-block-template-part > .wp-block-group {
  background: var(--clr-bg-light);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Tytuł „Wspierają nas” jest akapitem ze <strong>, nie nagłówkiem. */
aside.wp-block-template-part p.has-large-font-size,
aside.wp-block-template-part :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--rysie-font-sans);
  /* Motyw ustawia .has-large-font-size z !important, stąd !important tutaj. */
  font-size: 1rem !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clr-text);
  margin: 0 0 .6rem;
}

/* Kreskę pod tytułem robi blok Separator — przejmujemy ją na akcent. */
aside.wp-block-template-part .wp-block-separator {
  border: none;
  border-top: 2px solid var(--clr-primary);
  opacity: 1;
  background: none;
  margin: 0 0 1rem;
}

/* Logotypy sponsorów — siatka 2 kolumn zamiast długiej kolumny. */
aside.wp-block-template-part > .wp-block-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  align-items: center;
}

/* Tytuł i separator zajmują pełną szerokość siatki. */
aside.wp-block-template-part > .wp-block-group > .wp-block-group,
aside.wp-block-template-part > .wp-block-group > .wp-block-separator,
aside.wp-block-template-part > .wp-block-group > .wp-block-search {
  grid-column: 1 / -1;
}

aside.wp-block-template-part figure.wp-block-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: .5rem;
  margin: 0;
  min-height: 56px;
  transition: box-shadow .15s;
}

aside.wp-block-template-part figure.wp-block-image:hover { box-shadow: var(--shadow); }

/* Inline'owe width z edytora (np. 271px) rozpychają siatkę — kasujemy. */
aside.wp-block-template-part figure.wp-block-image img {
  width: auto !important;
  height: auto !important;
  max-height: 44px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter .2s;
}
aside.wp-block-template-part figure.wp-block-image:hover img { filter: grayscale(0); }

/* Wyszukiwarka w sidebarze Aktualności — usunięta razem z nagłówkiem
   („Search the website", nigdy nieprzetłumaczonym) oraz kreską i odstępem,
   które ją oddzielały od logotypów. Celujemy przez zawartość, a nie przez
   pozycję, żeby reguła przeżyła zmianę kolejności bloków w sidebarze. */
/* Uwaga: `:has(.wp-block-search)` trafia też w zewnętrzne pudełko sidebara,
   bo ono również zawiera wyszukiwarkę — i chowa cały sidebar.
   Stąd `:has(> ...)`: tylko grupa, której formularz jest bezpośrednim
   dzieckiem. */
aside.wp-block-template-part .wp-block-group:has(> .wp-block-search),
aside.wp-block-template-part hr.wp-block-separator:has(+ .wp-block-group > .wp-block-search),
aside.wp-block-template-part .wp-block-group:has(> .wp-block-search) + .wp-block-spacer {
  display: none !important;
}

/* --- Wyszukiwarka i przyciski ------------------------------- */
.wp-block-search__input {
  padding: .5rem .75rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-family: var(--rysie-font-sans);
  font-size: .9rem;
}

.wp-block-search__input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(232,148,10,.15);
}

.wp-block-search__button,
.wp-element-button,
.wp-block-button__link {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .5rem 1rem;
  font-family: var(--rysie-font-sans);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.wp-block-search__button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
  background: var(--clr-primary-dark);
  color: #fff;
  text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--clr-primary-dark);
  border: 2px solid var(--clr-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--clr-primary);
  color: #fff;
}

/* --- Formularze (Kadence / WPForms / Gutentor) -------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: .6rem .85rem;
  font-family: var(--rysie-font-sans);
  font-size: .95rem;
  background: var(--clr-bg);
  transition: border-color .15s, box-shadow .15s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(232,148,10,.15);
}

textarea { min-height: 140px; resize: vertical; }

/* --- Formularz kontaktowy (WPForms, render „modern”) -------- */
/* WPForms w tym trybie czyta własne zmienne, więc podmieniamy je
   zamiast walczyć ze specyficznością jego arkusza. */
.wpforms-container.wpforms-render-modern {
  --wpforms-field-border-radius: var(--radius);
  --wpforms-field-background-color: var(--clr-bg);
  --wpforms-field-border-color: var(--clr-border);
  --wpforms-field-text-color: var(--clr-text);
  --wpforms-label-color: var(--clr-text);
  --wpforms-label-sublabel-color: var(--clr-text-muted);
  --wpforms-label-error-color: #cf2e2e;
  --wpforms-button-border-radius: var(--radius);
  --wpforms-button-background-color: var(--clr-primary);
  --wpforms-button-text-color: #ffffff;
}

.wpforms-container.wpforms-render-modern .wpforms-submit {
  font-family: var(--rysie-font-sans);
  font-weight: 600;
  transition: background .15s;
}

.wpforms-container.wpforms-render-modern .wpforms-submit:hover {
  background-color: var(--clr-primary-dark) !important;
}

/* --- Obrazki w treści: zabezpieczenie przed wyjściem poza kolumnę --- */
/* 33 ze 100 wpisów ma zdjęcia wklejone jako surowy <img class="normal-image">,
   bez opakowania w <figure> i bez atrybutów width/height. Żadna reguła dla
   bloków ich nie łapie, więc renderowały się w pełnym rozmiarze oryginału
   (2048 px) w kontenerze 1140 px i rozpychały stronę w poziomie — dokument
   miał 2198 px szerokości przy oknie 1440 px. To jest standardowe
   zabezpieczenie, którego w skórce brakowało. */
.wp-site-blocks:has(.wp-block-navigation) > main img,
.entry-content img {
  max-width: 100%;
  height: auto;
}

/* --- Galeria ------------------------------------------------ */
/* Bez tła. Wcześniej było tu `background: var(--clr-bg-light)` (#F8F5F0):
   pod zdjęciem niewidoczne, ale pod obrazkiem z przezroczystością (logotypy,
   rysunki w PNG) prześwitywało jako kremowa plama zamiast bieli strony. */
.entry-content figure.wp-block-image {
  border-radius: var(--radius);
  overflow: hidden;
}

.entry-content figure.wp-block-image img {
  transition: transform .3s ease;
}
.entry-content figure.wp-block-image:hover img {
  transform: scale(1.05);
}

/* Podpis pod zdjęciem zostaje na białym tle, nie na kafelku. */
.entry-content figure.wp-block-image figcaption {
  background: var(--clr-bg);
  margin: 0;
  padding: .4rem .2rem 0;
}

/* --- Tabele ------------------------------------------------- */
.entry-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: .92rem;
}

.entry-content :is(th, td) {
  border: 1px solid var(--clr-border);
  padding: .55rem .7rem;
  text-align: left;
}

.entry-content th {
  background: var(--clr-bg-light);
  font-family: var(--rysie-font-sans);
  font-weight: 700;
}

.entry-content tbody tr:nth-child(even) { background: var(--clr-primary-bg); }

/* --- Stopka ------------------------------------------------- */
.wp-site-blocks > :last-child:has(.wp-block-navigation) {
  background: #1A1514;
  color: #c8bfaf;
  margin-top: 3rem;
  padding-block: 2.5rem 1.25rem;
}

.wp-site-blocks > :last-child:has(.wp-block-navigation) > .wp-block-group {
  max-width: var(--rysie-max-w);
  margin-inline: auto;
}

.wp-site-blocks > :last-child:has(.wp-block-navigation) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--rysie-font-sans);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: .85rem;
}

.wp-site-blocks > :last-child:has(.wp-block-navigation) p,
.wp-site-blocks > :last-child:has(.wp-block-navigation) li {
  font-size: .88rem;
  line-height: 1.9;
  color: #b0a898;
}

.wp-site-blocks > :last-child:has(.wp-block-navigation) a,
.wp-site-blocks > :last-child:has(.wp-block-navigation) a:where(:not(.wp-element-button)) {
  color: #c8bfaf;
  text-decoration: none;
}
.wp-site-blocks > :last-child:has(.wp-block-navigation) a:hover,
.wp-site-blocks > :last-child:has(.wp-block-navigation) a:where(:not(.wp-element-button)):hover {
  color: var(--clr-primary);
  text-decoration: underline;
}

.wp-site-blocks > :last-child:has(.wp-block-navigation) .wp-block-navigation {
  background: transparent !important;
}

.wp-site-blocks > :last-child:has(.wp-block-navigation) img {
  max-height: 42px;
  width: auto;
}

/* Logo w stopce ma dużo miejsca dookoła — o 30% wyższe niż ogólny limit
   powyżej (42 × 1,3 ≈ 55). Wyższa specyficzność selektora wystarczy,
   nie trzeba !important. */
.wp-site-blocks > :last-child:has(.wp-block-navigation) .wp-block-site-logo img {
  max-height: 55px;
}

/* Logo ma ciemny rysunek — na ciemnej stopce znikało.
   Grav używał w tym miejscu białego wordmarku, więc wybielamy. */
.wp-site-blocks > :last-child:has(.wp-block-navigation) .wp-block-site-logo img,
.wp-site-blocks > :last-child:has(.wp-block-navigation) figure.wp-block-image img {
  filter: brightness(0) invert(1);
}

/* --- Stopka: kolumny, sociale, menu poziome ----------------- */
/* Kolumny miały zadeklarowane 40%+35%+50% = 125%. Flexbox kurczył je
   proporcjonalnie, więc każda wychodziła węższa niż zapisano i tekst się
   dusił. Teraz 38+32+30 = 100%, a odstęp między nimi jest jawny. */
/* Stopka dostawała margines dwa razy: z reguły :last-child powyżej i z własnego
   ustawienia bloku. Po usunięciu tego drugiego pod menu nie zostaje pusty pas. */
.rysie-stopka { padding-block: 0 !important; }

.rysie-stopka__gora {
  gap: 2.5rem;
  margin-bottom: 2rem;
}

/* Ikony społecznościowe. Styl „logos-only” rysuje je jako SVG w currentColor,
   więc wystarczy ustawić kolor — nie dotyczy ich filtr wybielający logo,
   bo ten celuje w <img>, a tu mamy <svg>. */
.rysie-stopka__ikony {
  gap: .5rem .65rem;
  margin-bottom: 1.75rem;
}

.rysie-stopka__ikony .wp-social-link {
  padding: 0;
  transition: transform .15s, opacity .15s;
}

/* Rozmiar ikony bierze się z font-size elementu listy, a regułę
   `li { font-size: .88rem }` powyżej wygrywała specyficznością — ikony
   wychodziły 27 px zamiast zadeklarowanych 36 px. Stąd ten jawny zapis. */
.wp-site-blocks > :last-child:has(.wp-block-navigation) .rysie-stopka__ikony .wp-social-link {
  font-size: 30px;
  line-height: 1;
}

.rysie-stopka__ikony .wp-social-link a {
  padding: .4rem;
  color: #c8bfaf;
}

/* WordPress do 6.x sam powiększał ikony w stylu „same logotypy" do 1.25em
   i zerował im padding. W 7.x to zniknęło i ikony skurczyły się z 37,5 do
   30 px, a odstępy urosły. Zapisujemy to wprost, żeby nie zależeć od
   stylów rdzenia przy kolejnych aktualizacjach. */
.wp-site-blocks > :last-child:has(.wp-block-navigation) .rysie-stopka__ikony .wp-social-link a {
  padding: 0;
}
.wp-site-blocks > :last-child:has(.wp-block-navigation) .rysie-stopka__ikony .wp-social-link svg {
  width: 1.25em;
  height: 1.25em;
}

.rysie-stopka__ikony .wp-social-link:hover {
  transform: translateY(-2px);
  opacity: 1;
}

.rysie-stopka__ikony .wp-social-link:hover a { color: var(--clr-primary); }

/* Patronite to wezwanie do działania, nie kolejny odnośnik w rzędzie —
   dostaje obramowanie, żeby dało się je odróżnić od reszty stopki. */
.rysie-stopka__patronite { margin: 0; }

.wp-site-blocks > :last-child:has(.wp-block-navigation) .rysie-stopka__patronite a,
.wp-site-blocks > :last-child:has(.wp-block-navigation) .rysie-stopka__patronite a:where(:not(.wp-element-button)) {
  display: inline-block;
  padding: .55rem 1.1rem;
  border: 1px solid var(--clr-primary);
  border-radius: var(--radius, 4px);
  color: var(--clr-primary);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.wp-site-blocks > :last-child:has(.wp-block-navigation) .rysie-stopka__patronite a:hover {
  background: var(--clr-primary);
  color: #1A1514;
  text-decoration: none;
}

.rysie-stopka__kreska {
  border: 0;
  border-top: 1px solid rgba(200,191,175,.22);
  margin-block: 1.5rem;
}

/* Dwanaście pozycji menu ustawionych pionowo w najwęższej kolumnie robiło
   ze stopki długi słupek. Poziomo, z zawijaniem, mieszczą się w dwóch
   wierszach na całej szerokości. */
.rysie-stopka__menu .wp-block-navigation__container {
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
}

.rysie-stopka__menu .wp-block-navigation-item__content {
  font-size: .85rem;
  padding-block: .15rem;
}

@media (max-width: 900px) {
  .rysie-stopka__gora { gap: 2rem; }
  .rysie-stopka__ikony { justify-content: flex-start; }
}

/* --- Responsywność ------------------------------------------ */
@media (max-width: 960px) {
  .wp-site-blocks > .wp-block-group > .wp-block-columns.alignwide {
    padding-block: 1.5rem;
    gap: 1.5rem;
  }

  .wp-site-blocks:has(.wp-block-navigation) > main {
    padding-block: 1.5rem;
  }

  .wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-cover {
    height: 320px;
    min-height: 320px;
    max-height: 320px;
  }
}

@media (max-width: 782px) {
  .wp-site-blocks > :first-child:has(.wp-block-navigation) {
    position: static;
  }

  .wp-site-blocks > :first-child:has(.wp-block-navigation) > .wp-block-columns {
    flex-wrap: wrap;
    justify-content: center;
  }

  .wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-navigation {
    border-radius: 0;
  }

  .wp-site-blocks > :first-child:has(.wp-block-navigation) .wp-block-cover {
    height: 260px;
    min-height: 260px;
    max-height: 260px;
  }

  .wp-site-blocks > :last-child:has(.wp-block-navigation) .wp-block-columns {
    gap: 2rem;
  }
}


/* ============================================================
   LANDING — strona-wizytówka pod samym rysie.org/
   Odwzorowanie układu z motywu Grav (rysie2.hmcloud.pl).
   ============================================================
   Zakres: strona bez nawigacji. Podstrony serwisu mają menu,
   więc ten blok ich nie dotyczy.
   ============================================================ */

/* Kafelek na pełny ekran, treść wyśrodkowana w pionie. */
.wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-cover {
  min-height: 100vh;
  height: auto;
  max-height: none;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: url("/wp-content/uploads/2024/05/tlo.jpg") center center / cover no-repeat fixed;
  border: 0;
}

/* Zdjęcie tła podajemy w CSS, żeby na dużych ekranach nie schodzić
   do wariantu 1024 px z srcsetu. */
.wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-cover__image-background {
  display: none !important;
}

/* Przyciemnienie jak w Gravie. */
.wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-cover__background {
  background: rgba(0, 0, 0, .55) !important;
  opacity: 1 !important;
}

/* Blok Cover ogranicza swoje dzieci do 70% szerokości (ustawienie z edytora),
   przez co rząd kart dostawał 764 px zamiast 1220 i łamał się na dwa rzędy
   już przy 1440 px. */
.wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-cover__inner-container > *,
.wp-site-blocks:not(:has(.wp-block-navigation)) .kb-row-layout-wrap {
  max-width: none !important;
  width: 100%;
  margin-inline: auto;
}

.wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-cover__inner-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  max-width: none;
  padding: 0;
}

/* --- Tytuł -------------------------------------------------- */
.wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-heading {
  font-family: var(--rysie-font-serif);
  font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  text-align: center;
  margin: 0;
  max-width: 1220px;
  /* Nagłówek ma w edytorze ustawione tło #00000087 — pasek na całą
     szerokość, którego wzorzec w Gravie nie ma. Tytuł leży tam wprost
     na zdjęciu. */
  background: none !important;
  padding: 0;
}

/* --- Rząd kart ---------------------------------------------- */
/* Kadence układa kolumny w siatkę o stałej liczbie kolumn, przez co przy
   pośrednich szerokościach okna karty się ściskają i rozjeżdżają.
   Zamieniamy to na zawijany flex ze stałą szerokością karty — tak działa
   wzorzec w Gravie i dlatego trzyma się na każdym ekranie. */
.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-row-column-wrap {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch !important;
  gap: 1.25rem;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0;
  grid-template-columns: none !important;
}

/* --- Karta -------------------------------------------------- */
.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-row-column-wrap > .wp-block-kadence-column {
  width: 220px !important;
  flex: 0 0 220px !important;
  max-width: 220px !important;
  min-width: 0 !important;
  /* Kadence ustawia align-self: center — to ono robiło schodki. */
  align-self: stretch !important;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .2s, box-shadow .2s;
}

.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-row-column-wrap > .wp-block-kadence-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
}

/* Wnętrze karty: zdjęcie u góry, bursztynowy korpus pod nim.
   Zerujemy narzucone przez edytor min-height, bo to one rozpychały
   karty do różnych wysokości. */
.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: var(--clr-primary);
}

/* --- Zdjęcie karty ------------------------------------------ */
.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col > figure.wp-block-image {
  margin: 0;
  height: 160px;
  flex: 0 0 160px;
  overflow: hidden;
  border-radius: 0;
  background: none;
}

.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col > figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Korpus karty ------------------------------------------- */
.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col > .wp-block-kadence-column {
  flex: 1 1 auto;
  width: auto !important;
  max-width: none !important;
}

.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col > .wp-block-kadence-column > .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  height: 100%;
  min-height: 0 !important;
  padding: 1.1rem 1rem .25rem !important;
  background: none;
}

/* Nazwa serwisu. Stała wysokość = najdłuższy tytuł (3 wiersze),
   dzięki temu kreska pod nazwą jest na tej samej wysokości we
   wszystkich kartach. */
.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col p.has-medium-font-size {
  font-family: var(--rysie-font-serif);
  font-size: 1.05rem !important;
  font-weight: 700;
  color: #1a0e00 !important;
  line-height: 1.3;
  margin: 0;
  /* Stała wysokość = najdłuższy tytuł (3 wiersze), żeby kreska pod nazwą
     była na tej samej wysokości we wszystkich kartach.
     Uwaga: bez `display: flex` — tytuły zawierają <br>, a flex rozbiłby je
     na osobne elementy i poprzestawiał słowa. */
  min-height: calc(1.05rem * 1.3 * 3);
  display: block;
  text-align: center;
}

.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col p.has-medium-font-size strong {
  font-weight: 700;
}

.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col hr.wp-block-separator {
  border: none;
  border-top: 2px solid rgba(0, 0, 0, .2);
  background: none;
  opacity: 1;
  width: 100%;
  margin: 0;
  flex-shrink: 0;
}

.wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col p.has-small-font-size {
  font-size: .8rem !important;
  color: #2a1400 !important;
  line-height: 1.5;
  margin: 0;
  flex: 1 1 auto;
}

/* --- Przycisk ----------------------------------------------- */
/* Przyciski w kartach były blokami wtyczki Spectra; po jej usunięciu to
   zwykłe bloki rdzenia, więc te same reguły celują teraz w `wp-block-button`.
   Wygląd bez zmian: ciemne tło, biały napis, promień 3 px. */
.wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-buttons {
  margin: 0 0 1.1rem !important;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  gap: 0;
}

.wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-button {
  margin: 0;
}

.wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-button__link {
  background: #1a0e00 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 3px !important;
  padding: .45rem .9rem !important;
  box-shadow: none !important;
  font-family: var(--rysie-font-sans);
  font-size: .75rem !important;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  transition: background .15s;
}

.wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-button__link:hover {
  background: #3a2000 !important;
  color: #fff !important;
}

/* --- Logotypy funduszy -------------------------------------- */
/* Do osobnego potraktowania później, razem z logotypami w nagłówku. */
.wp-site-blocks:not(:has(.wp-block-navigation)) figure.wp-block-premium-image,
.wp-site-blocks:not(:has(.wp-block-navigation)) .premium-image {
  display: none !important;
}

/* --- Responsywność ------------------------------------------ */
@media (max-width: 1200px) {
  .wp-site-blocks:not(:has(.wp-block-navigation)) .kt-row-column-wrap > .wp-block-kadence-column {
    width: 190px !important;
    flex-basis: 190px !important;
    max-width: 190px !important;
  }
}

@media (max-width: 1020px) {
  .wp-site-blocks:not(:has(.wp-block-navigation)) .kt-row-column-wrap > .wp-block-kadence-column {
    width: 170px !important;
    flex-basis: 170px !important;
    max-width: 170px !important;
  }
}

@media (max-width: 768px) {
  .wp-site-blocks:not(:has(.wp-block-navigation)) .kt-row-column-wrap {
    gap: .75rem;
  }

  .wp-site-blocks:not(:has(.wp-block-navigation)) .kt-row-column-wrap > .wp-block-kadence-column {
    width: 150px !important;
    flex-basis: 150px !important;
    max-width: 150px !important;
  }

  .wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col > figure.wp-block-image {
    height: 120px;
    flex-basis: 120px;
  }

  .wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col p.has-medium-font-size {
    font-size: .9rem !important;
    min-height: calc(.9rem * 1.3 * 3);
  }

  .wp-site-blocks:not(:has(.wp-block-navigation)) .kt-inside-inner-col p.has-small-font-size {
    font-size: .75rem !important;
  }

  /* Tło „fixed" na iOS potrafi migotać i psuć skalowanie. */
  .wp-site-blocks:not(:has(.wp-block-navigation)) .wp-block-cover {
    background-attachment: scroll;
    padding: 2rem 1rem;
  }
}