/* ─────────────────────────────────────────────
   Stajnia Jednorożców — style
   ───────────────────────────────────────────── */

:root {
  /* kolory marki — cztery strefy */
  --zolty:     #F0B32B;
  --zielony:   #43A047;
  --niebieski: #2A8FE0;
  --czerwony:  #E23A34;

  /* nasycone warianty do bloków stref */
  --zolty-blok:     #D9A72B;
  --zielony-blok:   #5C6B3E;
  --niebieski-blok: #2A6A9E;
  --czerwony-blok:  #A81E35;

  --biel:      #F7F3EC;
  --krem:      #FAF6EC;
  --krem-ciep: #F3EBDB;
  --tusz:      #23282F;
  --szary:     #6E685E;
  --zloto:     #B08A45;
  --linia:     rgba(35, 40, 47, 0.14);

  --marg:      clamp(24px, 4vw, 64px);
  --kontener:  1240px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--krem);
  color: var(--tusz);
  font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

/* biel po najechaniu wyłącznie na ciemnych tłach — na jasnych
   robiła tekst niewidocznym */
.naglowek a:hover,
.strefa:hover { color: #FFFFFF; }

/* ── kropki stref ───────────────────────────── */

.kropka {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}
.kropka--zolty     { background: var(--zolty); }
.kropka--zielony   { background: var(--zielony); }
.kropka--niebieski { background: var(--niebieski); }
.kropka--czerwony  { background: var(--czerwony); }

/* ── nagłówek ───────────────────────────────── */

.naglowek {
  position: relative;
  color: var(--biel);
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}

/* zdjęcie bez korekty barwnej — ma wyglądać dokładnie tak, jak zostało zrobione */
.naglowek__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  z-index: -2;
}

/* przyciemnienie tylko pod nawigacją i tytułem: bez niego biały tekst ginie
   na jasnym suficie i stole; środek zdjęcia zostaje nietknięty */
.naglowek__cien {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(14, 11, 8, 0.66) 0%,
      rgba(14, 11, 8, 0.16) 16%,
      rgba(14, 11, 8, 0.00) 30%),
    linear-gradient(0deg,
      rgba(11, 8, 5, 0.84) 0%,
      rgba(11, 8, 5, 0.52) 22%,
      rgba(11, 8, 5, 0.10) 48%,
      rgba(11, 8, 5, 0.00) 66%);
}

/* ── pasek nawigacji ────────────────────────── */

.nawigacja {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(22px, 2.6vw, 34px) var(--marg) 0;
}

.znak {
  display: flex;
  align-items: center;
}

/* Logo przyszło jako PNG bez kanału alfa — tło wokół koła to jednolity szary
   rgb(235,235,235), który na ciemnym zdjęciu byłby widocznym kwadratem.
   Kolorowy ring kończy się na promieniu 41,8%, więc wycinamy koło tuż przy
   jego krawędzi; środek jest minimalnie przesunięty w górę. */
.znak__logo {
  height: clamp(60px, 6.5vw, 81px);
  width: auto;
  display: block;
  clip-path: circle(42% at 50% 49%);
}

.menu {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.7vw, 12px);
}

/* Pozycje menu jako pigułki: obrys włosowy, pełne zaokrąglenie i delikatne
   wypełnienie dopiero pod kursorem, żeby sześć kapsuł nie przykryło zdjęcia
   w nagłówku. Kolory biorą się z currentColor, więc ten sam zapis obsługuje
   jasny pasek podstron i ciemny nagłówek strony głównej. */
.menu a {
  font-size: clamp(10px, 0.84vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
  padding: 10px clamp(12px, 1.1vw, 18px);
  border-radius: 999px;
  opacity: 0.92;
  transition: opacity 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
/* Bez obrysu jedyną informacją zwrotną zostaje delikatne wypełnienie. */
.menu a:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 9%, transparent);
}

/* Koło Gospodyń Miejskich stoi za „Zapisz się", oddzielone włosową kreską:
   to inicjatywa działająca w Stajni, a nie kolejna sekcja strony, więc
   wygląda jak mały znak z nazwą własną — środkowy wiersz szeryfową kursywą. */
.menu a.menu__kgm {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: clamp(4px, 0.6vw, 10px);
  padding: 3px 0 3px clamp(14px, 1.2vw, 20px);
  border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 0;
  line-height: 1.12;
}
.menu a.menu__kgm:hover { background: none; }

.menu__kgm span:nth-child(odd) {
  font-size: 8.5px;
  letter-spacing: 0.34em;
}
.menu__kgm span:nth-child(1) { font-weight: 500; }
.menu__kgm span:nth-child(3) { font-weight: 300; }

.menu__kgm span:nth-child(2) {
  margin: 1px 0 2px;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: color 0.25s ease;
}
.menu__kgm:hover span:nth-child(2) { color: var(--zloto); }

/* Pozycja wyróżniona — bez tła, obrysu i cienia. Zostaje sama fala
   przechodząca między wierszami napisu. Kolory biorą się z currentColor,
   bo pasek bywa jasny na podstronach i biały nad zdjęciem na głównej. */
.menu__pomiedzy {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px clamp(14px, 1.2vw, 20px);
  white-space: nowrap;
}
.menu__pomiedzy:hover { background: none; }

.menu__pomiedzy__fala {
  position: absolute;
  left: -2%;
  top: 50%;
  width: 104%;
  height: 22px;
  transform: translateY(-46%);
  overflow: visible;
  pointer-events: none;
}
.menu__pomiedzy__fala path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

.menu__pomiedzy-tekst {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.12;
}
.menu__pomiedzy-tekst span:first-child {
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.menu__pomiedzy-tekst span:last-child {
  font-weight: 300;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  font-size: 0.94em;
}

/* ── tytuł ──────────────────────────────────── */

.tytul {
  position: absolute;
  left: var(--marg);
  bottom: clamp(96px, 14vh, 168px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
  max-width: min(92vw, 1000px);
}

.tytul__napis {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(40px, 6.1vw, 92px);
  line-height: 1.02;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  text-shadow: 0 2px 26px rgba(8, 5, 3, 0.42);
}

.tytul__kreska {
  width: clamp(220px, 40vw, 560px);
  height: 1px;
  background: linear-gradient(90deg,
              rgba(214, 178, 118, 0.95) 0%,
              rgba(214, 178, 118, 0.34) 100%);
  border: 0;
  margin: 0;
}

.strefy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.strefy li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, 1.02vw, 14px);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── małe ekrany ────────────────────────────── */

@media (max-width: 860px) {
  /* niższy nagłówek = mniej ciasny kadr; przy 780 px widać było
     tylko wąski pasek z drzwiami */
  .naglowek { height: 620px; }
  .naglowek__foto { object-position: 58% 58%; }

  .tytul { bottom: clamp(72px, 10vh, 120px); }
}

/* ═════════════════════════════════════════════
   Elementy wspólne
   ═════════════════════════════════════════════ */

.kontener {
  max-width: var(--kontener);
  margin: 0 auto;
  padding: 0 var(--marg);
}

.nadpis {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--zloto);
}

/* nadpis ze złotą kreską — wersja lewostronna, do sekcji z akcją po prawej */
.nadpis--kreska {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.nadpis--kreska::before {
  content: "";
  width: clamp(24px, 3vw, 42px);
  height: 1px;
  background: rgba(176, 138, 69, 0.55);
}

.szeryf {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400;
}

/* ═════════════════════════════════════════════
   Nawigacja — sygnet i przycisk
   ═════════════════════════════════════════════ */


.przycisk-zapis {
  font-size: clamp(10px, 0.86vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.przycisk-zapis:hover {
  background: var(--biel);
  color: #17130F;
}

/* ═════════════════════════════════════════════
   Manifest
   ═════════════════════════════════════════════ */

.manifest {
  background: var(--krem);
  color: var(--tusz);
  padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 108px);
  text-align: center;
}

.manifest__nadpis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.manifest__nadpis::before,
.manifest__nadpis::after {
  content: "";
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: rgba(176, 138, 69, 0.5);
}

.manifest__tytul {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.16;
}

/* oba zdania w jednej linii każde, centrowane względem tej samej osi;
   limit szerokości trzyma je nad sobą, gdy okno jest szerokie */
.manifest__tytul span {
  display: block;
  max-width: 26ch;
  margin: 0 auto;
}

.manifest__tytul em {
  display: block;
  font-style: italic;
  color: var(--zloto);
}

.manifest__tekst {
  margin: clamp(26px, 3vw, 40px) auto 0;
  max-width: 58ch;
  font-size: clamp(14px, 1.08vw, 16px);
  line-height: 1.92;
  color: var(--szary);
  font-weight: 300;
}

/* ═════════════════════════════════════════════
   Cztery strefy
   ═════════════════════════════════════════════ */

.strefy-siatka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow-x: clip;
}

.strefa {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #FFFCF4;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.45s ease;
}

/* powiększenie o 15% po najechaniu — kafel wysuwa się przed sąsiednie */
@media (hover: hover) {
  .strefa:hover {
    transform: scale(1.15);
    z-index: 3;
    box-shadow: 0 16px 44px rgba(14, 11, 8, 0.34);
  }

  /* skrajne kafle rosną do środka, inaczej krawędź ekranu ucina im napisy */
  .strefa:first-child { transform-origin: left center; }
  .strefa:last-child  { transform-origin: right center; }
}

.strefa__foto {
  width: 100%;
  height: clamp(280px, 23vw, 340px);
  object-fit: cover;
  display: block;
}

.strefa__tresc {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 30px) clamp(22px, 2.2vw, 30px);
}

.strefa__nadpis {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 252, 244, 0.72);
}

.strefa__nazwa {
  margin: 0;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1;
}

.strefa__opis {
  margin: 0;
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.72;
  color: rgba(255, 252, 244, 0.92);
  font-weight: 300;
  flex-grow: 1;
}

.strefa__link {
  font-size: 17px;
  line-height: 1;
  opacity: 0.85;
  transition: transform 0.25s ease, opacity 0.25s ease;
  align-self: flex-start;
}
.strefa:hover .strefa__link { transform: translateX(5px); opacity: 1; }

.strefa--zolta     { background: var(--zolty-blok); }
.strefa--zielona   { background: var(--zielony-blok); }
.strefa--niebieska { background: var(--niebieski-blok); }
.strefa--czerwona  { background: var(--czerwony-blok); }

/* Kafel Integracji ma zdjęcie pionowe, a pole jest prawie kwadratowe —
   filiżanka siedzi w dolnych dwóch trzecich kadru, więc przesuwamy
   kadrowanie w dół, żeby nie została ucięta. Dotyczy wyłącznie kafla
   na stronie głównej; podstrona strefy ma własne zdjęcie. */
.strefa--czerwona .strefa__foto {
  object-position: 50% 62%;
}


