/* ==========================================================================
   Nałęczów Stanisława Strzyżyńskiego — wirtualny spacer
   Arkusz stylów. Priorytet nr 1: dostępność dla osób starszych (65+).
   Kontrast min. AAA (7:1), duży tekst, duże elementy klikalne, zero animacji
   przy scrollu, pełna obsługa klawiatury. Patrz TRESCI-DO-UZUPELNIENIA.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonty lokalne (bez Google Fonts / CDN)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora/lora-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora/lora-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora/lora-italic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora/lora-italic-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans/source-sans-3-normal-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans/source-sans-3-normal-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokeny (custom properties)
   -------------------------------------------------------------------------- */

:root {
  /* Paleta: ciepła biel / kość słoniowa + głęboka zieleń + grafit */
  --color-bg: #f7f3ea;
  --color-bg-alt: #efe9db;
  --color-bg-card: #ffffff;
  --color-text: #241f19;
  --color-text-on-accent: #ffffff;
  --color-accent: #2f4a34;       /* głęboka zieleń — linki, przyciski, aktywna nawigacja */
  --color-accent-dark: #22362a;  /* hover/active stanu zieleni */
  --color-accent-brown: #5a3e22; /* ciepły brąz — patyna, akcenty dekoracyjne */
  --color-border: #cabe9f;
  --color-border-strong: #8c7a5b;
  --color-focus: #241f19;
  --color-danger: #7a2a1e;
  --color-accent-tint: #e3ead9;  /* jasna zieleń — tło karty "Nagranie" na podstronach rzeźb */

  /* Typografia */
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", Arial, Helvetica, sans-serif;
  --font-size-base: 1.25rem;   /* 20px przy domyślnych ustawieniach przeglądarki */
  --line-height-base: 1.7;
  --measure: 65ch;             /* maksymalna szerokość kolumny tekstu */

  /* Odstępy */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;

  /* Elementy interaktywne */
  --tap-min: 3rem; /* 48px przy 16px bazowym rem */
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow-card: 0 2px 10px rgba(36, 31, 25, 0.12);
  --shadow-popup: 0 8px 28px rgba(36, 31, 25, 0.25);

  --focus-ring: 0 0 0 4px var(--color-bg), 0 0 0 7px var(--color-focus);
}

/* Skala tekstu A / A+ / A++, sterowana przez js/main.js (klasa na <html>) */
html.text-scale-125 { font-size: 125%; }
html.text-scale-150 { font-size: 150%; }

/* Na wąskich ekranach zmniejszamy odstępy (marginesy, odstępy w gridach,
   padding kart) o ok. 25%, żeby więcej treści mieściło się na ekranie bez
   przewijania. --tap-min (minimalny rozmiar klikalnych elementów, 48px) i
   --line-height-base (interlinia tekstu ciągłego, min. 1.7 — wymóg
   dostępności) celowo NIE są tu dotknięte. */
@media (max-width: 640px) {
  :root {
    --space-1: 0.375rem;
    --space-2: 0.75rem;
    --space-3: 1.125rem;
    --space-4: 1.5rem;
    --space-5: 2.25rem;
    --space-6: 3rem;
  }
}

/* --------------------------------------------------------------------------
   3. Reset i base
   -------------------------------------------------------------------------- */

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

