/* Kroje osadzone na stronie. Pliki WOFF2 leżą w shared/fonts/, build kopiuje je
   do katalogu fonts/ obok styl.css. Przycięte do liter łacińskich z polskimi znakami. */
@font-face { font-family: "TeX Gyre Schola"; src: url("fonts/texgyreschola-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "TeX Gyre Schola"; src: url("fonts/texgyreschola-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TeX Gyre Schola"; src: url("fonts/texgyreschola-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "TeX Gyre Schola"; src: url("fonts/texgyreschola-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "TeX Gyre Adventor"; src: url("fonts/texgyreadventor-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TeX Gyre Adventor"; src: url("fonts/texgyreadventor-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "TeX Gyre Adventor"; src: url("fonts/texgyreadventor-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }


/* PUK-PUK / agnieszkapohl.pl — wspólne tokeny projektowe
   Źródło prawdy: SecondBrain/10 Projects/PUK-PUK/PUK-PUK - Znak i pliki.md
   Te same wartości obowiązują na OBU domenach. Bez wyjątków, bez "zbliżonych odcieni". */

:root {
  /* ---- Kolor. Trzy wartości, żadnych innych w warstwie brandowej ---- */
  --oliwka:  #3F4C36;  /* tekst, przyciski, ciemne sekcje */
  --krem:    #EFE9DC;  /* tło podstawowe */
  --kraft:   #A87C46;  /* akcent: hover, linie, drobne detale — oszczędnie */

  /* Warianty robocze (wyprowadzone, nie nowe kolory marki) */
  --oliwka-jasna: #5A6B4E;   /* hover na ciemnym */
  --krem-ciemny:  #E3DBCA;   /* linie, obramowania kart, tła stref */
  --krem-jasny:   #F7F3EA;   /* karty na kremowym tle */

  /* Role — używaj TYCH w komponentach, nie surowych nazw kolorów */
  --tlo:            var(--krem);
  --tlo-karty:      var(--krem-jasny);
  --tlo-odwrotka:   var(--oliwka);
  --tekst:          var(--oliwka);
  --tekst-odwrotka: var(--krem);
  --tekst-cichy:    #6B7563;
  --linia:          var(--krem-ciemny);
  --akcent:         var(--kraft);

  /* ---- Typografia (zmiana 2026-09-27) ----
     Schola Bold: WSZYSTKIE nagłówki na obu stronach, tak jak w rolkach i grafikach
     na Instagram. Do tego znak PUK-PUK (wersaliki) i kursywa w cytatach.
     Adventor: tekst ciągły, etykiety, przyciski, drobny druk. */
  --font-znak:  "TeX Gyre Schola", "Century Schoolbook", Georgia, serif;
  --font-naglowek: "TeX Gyre Schola", "Century Schoolbook", Georgia, serif;
  --font-tekst: "TeX Gyre Adventor", "Century Gothic", "URW Gothic", "Avant Garde", sans-serif;
  --font-cytat: "TeX Gyre Schola", Georgia, serif; /* zawsze italic */

  /* Skala — 1.25 (major third), baza 17px */
  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-base: 1.0625rem;
  --t-lg:  1.33rem;
  --t-xl:  1.66rem;
  --t-2xl: 2.07rem;
  --t-3xl: 2.59rem;
  --t-4xl: 3.24rem;

  --lh-ciasny: 1.15;
  --lh-tekst:  1.65;
  --tracking-znak: 0.06em; /* wersaliki znaku — nigdy nie zmieniaj odstępów w samym SVG */
  --tracking-etykieta: 0.14em;

  /* ---- Rytm. Skala 4px ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --szer-tresci: 1140px;  /* maks. szerokość kontenera */
  --szer-czytania: 68ch;  /* maks. szerokość akapitu */

  /* ---- Kształt. Papier, nie aplikacja: minimalne zaokrąglenia ---- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --cien: 0 1px 2px rgba(63, 76, 54, 0.06), 0 8px 24px rgba(63, 76, 54, 0.05);

  /* ---- Znak: twarde minimum z "Znak i pliki" ---- */
  --znak-min-szer: 40px;  /* NIGDY mniej na ekranie (12 mm w druku) */
  --znak-pole-ochronne: 1em; /* = wysokość litery P; nic w tym polu */
}


/* Baza: reset + typografia. Wspólna dla obu domen. */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: var(--t-base);
  line-height: var(--lh-tekst);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-naglowek); /* Schola Bold — jak w rolkach i na Instagramie */
  font-weight: 700;
  line-height: var(--lh-ciasny);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); letter-spacing: -0.015em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-base); }

p { margin: 0 0 var(--s-4); max-width: var(--szer-czytania); }
p:last-child { margin-bottom: 0; }

a { color: var(--tekst); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--akcent); }

