/* Kalendarz wydarzeń — /kalendarz/
   Dokłada się do style.css + event.css (te same fonty, kolory i rytm pionowy).

   UKŁAD: kalendarz i lista wydarzeń stoją OBOK siebie. Siedem kolumn rozciągniętych
   na całą szerokość strony dawało kafelki po ~180 px — stąd węższa kolumna kalendarza
   (~104 px na kafelek) i lista jako sąsiadka, a nie sekcja pod spodem.

   SIATKA: każdy dzień to osobny kwadratowy kafelek, tygodnie to grid 7 kolumn
   z odstępem. Wydarzenia wielodniowe to paski NAŁOŻONE na kafelki — dlatego wysokość
   rzędu musi znać liczbę „torów", która przychodzi z PHP jako --lanes na .cal-week. */

:root{
  --cal-line:#e9e4d5;          /* delikatna kreska — ramki i separatory */
  --cal-tile:#f7f4ea;          /* wypełnienie kafelka dnia */
  /* Pas na numer dnia: padding kafelka (6) + wysokość kółka z numerem (24) + luz.
     Za mała wartość i pierwszy pasek nachodzi na numer — tak było przy 26 px. */
  --cal-head:34px;
  --cal-lane:20px;             /* wysokość jednego toru paska */
  --cal-gap:4px;               /* wcięcie paska w kafelku */
  --cal-tgap:8px;              /* odstęp MIĘDZY kafelkami */
}

.cal-page{padding:44px 0 var(--sec-gap)}

