/* =============================================================================
   KALENDARZ DOSTĘPNOŚCI
   Wczytywany tylko na stronach, które go używają (/, /kontakt).
   ========================================================================== */

.kalendarz {
  --kal-kolumna: minmax(2.25rem, 1fr);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  overflow: hidden;
}

/* ---- Przełącznik zasobów ------------------------------------------------ */

.kalendarz__zasoby {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  padding: var(--space-s);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.kalendarz__grupa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
}
.kalendarz__grupa-nazwa {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-inline-end: var(--space-2xs);
}

.kalendarz__zasob {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kalendarz__zasob:hover { border-color: var(--color-brand); }
.kalendarz__zasob[aria-pressed="true"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
}

/* ---- Pasek sterowania --------------------------------------------------- */

.kalendarz__sterowanie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Na wąskim ekranie pasek się zawija zamiast ściskać strzałki do zera —
     bez tego przycisk „następny miesiąc” miał na telefonie 0 px szerokości
     i nie dało się przewinąć kalendarza dalej. */
  flex-wrap: wrap;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-block-end: 1px solid var(--color-border);
}
.kalendarz__sterowanie .przycisk-ikona { flex: none; }
.kalendarz__miesiac {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  /* Nazwa zajmuje miejsce, które zostanie, i to ona ustępuje pierwsza */
  flex: 1 1 8rem;
  min-width: 0;
  text-align: center;
}
.kalendarz__strzalki { display: flex; gap: var(--space-3xs); }

/* ---- Siatka miesiąca ---------------------------------------------------- */