/* Cytaty i podtytuły — kursywa Scholi, tak jak w drukach */
.cytat, blockquote {
  font-family: var(--font-cytat);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--tekst);
  margin: 0 0 var(--s-4);
  max-width: var(--szer-czytania);
}
blockquote { padding-left: var(--s-5); border-left: 2px solid var(--akcent); }

/* Etykieta sekcji — wersaliki Adventora, nie Scholi */
.etykieta {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etykieta);
  text-transform: uppercase;
  color: var(--tekst-cichy);
  margin: 0 0 var(--s-3);
}

.cichy { color: var(--tekst-cichy); }

/* Układ */
.kontener { width: 100%; max-width: var(--szer-tresci); margin-inline: auto; padding-inline: var(--s-5); }
.sekcja { padding-block: var(--s-9); }
.sekcja--ciasna { padding-block: var(--s-7); }
.sekcja--odwrotka { background: var(--tlo-odwrotka); color: var(--tekst-odwrotka); }
.sekcja--odwrotka a { color: var(--tekst-odwrotka); }
.sekcja--odwrotka .cichy { color: rgba(239, 233, 220, 0.72); }

.siatka { display: grid; gap: var(--s-5); }
@media (min-width: 640px)  { .siatka--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .siatka--3 { grid-template-columns: repeat(3, 1fr); }
                             .siatka--4 { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 640px) {
  h1 { font-size: var(--t-3xl); }
  h2 { font-size: var(--t-xl); }
  .sekcja { padding-block: var(--s-7); }
}


/* Komponenty wspólne. IDENTYCZNE na puk-puk.art i agnieszkapohl.pl.
   Różni się tylko treść — nigdy proporcje, kolor ani krój. */
/* ── Pasek-most ────────────────────────────────────────────────────────────
   Warstwa 1 mostu. Na KAŻDEJ podstronie OBU domen, nad nagłówkiem.
   Ta sama wysokość i krój po obu stronach; różni się tylko tekst i cel linku. */
.most {
  background: var(--oliwka);
  color: var(--krem);
  font-size: var(--t-sm);
  text-align: center;
  padding: var(--s-2) var(--s-4);
  line-height: 1.4;
}
.most a { color: var(--krem); text-decoration: none; border-bottom: 1px solid rgba(239,233,220,.45); }
.most a:hover { color: #fff; border-bottom-color: var(--kraft); }
.most .strzalka { margin-left: .35em; }

/* ── Nagłówek ────────────────────────────────────────────────────────────── */
.naglowek {
  border-bottom: 1px solid var(--linia);
  background: var(--tlo);
  position: sticky; top: 0; z-index: 20;
}
.naglowek__wnetrze {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 76px;
}
/* Pole ochronne znaku = wysokość litery P. Nic w tym polu. */
.znak { display: block; padding: var(--znak-pole-ochronne); margin: calc(var(--znak-pole-ochronne) * -1); }
.znak img, .znak svg { min-width: var(--znak-min-szer); width: 64px; }

/* Znak słowny agnieszkapohl.pl — Adventor, NIGDY Schola */
.znak-slowny {
  font-family: var(--font-tekst); font-weight: 700;
  font-size: var(--t-lg); letter-spacing: 0.02em;
  text-decoration: none; line-height: 1.1;
}
.znak-slowny span { display: block; font-size: var(--t-xs); font-weight: 400;
  letter-spacing: var(--tracking-etykieta); text-transform: uppercase; color: var(--tekst-cichy); }

.menu { display: flex; gap: var(--s-5); align-items: center; list-style: none; margin: 0; padding: 0; }
.menu a { font-size: var(--t-sm); text-decoration: none; letter-spacing: .01em; padding-block: var(--s-2); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--akcent); }
.menu a[aria-current="page"] { border-bottom: 1.5px solid var(--akcent); }
/* Wyróżniona pozycja menu (PUK-PUK na agnieszkapohl.pl) */
.menu .menu--wyrozniony a {
  border: 1px solid var(--oliwka); border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3); font-weight: 700;
}
.menu .menu--wyrozniony a:hover { background: var(--oliwka); color: var(--krem); }

/* ── Przyciski ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-family: var(--font-tekst); font-size: var(--t-sm);
  font-weight: 700; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  border: 1.5px solid var(--oliwka); background: var(--oliwka); color: var(--krem);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--oliwka-jasna); border-color: var(--oliwka-jasna); color: var(--krem); }
.btn--obrys { background: transparent; color: var(--oliwka); }
.btn--obrys:hover { background: var(--oliwka); color: var(--krem); }
/* Przycisk na ciemnym tle: odwrócone kolory, żeby nie zlał się z tłem. */
.sekcja--odwrotka .btn { background: var(--krem); border-color: var(--krem); color: var(--oliwka); }
.sekcja--odwrotka .btn:hover { background: transparent; color: var(--krem); }
.btn--duzy { font-size: var(--t-base); padding: var(--s-4) var(--s-6); }
.btn--tekst { background: none; border: none; padding: 0; color: var(--oliwka);
  border-bottom: 1.5px solid var(--akcent); border-radius: 0; }