/* na wąskich ekranach opisy stref wyśrodkowane i o 2 px większe */
@media (max-width: 860px) {
  .strefa__tresc {
    text-align: center;
    align-items: center;
  }

  .strefa__opis {
    font-size: 16.5px;
  }

  .strefa__link {
    align-self: center;
  }

  /* Na telefonie pole kafla jest szersze i niższe, więc ze zdjęcia widać
     jeszcze mniejszy pas — przy 62% ucinało spód filiżanki. */
  .strefa--czerwona .strefa__foto {
    object-position: 50% 72%;
  }
}

/* ═════════════════════════════════════════════
   Najbliższe warsztaty
   ═════════════════════════════════════════════ */

.warsztaty {
  background: var(--krem);
  color: var(--tusz);
  padding: clamp(60px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
}

.warsztaty__glowa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(34px, 3.8vw, 52px);
}

.warsztaty__blok {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
}

.warsztaty__tytul {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.06;
  color: var(--tusz);
}

.warsztaty__lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.86;
  color: var(--szary);
  font-weight: 300;
}

.warsztaty__wiecej {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--szary);
  white-space: nowrap;
}
.warsztaty__wiecej:hover { color: var(--zloto); }

.warsztaty__siatka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.karta {
  display: flex;
  flex-direction: column;
  background: #FDFBF6;
  border: 1px solid var(--linia);
  padding: 10px 10px 20px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.karta:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(35, 40, 47, 0.10); }

/* po najechaniu data rośnie, kotwiczona w rogu zdjęcia */
.karta:hover .karta__data {
  transform: scale(1.28);
  box-shadow: 0 6px 18px rgba(20, 16, 12, 0.28);
}
.karta:hover .karta__nazwa,
.karta:hover .karta__osoba,
.karta:hover .karta__cena { color: #000000; }
.karta:hover .karta__rezerwuj { background: #000000; color: var(--krem); }

/* ramka karty w kolorze strefy — ten sam kolor co plakietka z datą */
.karta--zolta     { border-color: var(--zolty-blok); }
.karta--zielona   { border-color: var(--zielony-blok); }
.karta--niebieska { border-color: var(--niebieski-blok); }
.karta--czerwona  { border-color: var(--czerwony-blok); }

.karta__obraz {
  position: relative;
  margin-bottom: 18px;
}

/* Grafiki wydarzeń pochodzą z Fitssey i mają różne proporcje — 1,91 : 1,5 : 1.
   To plakaty z tekstem, więc kadrowanie ucinałoby tytuły. Pokazujemy je
   w całości na ciemnym podkładzie; nadmiar czyta się jak passe-partout. */
.karta__foto {
  width: 100%;
  height: clamp(190px, 15.5vw, 224px);
  object-fit: contain;
  background: #14100C;
  display: block;
}

.karta__data {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1),
              box-shadow 0.32s ease;
  width: 44px;
  padding: 7px 0 6px;
  text-align: center;
  color: #FFFCF4;
  line-height: 1;
}
.karta__dzien { display: block; font-size: 17px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .karta, .karta__data, .karta__rezerwuj { transition: none; }
}
.karta__mies  { display: block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px; opacity: 0.88; }

.karta__data--zolta     { background: var(--zolty-blok); }
.karta__data--zielona   { background: var(--zielony-blok); }
.karta__data--niebieska { background: var(--niebieski-blok); }
.karta__data--czerwona  { background: var(--czerwony-blok); }

.karta__tresc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px;
  flex-grow: 1;
}

.karta__nazwa {
  margin: 0;
  color: #000000;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.24;
}

.karta__osoba {
  font-size: 12.5px;
  color: #000000;
  font-weight: 300;
}

.karta__miejsca {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--zloto);
}
.karta__miejsca--brak { color: var(--czerwony-blok); }

.karta__stopa {
  /* auto dosuwa stopkę do dołu — karty mają różną liczbę wierszy
     (tytuł na dwie linie, opcjonalna informacja o miejscach),
     a przyciski mają stać w jednej linii */
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.karta__cena {
  font-size: 14px;
  color: #000000;
}

.karta__rezerwuj {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--krem);
  background: var(--tusz);
  padding: 13px 22px;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

/* ═════════════════════════════════════════════
   Pas zdjęć
   ═════════════════════════════════════════════ */

/* Jeden rząd pięciu kadrów. Karta jest węższa niż zdjęcie, więc kadr
   przycina boki — punkt kadru każdego zdjęcia ustawia object-position w HTML. */
.pas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #14100C;
}

.pas__kadr {
  margin: 0;
  perspective: 1400px;
}

.pas__obrot {
  position: relative;
  width: 100%;
  height: clamp(170px, 18vw, 260px);
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pas__przod,
.pas__tyl {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.pas__przod img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* rewers — hasło wyśrodkowane w obu osiach */
.pas__tyl {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 30px);
  background: #1B1710;
}

.pas__haslo {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 22px);
  line-height: 1.3;
  color: #FBF6EC;
  text-align: center;
  text-wrap: balance;
}

.pas__haslo::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: clamp(10px, 1.2vw, 16px) auto 0;
  background: rgba(201, 164, 106, 0.7);
}

/* obrót tylko tam, gdzie jest myszka */
@media (hover: hover) {
  .pas__kadr:hover .pas__obrot { transform: rotateY(180deg); }
}

/* dotyk — kadr obraca się po kliknięciu */
@media (hover: none) {
  .pas__kadr { cursor: pointer; }
  .pas__kadr.odkryte .pas__obrot { transform: rotateY(180deg); }
}

/* ograniczony ruch — zamiast obrotu spokojne przenikanie */
@media (prefers-reduced-motion: reduce) {
  .strefa, .strefa:hover { transform: none; transition: none; }
  .pas-strzalka { animation: none; }
  .pas__obrot { transform-style: flat; transition: none; }
  .pas__kadr:hover .pas__obrot,
  .pas__kadr.odkryte .pas__obrot { transform: none; }
  .pas__tyl {
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .pas__kadr:hover .pas__tyl,
  .pas__kadr.odkryte .pas__tyl { opacity: 1; }
}

.pas-owijka { position: relative; }

/* podpowiedź, że pas da się przesunąć — tylko tam, gdzie się przesuwa */
.pas-strzalka { display: none; }

@keyframes pas-mrug {
  0%, 100% { transform: translate(0, -50%); }
  50%      { transform: translate(5px, -50%); }
}

/* wąskie ekrany — pas przewijany w poziomie, wszystkie kadry */
@media (max-width: 860px) {
  .pas {
    display: flex;
    grid-template-columns: none;
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding: 0 16px;
  }
  .pas::-webkit-scrollbar { display: none; }

  .pas__kadr {
    flex: 0 0 76%;
    scroll-snap-align: center;
  }

  .pas__obrot { height: clamp(240px, 64vw, 340px); }

  .pas__haslo { font-size: clamp(17px, 4.6vw, 22px); }

  .pas-strzalka {
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
    color: rgba(251, 246, 236, 0.92);
    filter: drop-shadow(0 1px 7px rgba(8, 5, 3, 0.85));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;
    animation: pas-mrug 2.6s ease-in-out infinite;
  }

  /* po pierwszym przesunięciu podpowiedź znika */
  .pas-owijka.przewiniete .pas-strzalka {
    opacity: 0;
    animation: none;
  }
}

/* widget Fitssey — obca ramka, więc tylko odstęp wokół niej */
.widget-fitssey {
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* ═════════════════════════════════════════════
   Stopka
   ═════════════════════════════════════════════ */

.stopka {
  background: var(--krem);
  color: var(--tusz);
  padding: clamp(56px, 6.5vw, 88px) 0 clamp(32px, 4vw, 48px);
}

.stopka__siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: center;
  gap: clamp(36px, 6vw, 96px);
  text-align: center;
}

.stopka__znak {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
}
.stopka__znak span {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stopka__dane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--szary);
  font-weight: 300;
}
.stopka__dane a:hover { color: var(--zloto); }

.stopka__spol {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.stopka__spol a {
  width: 30px;
  height: 30px;
  border: 1px solid var(--linia);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--szary);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.stopka__spol a:hover { border-color: var(--zloto); color: var(--zloto); }

.stopka__kol h3 {
  margin: 0 0 18px;
  font-family: Jost, sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--szary);
}

.stopka__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13.5px;
  color: var(--szary);
  font-weight: 300;
}
.stopka__lista li { display: flex; justify-content: center; gap: 10px; }
.stopka__lista li span:last-child { white-space: nowrap; }

/* formularz */

.formularz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.formularz textarea,
.formularz .formularz__stopa { grid-column: 1 / -1; }

.formularz input,
.formularz textarea {
  width: 100%;
  font: inherit;
  font-size: 13px;
  font-weight: 300;
  color: var(--tusz);
  background: #FDFBF6;
  border: 1px solid var(--linia);
  padding: 11px 13px;
  border-radius: 0;
}
.formularz textarea { min-height: 78px; resize: vertical; }
.formularz input::placeholder,
.formularz textarea::placeholder { color: #A8A197; }
.formularz input:focus,
.formularz textarea:focus { outline: 1px solid var(--zloto); border-color: var(--zloto); }

.formularz button {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tusz);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.formularz button:hover { color: var(--zloto); }

/* ═════════════════════════════════════════════
   Małe ekrany
   ═════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .strefy-siatka,
  .warsztaty__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stopka__siatka    { grid-template-columns: repeat(2, minmax(0, auto)); }
}

@media (max-width: 640px) {
  .strefy-siatka,
  .warsztaty__siatka { grid-template-columns: 1fr; }
  .stopka__siatka    { grid-template-columns: 1fr; }
  .warsztaty__glowa { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ═════════════════════════════════════════════
   Pasek nawigacji na podstronach (jasne tło)
   ═════════════════════════════════════════════ */

.pasek {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--krem);
  border-bottom: 1px solid var(--linia);
}

.pasek .nawigacja {
  height: 86px;
  padding: 0 var(--marg);
  max-width: var(--kontener);
  margin: 0 auto;
}

.pasek .przycisk-zapis:hover {
  background: var(--tusz);
  color: var(--krem);
}

.pasek .menu a:hover { color: var(--zloto); }

/* ═════════════════════════════════════════════
   Nagłówek podstrony
   ═════════════════════════════════════════════ */

/* powrót na stronę główną — zerowa wysokość, żeby nie przesuwać nagłówków podstron */
.powrot {
  position: relative;
  height: 0;
  z-index: 2;
}

.powrot__link {
  position: absolute;
  top: clamp(12px, 2.4vw, 30px);
  left: var(--marg);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--szary);
  opacity: 0.75;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.powrot__strzalka {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0;
  transition: transform 0.25s ease;
}

.powrot__link:hover,
.powrot__link:focus-visible {
  color: var(--tusz);
  opacity: 1;
}

.powrot__link:hover .powrot__strzalka { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
  .powrot__strzalka { transition: none; }
}

.naglowek-strony {
  padding: clamp(56px, 7vw, 96px) 0 clamp(36px, 4.5vw, 60px);
  text-align: center;
}

.naglowek-strony__tytul {
  margin: 18px 0 0;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.04;
}

.naglowek-strony__lead {
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  max-width: 54ch;
  font-size: clamp(14px, 1.08vw, 16.5px);
  line-height: 1.86;
  color: var(--szary);
  font-weight: 300;
}