/* --- nagłówek strony --- */
.cal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin:28px 0 36px}
.cal-h1{font-size:46px;font-weight:600;letter-spacing:-.02em;color:#2b2620;margin:0}
.cal-lead{font-size:18px;color:#6a655b;margin:14px 0 0;max-width:62ch}
.cal-listlink{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:#2b2620;font-size:15.5px;font-weight:500;padding:13px 22px;border-radius:999px;
  border:1.5px solid var(--cal-line);transition:background .25s ease,color .25s ease,border-color .25s ease}
.cal-listlink:hover{background:#2b2620;color:#fff;border-color:#2b2620}

/* --- układ dwukolumnowy --- */
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:44px;align-items:start}

.cal-card{background:#fff;border:1px solid var(--cal-line);border-radius:24px;
  padding:22px 22px 26px}

/* --- pasek miesiąca: nazwa z lewej, sterowanie z prawej --- */
.cal-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:20px;flex-wrap:wrap}
.cal-month{font-size:24px;font-weight:600;color:#2b2620;margin:0;letter-spacing:-.01em}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-arrow{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:1px solid var(--cal-line);
  display:flex;align-items:center;justify-content:center;color:#2b2620;font-size:18px;
  text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease}
.cal-arrow:hover{background:#2b2620;color:#fff;border-color:#2b2620}
.cal-today-btn{padding:9px 16px;border-radius:999px;background:var(--cal-tile);color:#2b2620;
  font-size:14px;font-weight:500;text-decoration:none;transition:background .2s ease}
.cal-today-btn:hover{background:#ebe6d8}

/* --- siatka ---
   Nagłówek dni tygodnia musi mieć DOKŁADNIE ten sam raster co kafelki: te same
   kolumny i ten sam odstęp, inaczej podpisy rozjadą się z siatką. */
.cal-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--cal-tgap)}
.cal-dow span{padding:0 0 10px;text-align:center;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#b0aa9b}
.cal-dow abbr{text-decoration:none;border:0}

.cal-weeks{display:grid;gap:var(--cal-tgap)}
.cal-week{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:var(--cal-tgap)}

/* Kafelek dnia: kwadrat bez ramki — samo wypełnienie. Ramka przy tym rozmiarze
   robiła siatkę „kratkowaną”; płaskie kafelki są spokojniejsze.
   aspect-ratio trzyma kwadrat, ale gdy pasków jest dużo, kafelek urośnie
   zamiast przyciąć treść — stąd min-height liczony z liczby torów. */
.cal-day{position:relative;aspect-ratio:1;min-width:0;
  min-height:calc(var(--cal-head) + var(--lanes) * var(--cal-lane) + 8px);
  background:var(--cal-tile);border-radius:12px;padding:6px 8px;
  transition:background .2s ease}
.cal-day.is-out{background:transparent}
.cal-day.is-out .cal-num{color:#cdc7b7}
.cal-day.is-weekend{background:#f3efe2}
.cal-day.is-weekend.is-out{background:transparent}
/* Dziś: obwódka wokół kafelka + wypełniony numer. Bez tła, żeby paski wydarzeń
   zostały czytelne. */
.cal-day.is-today{box-shadow:inset 0 0 0 1.5px #2b2620}

.cal-num{display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;border-radius:50%;font-size:13.5px;font-weight:500;color:#57523f}
.cal-day.is-today .cal-num{background:#2b2620;color:#fff;font-weight:600}
.cal-more{position:absolute;right:8px;bottom:5px;font-size:10.5px;color:#8b8778}

/* --- paski wydarzeń ---
   Kafelki dzieli odstęp, więc szerokości nie da się liczyć jako „span/7 × 100%”:
   kolumna to (100% − 6 odstępów) / 7, a przesunięcie o dzień to szerokość kolumny
   PLUS odstęp. Wszystko procentowo, żeby siatka pozostała płynna.
   --pad-l/--pad-r to wcięcie paska w kafelku. Pasek biegnący dalej ma wcięcie ZERO,
   czyli kończy się równo z krawędzią kafelka. Wartość ujemna byłaby błędem: taki
   pasek ZAWSZE dotyka skraju rzędu (przedłużenie w lewo zaczyna się w poniedziałek,
   w prawo kończy w niedzielę), więc wystawałby poza siatkę. */
.cal-bar-ev{
  --cal-colw:calc((100% - 6 * var(--cal-tgap)) / 7);
  --pad-l:var(--cal-gap);
  --pad-r:var(--cal-gap);
  position:absolute;box-sizing:border-box;
  top:calc(var(--cal-head) + var(--lane) * var(--cal-lane));
  left:calc(var(--col) * (var(--cal-colw) + var(--cal-tgap)) + var(--pad-l));
  width:calc(var(--span) * var(--cal-colw) + (var(--span) - 1) * var(--cal-tgap)
             - var(--pad-l) - var(--pad-r));
  height:17px;display:flex;align-items:center;
  padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:600;line-height:1;text-decoration:none;
  transition:filter .2s ease}
.cal-bar-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-bar-ev:hover{filter:brightness(.93)}
/* Pasek urwany granicą tygodnia — płaska krawędź mówi „biegnie dalej”. */
/* UWAGA: 0px, nie 0! Wartość bez jednostki unieważnia całe calc() z odejmowaniem
   długości — pasek tracił wtedy wyliczoną szerokość i pozycję, kurczył się do
   szerokości własnego tekstu i lądował pod poniedziałkiem. Wielodniowe wydarzenia
   w ogóle się nie rozciągały. */
.cal-bar-ev.is-cont-left{--pad-l:0px;border-top-left-radius:3px;border-bottom-left-radius:3px}
.cal-bar-ev.is-cont-right{--pad-r:0px;border-top-right-radius:3px;border-bottom-right-radius:3px}
.cal-bar-ev.is-past{opacity:.5}

/* Paleta pasków — pięć spokojnych tonów z rodziny kolorów strony.
   Kolor przypisany po slugu, więc wydarzenie ma zawsze ten sam. */
.cal-tone-0{background:#d7e4c4;color:#3f5228}
.cal-tone-1{background:#f2e6bd;color:#6f5a12}
.cal-tone-2{background:#e8dcc6;color:#63512c}
.cal-tone-3{background:#cfdfd8;color:#345247}
.cal-tone-4{background:#ecd9cd;color:#6f452e}

/* --- lista wydarzeń miesiąca (kolumna obok) --- */
/* Nagłówek strony jest przyklejony (position:sticky, ~78–112 px) — bez tego zapasu
   lista wjeżdżałaby pod niego przy przewijaniu. */
.cal-list{position:sticky;top:104px}
.cal-list-h{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#b0aa9b;margin:0 0 18px}
.cal-empty{color:#6a655b;font-size:16px;line-height:1.6;background:#fff;
  border:1px solid var(--cal-line);border-radius:20px;padding:24px 26px}
.cal-empty a{color:#2b2620}

.cal-items{display:grid;gap:12px}
/* Wpis listy: mała miniatura + treść. Kolor po lewej wiąże wpis z paskiem w siatce. */
.cal-item{position:relative;display:flex;gap:16px;align-items:center;text-decoration:none;
  background:#fff;border:1px solid var(--cal-line);border-radius:18px;overflow:hidden;
  padding:12px 16px 12px 12px;
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.cal-item:hover{box-shadow:0 12px 28px rgba(0,0,0,.06);transform:translateY(-2px);border-color:#ded8c6}
.cal-item.is-past{opacity:.6}
.cal-item.is-past:hover{opacity:1}
/* Pionowa wstążka w kolorze wydarzenia — bez niej trudno powiązać wpis z paskiem. */
.cal-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.cal-item.cal-tone-0::before{background:#d7e4c4}
.cal-item.cal-tone-1::before{background:#f2e6bd}
.cal-item.cal-tone-2::before{background:#e8dcc6}
.cal-item.cal-tone-3::before{background:#cfdfd8}
.cal-item.cal-tone-4::before{background:#ecd9cd}
/* Ton nadaje tylko wstążkę — tło kafelka listy zostaje białe. */
.cal-item.cal-tone-0,.cal-item.cal-tone-1,.cal-item.cal-tone-2,
.cal-item.cal-tone-3,.cal-item.cal-tone-4{background:#fff;color:inherit}

.cal-item-img{flex:0 0 74px;height:74px;border-radius:12px;overflow:hidden;margin-left:6px}
.cal-item-img img{width:100%;height:100%;object-fit:cover;display:block}
.cal-item-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cal-item-date{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:#8b8578}
.cal-item-past{margin-left:4px;padding:2px 8px;border-radius:999px;background:#f1eee2;
  color:#8b8778;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.cal-item-title{font-size:16.5px;font-weight:600;color:#2b2620;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cal-item-sub{font-size:14px;color:#6a655b;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Na wąskiej kolumnie „Czytaj więcej” tylko zabiera miejsce — cała karta jest klikalna. */
.cal-item-go{display:none}

/* --- węższe ekrany --- */
@media(max-width:1200px){
  .cal-layout{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:32px}
}
/* Poniżej tej szerokości dwie kolumny robią z kalendarza pasek zapałek —
   układ przechodzi na jedną kolumnę, a siatka dostaje własny limit szerokości. */
@media(max-width:1000px){
  .cal-layout{grid-template-columns:minmax(0,1fr);gap:34px}
  .cal-card{max-width:640px}
  .cal-list{position:static;max-width:640px}
  .cal-h1{font-size:36px}
  .cal-items{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

@media(max-width:820px){
  :root{--cal-head:26px;--cal-lane:8px;--cal-gap:2px;--cal-tgap:5px}
  .cal-bar-ev{height:5px;padding:0}
  .cal-bar-txt{display:none}
  .cal-day{padding:4px 3px;border-radius:9px}
  .cal-num{min-width:20px;height:20px;font-size:12px}
  /* Kafelek ma tu ~44 px szerokości — „+N” wraca pod numer zamiast w róg. */
  .cal-more{position:static;display:block;text-align:center;font-size:9.5px;margin-top:1px}
  .cal-card{padding:16px 14px 20px;border-radius:20px}
}

@media(max-width:560px){
  .cal-head{margin-bottom:26px}
  .cal-h1{font-size:29px}
  .cal-lead{font-size:16px}
  .cal-card{padding:14px 10px 18px}
  .cal-month{font-size:20px}
  .cal-arrow{width:34px;height:34px}
  .cal-items{grid-template-columns:1fr}
  .cal-item-img{flex:0 0 62px;height:62px}
  .cal-item-title{font-size:15.5px}
}

/* Przy bardzo wąskim ekranie kwadrat 7 kolumn schodzi poniżej 40 px —
   numer dnia przestaje się mieścić w kółku, więc kółko znika. */
@media(max-width:420px){
  .cal-num{min-width:0;height:auto;border-radius:0;font-size:11.5px}
  .cal-day.is-today .cal-num{background:none;color:#2b2620;text-decoration:underline}
  .cal-day.is-today{box-shadow:inset 0 0 0 1.5px #2b2620}
}