/* ==========================================================================
   Baza: reset, typografia, układ, wspólne komponenty i narzędzia ruchu.
   Każda sekcja ma WŁASNY plik css/<sekcja>.css i nie nadpisuje tych klas globalnie
   (tylko w swoim zakresie, np. .hero .btn {…}).
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
/* Bez border-radius: obrys idzie po promieniu samego elementu (karty, pigułki, koła). */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Fokus i kotwice nie chowają się pod przyklejonym paskiem (WCAG 2.4.11): odstęp od paska przez scroll-padding,
   scroll-margin to tylko dodatkowe 24 px (wynik dla kotwic taki sam jak wcześniej). */
html { scroll-padding-top: var(--nav-h); }
[id] { scroll-margin-top: 24px; }
/* Sekcje mają własny padding: po skoku z kotwicy góra sekcji staje równo pod nawigacją
   (bez 24 px paska poprzedniej sekcji nad nią). */
.section[id] { scroll-margin-top: 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  padding: 12px 20px; border-radius: var(--radius-buttons);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-subtle-2);
}
.skip-link:focus { top: 16px; }

/* ---- Typografia: dwa głosy ----
   Display (Satoshi/DM Sans, waga 300): nagłówki ≥ 32 px. Nigdy pogrubiony (≥600 zakazane).
   Inter: cała reszta. Tracking ujemny (-0.01 / -0.02em). */
.t-display, .t-h1, .t-h2, .t-h2-sm {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  color: var(--ink-strong);
  text-wrap: balance;
}
.t-display { font-size: clamp(40px, 7.4vw, var(--text-display)); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.t-h1      { font-size: clamp(34px, 5.6vw, var(--text-heading-lg)); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); }
.t-h2      { font-size: clamp(30px, 4.4vw, var(--text-heading-md)); line-height: var(--leading-heading-md); letter-spacing: var(--tracking-heading); }
.t-h2-sm   { font-size: clamp(26px, 3.4vw, var(--text-heading)); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.t-h3 {
  font-family: var(--font-body); font-weight: var(--font-weight-medium);
  font-size: clamp(20px, 2.2vw, var(--text-heading-sm)); line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-small); color: var(--ink-strong);
}
.t-lead { font-size: var(--text-subheading); line-height: var(--leading-subheading); color: var(--ink-2); text-wrap: pretty; }
.t-body { font-size: var(--text-body); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.t-small { font-size: var(--text-small); line-height: var(--leading-small); color: var(--ink-3); letter-spacing: var(--tracking-small); }
.t-caption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--ink-3); }
.t-num { font-variant-numeric: tabular-nums; }
.t-muted { color: var(--ink-3); }
strong, b { font-weight: var(--font-weight-medium); color: var(--ink-strong); }

/* ---- Układ ---- */
.container { width: 100%; max-width: calc(var(--page-max-width) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(800px + 2 * var(--gutter)); }
.section { padding-block: var(--section-gap); position: relative; }
.section--white { background: var(--color-snow); }
.section--fog { background: var(--color-fog); }
/* Ciemna sekcja: class="section is-dark" + data-nav-theme="dark" (nav się przełącza). */
.section.is-dark { background: var(--bg); }
/* Dwie sąsiednie sekcje w tym samym kolorze (29.09, właściciel: „separator?”): druga dostaje .section--joined.
   Odstęp między nimi o połowę mniejszy, a na styku cienka linia zanikająca ku brzegom. */
.section--joined { padding-top: calc(var(--section-gap) * 0.55); }
.section--joined::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1200px, calc(100% - 2 * var(--gutter)));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}
.section:has(+ .section--joined) { padding-bottom: calc(var(--section-gap) * 0.55); }
/* Rezerwacja i Kontakt mają to samo szare tło: na styku tak samo jak .section--joined (krytyka O nas 1.10). */
.rezerwacja + .kontakt { padding-top: calc(var(--section-gap) * 0.55); }
.rezerwacja + .kontakt::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: min(1200px, calc(100% - 2 * var(--gutter))); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}
.rezerwacja:has(+ .kontakt) { padding-bottom: calc(var(--section-gap) * 0.55); }