html {
  font-size: 100%;
  scroll-behavior: auto;
  /* Wyłącza automatyczne "podbijanie" rozmiaru tekstu przez mobilną
     Chrome (Android) — bez tego przeglądarka potrafi samodzielnie
     powiększyć nagłówki na wąskim ekranie ponad to, co ustala CSS,
     przez co tekst (i to, co się wokół niego układa) nie mieści się
     w ekranie i nie zawija poprawnie. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-text);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 var(--space-2) 0;
  overflow-wrap: break-word;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; margin-top: var(--space-5); }
h3 { font-size: 1.4rem; margin-top: var(--space-4); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 var(--space-3) 0; max-width: var(--measure); overflow-wrap: break-word; }
ul, ol { margin: 0 0 var(--space-3) 0; padding-left: 1.4em; }
li { margin-bottom: var(--space-1); max-width: var(--measure); overflow-wrap: break-word; }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
  font-weight: 600;
}
a:hover { color: var(--color-accent-dark); }
a:visited { color: var(--color-accent); }

strong { font-weight: 700; }

hr {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: var(--space-5) 0;
}

/* Widoczny pierścień fokusu wszędzie, dla klawiatury i myszy jednakowo */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 0.25rem;
}
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, .leaflet-marker-icon:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Zero animacji przy scrollu / paralaks — i pełne poszanowanie preferencji */
* {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: no-preference) {
  a, button, .btn, .tile, .marker-pin { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
}

/* --------------------------------------------------------------------------
   4. Layout ogólny
   -------------------------------------------------------------------------- */

.container {
  max-width: 68rem;
  margin: 0 auto;
  /* Celowo tylko lewy/prawy padding (nie skrót "padding") — .container bywa
     łączony z innymi klasami (np. .header-top), które same ustalają własny
     odstęp górny/dolny; skrót "padding" zerowałby go, który z dwóch
     regularnie wygrywa zależy tylko od kolejności w pliku. */
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.content {
  max-width: var(--measure);
}

main { display: block; padding-top: var(--space-4); }

section { margin-bottom: var(--space-6); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -6rem;
  z-index: 1000;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-2);
  box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   5. Nagłówek i nawigacja — zawsze widoczna, bez hamburgera
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--color-bg-card);
  border-bottom: 3px solid var(--color-border);
}

.header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  /* Tylko góra/dół — lewy/prawy odstęp należy do .container (patrz tam). */
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
}
.site-title a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
}
.site-title a:hover { color: var(--color-accent); }
.site-title .site-title-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-accent-brown);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Przełącznik rozmiaru czcionki A / A+ / A++ */
.text-size-switch {
  display: flex;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.text-size-switch button {
  font-family: var(--font-sans);
  font-weight: 700;
  background: var(--color-bg-card);
  color: var(--color-text);
  border: none;
  border-right: 2px solid var(--color-border-strong);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 1rem;
}
.text-size-switch button:last-child { border-right: none; }
.text-size-switch button:hover { background: var(--color-bg-alt); }
.text-size-switch button[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.5rem var(--space-2);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}
.lang-switch:hover { background: var(--color-bg-alt); }

/* Nawigacja główna */
.site-nav {
  background: var(--color-accent);
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-on-accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: 4px solid transparent;
}
.site-nav a:hover {
  background: var(--color-accent-dark);
}
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--color-bg-card);
  background: var(--color-accent-dark);
}
.site-nav a:focus-visible {
  box-shadow: inset var(--focus-ring);
}

/* Numer etapu spaceru przy pozycjach menu — tylko na telefonie, gdzie menu
   jest pionową, przewijaną listą i numeracja pomaga się w niej odnaleźć.
   Na desktopie numerów w menu nie pokazujemy (pozycje trasy widać na mapie
   i w kafelkach na stronie głównej). */
.nav-step { display: none; margin-right: 0.35em; }

@media (max-width: 640px) {
  .nav-step { display: inline; }
  /* Przy domyślnym rozmiarze tekstu menu mieści się w całości — bez
     ograniczenia wysokości i bez własnego przewijania, żeby swipe po
     menu przewijał całą stronę, a nie tylko jego zawartość w osobnym,
     wewnętrznym kontenerze (patrz reguła niżej dla A+/A++). */
  .site-nav { max-height: none; overflow-y: visible; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { width: 100%; padding: 0.75rem 1rem; font-size: 1.15rem; }
  .header-top { flex-direction: column; align-items: stretch; }
  .header-tools { justify-content: space-between; }
}

@media (max-width: 640px) {
  /* Po włączeniu powiększenia tekstu (A+/A++) pozycji menu może nie
     zmieścić się na ekranie po przeładowaniu strony — odwiedzający nie
     widziałby żadnej treści i mógłby pomyśleć, że link nie zadziałał.
     Tylko w tym wypadku ograniczamy wysokość do połowy ekranu; gdy
     pozycji jest więcej niż się mieści, menu przewija się niezależnie od
     reszty strony. Celowo "svh" (small viewport height), nie zwykłe
     "vh": na telefonie "vh" bywa przeliczane na bieżąco w trakcie
     przewijania, gdy pasek adresu przeglądarki chowa się/pokazuje — to
     ta sama zmiana przelicza max-height menu klatka po klatce, co widać
     jako delikatne drganie góra-dół treści wewnątrz tego przewijalnego
     kontenera. "svh" odnosi się do najmniejszego możliwego widoku (pasek
     adresu rozwinięty) i nie zmienia się w trakcie gestu
     przewijania/swipe'a. Zostawiamy "vh" jako wartość zapasową dla
     starszych przeglądarek bez obsługi "svh". */
  html.text-scale-125 .site-nav,
  html.text-scale-150 .site-nav {
    max-height: 50vh;
    max-height: 50svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   6. Przyciski i CTA
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}
.btn:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-text-on-accent); }
.btn:visited { color: var(--color-text-on-accent); }