/* ═════════════════════════════════════════════
   Lista wszystkich warsztatów
   ═════════════════════════════════════════════ */

.lista-warsztatow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  padding-bottom: clamp(64px, 8vw, 110px);
}

.lista-uwaga {
  max-width: var(--kontener);
  margin: 0 auto clamp(48px, 6vw, 80px);
  padding: 22px var(--marg);
  border-top: 1px solid var(--linia);
  font-size: 13px;
  line-height: 1.7;
  color: var(--szary);
  font-weight: 300;
  text-align: center;
}

@media (max-width: 1080px) {
  .lista-warsztatow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lista-warsztatow { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════
   Współpraca — dwa modele
   ═════════════════════════════════════════════ */

.wspolpraca {
  background: var(--krem);
  color: var(--tusz);
  padding: clamp(72px, 8.5vw, 118px) 0 clamp(76px, 9vw, 124px);
}

.wspolpraca__glowa {
  text-align: center;
  margin-bottom: clamp(44px, 5.5vw, 76px);
}

.wspolpraca__tytul {
  margin: 18px 0 0;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.08;
}

.wspolpraca__lead {
  margin: clamp(18px, 2.2vw, 26px) auto 0;
  max-width: 52ch;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.86;
  color: var(--szary);
  font-weight: 300;
}

.wspolpraca__siatka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 2.6vw, 36px);
}

.model {
  display: flex;
  flex-direction: column;
  background: #FDFBF6;
  border: 1px solid var(--linia);
  padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3vw, 42px) clamp(28px, 3.2vw, 42px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.model:hover {
  border-color: rgba(176, 138, 69, 0.55);
  box-shadow: 0 10px 28px rgba(35, 40, 47, 0.07);
}

.model__pasek {
  width: 46px;
  height: 3px;
  margin-bottom: 22px;
}
.model--warsztaty .model__pasek { background: var(--zolty-blok); }
.model--wynajem   .model__pasek { background: var(--niebieski-blok); }

.model__nadpis {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--szary);
}

.model__tytul {
  margin: 12px 0 0;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
}

.model__dla {
  margin: 14px 0 0;
  font-size: clamp(14px, 1.06vw, 15.5px);
  line-height: 1.76;
  color: var(--szary);
  font-weight: 300;
}

