/* =========================================================
   Kalendarz dostępności
   =========================================================

   Osobny plik, celowo. Cały wygląd kalendarza siedzi tutaj,
   więc styles.css pozostaje nietknięty i jego numer wersji
   nie musi się zmieniać.

   Wszystkie klasy mają przedrostek .kal-, żeby żadna nazwa
   nie zderzyła się z resztą arkusza. Kolory biorą się ze
   zmiennych z :root w styles.css, więc kalendarz przejmuje
   paletę strony bez powtarzania wartości.
   ========================================================= */

.kal {
  /* Odcienie stanu "zajęte". Jedyne kolory własne tego pliku:
     wyprowadzone z palety strony, ale wyraźnie chłodniejsze
     i bardziej przygaszone niż bursztyn bali, żeby zajęty dzień
     dało się odróżnić od dnia wyróżnionego. */
  --kal-busy-bg: #F4E6E0;
  --kal-busy-bg-alt: #E4CCC2;
  --kal-busy-fg: #9C5A45;
  --kal-busy-line: #B87A63;

  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-top: var(--space-md);
}

@media (min-width: 480px) {
  .kal { padding: var(--space-lg); }
}

.kal-title {
  font-size: var(--fs-md);
  margin: 0 0 var(--space-md);
}

/* Siatka miesięcy. Liczbę kolumn ustawia skrypt przez .kal-months--2,
   bo zależy od szerokości samej kolumny cennika, a nie okna. */
.kal-months {
  display: grid;
  gap: var(--space-lg);
}

.kal-months--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kal-mhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  min-height: 36px;
  margin-bottom: var(--space-xs);
}

.kal-mname {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--color-fg);
  text-align: center;
  flex: 1;
}

/* Strzałki są jedynym klikalnym elementem kalendarza.
   36 px to minimum, przy którym da się w nie trafić palcem. */
.kal-nav {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted-fg);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.kal-nav:hover:not(:disabled) {
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

.kal-nav:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.kal-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Pusty placeholder tej samej wielkości co strzałka: trzyma
   nazwę miesiąca dokładnie na środku, gdy strzałki nie ma. */
.kal-nav-gap {
  width: 36px;
  height: 36px;
  flex: none;
}

.kal-dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 4px;
}

.kal-dow span {
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  padding: 4px 0;
}

.kal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.kal-d {
  aspect-ratio: 1;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  /* Cyfry o stałej szerokości: bez tego kolumny drgają
     przy przejściu z jednocyfrowych dni na dwucyfrowe. */
  font-variant-numeric: tabular-nums;
  color: var(--color-fg);
  position: relative;
}

.kal-free {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.kal-past { color: #CFC4B4; }

/* Zajęty dzień niesie trzy niezależne sygnały: kolor, ukośne
   kreskowanie i przekreślenie. Sam kolor by nie wystarczył,
   bo nie odróżni go osoba z zaburzeniem rozpoznawania barw. */
.kal-busy {
  color: var(--kal-busy-fg);
  cursor: not-allowed;
  background-image: repeating-linear-gradient(
    135deg,
    var(--kal-busy-bg) 0 5px,
    var(--kal-busy-bg-alt) 5px 7px
  );
}

.kal-busy::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 50%;
  height: 1.5px;
  background: var(--kal-busy-line);
  transform: rotate(-14deg);
  /* Nad numerem dnia, tak jak przed rozdzieleniem numeru
     do własnego elementu. */
  z-index: 3;
}

/* Numer dnia zawsze nad malowaniem tła. */
.kal-n {
  position: relative;
  z-index: 2;
}

/* =========================================================
   DZIEŃ PRZYJAZDU I DZIEŃ WYJAZDU
   =========================================================

   Doba trwa od 16:00 do 11:00, więc w te dwa dni zajęta jest
   tylko połowa doby. Zamalowujemy połowę kwadratu po przekątnej,
   tak jak robi to Booking.

   Czas biegnie od lewego górnego rogu do prawego dolnego:
   lewy górny trójkąt to poranek, prawy dolny to popołudnie.

   Numeru NIE przekreślamy. Taki dzień jest do wzięcia,
   a przekreślenie mówiłoby coś dokładnie odwrotnego. */
.kal-half {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-fg);
}

.kal-half::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: repeating-linear-gradient(
    135deg,
    var(--kal-busy-bg) 0 5px,
    var(--kal-busy-bg-alt) 5px 7px
  );
}

/* Wyjazd: poprzedni goście śpią do rana, po 16:00 dzień jest wolny. */
.kal-half--wyjazd::before { clip-path: polygon(0 0, 100% 0, 0 100%); }

/* Przyjazd: do 11:00 dzień jest wolny, wieczorem ktoś już śpi. */
.kal-half--przyjazd::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Kreska po przekątnej. Kwadrat ma na telefonie około 30 px
   i sam kontrast kreskowania bywa za słaby, żeby dostrzec podział.
   Kreska niesie ten sam sygnał co kolor, tylko kształtem. */
.kal-half::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--kal-busy-line) calc(50% - 0.5px),
    var(--kal-busy-line) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  opacity: 0.55;
  z-index: 1;
}

.kal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.kal-li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--color-muted-fg);
}

.kal-sw {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: var(--radius-sm);
}

.kal-sw--free {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.kal-sw--busy {
  background-image: repeating-linear-gradient(
    135deg,
    var(--kal-busy-bg) 0 5px,
    var(--kal-busy-bg-alt) 5px 7px
  );
}

/* Próbka dnia przyjazdu i wyjazdu. Bez niej gość widzi w siatce
   trzeci wygląd kwadratu, którego legenda nie tłumaczy. */
.kal-sw--half {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.kal-sw--half::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: repeating-linear-gradient(
    135deg,
    var(--kal-busy-bg) 0 5px,
    var(--kal-busy-bg-alt) 5px 7px
  );
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Ta sama kreska co w siatce. Bez niej próbka ma 18 px i zlewa się
   z próbką dnia zajętego, przez co legenda tłumaczy mniej niż zaciemnia. */
.kal-sw--half::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--kal-busy-line) calc(50% - 0.5px),
    var(--kal-busy-line) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  opacity: 0.55;
}

/* Godziny doby pod legendą. Sam przecięty kwadrat pokazuje, ŻE dzień
   jest dzielony, ale nie mówi, o której następuje zmiana. */
.kal-note {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-muted-fg);
}

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