.btn--tekst:hover { background: none; color: var(--akcent); }

/* ── Karty ───────────────────────────────────────────────────────────────── */
.karta {
  background: var(--tlo-karty); border: 1px solid var(--linia);
  border-radius: var(--r-lg); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.karta__media { aspect-ratio: 4 / 3; background: var(--krem-ciemny);
  border-radius: var(--r-md); margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) 0;
  border-bottom: 1px solid var(--linia); }
.karta__cena { font-weight: 700; font-size: var(--t-lg); }
.karta__cena small { font-weight: 400; font-size: var(--t-sm); color: var(--tekst-cichy); }
.karta__dla-kogo { font-size: var(--t-sm); color: var(--tekst-cichy);
  padding-top: var(--s-3); border-top: 1px solid var(--linia); margin-top: auto; }
.karta a.btn { align-self: flex-start; }

/* ── Licznik miejsc ──────────────────────────────────────────────────────── */
.licznik { display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--tekst-cichy); }
.licznik__kropki { display: inline-flex; gap: 3px; }
.licznik__kropka { width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--oliwka); }
.licznik__kropka--zajete { background: var(--oliwka); }
.licznik--ostatnie { color: var(--kraft); }

/* ── Filtry / zakładki ───────────────────────────────────────────────────── */
.filtry { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.filtry button, .filtry a {
  font: inherit; font-size: var(--t-sm); cursor: pointer; text-decoration: none;
  padding: var(--s-2) var(--s-4); border-radius: 999px;
  border: 1px solid var(--linia); background: transparent; color: var(--tekst);
}
.filtry [aria-pressed="true"], .filtry .aktywny { background: var(--oliwka); color: var(--krem); border-color: var(--oliwka); }

/* ── Stopka ──────────────────────────────────────────────────────────────── */
.stopka { background: var(--oliwka); color: var(--krem); padding-block: var(--s-8) var(--s-6); }
.stopka a { color: var(--krem); text-decoration: none; }
.stopka a:hover { color: var(--kraft); }
.stopka__siatka { display: grid; gap: var(--s-6); }
@media (min-width: 800px) { .stopka__siatka { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.stopka h4 { font-size: var(--t-xs); letter-spacing: var(--tracking-etykieta);
  text-transform: uppercase; color: rgba(239,233,220,.65); margin-bottom: var(--s-3); }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.stopka__dol { margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: 1px solid rgba(239,233,220,.18); font-size: var(--t-xs);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; }

/* ── Pasek zaufania ──────────────────────────────────────────────────────── */
.zaufanie { border-block: 1px solid var(--linia); padding-block: var(--s-5); }
.zaufanie ul { display: flex; flex-wrap: wrap; gap: var(--s-6);
  list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); color: var(--tekst-cichy); }


/* Dodatki prototypu — dopina się do wspólnego systemu z shared/design-system/. */

:root{
  /* skróty używane w treści podstron */
  --oliwka:#3F4C36; --krem:#EFE9DC; --kraft:#A87C46;
  --oliwka-jasna:#5A6B4E; --krem-ciemny:#E3DBCA; --krem-jasny:#F7F3EA; --cichy:#6B7563;
  --sans:var(--font-tekst); --serif:var(--font-znak);
}

body{font-size:17px;}
main{display:block;}

/* Pasek prototypu — TYLKO w podglądzie, nie wchodzi na żywą stronę */
.pasek-prototypu{
  background:#2b2b2b;color:#e9e9e9;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 20px;display:flex;gap:18px;align-items:center;justify-content:center;font-weight:700;
}
.pasek-prototypu strong{color:#fff;}
.pasek-prototypu a{color:#f0c98b;text-decoration:none;border-bottom:1px solid rgba(240,201,139,.5);}

/* ── Znak PUK-PUK ──────────────────────────────────────────────────────────
   Zawsze z pliku SVG, nigdy składany tekstem. Litery stoją jedna pod drugą;
   poza obrys wychodzą tylko dywizy. Pole ochronne = wysokość litery P, czyli
   ok. 42% wysokości znaku — realizuje je .znak-pole. */
.znak-pole{ display:inline-block; align-self:flex-start; }
.znak{
  display:block;
  min-width:var(--znak-min-szer); /* 40 px — poniżej znaku się nie umieszcza */
  height:auto;
}

.marka{display:block;text-decoration:none;padding:14px 0;color:var(--tekst);}
.marka--slowna strong{display:block;font-size:21px;font-weight:700;letter-spacing:.02em;line-height:1.1;}
.marka--slowna span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-cichy);}

.naglowek__wnetrze{min-height:88px;}
.menu{flex-wrap:wrap;gap:22px;}

/* Typografia treści */
h1{font-size:44px;} h2{font-size:31px;} h3{font-size:21px;}
.cytat{font-family:var(--font-znak);font-style:italic;line-height:1.45;}
.link-kraft{border-bottom:1px solid var(--kraft);align-self:flex-start;}
.stopka p{font-size:15px;color:rgba(239,233,220,.78);max-width:34ch;}
.uwaga-mala{font-size:12px;color:rgba(239,233,220,.5);margin-top:10px;}

/* Znaczniki roboczych braków */
.tbd{
  display:inline-block;background:var(--kraft);color:#fff;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px;border-radius:3px;font-weight:700;white-space:nowrap;
}
.tbd--pusty{background:transparent;color:var(--kraft);border:1px dashed var(--kraft);}
.notka{
  display:flex;gap:12px;align-items:flex-start;margin-top:var(--s-4);
  padding:16px 18px;border:1px dashed var(--kraft);border-radius:var(--r-md);
  font-size:14px;color:var(--tekst-cichy);max-width:none;
}

/* Bloki układu używane w treści */
.duo{display:grid;gap:var(--s-7);align-items:center;}
@media(min-width:900px){ .duo{grid-template-columns:1fr 1fr;} .duo--szeroki{grid-template-columns:1.1fr 1fr;} }

.foto{
  background:var(--krem-ciemny);border:1px solid #d8cfba;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;
}
.foto p{font-size:14px;color:var(--tekst-cichy);max-width:26ch;margin:8px 0 0;}
.foto--4x5{aspect-ratio:4/5;} .foto--1x1{aspect-ratio:1/1;}
.foto--3x2{aspect-ratio:3/2;} .foto--16x9{aspect-ratio:16/9;}
.foto{min-height:260px;overflow:hidden;position:relative;}
.foto img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;}

.sekcja--jasna{background:var(--krem-jasny);border-top:1px solid var(--linia);border-bottom:1px solid var(--linia);}

/* ── Filtry ─────────────────────────────────────────────────────────────── */
.filtr-blok{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-6);}
.filtry--duze{gap:var(--s-3);}
.filtry--duze button{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:var(--s-3) var(--s-5);border-radius:var(--r-md);
  border:1px solid var(--linia);background:var(--tlo-karty);color:var(--tekst);
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.filtry--duze button strong{font-size:16px;font-weight:700;letter-spacing:.01em;}
.filtry--duze button span{font-size:13px;color:var(--tekst-cichy);}
.filtry--duze button:hover{border-color:var(--kraft);}
.filtry--duze button[aria-pressed="true"]{background:var(--oliwka);border-color:var(--oliwka);color:var(--krem);}
.filtry--duze button[aria-pressed="true"] span{color:rgba(239,233,220,.75);}
.filtry__wynik{font-size:14px;color:var(--tekst-cichy);min-height:1.4em;margin:0;}
.filtry__pusto{margin:var(--s-6) 0 0;font-size:16px;color:var(--tekst-cichy);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;}

/* ── Lista linii oferty ─────────────────────────────────────────────────────
   Zwinięta lista: wszystkie osiem linii mieści się na jednym ekranie, bez
   scrollowania. Szczegóły rozwijają się w miejscu (<details>), więc nikt nie
   traci kontekstu ani nie musi wracać. Kategorie są etykietami, nie filtrem. */
:root{ --linie-kolumny: minmax(190px, 1.1fr) minmax(0, 2fr) 84px 150px 28px; }

.linie-glowa{
  display:none;gap:var(--s-5);align-items:center;
  padding:0 var(--s-4) var(--s-2);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-cichy);
}
@media(min-width:860px){ .linie-glowa{display:grid;grid-template-columns:var(--linie-kolumny);} }