.kalendarz__miesiace {
  display: grid;
  gap: var(--space-l);
  padding: var(--space-m);
  /* Przesuwanie palcem w bok zmienia miesiąc (assets/js/kalendarz.js).
     pan-y zostawia przeglądarce przewijanie w pionie, a nam oddaje ruch
     poziomy. pinch-zoom zostaje — powiększanie strony musi działać (WCAG). */
  touch-action: pan-y pinch-zoom;
}
@media (min-width: 48rem) {
  /* Dwa miesiące obok siebie — łatwiej wybrać termin na przełomie */
  .kalendarz__miesiace--2 { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  /* Sześć miesięcy: 2 kolumny, żeby siatka dni nie robiła się nieczytelna */
  .kalendarz__miesiace--6 { grid-template-columns: 1fr 1fr; gap: var(--space-l) var(--space-xl); }
}
@media (min-width: 75rem) {
  /* Na szerokim ekranie cały sezon mieści się w trzech kolumnach */
  .kalendarz__miesiace--6 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Przełącznik zasięgu (2 / 6 miesięcy) -------------------------------- */

.kalendarz__zasieg {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-inline-start: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  flex: none;
}
/* Po zawinięciu paska przełącznik zasięgu bierze całą szerokość — inaczej
   wisiałby samotnie przy krawędzi i wyglądał na zgubiony */
@media (max-width: 30rem) {
  .kalendarz__zasieg { margin-inline: auto 0; }
}
.kalendarz__zasieg-opcja {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--step--1);
  color: var(--color-text-muted);
  /* 44 px wysokości pola dotyku bez rozdymania paska — patrz WCAG 2.5.8 */
  min-height: 2rem;
  padding-inline: var(--space-s);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.kalendarz__zasieg-opcja:hover { color: var(--color-text); }
.kalendarz__zasieg-opcja[aria-pressed="true"] {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.miesiac__nazwa {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  text-align: center;
  margin-block-end: var(--space-s);
}

.miesiac__siatka {
  display: grid;
  grid-template-columns: repeat(7, var(--kal-kolumna));
  gap: 2px;
}

.miesiac__dzien-tygodnia {
  padding-block: 0.35rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
}

/* ---- Kafelek dnia ------------------------------------------------------- */

.dzien {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-instant) linear, border-color var(--dur-instant) linear;
}
.dzien--pusty { background: transparent; border: 0; cursor: default; }

/* Statusy. Kolor NIGDY nie jest jedynym nośnikiem informacji:
   dzień zajęty ma dodatkowo ukośne kreskowanie, a każdy kafelek ma
   aria-label z pełnym opisem („12 lipca, zajęte”). WCAG 1.4.1. */

/* Nasycenie: wcześniej kafelki były tak jasne, że z odległości ręki cała
   siatka wyglądała na jednolicie białą. Teraz kolor niesie stan już przy
   pierwszym spojrzeniu, a numer dnia zachowuje kontrast ponad 4.5:1. */

.dzien--wolne {
  background: color-mix(in oklab, var(--fv-status-free) 34%, var(--color-surface));
  color: var(--color-text);
}
.dzien--wolne:hover {
  background: color-mix(in oklab, var(--fv-status-free) 58%, var(--color-surface));
  border-color: var(--fv-status-free);
}

.dzien--zajete,
.dzien--opcja,
.dzien--niedostepne {
  cursor: not-allowed;
  /* Pełny kolor tekstu, nie przygaszony: na mocniejszym tle szarość zeszłaby
     poniżej progu czytelności, a numer dnia musi być czytelny także tam,
     gdzie termin jest zajęty. */
  color: var(--color-text);
}

.dzien--zajete {
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in oklab, var(--fv-status-busy) 46%, var(--color-surface)) 0 4px,
      color-mix(in oklab, var(--fv-status-busy) 28%, var(--color-surface)) 4px 8px
    );
}
.dzien--opcja {
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in oklab, var(--fv-status-option) 62%, var(--color-surface)) 0 3px,
      color-mix(in oklab, var(--fv-status-option) 38%, var(--color-surface)) 3px 6px
    );
}
.dzien--niedostepne {
  background: color-mix(in oklab, var(--fv-status-blocked) 30%, var(--color-surface));
}
.dzien--przeszlosc {
  background: transparent;
  color: color-mix(in oklab, var(--color-text-muted) 55%, transparent);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ---- Dzień podzielony na pół -------------------------------------------- */
/* Doba trwa od popołudnia do rana, więc dzień wyjazdu jest zajęty tylko do
   południa — po sprzątaniu może wejść następny Gość. Malowanie takiego dnia
   w całości na czerwono kosztuje rezerwacje: Gość widzi „zajęte” tam, gdzie
   jest wolne. Kafelek tnie się po skosie: górny-lewy trójkąt to ranek,
   dolny-prawy popołudnie — czas biegnie w stronę, w którą się czyta.
   Ten sam zabieg stosują Booking, Airbnb i Vrbo. */

.dzien--dzielony {
  background: var(--color-surface);
  /* clip-path zamiast overflow: hidden. overflow przycina do padding-boxa,
     czyli o 1 px do środka od krawędzi — kolor kończył się wcześniej niż
     w kafelku jednolitym (tam tło sięga pod przezroczystą ramkę) i dzień
     dzielony wyglądał na mniejszy. clip-path tnie do border-boxa. */
  clip-path: inset(0 round var(--radius-xs));
}
.dzien__polowa {
  position: absolute;
  /* -1 px, żeby trójkąt wszedł pod przezroczystą ramkę — razem z clip-path
     wyżej daje to dokładnie tę samą powierzchnię koloru co kafelek jednolity */
  inset: -1px;
  pointer-events: none;
}
/* Skos przecina kafelek z górnego-prawego do dolnego-lewego rogu.
   Trójkąty są odsunięte o 1,5 px od tej linii, więc między nimi zostaje
   cienka przerwa w kolorze tła — to ona rozdziela jedną rezerwację od drugiej. */
.dzien__polowa--rano {
  clip-path: polygon(0 0, calc(100% - 1.5px) 0, 0 calc(100% - 1.5px));
}
.dzien__polowa--po {
  clip-path: polygon(100% 1.5px, 100% 100%, 1.5px 100%);
}

.dzien__polowa--wolne  { background: color-mix(in oklab, var(--fv-status-free) 34%, var(--color-surface)); }
.dzien__polowa--zajete {
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--fv-status-busy) 46%, var(--color-surface)) 0 4px,
    color-mix(in oklab, var(--fv-status-busy) 28%, var(--color-surface)) 4px 8px);
}
.dzien__polowa--opcja {
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--fv-status-option) 62%, var(--color-surface)) 0 3px,
    color-mix(in oklab, var(--fv-status-option) 38%, var(--color-surface)) 3px 6px);
}
.dzien__polowa--niedostepne { background: color-mix(in oklab, var(--fv-status-blocked) 30%, var(--color-surface)); }

/* Liczba musi zostać nad trójkątami */
.dzien__liczba { position: relative; z-index: 1; }

/* Dzień z wolnym popołudniem można kliknąć — podświetlamy go tak samo
   jak zwykły wolny dzień, żeby zachęta była widoczna */