.btn--secondary {
  background: var(--color-bg-card);
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn--secondary:hover { background: var(--color-bg-alt); color: var(--color-accent-dark); }
.btn--secondary:visited { color: var(--color-accent); }

.btn--large { font-size: 1.25rem; padding: var(--space-3) var(--space-4); min-height: 3.5rem; }
.btn--block { width: 100%; }

.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   7. Karuzela listy punktów (pod mapą, synchronizowana z mapą)
   -------------------------------------------------------------------------- */

.location-carousel { position: relative; }

.location-list {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  margin: var(--space-3) 0 0 0;
  padding: 0 0 var(--space-1);
  scrollbar-width: none;
}
.location-list::-webkit-scrollbar { display: none; }

.location-list > li {
  flex: 0 0 min(20rem, 85%);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (prefers-reduced-motion: reduce) {
  .location-list { scroll-behavior: auto; }
}

.location-carousel-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.location-carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: none;
  cursor: pointer;
}
.location-carousel-btn:hover { background: var(--color-accent-dark); }
.location-carousel-btn:focus-visible { box-shadow: var(--focus-ring); }
.location-carousel-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

.location-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  text-align: left;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  cursor: pointer;
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.location-item:hover, .location-item:focus-visible, .location-item.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(36, 31, 25, 0.2);
}
.location-item .location-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 2.25rem;
  min-height: 2.25rem;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.1rem;
  border: 2px solid var(--color-bg-card);
}
.location-item .location-text strong { display: block; font-size: 1.1rem; margin-bottom: 0.15em; }

/* --------------------------------------------------------------------------
   8. Mapa
   -------------------------------------------------------------------------- */

.map-section { margin-bottom: var(--space-4); }

.map-wrap {
  position: relative;
  border: 3px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
}

#map, .map-el {
  width: 100%;
  height: 500px;
  background: var(--color-bg-alt);
}
.map-el--mini { height: 320px; }

@media (max-width: 640px) {
  #map, .map-el { height: 400px; }
  .map-el--mini { height: 280px; }
}

.map-scroll-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 31, 25, 0.55);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.15rem;
  text-align: center;
  padding: var(--space-3);
  z-index: 500;
  cursor: pointer;
}
.map-scroll-hint[hidden] { display: none; }

.map-fallback {
  padding: var(--space-3);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}

.map-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: 1.05rem;
}
.map-meta .map-distance { font-weight: 700; color: var(--color-accent-brown); }

/* Numerowane pinezki Leaflet (44px+) */
.marker-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--color-accent);
  border: 3px solid var(--color-bg-card);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.marker-pin span {
  transform: rotate(45deg);
  color: var(--color-text-on-accent);
  font-weight: 700;
  font-size: 1.15rem;
  font-family: var(--font-sans);
}
.marker-pin.is-active { background: var(--color-accent-brown); }

.marker-user {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #1e63c9;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(30,99,201,0.35);
}