/* Cztery miejsca jako obietnica, nie ograniczenie */
.kameralnie{
  margin:var(--s-3) 0 0;padding:var(--s-3) 0 var(--s-3) var(--s-4);
  border-left:3px solid var(--kraft);font-size:17px;max-width:none;
}

/* ── Grafik tygodnia ────────────────────────────────────────────────────── */
.tydzien{display:grid;gap:var(--s-5);}
@media(min-width:760px){ .tydzien{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(min-width:1100px){ .tydzien{grid-template-columns:repeat(4,minmax(0,1fr));} }

.tydzien__dzien{display:flex;flex-direction:column;gap:var(--s-3);}
.tydzien__glowa{padding-bottom:var(--s-3);border-bottom:1.5px solid var(--oliwka);}
.tydzien__glowa h3{font-size:20px;margin:0;}
.tydzien__glowa p{font-size:13px;color:var(--tekst-cichy);margin:2px 0 0;max-width:none;}
.tydzien__sloty{display:flex;flex-direction:column;gap:var(--s-3);}

.slot{
  border:1px dashed var(--linia);border-radius:var(--r-md);
  padding:var(--s-4);display:flex;flex-direction:column;gap:4px;
}
.slot--staly{border-style:solid;border-color:var(--oliwka);background:var(--tlo-karty);}
.slot__godz{font-size:14px;font-weight:700;margin:0;}
.slot__godz span{display:block;font-size:12px;font-weight:400;color:var(--tekst-cichy);}
.slot__co{font-size:17px;margin:2px 0 0;font-weight:700;}
.slot:not(.slot--staly) .slot__co{font-weight:400;color:var(--tekst-cichy);font-style:italic;}
.slot__opis{font-size:13px;color:var(--tekst-cichy);margin:4px 0 0;max-width:none;}

.grupa-linii{margin-bottom:var(--s-8);}
.grupa-linii__glowa{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--s-4);}
.grupa-linii__glowa h2{font-size:22px;margin:0;}
.grupa-linii__glowa p{font-size:15px;color:var(--tekst-cichy);margin:0;max-width:none;}

.linie{display:flex;flex-direction:column;border-top:1px solid var(--linia);}
.linia{border-bottom:1px solid var(--linia);}

.linia > summary{
  display:grid;gap:var(--s-2);align-items:center;
  padding:var(--s-4);cursor:pointer;list-style:none;
  transition:background .12s ease;
}
.linia > summary::-webkit-details-marker{display:none;}
.linia > summary:hover{background:var(--tlo-karty);}
.linia > summary:focus-visible{outline:2px solid var(--kraft);outline-offset:-2px;}
@media(min-width:860px){ .linia > summary{grid-template-columns:var(--linie-kolumny);gap:var(--s-5);} }

.linia__nazwa{font-size:19px;font-weight:700;display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;}
.linia__krotko{font-size:16px;color:var(--tekst-cichy);}
.linia__czas{font-size:14px;color:var(--tekst-cichy);white-space:nowrap;}
.linia__cena{font-size:19px;font-weight:700;white-space:nowrap;}
.linia__cena span{display:block;font-size:12px;font-weight:400;color:var(--tekst-cichy);}

/* Strzałka rozwijania */
.linia__strzalka{
  width:10px;height:10px;justify-self:end;
  border-right:1.5px solid var(--tekst-cichy);border-bottom:1.5px solid var(--tekst-cichy);
  transform:rotate(45deg);transition:transform .15s ease;
}
.linia[open] > summary .linia__strzalka{transform:rotate(-135deg);}
.linia[open] > summary{background:var(--tlo-karty);}

/* Klub odróżnia się kraftową kreską z lewej, nie osobną sekcją */
.linia--karnet > summary{box-shadow:inset 3px 0 0 var(--kraft);}

/* Rozwinięte szczegóły */
.linia__szczegoly{
  display:grid;gap:var(--s-5) var(--s-7);
  padding:0 var(--s-4) var(--s-6);background:var(--tlo-karty);
}
@media(min-width:860px){ .linia__szczegoly{grid-template-columns:1fr 300px;padding-left:var(--s-6);} }
.linia__cytat{font-size:20px;line-height:1.4;margin:0 0 var(--s-3);}
.linia__opis{font-size:15px;color:var(--tekst-cichy);margin:0 0 var(--s-3);}
.linia__tagi{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:0;}
.linia__prawa{display:flex;flex-direction:column;gap:var(--s-4);align-items:stretch;}
.linia__prawa dl.meta{margin-top:0;border-top:none;padding-top:0;}
.linia__prawa .btn{text-align:center;}

.linie__stopka{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  margin-top:var(--s-5);font-size:15px;color:var(--tekst-cichy);max-width:none;
}

.tag{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:3px;border:1px solid var(--linia);
  color:var(--tekst-cichy);white-space:nowrap;
}
.tag--karnet{background:var(--kraft);border-color:var(--kraft);color:#fff;}

dl.meta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14px;
  padding-top:var(--s-4);border-top:1px solid var(--linia);margin-top:auto;}
dl.meta dt{color:var(--tekst-cichy);white-space:nowrap;}
dl.meta dd{margin:0;}

.cena{font-size:26px;font-weight:700;line-height:1;}
.cena small{font-size:14px;font-weight:400;color:var(--tekst-cichy);}
/* Miejsce na zdjęcie. Proporcje zamiast sztywnej wysokości: kafelek rośnie
   razem z kolumną, a obraz wchodzi w całości. object-fit:contain, nie cover,
   bo obrazu nie wolno przyciąć. */
.karta__foto{
  aspect-ratio:3/4;width:100%;background:var(--krem-ciemny);
  border:1px solid #d8cfba;border-radius:var(--r-md);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.karta__foto::after{
  content:"zdjęcie";font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tekst-cichy);opacity:.5;
}
.karta__foto:has(img)::after{content:none;}
/* 4:3 tylko tam, gdzie zdjęcie pokazuje sytuację, a nie pracę. */
.karta__foto--poziom{aspect-ratio:4/3;}
.karta__foto img{width:100%;height:100%;object-fit:contain;display:block;}
/* Kwadrat na stronie głównej: zdjęcia są już wykadrowane do 1:1, więc wypełniają pole. */
.karta__foto--kwadrat{aspect-ratio:1/1;}
.karta__foto--kwadrat img{object-fit:cover;}