.dzien--dzielony:not(:disabled):hover { border-color: var(--fv-status-free); }
/* Bez przygaszania cyfry. Wcześniej dzień dzielony, którego nie da się
   kliknąć, dostawał szary numer, a zajęty w całości czarny — z siatki
   wychodziła mozaika dwóch odcieni bez żadnego znaczenia. Przygaszamy
   wyłącznie terminy minione, bo tam szarość coś znaczy. */
.dzien--dzielony:disabled { cursor: not-allowed; }

/* Zmiana Gości: obie połówki zajęte, ale to dwie różne rezerwacje.
   Świadomie NIE pogrubiamy tu przekątnej — linia dzieląca kafelek ma mieć
   wszędzie tę samą grubość. Dzień styku i tak odróżnia się od środka pobytu,
   bo środek pobytu jest jednolitym kaflem, w ogóle bez przekątnej. */

/* Dzisiaj — kropka pod liczbą */
.dzien--dzis::after {
  content: "";
  position: absolute;
  bottom: 0.25rem;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--color-brand);
}

/* Wybór zakresu */
.dzien--wybrany {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: var(--weight-semibold);
}
.dzien--w-zakresie {
  background: var(--color-brand-subtle);
  border-color: transparent;
}
.dzien--krawedz-start { border-start-end-radius: 0; border-end-end-radius: 0; }
.dzien--krawedz-koniec { border-start-start-radius: 0; border-end-start-radius: 0; }

/* ---- Legenda ------------------------------------------------------------ */

.kalendarz__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  font-size: var(--step--1);
}
.legenda__pozycja { display: flex; align-items: center; gap: 0.5rem; }
.legenda__probka {
  width: 1.1rem; height: 1.1rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.legenda__probka--wolne { background: color-mix(in oklab, var(--fv-status-free) 34%, var(--color-surface)); }
.legenda__probka--zajete {
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--fv-status-busy) 46%, var(--color-surface)) 0 4px,
    color-mix(in oklab, var(--fv-status-busy) 28%, var(--color-surface)) 4px 8px);
}
.legenda__probka--opcja {
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--fv-status-option) 62%, var(--color-surface)) 0 3px,
    color-mix(in oklab, var(--fv-status-option) 38%, var(--color-surface)) 3px 6px);
}
.legenda__probka--niedostepne { background: color-mix(in oklab, var(--fv-status-blocked) 30%, var(--color-surface)); }

/* Próbka połówki — ten sam skos co w kafelku, żeby legenda tłumaczyła
   dokładnie to, co Gość widzi w siatce */
.legenda__probka--polowka {
  background:
    linear-gradient(to bottom right,
      color-mix(in oklab, var(--fv-status-busy) 46%, var(--color-surface)) 0 calc(50% - 1px),
      var(--color-surface) calc(50% - 1px) calc(50% + 1px),
      color-mix(in oklab, var(--fv-status-free) 34%, var(--color-surface)) calc(50% + 1px) 100%);
}

.kalendarz__wyjasnienie {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

/* ---- Pasek wyboru ------------------------------------------------------- */

.kalendarz__wybor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-brand-subtle);
}
.kalendarz__wybor[hidden] { display: none; }
.kalendarz__wybor-opis { font-size: var(--step--1); }
.kalendarz__wybor-daty { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* ---- Stany -------------------------------------------------------------- */

.kalendarz__stan {
  padding: var(--space-xl) var(--space-m);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--step--1);
}
.kalendarz__stan[hidden] { display: none; }

/* Wersja roczna — 12 miniatur miesięcy */
.kalendarz__rok {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-m);
  padding: var(--space-m);
}
.kalendarz__rok .miesiac__siatka { gap: 1px; }
.kalendarz__rok .dzien { min-height: 1.65rem; font-size: 0.6875rem; }

/* Odnośnik do opisów obok przycisków wyboru zasobu.
   Wygląda jak link, nie jak kolejny przełącznik — inaczej mylił się
   z nazwami kwater i łodzi obok. */