.model__lista {
  margin: clamp(24px, 2.8vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.model__lista li { border-top: 1px solid var(--linia); }
.model__lista li:last-child { border-bottom: 1px solid var(--linia); }

.model__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  font-size: clamp(13.5px, 1.04vw, 15px);
  color: var(--tusz);
}
.model__lista a span {
  display: inline-block;
  color: var(--zloto);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.model__lista a:hover { color: var(--zloto); }
.model__lista a:hover span { transform: translateX(5px); }

.model__cta {
  margin-top: clamp(26px, 3vw, 36px);
  align-self: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 15px 28px;
  color: var(--krem);
  background: var(--tusz);
  transition: background-color 0.25s ease;
}
.model__cta:hover { background: #000000; color: var(--krem); }

@media (max-width: 860px) {
  .wspolpraca__siatka { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .model, .model__lista a span { transition: none; }
}

/* ═════════════════════════════════════════════
   Odsłanianie stref przy przewijaniu (mobile)
   ═════════════════════════════════════════════ */

@media (max-width: 860px) {
  .js-anim .strefa { overflow: hidden; }

  .js-anim .strefa__foto {
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 1.15s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .js-anim .strefa.widoczna .strefa__foto {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .strefa__foto {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* ═════════════════════════════════════════════
   Menu mobilne — przycisk, nakładka, przetaczanie liter
   ═════════════════════════════════════════════ */

/* Przycisk leży poza nagłówkiem i ponad nakładką — inaczej po otwarciu menu
   znika pod nią i nie ma czym zamknąć. Nagłówek ma isolation: isolate,
   więc z jego wnętrza żaden z-index by nad nakładkę nie wyszedł. */
.menu-przycisk {
  display: none;
  position: fixed;
  top: clamp(24px, 3.4vh, 34px);
  right: var(--marg);
  z-index: 50;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 6px;
  font: inherit;
  color: var(--tusz);
  cursor: pointer;
}

.menu-przycisk--jasny { color: var(--biel); }
.menu-przycisk[aria-expanded="true"] { color: var(--biel); }

/* Ikona menu: środkowa kreska gaśnie, skrajne obracają się o ∓45° wokół
   prawych narożników. Sprężyna z oryginału (stiffness 200, damping 20)
   ma tłumienie ~0,71, czyli przeregulowanie rzędu 4% — stąd łagodne
   przestrzelenie w krzywej i czas 0,42 s. */
.menu-przycisk__ikona {
  flex: 0 0 auto;
  overflow: visible;
}

.menu-przycisk__ikona line {
  transition: transform 0.42s cubic-bezier(0.22, 1.12, 0.4, 1),
              opacity 0.2s ease-in-out;
}

.menu-przycisk__l1 { transform-origin: 20px 6px; }
.menu-przycisk__l3 { transform-origin: 20px 18px; }

.menu-przycisk[aria-expanded="true"] .menu-przycisk__l1 {
  transform: translate(-2.35px, 0.35px) rotate(-45deg);
}
.menu-przycisk[aria-expanded="true"] .menu-przycisk__l2 {
  opacity: 0;
}
.menu-przycisk[aria-expanded="true"] .menu-przycisk__l3 {
  transform: translate(-2.35px, -0.35px) rotate(45deg);
}

.menu-przycisk__etykieta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ── nakładka ─────────────────────────────── */

.menu-mobilne {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #16120D;
  color: var(--biel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 52px);
  padding: clamp(84px, 12.5vh, 120px) var(--marg) clamp(30px, 4.5vh, 48px);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.menu-mobilne[hidden] { display: none; }
.menu-mobilne.otwarte { opacity: 1; }

.menu-mobilne__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vh, 26px);
}

.menu-mobilne__poz a {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(19px, 6vw, 31px);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--biel);
}

/* Koło Gospodyń Miejskich to podmarka, nie sekcja — stąd cieńsza linia
   nad pozycją i mniejszy stopień. Nazwa łamie się na dwa wiersze, każdy
   jest osobną rolką, bo przetaczanie liczy przesunięcie w wysokościach
   pojedynczego wiersza i przy zawijaniu by się rozjechało. */
.menu-mobilne__poz--kgm {
  margin-top: clamp(8px, 1.6vh, 16px);
  padding-top: clamp(14px, 2.4vh, 22px);
  border-top: 1px solid rgba(247, 243, 236, 0.16);
}

.menu-mobilne__poz--kgm a {
  font-size: clamp(13px, 4vw, 21px);
  color: rgba(247, 243, 236, 0.88);
}

/* Pomiędzy przestrzenią — oba wiersze i wstążka między nimi idą po tej samej
   sinusoidzie (wychylenia liter liczy main.js), więc fala biegnie w szczelinie
   między wyrazami i nie dotyka liter. Pozycja zwęża się do dłuższego wiersza,
   bo wstążka dostaje jego szerokość. */
.menu-mobilne__poz--pomiedzy a { display: inline-block; }

/* Zapas nad i pod wierszem na wychylenie liter — na obu warstwach, żeby
   absolutna warstwa dolna stała co do piksela pod górną. */
.menu-mobilne__poz--pomiedzy .rolka__warstwa { padding-block: 0.16em; }
.menu-mobilne__poz--pomiedzy .rolka i {
  position: relative;
  top: calc(var(--fala, 0) * 0.13em);
}

.menu-mobilne__poz--pomiedzy .menu__pomiedzy__fala {
  position: relative;
  display: block;
  left: 0;
  top: 0.11em;           /* nad falą jest ogonek Ę, pod nią tylko wersaliki —
                            bez tego przesunięcia przerwa wychodzi 10 px nad i 16 px pod */
  width: 100%;
  height: 0.5em;
  /* Ujemny margines zbliża wiersze, a sama wstążka zachowuje wysokość
     i wychylenie — dalej biegnie środkiem przerwy. */
  margin-block: -0.32em;
  transform: none;
}

/* Z wychyleniem i zapasem 130% już nie wystarcza — ogonki przetoczonej
   warstwy znów wchodziłyby w pole widzenia. */
.menu-mobilne__poz--pomiedzy .rolka__warstwa--dol i { transform: translateY(170%); }
.menu-mobilne.otwarte .menu-mobilne__poz--pomiedzy .rolka__warstwa--gora i { transform: translateY(-170%); }
.menu-mobilne.otwarte .menu-mobilne__poz--pomiedzy .rolka__warstwa--dol i { transform: translateY(0); }

/* ── przetaczanie liter ───────────────────── */

.rolka {
  position: relative;
  display: block;
  overflow: hidden;
  /* oryginał ma 0.85, ale przy tej wartości Cormorant gubi kreski nad Ż, Ń, Ó
     i ogon J — pudełko musi pomieścić znaki diakrytyczne */
  line-height: 1.16;
}

.rolka__warstwa { display: block; }
.rolka__warstwa--dol { position: absolute; inset: 0; }

.rolka i {
  display: inline-block;
  font-style: inherit;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Przesunięcie o 130%, nie 100%: ogonki Ę i Ą wystają poza pudełko litery,
   więc po przetoczeniu o równą wysokość zostawały nad wierszem jako kreski. */
.rolka__warstwa--gora i { transform: translateY(0); }
.rolka__warstwa--dol  i { transform: translateY(130%); }

.menu-mobilne.otwarte .rolka__warstwa--gora i { transform: translateY(-130%); }
.menu-mobilne.otwarte .rolka__warstwa--dol  i { transform: translateY(0); }

/* ── stopka nakładki ──────────────────────── */

.menu-mobilne__stopka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 3vh, 28px);
  padding-top: clamp(22px, 4vh, 34px);
  border-top: 1px solid rgba(247, 243, 236, 0.16);
}

.menu-mobilne__zapis {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: #16120D;
  background: var(--biel);
  padding: 15px 30px;
}

.menu-mobilne__kropki { display: flex; gap: 9px; }

.menu-mobilne__tel {
  font-size: 15px;
  color: rgba(247, 243, 236, 0.78);
}

/* osiem pozycji (w tym dwie dwuwierszowe) przestaje się mieścić w pasku
   poniżej ~1080 px — wtedy zamiast ściśniętego menu jest nakładka */
@media (max-width: 1080px) {
  .menu { display: none; }
  .menu-przycisk { display: flex; }
}

@media (max-width: 860px) {
  /* przy 375 px sygnet, pełna nazwa i słowo „Menu" nie mieszczą się w jednym
     rzędzie — zostają same kreski, a znak lekko się zwęża */
  .menu-przycisk__etykieta { display: none; }
  .nawigacja { gap: 14px; }
}

@media (min-width: 1081px) {
  .menu-mobilne { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rolka i,
  .menu-przycisk__ikona line,
  .menu-mobilne { transition: none; }
}

/* ═════════════════════════════════════════════
   Podstrona strefy
   Kolor bierze się z --akcent, więc ten sam arkusz obsłuży
   pozostałe trzy strefy — wystarczy modyfikator na <main>.
   ═════════════════════════════════════════════ */

.strefa-strona--zolta     { --akcent: var(--zolty-blok);     --akcent-jasny: var(--zolty); }
.strefa-strona--zielona   { --akcent: var(--zielony-blok);   --akcent-jasny: var(--zielony); }
.strefa-strona--niebieska { --akcent: var(--niebieski-blok); --akcent-jasny: var(--niebieski); }
.strefa-strona--czerwona  { --akcent: var(--czerwony-blok);  --akcent-jasny: var(--czerwony); }
/* „O Stajni" nie należy do żadnej strefy, więc akcent bierze złoto marki. */
.strefa-strona--stajnia   { --akcent: var(--zloto);          --akcent-jasny: var(--zolty); }

.strefa-strona__podtytul {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-size: clamp(13px, 1.02vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--szary);
}

/* Kadr wprowadzający — pełna szerokość okna, bez marginesu kontenera.
   Proporcja pilnowana wysokością, bo zdjęcia stref mają różne kadry. */
.strefa-kadr {
  margin: 0;
  height: clamp(260px, 42vw, 560px);
  overflow: hidden;
}
/* Pionowe zdjęcia stref przycinają się w tym pasie do wąskiej wstęgi i punkt
   ciężkości kadru bywa wyżej niż środek — stąd --kadr-y ustawiane przy zdjęciu. */
.strefa-kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--kadr-y, 50%);
  display: block;
}

/* Wariant bez przycinania — wysokość idzie za proporcją pliku zamiast za stałym
   pasem. Używają go pasy czterech przestrzeni i zdjęcia z własnym marginesem
   graficznym: przy stałej wysokości pas pokazywał na telefonie ledwie 38%
   szerokości zdjęcia, ucinając to, co dzieje się po bokach. */
.strefa-kadr--calosc { height: auto; }
.strefa-kadr--calosc img { height: auto; object-fit: fill; }

.strefa-wstep {
  padding: clamp(56px, 7vw, 96px) 0 clamp(16px, 2vw, 28px);
}

.strefa-wstep__tresc {
  max-width: 72ch;
  text-align: center;
}
.strefa-wstep__tresc p {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.9;
  color: var(--szary);
  font-weight: 300;
}
.strefa-wstep__tresc p:last-child { margin-bottom: 0; }

/* Wstęp ze zdjęciem — tekst obok pionowego kadru. Osobny modyfikator, bo
   pozostałe trzy strefy mają wstęp jako wyśrodkowany łam i mają taki zostać. */
.strefa-wstep--z-foto .strefa-wstep__siatka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
/* Wyśrodkowanie działa na pełnym łamie; w połowie szerokości rwie rytm
   czytania, więc obok zdjęcia tekst wraca do lewej. */
.strefa-wstep--z-foto .strefa-wstep__tresc {
  max-width: none;
  text-align: left;
}

.strefa-wstep__foto { margin: 0; }
.strefa-wstep__foto img {
  width: 100%;
  height: clamp(420px, 50vw, 700px);
  object-fit: cover;
  border-radius: var(--zaokr);
  display: block;
}

/* ── blok: treść obok zdjęcia ───────────────── */

.strefa-blok { padding: clamp(48px, 6vw, 84px) 0; }

.strefa-blok__siatka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}

/* Odwrócenie kolejności zamiast drugiej definicji siatki — kolejność
   w HTML-u zostaje logiczna, więc czytnik ekranu dostaje tekst przed zdjęciem. */
.strefa-blok--odwrocony .strefa-blok__tresc { order: 2; }

.strefa-blok__tytul {
  margin: 16px 0 0;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.1;
}

.strefa-blok__tresc p {
  margin: clamp(18px, 2vw, 24px) 0 0;
  font-size: clamp(14px, 1.08vw, 16px);
  line-height: 1.86;
  color: var(--szary);
  font-weight: 300;
}

.strefa-blok__foto { margin: 0; }
.strefa-blok__foto img {
  width: 100%;
  height: clamp(300px, 34vw, 480px);
  object-fit: cover;
  display: block;
}

/* ── zbiorcza strona „Przestrzenie" ───────────── */

/* Kotwice stref przewijają płynnie tylko tutaj — na innych stronach
   odnośniki wewnętrzne mają skakać jak dotąd. */
:root:has(.przestrzenie) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { :root:has(.przestrzenie) { scroll-behavior: auto; } }

.przestrzenie-hero { padding: clamp(48px, 6vw, 90px) 0 clamp(64px, 8vw, 120px); overflow: hidden; }

.przestrzenie-hero__siatka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.przestrzenie-hero__tytul {
  margin: 18px 0 clamp(18px, 2vw, 26px);
  font-size: clamp(56px, 8.2vw, 124px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--tusz);
}

.przestrzenie-hero__lead {
  margin: 0 0 clamp(30px, 3.4vw, 44px);
  max-width: 44ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.75;
  color: var(--szary);
  font-weight: 300;
}

.potrzeby__pytanie {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 2vw, 28px);
  font-style: italic;
  color: var(--tusz);
}

.potrzeby {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.potrzeby__opcja {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  border: 1px solid var(--linia);
  border-radius: 999px;
  background: #FDFBF6;
  font-size: clamp(13.5px, 1vw, 15px);
  font-weight: 400;
  color: var(--tusz);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.potrzeby__opcja::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kolor);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.potrzeby__opcja:hover { border-color: var(--kolor); color: var(--tusz); }
.potrzeby__opcja:hover::before { transform: scale(1.5); }

.potrzeby__opcja--czerwona,  .kregi__kolo--czerwona  { --kolor: var(--czerwony); }
.potrzeby__opcja--niebieska, .kregi__kolo--niebieska { --kolor: var(--niebieski); }
.potrzeby__opcja--zielona,   .kregi__kolo--zielona   { --kolor: var(--zielony); }
.potrzeby__opcja--zolta,     .kregi__kolo--zolta     { --kolor: var(--zolty); }

/* Cztery koła przenikają się pośrodku — kropki z logo powiększone do
   metafory „jednego miejsca". Mnożenie kolorów robi z nakładek ciemniejsze
   pola bez rysowania ich osobno. */
.kregi {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1;
  margin-inline: auto;
  isolation: isolate;
}

.kregi__kolo {
  --dx: 0;
  --dy: 0;
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--kolor);
  opacity: 0.92;
  mix-blend-mode: multiply;
  display: flex;
  padding: 15%;
  color: #FFFDF8;
  animation: kregi-oddech 7s ease-in-out infinite alternate;
  transition: scale 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.kregi__kolo:hover { scale: 1.05; color: #FFFDF8; }

.kregi__kolo--czerwona  { top: 0;    left: 0;  --dx: -1; --dy: -1; align-items: flex-start; justify-content: flex-start; }
.kregi__kolo--niebieska { top: 0;    right: 0; --dx: 1;  --dy: -1; align-items: flex-start; justify-content: flex-end;   animation-delay: -1.8s; }
.kregi__kolo--zielona   { bottom: 0; left: 0;  --dx: -1; --dy: 1;  align-items: flex-end;   justify-content: flex-start; animation-delay: -3.6s; }
.kregi__kolo--zolta     { bottom: 0; right: 0; --dx: 1;  --dy: 1;  align-items: flex-end;   justify-content: flex-end;   animation-delay: -5.4s; color: var(--tusz); }
.kregi__kolo--zolta:hover { color: var(--tusz); }

.kregi__nazwa {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(17px, 1.9vw, 27px);
  line-height: 1.1;
}

@keyframes kregi-oddech {
  to { translate: calc(var(--dx) * 2.2%) calc(var(--dy) * 2.2%); }
}

/* ── rozdziały stref ── */

.rozdzial {
  position: relative;
  padding: clamp(80px, 10vw, 150px) 0;
  background: var(--tlo);
  color: var(--tekst);
  overflow: hidden;
  scroll-margin-top: 86px;
}
/* Kremowy tekst na żółtym ma za mały kontrast — ta strefa pisze tuszem. */
.rozdzial--czerwona  { --tlo: var(--czerwony-blok);  --tekst: #FBF7EF; }
.rozdzial--niebieska { --tlo: var(--niebieski-blok); --tekst: #FBF7EF; }
.rozdzial--zielona   { --tlo: var(--zielony-blok);   --tekst: #FBF7EF; }
.rozdzial--zolta     { --tlo: var(--zolty-blok);     --tekst: var(--tusz); }

.rozdzial__siatka {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.rozdzial--odwrocony .rozdzial__tresc { order: 2; }

.rozdzial__tresc { position: relative; z-index: 1; }

.rozdzial__numer {
  position: absolute;
  z-index: -1;
  top: -0.36em;
  left: -0.06em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(150px, 21vw, 320px);
  line-height: 1;
  font-weight: 300;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
}

.rozdzial__strefa {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.8;
}

.rozdzial__nazwa {
  margin: 12px 0 10px;
  font-size: clamp(52px, 6.6vw, 104px);
  line-height: 0.98;
  font-weight: 400;
}

.rozdzial__haslo {
  margin: 0 0 clamp(24px, 2.6vw, 34px);
  font-size: clamp(11px, 0.92vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}

.rozdzial__lead {
  margin: 0 0 clamp(26px, 3vw, 38px);
  max-width: 46ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.75;
  font-weight: 300;
}

.rozdzial__fakty {
  margin: 0 0 clamp(22px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: start;
  gap: 0 clamp(28px, 4vw, 56px);
}
.rozdzial__fakty div { border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding-top: 12px; }
.rozdzial__fakty dt {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}
.rozdzial__fakty dd {
  margin: 6px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
}

.rozdzial__cechy {
  margin: 0 0 clamp(28px, 3vw, 40px);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rozdzial__cechy li {
  padding: 8px 15px;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 300;
}

.rozdzial__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tekst);
}
.rozdzial__cta:hover { color: var(--tekst); }
.rozdzial__cta span { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); }
.rozdzial__cta:hover span { transform: translateX(6px); }

/* Kolaż: pionowe zdjęcie główne i mniejsze poziome nachodzące na jego róg.
   Ramka drugiego ma kolor tła rozdziału, więc wygląda jak wycięte z koloru. */
.rozdzial__kolaz { position: relative; padding-bottom: 16%; }

.rozdzial__foto { margin: 0; }
.rozdzial__foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--zaokr); }

.rozdzial__foto--glowne {
  width: 74%;
  aspect-ratio: 4 / 5;
  margin-left: auto;
}
.rozdzial__foto--drugie {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 5 / 4;
  border: clamp(6px, 0.8vw, 10px) solid var(--tlo);
  border-radius: calc(var(--zaokr) + 6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.rozdzial--odwrocony .rozdzial__foto--glowne { margin-left: 0; margin-right: auto; }
.rozdzial--odwrocony .rozdzial__foto--drugie { left: auto; right: 0; }

/* ── nawigator stref ── */

.nawigator {
  position: fixed;
  z-index: 25;
  left: 50%;
  bottom: clamp(14px, 2.4vh, 24px);
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(24, 22, 19, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  translate: -50% 160%;
  visibility: hidden;
  transition: translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.5s;
}
.nawigator.widoczny {
  translate: -50% 0;
  visibility: visible;
  transition: translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

.nawigator a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 247, 239, 0.62);
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nawigator a:hover { color: #FBF7EF; }
.nawigator a.aktywny { background: rgba(251, 247, 239, 0.12); color: #FBF7EF; }
.nawigator .kropka { transition: transform 0.3s ease; }
.nawigator a.aktywny .kropka { transform: scale(1.35); }

/* ── korytarz między strefami a wynajmem ── */

.korytarz { padding: clamp(70px, 9vw, 130px) 0 clamp(40px, 5vw, 70px); text-align: center; }
.korytarz__fala { display: block; width: 100%; height: clamp(34px, 5vw, 64px); margin-bottom: clamp(28px, 3.4vw, 44px); }
.korytarz__fala path { fill: none; stroke: var(--tusz); stroke-width: 1; opacity: 0.45; vector-effect: non-scaling-stroke; }
.korytarz__tytul {
  max-width: 22ch;
  margin: 14px auto 22px;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.12;
  color: var(--tusz);
}

/* ── wynajem ── */

.wynajem-pas { padding: clamp(40px, 5vw, 70px) 0 clamp(80px, 10vw, 140px); }
.wynajem-pas__siatka {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px 60px;
  padding-top: clamp(34px, 4vw, 50px);
  border-top: 1px solid var(--linia);
}
.wynajem-pas__tytul { margin: 12px 0 10px; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; }
.wynajem-pas__opis { margin: 0; max-width: 46ch; color: var(--szary); font-weight: 300; line-height: 1.7; }
.wynajem-pas__linki { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.wynajem-pas__przycisk {
  display: inline-block;
  padding: 16px 28px;
  background: var(--tusz);
  color: var(--krem);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background-color 0.25s ease;
}
.wynajem-pas__przycisk:hover { background: var(--zloto); color: var(--krem); }
.wynajem-pas__linki .strefa-cta { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .kregi__kolo { animation: none; }
}

@media (max-width: 860px) {
  .przestrzenie-hero__siatka,
  .rozdzial__siatka { grid-template-columns: 1fr; }
  .rozdzial--odwrocony .rozdzial__tresc { order: 0; }
  .kregi { width: min(88%, 380px); }
  .rozdzial__kolaz { width: min(100%, 520px); }
}

@media (max-width: 640px) {
  .nawigator a { padding: 9px 11px; }
  .nawigator a:not(.aktywny) .nawigator__nazwa { display: none; }
  .rozdzial__fakty { grid-template-columns: 1fr; gap: 14px; }
}

/* ── kontakt ─────────────────────────────────── */

.kontakt { padding: clamp(20px, 2.6vw, 36px) 0 clamp(64px, 8vw, 110px); }

.kontakt__siatka {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}

.kontakt__lead {
  margin: 0 0 clamp(24px, 2.8vw, 36px);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.2;
  color: var(--tusz);
  font-weight: 400;
}

.kontakt__grupa { padding: 18px 0; border-top: 1px solid var(--linia); }
.kontakt__grupa:last-child { border-bottom: 1px solid var(--linia); }

.kontakt__etykieta {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--zloto);
}

.kontakt__wartosc {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--tusz);
  font-weight: 300;
}
.kontakt__wartosc a:hover,
.kontakt__odnosnik:hover { color: var(--zloto); }

.kontakt__odnosnik {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tusz);
}

/* Odnośniki w środku zdania muszą wyglądać na klikalne — w listach
   kontaktowych rozpoznaje się je po samej treści (numer, adres), tu nie. */
.zdanie-z-linkami a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
}
.zdanie-z-linkami a:hover { color: var(--zloto); text-decoration-color: currentColor; }

/* Karta formularza — złota kreska u góry to ten sam akcent co pasek modeli
   współpracy, żeby formularz nie wyglądał na doklejony z innej strony. */
.kontakt__karta {
  background: #FDFBF6;
  border: 1px solid var(--linia);
  border-top: 3px solid var(--akcent);
  padding: clamp(26px, 3.4vw, 48px);
}
.kontakt__tytul {
  margin: 14px 0 8px;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.1;
}
.kontakt__opis {
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.7;
  color: var(--szary);
  font-weight: 300;
}

/* Komunikaty po wysłaniu bez JavaScriptu: funkcja przekierowuje na kotwicę,
   a :target ją pokazuje. Z JavaScriptem wynik trafia do pola statusu. */
.kontakt__komunikat { display: none; margin: 0 0 22px; padding: 14px 16px; font-size: 14.5px; line-height: 1.6; }
.kontakt__komunikat:target { display: block; }
.kontakt__komunikat--ok   { background: rgba(92, 107, 62, 0.10); color: var(--zielony-blok); }
.kontakt__komunikat--blad { background: rgba(168, 30, 53, 0.08); color: var(--czerwony-blok); }
.kontakt__komunikat a { text-decoration: underline; }

.kontakt-formularz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.kontakt-formularz__pole { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.kontakt-formularz__pole--szerokie { grid-column: 1 / -1; }

.kontakt-formularz__etykieta {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--szary);
}
.kontakt-formularz__etykieta small { letter-spacing: 0.06em; text-transform: none; font-weight: 300; font-size: 12px; }

.kontakt-formularz input[type="text"],
.kontakt-formularz input[type="email"],
.kontakt-formularz input[type="tel"],
.kontakt-formularz select,
.kontakt-formularz textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 300;
  color: var(--tusz);
  background: var(--krem);
  border: 1px solid var(--linia);
  border-radius: 0;
  padding: 13px 14px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kontakt-formularz textarea { min-height: 160px; resize: vertical; line-height: 1.6; }

/* Własna strzałka listy — systemowa różni się między przeglądarkami
   i znika po appearance: none. */
.kontakt-formularz select {
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23B08A45' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.kontakt-formularz input:focus,
.kontakt-formularz select:focus,
.kontakt-formularz textarea:focus {
  outline: none;
  border-color: var(--zloto);
  box-shadow: 0 0 0 3px rgba(176, 138, 69, 0.16);
}
.kontakt-formularz [aria-invalid="true"] { border-color: var(--czerwony-blok); }

.kontakt-formularz__blad { min-height: 0; font-size: 12.5px; color: var(--czerwony-blok); }
.kontakt-formularz__blad:empty { display: none; }

.kontakt-formularz__zgoda {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13px;
  line-height: 1.6;
  color: var(--szary);
  font-weight: 300;
  cursor: pointer;
}
.kontakt-formularz__zgoda input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--zloto);
  cursor: pointer;
}
.kontakt-formularz__zgoda + .kontakt-formularz__blad { grid-column: 1 / -1; margin-top: -10px; }

/* Pole-pułapka na boty — poza ekranem, a nie display: none, bo część
   botów pomija pola ukryte stylem. */
.kontakt-formularz__pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kontakt-formularz__stopa {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: 6px;
}
.kontakt-formularz__wyslij {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--krem);
  background: var(--tusz);
  border: 0;
  padding: 16px 30px;
  cursor: pointer;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}
.kontakt-formularz__wyslij:hover { background: var(--zloto); }
.kontakt-formularz__wyslij:disabled { opacity: 0.6; cursor: progress; }

.kontakt-formularz__status { margin: 0; font-size: 14px; line-height: 1.6; flex: 1 1 260px; }
.kontakt-formularz__status[data-stan="ok"]   { color: var(--zielony-blok); }
.kontakt-formularz__status[data-stan="blad"] { color: var(--czerwony-blok); }
.kontakt-formularz__status a { text-decoration: underline; }

@media (max-width: 860px) {
  .kontakt__siatka { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kontakt-formularz { grid-template-columns: 1fr; }
}

/* ── cztery światy na stronie „O Stajni" ────── */

/* Lista przestrzeni bez zdjęć — tutaj liczy się nazwa i jedno zdanie,
   kafle ze zdjęciami zostają na stronie głównej. */
.swiaty {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.8vw, 38px);
  margin: clamp(26px, 3vw, 38px) 0 clamp(26px, 3vw, 38px);
  padding: 0;
  list-style: none;
}

.swiaty li {
  border-top: 1px solid var(--linia);
  padding-top: clamp(14px, 1.6vw, 20px);
}

.swiaty__nazwa {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tusz);
}
.swiaty__nazwa .kropka { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); }
.swiaty__nazwa:hover .kropka { transform: scale(1.5); }

.swiaty__opis {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.08vw, 16.5px);
  line-height: 1.8;
  color: var(--szary);
  font-weight: 300;
}

@media (max-width: 640px) {
  .swiaty { grid-template-columns: 1fr; }
}

/* ── plakietki z przykładowymi warsztatami ──── */

.strefa-tagi {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.strefa-tagi li {
  border: 1px solid var(--linia);
  border-left: 2px solid var(--akcent);
  padding: 10px 16px;
  font-size: clamp(13px, 1.02vw, 14.5px);
  font-weight: 300;
  background: #FDFBF6;
}

.strefa-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(26px, 3vw, 36px);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--zloto);
}
.strefa-cta span { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); }
.strefa-cta:hover { color: var(--zloto); }
.strefa-cta:hover span { transform: translateX(5px); }

/* ── pasek z akcentem strefy ────────────────── */

.strefa-pasek {
  padding: clamp(44px, 5.5vw, 72px) 0;
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
}

.strefa-pasek__tresc {
  max-width: 68ch;
  border-left: 3px solid var(--akcent);
  padding-left: clamp(20px, 2.4vw, 32px);
}
.strefa-pasek__tresc p {
  margin: 14px 0 0;
  font-size: clamp(14px, 1.08vw, 16.5px);
  line-height: 1.86;
  color: var(--szary);
  font-weight: 300;
}

/* Wariant listy bez odnośników — pozycje są wyliczeniem wyposażenia,
   nie nawigacją, więc padding siedzi na <li> zamiast na <a>. */
.model__lista--proste li {
  padding: 15px 0;
  font-size: clamp(13.5px, 1.04vw, 15px);
  font-weight: 300;
  color: var(--szary);
}

@media (max-width: 860px) {
  .strefa-wstep--z-foto .strefa-wstep__siatka { grid-template-columns: 1fr; }
  .strefa-wstep--z-foto .strefa-wstep__tresc { text-align: center; }
  .strefa-blok__siatka { grid-template-columns: 1fr; }
  /* Na jednej kolumnie zdjęcie ma wracać pod tekst także w bloku
     odwróconym — inaczej dwa kadry stanęłyby jeden na drugim. */
  .strefa-blok--odwrocony .strefa-blok__tresc { order: 0; }
  .strefa-pasek__tresc { border-left-width: 2px; }
}

/* Karta bez listy wyposażenia ma tylko akapit, więc nic nie dopychało
   przycisku do dołu i stał wyżej niż w karcie obok. Rośnie akapit —
   w kartach z listą robi to nadal .model__lista. */
.strefa-strona .model:not(:has(.model__lista)) .model__dla { flex-grow: 1; }

/* Karty "Dla kogo" dziedziczą wygląd z dwóch modeli współpracy ze strony
   głównej, gdzie paski są żółty i niebieski. Na podstronie strefy taki
   zestaw czyta się jak pomyłka — kolor ma tu oznaczać strefę, nie model.
   Rozróżnienie kart niosą podpisy, więc drugiej wystarczy słabsze krycie. */
.strefa-strona .model--warsztaty .model__pasek { background: var(--akcent); }
.strefa-strona .model--wynajem   .model__pasek { background: var(--akcent); opacity: 0.45; }

/* Pasek z plakietkami nie potrzebuje pionowej kreski — każda plakietka ma już
   własną kreskę w kolorze strefy i akcent podwajał się. Wariant z akapitem
   (np. wyjście na zewnątrz w żółtej) kreskę zachowuje, bo tam jest jedynym
   akcentem. Bez kreski znika też jej wcięcie, więc plakietki wracają
   do lewej krawędzi wspólnej z resztą strony. */
.strefa-pasek__tresc:has(.strefa-tagi),
.strefa-pasek__tresc:has(.swiaty) {
  border-left: 0;
  padding-left: var(--marg);
  max-width: var(--kontener);
}

/* Zaokrąglenia zdjęć na podstronach stref. Jedna wartość, bo promień ma być
   wszędzie ten sam — przy różnych rogi czytają się jak niedopatrzenie.
   Kadr wprowadzający sięga krawędzi okna, więc zaokrąglamy mu tylko dolne
   rogi; górne i tak schodzą poza ekran, a zaokrąglone robiłyby wcięcia
   przy samej krawędzi monitora. */
.strefa-strona { --zaokr: 16px; }

.strefa-kadr {
  border-bottom-left-radius: var(--zaokr);
  border-bottom-right-radius: var(--zaokr);
}

.strefa-blok__foto img { border-radius: var(--zaokr); }

/* Blok bez zdjęcia — dla stref, w których brakuje jeszcze własnych kadrów.
   Jedna kolumna o szerokości czytelnego łamu; po dołożeniu zdjęcia
   wystarczy zdjąć modyfikator i wraca układ dwukolumnowy. */
.strefa-blok--bez-foto .strefa-blok__siatka { grid-template-columns: 1fr; }
.strefa-blok--bez-foto .strefa-blok__tresc { max-width: 72ch; }

/* Zdanie otwierające wstęp — krótkie i mocne, więc szeryfem i ciemniej
   niż reszta akapitów, żeby nie zlało się z opisem pod spodem. */
.strefa-wstep__tresc .strefa-wstep__lead {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.25;
  color: var(--tusz);
  font-weight: 400;
  margin-bottom: clamp(24px, 2.8vw, 34px);
}

/* ═════════════════════════════════════════════
   Tytuł przestrzeni — gradient w kolorze karty
   ═════════════════════════════════════════════ */

/* Pudełko musi obejmować sam napis, nie całą szerokość kontenera: gradient
   przycięty do liter liczy się od pudełka, więc na pełnej szerokości wyraz
   pokazywałby tylko wąski wycinek jego środka. Zapas po bokach jest potrzebny,
   bo krój szeryfowy wypuszcza glify poza szerokość znaku, a tekst widoczny
   wyłącznie przez tło gubi to, czego tło nie dosięga — content-box, bo arkusz
   ustawia globalnie border-box i zapas zjadłby miejsce na litery. */
.strefa-strona .naglowek-strony__tytul {
  color: var(--akcent);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  box-sizing: content-box;
  padding: 0 0.1em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .strefa-strona .naglowek-strony__tytul {
    background-image: linear-gradient(95deg,
      var(--akcent) 0%,
      var(--akcent-jasny) 50%,
      var(--akcent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Pytanie otwierające kartę modelu — krótkie, więc ciemniejsze i nieco
   większe od opisu pod nim, żeby czytało się jako zaczepka, nie jako
   pierwsze zdanie akapitu. */
.model__pytanie {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.16vw, 17.5px);
  line-height: 1.6;
  color: var(--tusz);
  font-weight: 400;
}

/* Wyliczenie adresatów zamyka kartę od dołu, oddzielone włosową kreską —
   to inny rodzaj treści niż opis, a nie zasługuje na osobny nagłówek. */
.model__adresat {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--linia);
  font-size: clamp(13px, 1.02vw, 14.5px);
  line-height: 1.8;
  color: var(--szary);
  font-weight: 300;
}

.model__adresat-etykieta {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--zloto);
}

/* Karta bez listy odnośników nie ma czym dopchnąć przycisku do dołu,
   więc rośnie wyliczenie adresatów — przyciski w obu kartach stają równo. */
.wspolpraca .model:not(:has(.model__lista)) .model__adresat { flex-grow: 1; }

/* ═════════════════════════════════════════════
   Odsłanianie bloków przy przewijaniu
   Element z data-odslon zaczyna przezroczysty i lekko obniżony, a klasę
   .widoczna dostaje z obserwatora w main.js. Opóźnienie przez --opoznienie
   ustawiane przy elemencie, żeby sąsiednie bloki wchodziły po kolei.
   Bez JS nie ma klasy js-anim, więc wszystko jest po prostu widoczne.
   ═════════════════════════════════════════════ */

.js-anim [data-odslon] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--opoznienie, 0s);
}
.js-anim [data-odslon].widoczna {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-odslon] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═════════════════════════════════════════════
   Zasady współpracy — podstrona
   ═════════════════════════════════════════════ */