.odznaka{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--kraft);padding:4px 9px;border-radius:3px;white-space:nowrap;
}
.odznaka--oliwka{background:var(--oliwka);}

.pasek-postepu{width:180px;height:7px;background:var(--krem-ciemny);border-radius:99px;overflow:hidden;}
.pasek-postepu > div{height:100%;background:var(--kraft);}

.lista-czysta{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);}
/* Lista z kropkami: gdy wyliczenie ma się czytać jako wyliczenie, nie jako akapity. */
.lista-punktowana{margin:0;padding-left:22px;display:grid;gap:8px;max-width:62ch;color:var(--tekst-cichy);}
.lista-punktowana li::marker{color:var(--oliwka);}

/* Obrazek w treści: pokazujemy go w całości, więc bez kadrowania i bez tła-zaślepki. */
.obrazek{margin:0;display:flex;flex-direction:column;gap:10px;max-width:460px;}
/* Karta spotkania: zdanie klienta nad nazwą i wiersz faktów pod opisem. */
.karta__cytat{margin:0;font-style:italic;color:var(--tekst-cichy);font-size:15px;}
.karta__fakty{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--linia);
  font-size:13.5px;color:var(--tekst-cichy);}
.karta--plakat .karta__fakty, .karta .karta__fakty + .btn{margin-top:0;}
.karta .karta__fakty + .btn{margin-top:14px;align-self:flex-start;}
/* Spotkanie bez terminów: tyle samo miejsca co przycisk, żeby karty stały równo. */
.karta__wkrotce{margin:14px 0 0;padding:9px 0;font-size:14px;color:var(--kraft);}