.kalendarz__zobacz {
  align-self: center;
  margin-inline-start: var(--space-2xs);
  font-size: var(--step--1);
  white-space: nowrap;
  /* 44 px pola dotyku bez rozpychania paska — WCAG 2.2 SC 2.5.8 */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* =============================================================================
   ZŁOTY TERMIN — oferta specjalna
   -----------------------------------------------------------------------------
   To nie jest status dostępności: dzień zostaje wolny i klikalny, złoto tylko
   go wyróżnia. Dlatego reguły stoją PO regułach statusów i nadpisują samo tło,
   nie dotykając logiki połówek.
   ========================================================================== */

.dzien--zloty {
  background:
    linear-gradient(150deg,
      color-mix(in oklab, var(--fv-status-golden) 92%, #fff) 0%,
      var(--fv-status-golden) 45%,
      color-mix(in oklab, var(--fv-status-golden) 78%, #000) 100%);
  border-color: var(--fv-status-golden-strong);
  color: var(--fv-status-golden-ink);
  font-weight: var(--weight-bold);
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 55%, transparent) inset,
              0 2px 6px color-mix(in oklab, var(--fv-status-golden-strong) 45%, transparent);
}
.dzien--zloty:not(:disabled):hover {
  border-color: var(--fv-status-golden-ink);
  transform: translateY(-1px);
}
/* Gwiazdka w rogu — status nigdy nie może iść samym kolorem (WCAG 1.4.1) */
.dzien__gwiazdka {
  position: absolute;
  top: 0.1rem;
  right: 0.22rem;
  font-size: 0.62rem;
  line-height: 1;
  color: var(--fv-status-golden-ink);
  pointer-events: none;
}
/* Kafelek dzielony maluje się połówkami, więc tło samego przycisku musi
   zejść z drogi — inaczej złoto zakryłoby czerwoną połowę dnia wyjazdu. */
.dzien--zloty.dzien--dzielony { background: var(--color-surface); }
/* Gradient biegnie wzdłuż przekątnej kafelka (135°), a każdy trójkąt zajmuje
   tylko POŁOWĘ tej osi. Gdyby oba używały tych samych przystanków, poranek
   dostawałby sam jasny początek gradientu i wyglądał na płaski — właśnie tak
   wypadał ostatni dzień oferty. Dlatego stopnie są ściśnięte osobno dla
   górnego-lewego (0–50%) i dolnego-prawego trójkąta (50–100%): każdy ma pełne
   przejście od światła do cienia. */
.dzien__polowa--rano.dzien__polowa--zloty {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--fv-status-golden) 92%, #fff) 0%,
    var(--fv-status-golden) 28%,
    color-mix(in oklab, var(--fv-status-golden) 82%, #000) 50%);
}
.dzien__polowa--po.dzien__polowa--zloty {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--fv-status-golden) 92%, #fff) 50%,
    var(--fv-status-golden) 72%,
    color-mix(in oklab, var(--fv-status-golden) 82%, #000) 100%);
}

.legenda__probka--zloty {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg,
    color-mix(in oklab, var(--fv-status-golden) 92%, #fff),
    var(--fv-status-golden));
  border: 1px solid var(--fv-status-golden-strong);
  color: var(--fv-status-golden-ink);
  font-size: 0.6rem;
}
.legenda__dopisek { color: var(--color-text-muted); }

/* ---- Baner „Poluj na Złoty Termin” --------------------------------------- */

.zloty-baner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-s);
  align-items: start;
  margin-block-end: var(--space-l);
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-l);
  /* Ciemne tło, bo złoto na jasnym tle traci blask i wygląda jak musztarda */
  background: linear-gradient(135deg, var(--fv-teal-900), #241c05 85%);
  color: var(--fv-stone-50);
  border: 1px solid color-mix(in oklab, var(--fv-status-golden) 45%, transparent);
}
.zloty-baner__gwiazdka {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--fv-status-golden);
  filter: drop-shadow(0 1px 3px color-mix(in oklab, var(--fv-status-golden) 55%, transparent));
}
.zloty-baner__tytul {
  margin: 0;
  font-size: var(--step-2);
  color: var(--fv-status-golden);
}
.zloty-baner__lead {
  margin-block-start: var(--space-2xs);
  max-width: 62ch;
  color: color-mix(in oklab, var(--fv-stone-50) 88%, transparent);
}
.zloty-baner__teraz {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  align-items: baseline;
  margin-block-start: var(--space-s);
  font-size: var(--step--1);
}
.zloty-baner__oferta {
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--fv-status-golden) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--fv-status-golden) 40%, transparent);
}

@media (max-width: 34rem) {
  .zloty-baner { padding: var(--space-m); }
  .zloty-baner__tytul { font-size: var(--step-1); }
}