.zasady-wstep { padding: clamp(24px, 3vw, 40px) 0 clamp(56px, 7vw, 96px); }

.zasady-wstep__tresc {
  max-width: 66ch;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.zasady-wstep__tresc p {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.9;
  color: var(--szary);
  font-weight: 300;
}
.zasady-wstep__tresc p:last-child { margin-bottom: 0; }

.zasady-sekcja { padding: clamp(44px, 5vw, 68px) 0; }

/* Cieplejszy pas z palety przerywa rytm długiej strony — dwie sekcje
   na tym samym kremie jedna pod drugą zlewałyby się w jeden ciąg. */
.zasady-sekcja--pas {
  background: var(--krem-ciep);
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
}

.zasady-glowa { margin-bottom: clamp(20px, 2.2vw, 30px); }

.zasady-wask > * { max-width: 72ch; }
.zasady-wask p {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  font-size: clamp(14px, 1.08vw, 16.5px);
  line-height: 1.88;
  color: var(--szary);
  font-weight: 300;
}
.zasady-wask p:last-child { margin-bottom: 0; }
.zasady-wask .strefa-tagi { margin-bottom: clamp(22px, 2.6vw, 30px); }

/* Wariant wyśrodkowany — sekcja otwierająca ciąg pod nagłówkiem strony ma stać
   w jego osi, a nie przy lewej krawędzi; łam zostaje wąski. Podwójna klasa, bo
   .zasady-wask p zeruje skrótem boczne marginesy i zwykłe auto by przegrało. */
.zasady-wask--srodek { text-align: center; }
.zasady-wask.zasady-wask--srodek > * { margin-left: auto; margin-right: auto; }
.zasady-wask--srodek .strefa-tagi { justify-content: center; }

/* Zakres .zasady-wask podnosi specyficzność ponad .zasady-wask p —
   bez tego etykieta przegrywała z regułą akapitu. */
.zasady-wask .zasady-etykieta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--zloto);
}