/* Pasek na końcu podstrony: dokąd dalej, gdy ktoś doczytał do końca. */
.pasek-dalej{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--krem-jasny);border:1px solid var(--linia);border-radius:var(--r-lg);padding:26px 28px;}
.pasek-dalej h2{margin:0;}
@media(max-width:620px){ .pasek-dalej{align-items:flex-start;} }

/* Lista spotkań: jeden wiersz na spotkanie, cena i przycisk zawsze w tym samym miejscu. */
.spotkania{display:flex;flex-direction:column;}
.spotkanie{display:grid;grid-template-columns:1fr auto;gap:10px 28px;align-items:center;
  padding:15px 0;border-top:1px solid var(--linia);}
.spotkanie:last-child{border-bottom:1px solid var(--linia);}
.spotkanie__opis{display:flex;flex-direction:column;gap:3px;max-width:60ch;}
.spotkanie__opis h3{margin:0;font-size:19px;line-height:1.25;}
.spotkanie__dla{margin:0;font-size:15px;color:var(--tekst-cichy);}
.spotkanie__fakty{margin:0;font-size:13px;color:var(--tekst-cichy);opacity:.8;}
.spotkanie__akcja{display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right;}
.spotkanie__akcja .cena{font-size:21px;line-height:1.2;white-space:nowrap;}
.spotkanie__akcja .cena small{display:block;font-size:12.5px;color:var(--tekst-cichy);}
.spotkanie__wkrotce{margin:0;font-size:13.5px;color:var(--kraft);white-space:nowrap;}
/* Voucher stoi w tej samej liście co spotkania, ale nie jest spotkaniem,
   więc dostaje tło i odznakę, żeby było jasne, że to inna rzecz. */
.spotkanie--wyrozniony{background:var(--krem-jasny);border-radius:var(--r-md);
  padding:18px 20px;margin-top:10px;border-top:0;}
.spotkanie--wyrozniony + .spotkanie{border-top:1px solid var(--linia);}
.spotkania .spotkanie--wyrozniony:last-child{border-bottom:0;}
.spotkanie__odznaka{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kraft);border:1px solid var(--kraft);border-radius:999px;padding:2px 9px;
  vertical-align:middle;margin-left:8px;white-space:nowrap;}
@media(max-width:620px){
  .spotkanie{grid-template-columns:1fr;gap:12px;}
  .spotkanie__akcja{align-items:flex-start;text-align:left;}
}

/* Regulamin: numerowana lista, w której każdy punkt zaczyna się wytłuszczoną nazwą. */
.lista-regulamin{margin:0;padding-left:24px;display:grid;gap:14px;max-width:72ch;
  color:var(--tekst-cichy);font-size:15px;}
.lista-regulamin li::marker{color:var(--oliwka);font-weight:700;}
.lista-regulamin strong{color:var(--tekst);}

/* Karta jest kremowa jak tło strony, więc ramka musi być wyraźnie ciemniejsza niż --linia. */
.obrazek img{width:100%;height:auto;display:block;border-radius:var(--r-md);
  border:1px solid rgba(43,47,39,.22);}
