/* ============================================================
   CIEKAWOSTKI — boks przy wolnym torze + pasek podczas przejazdu.
   Styl dopasowany do stacji pogodowej (.wx-box) i zmiennych tablicy.
   ============================================================ */

/* ---------- BOKS w stacji pogodowej ---------- */
.wx-station .ck-box{
  display:flex; flex-direction:column; gap:.18rem;
  border-color:rgba(255,193,7,.28);                   /* cieplejsza obwódka niż zwykły boks */
  background:linear-gradient(180deg, rgba(255,193,7,.055), rgba(255,255,255,.02));
  /* kotwica dla zdjęcia, które wypełnia prawą część boksu „na styk" z jego krawędziami;
     overflow przycina je do zaokrąglonych rogów */
  position:relative; overflow:hidden;
}
.ck-box .ck-head{
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--amber); line-height:1.1;
}
.ck-box .ck-tytul{
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:1.5rem; line-height:1.12; color:var(--ink);
}
.ck-box .ck-tekst{
  font-family:"Barlow",sans-serif; font-weight:400;
  font-size:1.16rem; line-height:1.32; color:var(--ink-dim);
}

/* Zdjęcie wypełnia PRAWĄ CZĘŚĆ CAŁEGO BOKSU: dotyka górnej, dolnej i prawej krawędzi
   (wychodzi poza wewnętrzny padding), a nadmiar wysokości jest przycinany. Tekst zajmuje
   resztę szerokości — dlatego nagłówek i treść dostają padding z prawej. */
.ck-box .ck-head, .ck-box .ck-body{ padding-right:calc(40% + .9rem) }
.ck-box .ck-body{ display:block }
.ck-box .ck-tresc{ min-width:0 }
.ck-foto{
  position:absolute; top:0; right:0; bottom:0; width:40%;
  margin:0; border:0; border-radius:0;
  overflow:hidden;
}
/* delikatne ściemnienie przy tekście, żeby krawędź zdjęcia nie cięła kafelka ostro */
.ck-foto::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,12,16,.55), transparent 42%);
}
/* absolutnie wypełnia figure — inaczej wysokość obrazka dyktowałaby wysokość boksu */
.ck-foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
/* podpis nakładany na dół zdjęcia, żeby nie zabierał mu wysokości */
/* Podpis: dyskretny — mały i przygaszony siwy, ma nie konkurować z treścią */
.ck-foto figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.12em .45em;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.6) 60%);
  font-family:"Barlow",sans-serif; font-size:.58rem; line-height:1.1;
  color:#8b9097; opacity:.85; letter-spacing:.01em;
  text-align:right;                                   /* dosunięty do prawej krawędzi zdjęcia */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* delikatne pojawienie się nowej ciekawostki (bez ruchu układu) */
.ck-box.ck-fade{ animation:ckFade .5s ease-out both }
@keyframes ckFade{ from{opacity:0} to{opacity:1} }

/* ---------- PASEK na dole podczas przejazdu ---------- */
.ck-pasek{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:.5em;
  padding:.2rem .8rem;
  font-family:"Barlow",sans-serif; font-size:.98rem; line-height:1.25;
  color:var(--ink-dim);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.72) 45%);
  pointer-events:none;                                /* nigdy nie łapie kliknięć tablicy */
  opacity:0; transform:translateY(100%);
  transition:opacity .45s ease, transform .45s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ck-pasek.on{ opacity:1; transform:translateY(0) }
.ck-pasek .ck-p-ico{ color:var(--amber); flex:none }
.ck-pasek .ck-p-txt{ overflow:hidden; text-overflow:ellipsis }
.ck-pasek b{ color:var(--ink); font-weight:600 }

/* Telefon w poziomie (główne urządzenie, ~844×390) — pasek musi być jak najniższy,
   żeby nie zjadał wysokości tablicy. */
@media (max-height:460px){
  .ck-pasek{ font-size:.82rem; padding:.12rem .6rem }
  .ck-box .ck-tytul{ font-size:1.3rem }
  .ck-box .ck-tekst{ font-size:1.02rem }
  .ck-foto figcaption{ font-size:.64rem }
}