/* Popup Leaflet — duży, czytelny */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popup);
}
.leaflet-popup-content {
  margin: var(--space-2);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.5;
  min-width: 220px;
}
.popup-title { font-family: var(--font-serif); font-size: 1.2rem; margin: var(--space-1) 0; }
.popup-meta { color: var(--color-accent-brown); font-weight: 700; margin-bottom: var(--space-2); }
.popup-img { border-radius: var(--radius); margin-bottom: var(--space-1); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.leaflet-popup-close-button {
  width: 2.25rem !important;
  height: 2.25rem !important;
  font-size: 1.6rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  top: 0.25rem !important;
  right: 0.25rem !important;
}

/* Kontrolki zoom — powiększone */
.leaflet-touch .leaflet-bar a,
.leaflet-bar a {
  width: 3rem !important;
  height: 3rem !important;
  line-height: 3rem !important;
  font-size: 1.5rem !important;
}
.leaflet-control-attribution { font-size: 0.85rem; }
.leaflet-control-attribution a { color: var(--color-accent-dark); }

.map-geolocate-status {
  margin-top: var(--space-2);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. Odtwarzacz audio (własne, duże kontrolki)
   -------------------------------------------------------------------------- */

.narrator-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 1.05rem;
}
.narrator-byline span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
  flex: 1 1 auto;
}
.narrator-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #8c7a5b;
  object-fit: cover;
  flex-shrink: 0;
}
/* Karta "Nagranie" na podstronach rzeźb */
.media-section {
  background: var(--color-accent-tint);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}
.media-section-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-brown);
  margin-bottom: var(--space-2);
}
/* Opcjonalna karta "Zaproszenie do pracowni" (np. Panna z rybą) */
.invitation-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-accent-brown);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}
.invitation-box h2 { margin-top: 0; }
.invitation-box .phone-number { font-weight: 700; font-size: 1.2rem; white-space: nowrap; }
.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Film nagrany pionowo (np. YouTube Shorts) — węższy kontener, żeby na
   dużym ekranie nie robił się absurdalnie wysoki przy pełnej szerokości. */
.video-wrap--portrait {
  aspect-ratio: 9 / 16;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}

.audio-player {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  container-type: inline-size;
}
.audio-player.is-unavailable { text-align: center; }

/* Rząd 1: pasek postępu + łączny czas trwania */
.audio-progress-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.audio-progress-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 1.5rem;
}

/* Statyczny tor pod spodem (cały odcinek, nieodtworzony kolor) — osobna
   warstwa, żeby natywny tor suwaka nie prześwitywał przez nakładkę
   odtworzonego odcinka (.audio-progress-played) cieńszą, jaśniejszą kreską. */
.audio-progress-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--color-border);
}

/* Natywny <input type="range"> — pełna obsługa klawiatury/dotyku/czytników
   ekranu bez dodatkowego JS. Jego własny tor jest przezroczysty (tor
   widoczny to warstwa .audio-progress-wrap::before pod spodem) — inaczej
   przebijałby przez ciemną nakładkę odtworzonego odcinka. */
.audio-progress {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 0.25rem;
  background: transparent;
  cursor: pointer;
}
.audio-progress::-webkit-slider-runnable-track { height: 0.25rem; border-radius: 999px; background: transparent; }
.audio-progress::-moz-range-track { height: 0.25rem; border-radius: 999px; background: transparent; }
.audio-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  cursor: pointer;
  margin-top: -0.525rem;
}
.audio-progress::-moz-range-thumb {
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  cursor: pointer;
}

/* Nakładka pokazująca odtworzony odcinek jako pogrubioną kreskę — czysto
   kosmetyczna warstwa pod suwakiem, szerokość ustawiana w JS. */
.audio-progress-played {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  height: 0.55rem;
  width: 0;
  background: var(--color-accent);
  border-radius: 999px;
  pointer-events: none;
}

.audio-time {
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-text);
}

/* Rząd 2: cofnij / odtwórz / przewiń, wyśrodkowane; prędkość po prawej */
.audio-controls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
}

.audio-controls-center {
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--color-accent-brown);
  cursor: pointer;
  font-weight: 700;
}
.audio-btn:hover { background: var(--color-bg-alt); }

.audio-btn--seek {
  width: 3rem; height: 3rem;
  font-size: 0.8rem;
  border-radius: var(--radius-lg);
}
.seek-icon { width: 1.8rem; height: 1.8rem; }

.audio-btn--play {
  width: 4rem; height: 4rem;
  font-size: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.audio-btn--play:hover { background: var(--color-accent-dark); }

.audio-speed-toggle {
  grid-column: 3;
  justify-self: end;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0.4rem 0.9rem;
  border: none;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-accent);
  font-weight: 700;
  cursor: pointer;
}
.audio-speed-toggle:hover { background: var(--color-border); }

/* Na wąskich kartach (mały telefon i/lub powiększony tekst A++) cofnij/
   odtwórz/przewiń i przełącznik prędkości nie mieszczą się już w jednym
   rzędzie bez nachodzenia na siebie — przenieś przełącznik prędkości do
   własnego, wyśrodkowanego rzędu pod spodem zamiast dopuszczać nakładanie. */