/* Blok nagłówka sekcji: plakietka + H2 + lead */
.sec-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.sec-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---- Plakietka (feature badge / pill label) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--radius-badges);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.2; font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-small); color: var(--ink-2);
  box-shadow: var(--shadow-subtle);
  width: fit-content;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .7; }

/* ---- Przyciski: pigułka 28 px. Pomarańcz TYLKO na .btn--primary ---- */
.btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 24px;
  border-radius: var(--radius-buttons); border: 1px solid transparent;
  font-family: var(--font-body); font-size: 15px; font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-small); line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: var(--color-snow); color: var(--color-midnight-ink); border-color: var(--line); box-shadow: var(--shadow-subtle); }
.btn--ghost:hover { border-color: var(--line-strong); }
.is-dark .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.is-dark .btn--ghost:hover { background: rgba(255,255,255,0.06); }
.btn--sm { --btn-h: 40px; padding: 0 18px; font-size: 14px; }
.btn--block { width: 100%; }

/* Tekstowy link z podkreśleniem */
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); }
.link:hover { text-decoration-color: currentColor; }

/* ---- Karty: białe, 24 px, 24 px paddingu, płaski cień ---- */
.card {
  background: var(--surface); border-radius: var(--radius-cards);
  padding: var(--card-padding); box-shadow: var(--shadow-subtle);
  border: 1px solid var(--line);
}
.card--flat { box-shadow: none; }
.card--lg { padding: clamp(24px, 4vw, 48px); }
.card-inner { background: var(--color-fog); border-radius: var(--radius-cardinner); padding: 16px; }
.is-dark .card-inner { background: rgba(255,255,255,0.04); }
.media-card { border-radius: var(--radius-cards); overflow: hidden; background: var(--surface); }
.media-card img { width: 100%; height: 100%; object-fit: cover; }

/* Gwiazdki */
.stars { display: inline-flex; gap: 2px; color: var(--ink-strong); font-size: 14px; letter-spacing: 0; }

/* ==========================================================================
   Ruch: wspólne narzędzia (logika w js/base.js)
   - [data-reveal]  → wjeżdża przy wejściu w ekran (klasa .is-in)
     warianty: data-reveal="up" (domyślny) | "fade" | "scale"
     opóźnienie kaskady: style="--i: 2"  (co 80 ms)
   - Bez JS i przy prefers-reduced-motion wszystko jest widoczne od razu.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal='fade'] { transform: none; }
.js [data-reveal='scale'] { transform: scale(0.97); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Cel kotwicy nie może być przesunięty w chwili skoku (inaczej ląduje tuż pod paskiem zamiast 24 px niżej). */
.js [data-reveal]:target { transform: none; transition-property: opacity; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Znacznik szkicu (treść robocza do akceptacji właściciela). Widoczny tylko w szablonie. */
.draft-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-badges);
  background: rgba(201, 123, 132, 0.12); color: #7a3a42;
  font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0;
}
.is-dark .draft-flag { background: rgba(201, 123, 132, 0.2); color: #f3c9ce; }

/* Znacznik roboczy „do potwierdzenia” (29.09, podstrony): fakt czeka na decyzję właściciela.
   Widoczny celowo; przed publikacją ma zniknąć razem z niepotwierdzoną treścią. */
.tbc {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border: 1px dashed #d98a52;
  border-radius: var(--radius-badges);
  background: rgba(246, 146, 81, 0.08);
  color: #9a4f1c;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  letter-spacing: 0.02em;
  vertical-align: 0.15em;
  white-space: nowrap;
}
.is-dark .tbc { color: #f7b489; border-color: rgba(246, 146, 81, 0.6); }

/* zakres liczb bez łamania w środku („3–8”, „2–3 dni”) */
.nw { white-space: nowrap; }