.zasady-puenta {
  max-width: 60ch;
  margin: clamp(40px, 5vw, 64px) auto 0;
  text-align: center;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.4;
  color: var(--tusz);
}

/* ── Ty / My — dwie strony umowy naprzeciw siebie ── */

.ty-my {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
}

.ty-my__strona {
  padding: clamp(28px, 3.4vw, 46px) clamp(24px, 3vw, 44px);
}
.ty-my__strona + .ty-my__strona { border-left: 1px solid var(--linia); }

.ty-my__kto {
  display: block;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  color: var(--zloto);
  font-style: italic;
  margin-bottom: clamp(10px, 1.2vw, 16px);
}

.ty-my__strona p {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-size: clamp(15px, 1.14vw, 17px);
  line-height: 1.8;
  color: var(--tusz);
  font-weight: 300;
}
.ty-my__strona p:last-child { margin-bottom: 0; }
.ty-my--pelny .ty-my__strona p { font-size: clamp(14px, 1.08vw, 16.5px); color: var(--szary); }
.ty-my--pelny .ty-my__strona p:first-of-type { color: var(--tusz); }

/* ── Co daje Stajnia — cztery karty ── */

.dary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}

.dary .dar {
  background: #FDFBF6;
  border: 1px solid var(--linia);
  padding: clamp(28px, 3.2vw, 44px) clamp(24px, 2.8vw, 40px);
  transition-property: border-color, box-shadow, opacity, transform;
  transition-duration: 0.25s, 0.25s, 0.9s, 1.1s;
  transition-timing-function: ease, ease,
    cubic-bezier(0.22, 0.61, 0.36, 1), cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0s, 0s, var(--opoznienie, 0s), var(--opoznienie, 0s);
}
.dar:hover {
  border-color: rgba(176, 138, 69, 0.55);
  box-shadow: 0 10px 28px rgba(35, 40, 47, 0.07);
}

.dar__nr {
  display: block;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  color: var(--zloto);
  letter-spacing: 0.08em;
}

.dar__tytul {
  margin: 12px 0 0;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1;
}

.dar p {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.84;
  color: var(--szary);
  font-weight: 300;
}

/* ── Jak to wygląda — oś pięciu kroków ── */

.kroki {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(64px, 8vw, 110px);
  max-width: 70ch;
}

/* Szyna rysuje się z góry na dół, gdy lista wjedzie w kadr; kroki wchodzą
   po niej z rosnącym opóźnieniem, więc oko idzie za linią. Sama lista jest
   elementem data-odslon tylko po to, żeby dostać .widoczna — jej własne
   krycie i przesunięcie wyzerowane, bo animować ma się szyna, nie kontener. */
.js-anim .kroki[data-odslon] { opacity: 1; transform: none; transition: none; }

.kroki::before {
  content: "";
  position: absolute;
  left: clamp(18px, 2.4vw, 30px);
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(176, 138, 69, 0.55);
  transform-origin: top;
  transform: scaleY(1);
}
.js-anim .kroki::before {
  transform: scaleY(0);
  transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}
.js-anim .kroki.widoczna::before { transform: scaleY(1); }

.krok {
  position: relative;
  padding: 0 0 clamp(28px, 3.2vw, 42px);
}

/* Schodkowe wejście kroków tylko tam, gdzie cała lista mieści się w kadrze.
   Na telefonie lista jest wyższa niż ekran i kroki wchodzą pojedynczo przy
   przewijaniu — dodatkowe opóźnienie do sekundy trzymałoby pusty ekran
   przed kimś, kto przewinie od razu do ostatniego kroku. */