.obrazek figcaption{font-size:14px;color:var(--tekst-cichy);}
.lista-numer{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-5);}
.lista-numer .nr{font-size:34px;font-weight:700;color:var(--kraft);line-height:1;}

table.cennik{border-collapse:collapse;width:100%;font-size:15px;}
table.cennik th,table.cennik td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--linia);}
table.cennik th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-cichy);}

/* ── Notatnik roboczy ────────────────────────────────────────────────
   Wszystkie pomarańczowe notatki z całej strony, zwinięte na samym dole.
   Na produkcji tego bloku nie ma w ogóle.                             */
.notatnik{
  max-width:1180px;margin:64px auto 0;padding:0 32px 72px;
}
.notatnik > summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border:1px dashed var(--kraft);border-radius:5px;
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--kraft);
}
.notatnik > summary::-webkit-details-marker{display:none;}
.notatnik > summary span{
  font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--tekst-cichy);font-size:14px;
}
.notatnik__tresc{padding-top:14px;display:flex;flex-direction:column;gap:12px;}
.notatnik__tresc .notka{margin:0;}

/* ── Które dni w ogóle wchodzą w grę ─────────────────────────────────
   Z całego grafiku tygodnia zostaje na stronie tylko to.              */
.dni{
  border:1px solid var(--linia);border-radius:6px;
  padding:32px 34px;display:flex;gap:40px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.dni__glowa{display:flex;flex-direction:column;gap:8px;max-width:44ch;}
.dni__glowa h2{margin:0;}
.dni__glowa p{margin:0;color:var(--tekst-cichy);font-size:15px;}

.dni__lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  gap:14px 26px;flex:1;min-width:280px;
}
.dni__lista li{display:flex;flex-direction:column;gap:3px;}
.dni__lista strong{font-size:17px;}
.dni__lista span{font-size:15px;color:var(--tekst-cichy);}

/* ── Co jest w cenie ─────────────────────────────────────────────────
   Raz, nad listą, zamiast powtarzania przy każdej pozycji.            */
.w-cenie{
  margin-top:26px;background:var(--krem);
  border:1px solid var(--linia);border-radius:6px;padding:22px 26px;
  display:flex;flex-direction:column;gap:12px;
}
.w-cenie ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 28px;
}
.w-cenie li{font-size:15px;padding-left:22px;position:relative;}
.w-cenie li::before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:50%;background:var(--oliwka);
}
.w-cenie__stopka{margin:0;font-size:14px;color:var(--tekst-cichy);}

/* ── Najbliższe terminy ──────────────────────────────────────────────
   Kupuje się datę, nie produkt. Kafelek terminu ma trzy piętra:
   data (największa), godzina, liczba wolnych miejsc.                  */
.terminy{margin-top:22px;display:flex;flex-direction:column;gap:10px;}
.terminy__lista{display:flex;gap:10px;flex-wrap:wrap;}

.termin{
  display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--linia);border-radius:5px;
  padding:11px 16px;min-width:132px;
  text-decoration:none;color:inherit;background:var(--krem);
  transition:border-color .15s, transform .15s;
}
.termin:hover{border-color:var(--oliwka);transform:translateY(-1px);}
.termin__data{font-size:16px;font-weight:700;}
.termin__godz{font-size:14px;color:var(--tekst-cichy);}
.termin__miejsca{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-cichy);margin-top:4px;}
.termin__miejsca--malo{color:var(--oliwka);font-weight:700;}

.termin--zajety{opacity:.45;pointer-events:none;text-decoration:line-through;}

.termin--wiecej{
  justify-content:center;background:none;border-style:dashed;
  font-size:14px;color:var(--tekst-cichy);min-width:0;
}

.terminy__pusto{
  font-size:15px;color:var(--tekst-cichy);
  background:var(--krem);border:1px dashed var(--linia);border-radius:5px;
  padding:14px 16px;margin:0;
}

/* Archiwum — prace, których już nie ma. Ciszej niż karty do kupienia:
   bez ramki, bez ceny, bez przycisku. Zdjęcie ma nieść całą treść. */
.karta--archiwum{border:0;padding:0;background:none;gap:8px;}
.karta--archiwum .karta__foto{border-radius:4px;}
.karta--archiwum h3{margin:0;}

@media(max-width:900px){
  h1{font-size:32px;} h2{font-size:25px;}
  .menu{gap:14px;font-size:14px;}
  .naglowek{position:static;}
  .naglowek__wnetrze{flex-direction:column;align-items:flex-start;gap:12px;padding-block:14px;}
}

/* Pełny rozkład tygodnia: kilka wierszy na dzień, dyżury wyróżnione.
   Dopisane 09.09, bo skrócona wersja gubiła piątkowy dyżur i sobotę. */