@container (max-width: 285px) {
  .audio-controls-row { row-gap: var(--space-2); }
  .audio-speed-toggle {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: var(--space-2);
  }
}

/* Skrajny przypadek: bardzo wąska karta (stary/mały telefon) razem z
   powiększonym tekstem A++ — nawet samo cofnij/odtwórz/przewiń się nie
   mieści. Pomniejsz te trzy przyciski, żeby zmieściły się bez zachodzenia
   na siebie ani przycinania etykiet. */
@container (max-width: 200px) {
  .audio-controls-center { gap: var(--space-1); }
  .audio-btn--seek { width: 2.5rem; height: 2.5rem; font-size: 0.7rem; }
  .seek-icon { width: 1.5rem; height: 1.5rem; }
  .audio-btn--play { width: 3.5rem; height: 3.5rem; font-size: 1.3rem; }
}

.listen-only-btn { margin-top: var(--space-1); }

details.transcript {
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--color-bg-card);
}
details.transcript summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  gap: 0.4em;
  list-style: none;
}
details.transcript summary::-webkit-details-marker { display: none; }
details.transcript summary::before {
  content: "▸";
  display: inline-block;
  font-size: 0.85em;
  transition: transform 0.15s ease;
}
details.transcript[open] summary::before { transform: rotate(90deg); }
details.transcript .transcript-body { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   10b. Nagłówek podstrony rzeźby — odznaka trasy i siatka metadanych
   -------------------------------------------------------------------------- */

.route-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.route-badge-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: 700;
  font-size: 1.15rem;
}
.route-badge-label {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-brown);
  overflow-wrap: break-word;
  min-width: 0;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-3);
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}
.meta-grid-item { min-width: 0; }
.meta-grid-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-brown);
  margin-bottom: 0.25rem;
  overflow-wrap: break-word;
}
.meta-grid-value {
  display: block;
  font-size: 1.1rem;
  color: var(--color-text);
  overflow-wrap: break-word;
}
/* Na desktopie prawdziwa siatka 2x2 — każde pole we własnej komórce, bez
   rozciągania na pełną szerokość. Na telefonie Miejsce i Autorstwo dostają
   całą szerokość (patrz media query niżej), żeby dłuższy tekst miał gdzie
   się sensownie zawinąć. */

@media (max-width: 640px) {
  .meta-grid-item--wide { grid-column: 1 / -1; }
  .meta-grid-label, .meta-grid-value, .route-badge-label,
  .narrator-byline span:last-child {
    line-height: 1.3;
  }
  /* Awatar narratora tylko w widoku desktopowym, na życzenie właściciela
     repozytorium — na mobile zostaje czysty tekst. */
  .narrator-avatar { display: none; }
}

/* --------------------------------------------------------------------------
   10. Treść / figury / lightbox
   -------------------------------------------------------------------------- */

figure.content-figure {
  margin: var(--space-4) 0;
  max-width: 100%;
}
figure.content-figure img {
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  cursor: zoom-in;
  width: 100%;
}
figure.content-figure figcaption {
  margin-top: var(--space-1);
  font-size: 1rem;
  color: var(--color-accent-brown);
  font-style: italic;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 13, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 2000;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 85vh; border-radius: var(--radius); }
.lightbox-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--color-bg-card);
  color: var(--color-text);
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   11. Ramka „Jak dojść"
   -------------------------------------------------------------------------- */

.how-to-get-box {
  background: var(--color-bg-alt);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}
.how-to-get-box h2 { margin-top: 0; }
.how-to-get-box .btn { margin: var(--space-2) 0; }
.how-to-get-box .field { margin-bottom: var(--space-2); }
.how-to-get-box .field-label { font-weight: 700; color: var(--color-accent-brown); display: block; }

/* --------------------------------------------------------------------------
   12. Nawigacja prev/next
   -------------------------------------------------------------------------- */

.route-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}
.route-nav .btn { flex-direction: column; text-align: center; height: auto; padding: var(--space-3); }
.route-nav .route-nav-label { display: block; font-size: 0.9rem; font-weight: 400; opacity: 0.9; }
.route-nav .to-map { grid-column: 1 / -1; }

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