@media (min-width: 861px) {
  .krok:nth-child(1) { --opoznienie: .15s; }
  .krok:nth-child(2) { --opoznienie: .35s; }
  .krok:nth-child(3) { --opoznienie: .55s; }
  .krok:nth-child(4) { --opoznienie: .75s; }
  .krok:nth-child(5) { --opoznienie: .95s; }
}
.krok:last-child { padding-bottom: 0; }

/* Numer siedzi na szynie: kremowe tło przykrywa linię pod cyframi,
   żeby nie przecinała ich w pół. */
.krok__nr {
  position: absolute;
  left: calc(-1 * clamp(64px, 8vw, 110px));
  top: -0.1em;
  width: calc(clamp(18px, 2.4vw, 30px) * 2);
  text-align: center;
  background: var(--krem);
  padding: 4px 0;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
  color: var(--zloto);
}

.krok__tytul {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tusz);
}

.krok p {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.08vw, 16.5px);
  line-height: 1.84;
  color: var(--szary);
  font-weight: 300;
}

/* ── Masz pomysł — ciemne pasmo zamykające ── */

.zglos {
  background: var(--tusz);
  color: var(--krem);
  padding: clamp(72px, 9vw, 128px) 0;
}

.zglos__tresc {
  max-width: 64ch;
  text-align: center;
}
.zglos .nadpis { color: rgba(214, 178, 118, 0.95); }

.zglos__tytul {
  margin: 18px 0 0;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.16;
}

.zglos__tekst {
  margin: clamp(18px, 2.2vw, 26px) auto 0;
  max-width: 52ch;
  font-size: clamp(14px, 1.08vw, 16.5px);
  line-height: 1.86;
  color: rgba(247, 243, 236, 0.72);
  font-weight: 300;
}

.zglos__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(30px, 3.6vw, 44px);
  padding: 17px 34px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: #17130F;
  background: var(--biel);
}
/* Ten sam konflikt co przy kartach: przycisk jest elementem data-odslon. */
.zglos .zglos__cta {
  transition-property: background-color, color, opacity, transform;
  transition-duration: 0.25s, 0.25s, 0.9s, 1.1s;
  transition-timing-function: ease, ease,
    cubic-bezier(0.22, 0.61, 0.36, 1), cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0s, 0s, var(--opoznienie, 0s), var(--opoznienie, 0s);
}
.zglos__cta:hover { background: #FFFFFF; color: #17130F; }
.zglos__cta span { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); }
.zglos__cta:hover span { transform: translateX(5px); }

.zglos__adres {
  display: block;
  margin-top: clamp(18px, 2vw, 24px);
  font-size: 13px;
  color: rgba(247, 243, 236, 0.55);
  font-weight: 300;
}
.zglos__adres a {
  color: rgba(247, 243, 236, 0.85);
  border-bottom: 1px solid rgba(247, 243, 236, 0.3);
}
.zglos__adres a:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

@media (max-width: 860px) {
  .ty-my { grid-template-columns: 1fr; }
  .ty-my__strona + .ty-my__strona { border-left: 0; border-top: 1px solid var(--linia); }
  .dary { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════
   Zasady wynajmu — paleta czterech przestrzeni
   Pas czterech pól w kolorach kafli ze strony głównej — jedno spojrzenie
   mówi „cała Stajnia": wszystkie cztery są Twoje. Każde pole prowadzi
   do swojej podstrony.
   ═════════════════════════════════════════════ */

.paleta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: clamp(22px, 2.6vw, 30px) 0 clamp(28px, 3.2vw, 40px);
}

/* Pole jest elementem data-odslon, więc lista przejść musi objąć i odsłanianie,
   i reakcję na kursor — reguła odsłaniania nadpisałaby własne. Najechanie
   nie używa transform, bo transform należy do odsłaniania i jego reguła
   z .widoczna ma wyższą specyficzność niż :hover. */
.paleta .paleta__pole {
  display: flex;
  align-items: flex-end;
  min-height: clamp(96px, 11vw, 150px);
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);
  color: var(--krem);
  font-size: clamp(17px, 1.8vw, 26px);
  line-height: 1.05;
  transition-property: filter, color, box-shadow, opacity, transform;
  transition-duration: 0.35s, 0.35s, 0.35s, 0.9s, 1.1s;
  transition-timing-function: ease, ease, ease,
    cubic-bezier(0.22, 0.61, 0.36, 1), cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0s, 0s, 0s, var(--opoznienie, 0s), var(--opoznienie, 0s);
}
.paleta .paleta__pole:hover {
  color: #FFFFFF;
  filter: brightness(1.07);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.paleta__pole--czerwona  { background: var(--czerwony-blok); }
.paleta__pole--niebieska { background: var(--niebieski-blok); }
.paleta__pole--zielona   { background: var(--zielony-blok); }
.paleta__pole--zolta     { background: var(--zolty-blok); }

/* Zdanie-klucz sekcji — większe i ciemniejsze od opisu, ale mniejsze
   od puenty; ma otwierać, nie zamykać. */
.zasady-wask .zasady-akcent {
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.4;
  color: var(--tusz);
  font-weight: 400;
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .paleta { grid-template-columns: 1fr 1fr; }
}

/* ═════════════════════════════════════════════
   Pasek strony głównej przyklejony przy przewijaniu (desktop)
   Podstrony mają .pasek ze sticky; na głównej pasek siedzi w nagłówku
   ze zdjęciem i odjeżdżał razem z nim. Tu dostaje fixed — nagłówek ma
   sztywną wysokość 100svh, więc wyjęcie paska z przepływu nic nie
   przesuwa, a u góry wygląda dokładnie tak jak dotąd. Po przewinięciu
   (klasa przewiniete z main.js) przechodzi w kremowy pasek z ciemnym
   tekstem, ten sam co na podstronach — jasny tekst nad kremową treścią
   byłby niewidoczny.
   ═════════════════════════════════════════════ */

@media (min-width: 861px) {
  /* Nagłówek ma isolation: isolate, więc pasek żyje w jego kontekście
     warstw — bez z-index na nagłówku kafle stref (z-index 3 przy
     najechaniu) malowałyby się nad przyklejonym paskiem. */
  .naglowek { z-index: 30; }

  .naglowek .nawigacja {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: background-color 0.3s ease, color 0.3s ease,
                padding 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 1px solid transparent;
  }

  .przewiniete .naglowek .nawigacja {
    background: var(--krem);
    color: var(--tusz);
    padding-top: 3px;
    padding-bottom: 2px;
    border-bottom-color: var(--linia);
    box-shadow: 0 6px 24px rgba(35, 40, 47, 0.06);
  }

  /* Reguły z ciemnego nagłówka — biel po najechaniu i jasna ramka przycisku —
     na kremowym pasku dawałyby niewidoczny tekst; tu wchodzą ich odpowiedniki
     z .pasek podstron. */
  .przewiniete .naglowek .menu a:hover { color: var(--zloto); }
  .przewiniete .naglowek .przycisk-zapis { border-color: rgba(35, 40, 47, 0.38); }
  .przewiniete .naglowek .przycisk-zapis:hover {
    background: var(--tusz);
    color: var(--krem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .naglowek .nawigacja { transition: none; }
}

/* ═════════════════════════════════════════════
   Wybór przestrzeni — dwie drogi na starcie wynajmu
   ═════════════════════════════════════════════ */

.wybor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(30px, 3.6vw, 48px);
}

/* Kafel jest elementem data-odslon, więc lista przejść musi objąć jedno
   i drugie — reguła odsłaniania nadpisałaby własne. */
.wybor .wybor__opcja {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
  background: #FDFBF6;
  border: 1px solid var(--linia);
  border-left: 3px solid var(--akcent, var(--zloto));
  transition-property: border-color, box-shadow, opacity, transform;
  transition-duration: 0.25s, 0.25s, 0.9s, 1.1s;
  transition-timing-function: ease, ease,
    cubic-bezier(0.22, 0.61, 0.36, 1), cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0s, 0s, var(--opoznienie, 0s), var(--opoznienie, 0s);
}
.wybor .wybor__opcja:hover {
  border-color: rgba(176, 138, 69, 0.55);
  box-shadow: 0 10px 28px rgba(35, 40, 47, 0.07);
}
.wybor__opcja--gabinet { --akcent: var(--niebieski-blok); }
.wybor__opcja--calosc  { --akcent: var(--czerwony-blok); }

.wybor__nazwa { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; }
.wybor__opis {
  font-size: clamp(13px, 1.02vw, 14.5px);
  line-height: 1.7;
  color: var(--szary);
  font-weight: 300;
}

/* ═════════════════════════════════════════════
   Cennik
   ═════════════════════════════════════════════ */

/* Karty w wierszu mają równą wysokość (domyślne rozciąganie siatki), a ostatnia
   uwaga — zwykle „Faktura VAT." — przypina się do dołu, żeby w obu kartach stała
   na tej samej linii niezależnie od długości treści nad nią. */
.cennik-siatka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}

.cennik-siatka .cennik-karta {
  display: flex;
  flex-direction: column;
  background: #FDFBF6;
  border: 1px solid var(--linia);
  padding: clamp(28px, 3.2vw, 44px) clamp(24px, 2.8vw, 40px);
  transition-property: border-color, box-shadow, opacity, transform;
  transition-duration: 0.25s, 0.25s, 0.9s, 1.1s;
  transition-timing-function: ease, ease,
    cubic-bezier(0.22, 0.61, 0.36, 1), cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0s, 0s, var(--opoznienie, 0s), var(--opoznienie, 0s);
}
.cennik-siatka .cennik-karta:hover {
  border-color: rgba(176, 138, 69, 0.55);
  box-shadow: 0 10px 28px rgba(35, 40, 47, 0.07);
}
/* margin-top: auto zabiera ostatniemu elementowi jego własny odstęp, więc w najwyższej
   karcie przylgnąłby do akapitu nad nim — ten sam odstęp przejmuje przedostatni element
   (marginesy w układzie flex się nie zlewają, więc nic się nie podwaja). */
.cennik-siatka .cennik-karta > :last-child { margin-top: auto; }
.cennik-siatka .cennik-karta > :nth-last-child(2) { margin-bottom: clamp(14px, 1.6vw, 20px); }

.cennik-karta__glowa {
  padding-bottom: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--linia);
}

.cennik-karta__nazwa { margin: 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; }

.cennik-karta__cena { margin: 12px 0 0; }
.cennik-karta__cena strong {
  display: block;
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 500;
  color: var(--zloto);
  letter-spacing: 0.01em;
}
.cennik-karta__brutto {
  display: block;
  margin-top: 3px;
  font-size: clamp(12.5px, 1vw, 14px);
  color: var(--szary);
  font-weight: 300;
}

.cennik-karta__limit {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tusz);
}

.cennik-karta p {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.84;
  color: var(--szary);
  font-weight: 300;
}

/* Etykieta w karcie nie leży w .zasady-wask, więc potrzebuje własnego zakresu. */
.cennik-karta .zasady-etykieta {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--zloto);
}