.dni__lista--pelna{align-items:start;gap:22px 26px;}
.dni__lista--pelna li{gap:5px;}
.dni__lista--pelna strong{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tekst-cichy);margin-bottom:3px;
}
.dni__lista--pelna span{font-size:15px;color:var(--tekst);}
.dni__otwarte{
  font-weight:700;color:var(--oliwka);
  display:inline-flex;align-items:baseline;gap:7px;
}
.dni__otwarte::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--oliwka);flex:none;
}

/* ── Karta wyróżniona (roczny pakiet Listów) ──────────────────────────
   Wcześniej sklejona z .sekcja--odwrotka: ciemne tło, ale cena i część
   tekstu dziedziczyły ciemny kolor, więc były nieczytelne albo znikały. */
.karta--wyrozniona{
  position:relative;
  background:var(--oliwka);
  border:1.5px solid var(--oliwka);
  color:var(--krem);
}
.karta--wyrozniona h3,
.karta--wyrozniona .cena{color:var(--krem);}
/* Przycisk na oliwkowej karcie: bez odwrócenia kolorów zlewał się z tłem. */
.karta--wyrozniona .btn{background:var(--krem);color:var(--oliwka);border-color:var(--krem);}
.karta--wyrozniona .btn:hover{background:transparent;color:var(--krem);}
.karta--wyrozniona .cena{font-size:32px;}
.karta--wyrozniona__za{font-size:15px;color:rgba(239,233,220,.82);margin:0;}
.karta--wyrozniona .karta__dla-kogo{
  color:rgba(239,233,220,.92);
  border-color:rgba(239,233,220,.28);
}
.karta--wyrozniona .odznaka{
  position:absolute;top:-11px;left:26px;
  background:var(--kraft);color:#fff;border-color:var(--kraft);
}

/* Zdanie o wizycie poza dyżurem: ciszej niż reszta, bo to wyjątek. */
.dni__poza{
  font-size:14px !important;
  padding-top:4px;
  border-top:1px solid var(--linia);
  margin-top:4px !important;
}

/* Licznik miejsc w Listach. Trzy stany (ustalenie A13): liczba wolnych miejsc,
   „ostatnie miejsce” bez liczby, „skład zamknięty” bez liczby i bez koszyka. */
.zapisy__licznik{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--tekst-cichy);}
.zapisy__stan{font-size:15px;font-weight:700;}
.zapisy__stan--malo{color:var(--kraft);}
.zapisy__stan--zamkniete{color:var(--tekst-cichy);font-weight:400;
  border:1px solid var(--linia);border-radius:99px;padding:5px 14px;}

/* ── Plakaty: karta jednej pracy ──────────────────────────────────────────
   Karta sprzedaje obraz, nie cennik: zdjęcie, tytuł, zdanie historii, cena
   od której się zaczyna i ile sztuk z nakładu zostało. Wybór rozmiaru i
   oprawy dzieje się dalej, na stronie produktu w Shopify. */
.karta--plakat{gap:12px;}
.plakat__opis{font-size:15px;color:var(--tekst-cichy);margin:0;}
.plakat__stopka{
  margin:auto 0 0;padding-top:12px;border-top:1px solid var(--linia);
  display:flex;flex-direction:column;gap:8px;
}
.plakat__stopka .cena{font-size:22px;}
.plakat__stopka .cena small{font-size:13px;}
.plakat__licznik{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tekst-cichy);}
.plakat__dopisek{margin:18px 0 0;font-size:15px;color:var(--tekst-cichy);}
.plakat__gwarancja{margin:8px 0 0;font-size:13px;color:var(--tekst-cichy);}
/* Drugie zdjęcie na karcie: praca w ramie na ścianie, mniejsze od skanu, żeby nie odbierało mu pierwszeństwa. */
/* Karta z dwoma ujęciami: skan pracy i to samo w ramie na ścianie, przełączane w miejscu. */
.karta__foto--zamiana img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .18s ease;}
.karta__foto--zamiana .karta__foto--druga{object-fit:cover;opacity:0;}
.karta__foto--zamiana[data-pokaz="sciana"] .karta__foto--druga{opacity:1;}
.karta__foto--zamiana[data-pokaz="sciana"] img:not(.karta__foto--druga){opacity:0;}
.plakat__zamiana{
  align-self:flex-start;margin:8px 0 0;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13px;color:var(--oliwka);text-decoration:underline;text-underline-offset:3px;
}
.plakat__zamiana:hover{color:var(--tekst);}
.plakat__zamiana:focus-visible{outline:2px solid var(--oliwka);outline-offset:3px;border-radius:3px;}
.foto-blok{display:flex;flex-direction:column;gap:10px;margin:0;}
.foto__podpis{margin:0;font-size:14px;color:var(--tekst-cichy);max-width:44ch;}

/* Pięć zdjęć w rzędzie (agnieszkapohl.pl, „Obrazy w nowych domach”). */
@media(min-width:640px){ .siatka--5{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1000px){ .siatka--5{grid-template-columns:repeat(5,1fr);} }