/* --------------------------------------------------------------------------
   13. Kroki „Jak korzystać"
   -------------------------------------------------------------------------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
}
.step-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.step-number {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------------------
   14. Biogram
   -------------------------------------------------------------------------- */

.bio-section {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--space-4);
  align-items: start;
}
.bio-section img { border-radius: var(--radius-lg); border: 2px solid var(--color-border); }
@media (max-width: 720px) {
  .bio-section { grid-template-columns: 1fr; }
  .bio-section img { max-width: 16rem; }
}

/* --------------------------------------------------------------------------
   15. Stopka
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-bg-alt);
  border-top: 3px solid var(--color-border);
  margin-top: var(--space-6);
  padding: var(--space-4) 0;
  font-size: 1rem;
}
.site-footer a { color: var(--color-accent); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3);
}
.footer-admin-note { font-size: 0.85rem; }

.footer-funding {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}
.footer-funding p { font-size: 0.9rem; margin: 0; text-align: left; }

/* Logotypy dofinansowania (Komitet ds. Pożytku Publicznego / NIW /
   Międzynarodowy Rok Wolontariatu) — wymagane oznaczenie przy publikacji
   materiałów sfinansowanych z Funduszu Inicjatyw MRW. Obraz ma białe tło
   (oficjalne logotypy), stąd kontrastowa "karta" wokół niego. */
.funding-logos {
  display: block;
  width: 100%;
  max-width: 65ch;
  height: auto;
  margin: 0 0 var(--space-2) 0;
  background: #ffffff;
  border-radius: var(--radius);
  padding: var(--space-2);
}
/* W stopce logotypy mają być małe, nie na całą szerokość — jak w sekcji
   "Partnerzy i finansowanie" na stronie O projekcie. */
.footer-funding .funding-logos {
  width: 24rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   16. Sekcja "O projekcie" — kontakt, partnerzy
   -------------------------------------------------------------------------- */

.contact-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.contact-box .btn { flex: 1 1 14rem; }

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-2);
}
.partner-logo-slot {
  width: 10rem; height: 5rem;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-brown);
  font-size: 0.9rem;
  text-align: center;
  padding: var(--space-1);
}

/* --------------------------------------------------------------------------
   17. Strona generatora / arkusza QR (poza @media print poniżej)
   -------------------------------------------------------------------------- */

.qr-tool-panel {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.qr-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}
.qr-preview-card {
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2);
  text-align: center;
  background: var(--color-bg-card);
}
.qr-preview-card svg, .qr-preview-card img { margin: 0 auto var(--space-1) auto; }
.qr-preview-card .btn { width: 100%; margin-top: var(--space-1); }

/* --------------------------------------------------------------------------
   18. Arkusz do druku tabliczek QR
   -------------------------------------------------------------------------- */

.print-sheet { max-width: 210mm; margin: 0 auto; padding: var(--space-3); }
.print-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10mm;
}
.print-tile {
  border: 1px solid #999;
  border-radius: 4mm;
  padding: 8mm;
  text-align: center;
  break-inside: avoid;
}
.print-tile h2 { font-size: 14pt; margin: 0 0 4mm 0; }
.print-tile .qr-holder { width: 55mm; height: 55mm; margin: 0 auto 3mm auto; }
.print-tile .qr-holder svg { width: 100%; height: 100%; }
.print-tile .url-text { font-family: monospace; font-size: 9pt; word-break: break-all; margin: 2mm 0; }
.print-tile .instructions { font-size: 8pt; line-height: 1.4; color: #333; }

@media print {
  .site-header, .site-nav, .site-footer, .no-print { display: none !important; }
  body { background: #fff; }
  .print-tile { border-color: #666; }
  a { text-decoration: none; color: #000; }
}
@media screen {
  .print-only { display: none; }
}

/* --------------------------------------------------------------------------
   19. Media queries ogólne
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.5rem; }
  .container { padding-left: var(--space-2); padding-right: var(--space-2); }
  .bio-section, .location-list { gap: var(--space-2); }
  .footer-funding { grid-template-columns: 1fr; text-align: center; }
  .footer-funding p { text-align: center; }
  .footer-funding .funding-logos { width: 100%; max-width: 24rem; min-width: 0; margin: 0 auto; }
}