.cennik-lista {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.cennik-lista li {
  position: relative;
  padding: 5px 0 5px 18px;
  font-size: clamp(13.5px, 1.04vw, 15px);
  line-height: 1.7;
  color: var(--szary);
  font-weight: 300;
}
.cennik-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 7px;
  height: 1px;
  background: rgba(176, 138, 69, 0.7);
}

.cennik__uwaga {
  font-size: clamp(12.5px, 1vw, 13.5px) !important;
  color: rgba(110, 104, 94, 0.85) !important;
}

/* ── tabela zbiorcza ── */

.cennik-tabela__owijka { overflow-x: auto; }

.cennik-tabela {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.cennik-tabela th,
.cennik-tabela td {
  padding: 15px 16px 15px 0;
  border-bottom: 1px solid var(--linia);
  font-size: clamp(13.5px, 1.04vw, 15px);
  line-height: 1.6;
  font-weight: 300;
  vertical-align: top;
}
.cennik-tabela thead th {
  padding-top: 0;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--zloto);
}
.cennik-tabela tbody th { color: var(--tusz); font-weight: 400; }
.cennik-tabela tbody td { color: var(--szary); white-space: nowrap; }
.cennik-tabela tbody tr:last-child th,
.cennik-tabela tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 860px) {
  .wybor { grid-template-columns: 1fr; }
  .cennik-siatka { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════
   Koło Gospodyń Miejskich
   ═════════════════════════════════════════════ */

/* Tytuł powtarza znak z menu: trzy wiersze, środkowy szeryfową kursywą —
   ta sama nazwa ma wyglądać tak samo w pasku i na własnej stronie. */
.kgm-tytul {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  line-height: 1;
}
.kgm-tytul span:nth-child(odd) {
  font-size: clamp(13px, 1.3vw, 18px);
  letter-spacing: 0.42em;
  /* rozstrzelenie dokłada odstęp tylko za ostatnią literą — wcięcie
     przywraca wyrazowi optyczny środek */
  text-indent: 0.42em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tusz);
}
.kgm-tytul span:nth-child(3) { font-weight: 300; }
.kgm-tytul span:nth-child(2) {
  margin: 0.06em 0 0.12em;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(58px, 8.6vw, 124px);
  line-height: 0.95;
  color: var(--zloto);
}

/* te same cztery kropki co na karcie członkowskiej */
.kgm-kropki {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(22px, 2.6vw, 32px);
}

/* Zdania-zwroty wyciągnięte z tekstu: szeryfowa kursywa zamiast osobnego
   nagłówka, żeby nie rozbijały ciągu akapitów, a jednak zatrzymywały wzrok. */
.strefa-strona .kgm-akcent {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.35;
  color: var(--tusz);
  font-weight: 400;
}

/* Ilustracja ma własne złote koło i przezroczyste tło — kadrowanie
   i zaokrąglone rogi ucięłyby okrąg, więc idzie w całości. */
.kgm-ilustracja img {
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0;
}

/* Ciepłe pasmo przerywa rytm „tekst obok zdjęcia" — ta część jest o wychodzeniu
   na zewnątrz, więc stoi osobno, bez kadru. */
.kgm-pasmo {
  background: var(--krem-ciep);
  padding: clamp(64px, 8vw, 112px) 0;
}
.kgm-pasmo__siatka {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.kgm-pasmo__glowa .kgm-akcent { margin: clamp(18px, 2vw, 24px) 0 0; }
.kgm-pasmo__tresc p {
  margin: 0 0 clamp(18px, 2vw, 24px);
  font-size: clamp(14px, 1.08vw, 16px);
  line-height: 1.86;
  color: var(--szary);
  font-weight: 300;
}
.kgm-pasmo__tresc p:last-child { margin-bottom: 0; }
.kgm-pasmo__tresc .kgm-akcent {
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--linia);
}

.kgm-wartosci {
  padding: clamp(72px, 9vw, 128px) 0;
  text-align: center;
}
.kgm-wartosci__tresc { max-width: 80ch; }
.kgm-wartosci__tresc > p {
  margin: clamp(18px, 2vw, 24px) auto 0;
  max-width: 60ch;
  font-size: clamp(14px, 1.08vw, 16.5px);
  line-height: 1.86;
  color: var(--szary);
  font-weight: 300;
}

/* „Ma być bezpiecznie. Życzliwie…" — cztery słowa to sedno całej strony,
   więc dostają pełną szerokość i kropki w kolorach czterech stref. */
.kgm-wartosci__tresc > .kgm-slowa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px clamp(18px, 2.6vw, 42px);
  max-width: none;
  margin: clamp(40px, 5vw, 64px) 0;
  padding: clamp(26px, 3.2vw, 40px) 0;
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
}
.kgm-slowa__wstep {
  flex-basis: 100%;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--zloto);
}
.kgm-slowa__slowo {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.15;
  color: var(--tusz);
}
.kgm-slowa__slowo .kropka {
  display: inline-block;
  flex: none;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
}

.kgm-karta {
  padding: clamp(48px, 6vw, 96px) 0 clamp(72px, 9vw, 128px);
}
.kgm-karta__siatka {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.kgm-karta__foto { margin: 0; }
/* Karta leży lekko przekrzywiona, jak wyjęta z portfela; promień rogów
   odpowiada zaokrągleniu samej grafiki (ok. 36 px na 1535 × 1024). */
.kgm-karta__foto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2.4% / 3.6%;
  transform: rotate(-4deg);
  box-shadow: 0 34px 60px -26px rgba(35, 40, 47, 0.42),
              0 10px 20px -12px rgba(35, 40, 47, 0.28);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kgm-karta__foto:hover img { transform: rotate(-1deg) translateY(-6px); }
.kgm-karta__tresc p {
  margin: clamp(18px, 2vw, 24px) 0 0;
  font-size: clamp(14px, 1.08vw, 16px);
  line-height: 1.86;
  color: var(--szary);
  font-weight: 300;
}

.kgm-zamkniecie__cytat {
  margin: clamp(26px, 3vw, 36px) auto 0;
  max-width: 44ch;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
  color: rgba(214, 178, 118, 0.95);
}

@media (max-width: 860px) {
  .kgm-ilustracja { max-width: 420px; margin-inline: auto; }
  .kgm-pasmo__siatka { grid-template-columns: 1fr; gap: 20px; }
  .kgm-karta__siatka { grid-template-columns: 1fr; }
  /* obrócona karta wystaje rogami poza łam — margines, żeby nie dotykała krawędzi */
  .kgm-karta__foto { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .kgm-karta__foto img { transition: none; }
}

/* ── ciasteczka ─────────────────────────────── */

/* z-index 35: nad paskiem (20), nagłówkiem (30) i nawigatorem stref (25),
   pod menu mobilnym (40) — otwarte menu ma zakryć okienko, nie odwrotnie. */
.ciasteczka {
  position: fixed;
  z-index: 35;
  left: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  width: min(420px, calc(100vw - 24px));
  padding: clamp(20px, 2.2vw, 28px);
  background: #FDFBF6;
  color: var(--tusz);
  border: 1px solid var(--linia);
  box-shadow: 0 18px 50px rgba(35, 40, 47, 0.16);
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.45s ease, translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ciasteczka--widoczne { opacity: 1; translate: 0 0; }

.ciasteczka__glowa { display: flex; align-items: center; gap: 14px; }

.ciasteczka__ikona { width: 52px; height: 52px; flex: none; }
.ciasteczka__cialo { fill: #D39A5B; stroke: #B07A40; stroke-width: 1.5; }
/* Kęs to koła w kolorze tła okienka — prościej niż maska, a tło jest jednolite. */
.ciasteczka__kes { fill: #FDFBF6; }
.ciasteczka__okruch { fill: #D39A5B; }
.ciasteczka__rog { fill: var(--zloto); }
.ciasteczka__rog-pasek { fill: none; stroke: #FDFBF6; stroke-width: 1.2; opacity: 0.7; }

.ciasteczka__tytul {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(28px, 2.4vw, 34px);
  line-height: 1;
}

.ciasteczka__tekst {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--szary);
  font-weight: 300;
}

.ciasteczka__wiecej { margin-top: 10px; font-size: 13px; color: var(--szary); }
.ciasteczka__wiecej summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--zloto);
}
.ciasteczka__wiecej summary::-webkit-details-marker { display: none; }
.ciasteczka__wiecej summary::after { content: " +"; }
.ciasteczka__wiecej[open] summary::after { content: " −"; }
.ciasteczka__wiecej ul { margin: 10px 0 0; padding-left: 16px; line-height: 1.65; font-weight: 300; }
.ciasteczka__wiecej li + li { margin-top: 4px; }

/* Dwa przyciski tej samej wielkości — odmowa ma być tak samo łatwa jak zgoda. */
.ciasteczka__przyciski {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.ciasteczka__przycisk {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 10px;
  border: 1px solid var(--tusz);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ciasteczka__przycisk--tak { background: var(--tusz); color: var(--krem); }
.ciasteczka__przycisk--tak:hover { background: #000000; }
.ciasteczka__przycisk--nie { background: transparent; color: var(--tusz); }
.ciasteczka__przycisk--nie:hover { background: rgba(35, 40, 47, 0.07); }
.ciasteczka__przycisk:focus-visible,
.ciasteczka__wiecej summary:focus-visible {
  outline: 2px solid var(--zloto);
  outline-offset: 2px;
}

.ciasteczka-nad-nawigatorem .nawigator {
  bottom: calc(var(--ciasteczka-wys, 0px) + 12px);
}

.stopka__ciasteczka {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(35, 40, 47, 0.3);
  text-underline-offset: 3px;
}
.stopka__ciasteczka:hover { text-decoration-color: currentColor; }

/* Zasłona w miejscu kalendarza Fitssey, gdy nie ma zgody na ciasteczka. */
.fitssey-zaslona {
  max-width: 62ch;
  margin: clamp(8px, 2vw, 24px) auto clamp(56px, 7vw, 96px);
  padding: clamp(28px, 3.4vw, 44px) clamp(22px, 3vw, 40px);
  text-align: center;
  background: #FDFBF6;
  border: 1px solid var(--linia);
}
.fitssey-zaslona__tytul {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  color: var(--tusz);
}
.fitssey-zaslona__tekst {
  margin: 12px auto 0;
  max-width: 48ch;
  font-size: clamp(14px, 1.06vw, 15.5px);
  line-height: 1.8;
  color: var(--szary);
  font-weight: 300;
}
.fitssey-zaslona__przycisk {
  margin-top: 22px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 15px 28px;
  color: var(--krem);
  background: var(--tusz);
  border: 0;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.fitssey-zaslona__przycisk:hover { background: #000000; }
.fitssey-zaslona__przycisk:focus-visible { outline: 2px solid var(--zloto); outline-offset: 3px; }
.fitssey-zaslona__obok { margin: 16px 0 0; font-size: 13px; color: var(--szary); font-weight: 300; }
.fitssey-zaslona__obok a { color: var(--tusz); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .ciasteczka { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ciasteczka { transition: none; }
}