/* ====== Zmienne i baza ====== */
:root{
  --ink:#001935;
  --bg:#f7f9fc;
  --card:#fff;
  --muted:#445;
}
html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Poppins","Open Sans",sans-serif;
}

h1,h2,h3 {color: #9ca5b0;}
/* ====== Kontener ====== */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:20px;

  /* 2 kolumny jak w blog.php */
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}
@media (max-width:900px){
  .wrap{ grid-template-columns:1fr; }
}

/* ====== Karty / posty ====== */
.card{
  background:var(--card);
  padding:14px;
  border-radius:12px;
  margin-bottom:16px;
}

/* Ciemne tło dla wpisów w kolumnie głównej */
main article.card{
  background:#122943;
  color:#a6aeb8;
}
main article.card a{
  color:#fff;
}
main article.card .meta{
  color:#a6aeb8;
}

/* Ciemne tło dla nawigacji */
nav.card{
  background:#122943;
  color:#fff;
}
nav.card a{
  color:#fff;
}
nav.card span{
  color:#a6aeb8;
}

/* Zachowujemy też klasę .post (gdyby była używana gdzie indziej) */
.post{
  background:var(--card);
  padding:14px;
  border-radius:12px;
  margin-bottom:16px;
  overflow:hidden;
}
.post::after{content:'';display:block;clear:both}

/* Nagłówki, meta, linki */
h1{margin:0 0 16px}
.meta{font-size:.9rem;color:var(--muted);margin:0 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrap a{color:var(--ink);text-decoration:none}
.wrap a:hover{text-decoration:underline}

/* ====== Treść wpisu z obrazkiem wyróżniającym ====== */
.content-area{overflow:hidden}
.content-area::after{content:'';display:block;clear:both}
.content-area .featured,
.post > img.featured{
  float:left;
  width:150px !important;
  max-width:none !important;
  height:auto !important;
  border-radius:8px;
  margin:0 12px 8px 0 !important;
}
.post .title{margin:0 0 6px;font-size:1.1rem;line-height:1.25}
.post .post-content{line-height:1.6}

/* Zajawka (jeśli użyjesz .excerpt) */
.post .excerpt{
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.45;
  margin-bottom:8px;
}
.post .excerpt img,
.post .excerpt h1,
.post .excerpt h2,
.post .excerpt figure{display:none!important}
.post .excerpt a{text-decoration:underline}

/* ====== Galeria miniatur ====== */
/* alias: .gallery = .mini-gallery, żeby nie zmieniać HTML */
.mini-gallery,
.gallery{
  clear:both;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  width:100%;
}
.mini-gallery img,
.gallery img{
  flex:0 0 calc((100% - 18px)/4);   /* 4 kolumny */
  width:calc((100% - 18px)/4);
  height:calc((100% - 18px)/4);
  object-fit:cover;
  border-radius:8px;
  display:block;
  cursor:pointer;
  max-width:none !important;
}

/* ====== Sidebar ====== */
.sidebar .card{
  /* ciemne karty w sidebarze jak w Twoim blog.php */
  background:#122943;
  color:#a6aeb8;
}
.sidebar .card h3{margin:0 0 10px;font-size:1.05rem;color:#fff}
.last-post{display:flex;gap:10px;align-items:flex-start}
.last-post img{max-width:150px;height:auto;border-radius:8px;display:block}
.users{list-style:none;margin:0;padding:0}
.users li{padding:6px 0;display:flex;justify-content:space-between;gap:8px}
.users li:last-child{border-bottom:0}
.users a{color:#fff;text-decoration:none}
.users a:hover{text-decoration:underline}

/* Daty w sidebarze */
.sidebar .meta{color:#a6aeb8}

/* ====== Paginacja ====== */
.paginate,
nav.card{
  background:#122943;
  color:#fff;
  gap:8px;
  justify-content:center;
  align-items:center;
}
nav.card a{
  color:#fff;
  background:none; /* bez białego kafelka */
  box-shadow:none;
  padding:0; /* usuń dodatkowy padding jeśli niepotrzebny */
}
nav.card span{
  color:#a6aeb8;
  background:none;
  box-shadow:none;
  padding:0;
}
.paginate a,.paginate span,
nav.card a, nav.card span{
  padding:8px 12px;
}
.paginate .current{font-weight:600}

/* ====== Lightbox ====== */
.lightbox{
  position:fixed;inset:0;display:none;
  align-items:center;justify-content:center;
  z-index:9999;
  backdrop-filter:blur(8px);
  background:rgba(0,0,0,.35)
}
.lightbox.open{display:flex}
.lightbox-inner{position:relative;max-width:min(92vw,1100px);max-height:90vh}
.lightbox-inner img{max-width:100%;max-height:90vh;border-radius:12px;display:block}
.lightbox-close{
  position:absolute;top:-14px;right:-14px;
  background:#fff;border:0;border-radius:999px;
  width:36px;height:36px;font-size:18px;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.25)
}

/* ====== RWD ====== */
@media (max-width:560px){
  .content-area .featured,
  .post > img.featured{
    float:none;width:100% !important;margin:0 0 8px 0 !important
  }
  .mini-gallery,.gallery{width:100%}
  .mini-gallery img,.gallery img{
    flex:0 0 calc((100% - 18px)/4);
    width:calc((100% - 18px)/4);
    height:calc((100% - 18px)/4);
  }
}
/* ==== Widok pojedynczego wpisu (view_post.php) ==== */
.view-post{
  background:#001935; /* tło całej strony */
  color:#cfd7e3;      /* domyślny kolor tekstu */
}

/* główna karta z wpisem */
.view-post .wrap{max-width:1100px;margin:0 auto;padding:20px;display:block;gap:0}
.view-post .card{
  background:#122943;
  color:#a6aeb8;
}

/* tytuł i meta */
.view-post h1{margin:0 0 16px;color:#fff}
.view-post .meta{color:#a6aeb8;margin:0 0 14px}
.view-post span{color:#cfd7e3} /* jeśli w treści są <span> */

/* treść z obrazkiem po lewej (jak w blog.css) */
.view-post .content-area{overflow:hidden}
.view-post .content-area::after{content:'';display:block;clear:both}
.view-post .content-area .featured{
  float:left;width:150px;margin:0 12px 8px 0;border-radius:8px;display:block;height:auto
}
.view-post .post-content{
  line-height:1.6;
  color:#a6aeb8;         /* jak w Twoim inline */
}
.view-post .post-content img{max-width:100%;height:auto}

/* pasek narzędzi pod wpisem */
.view-post .tools{margin:12px 0}
.view-post .tools a{color:#fff;text-decoration:none}
.view-post .tools a:hover{text-decoration:underline}

/* Galeria pod wpisem – luźniej niż na liście */
.view-post .gallery{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.view-post .gallery img{
  width:calc((420px - 30px)/4);
  height:calc((420px - 30px)/4);
  object-fit:cover;border-radius:10px;cursor:pointer;display:block
}
@media (max-width:600px){
  .view-post .gallery img{
    width:calc((100% - 30px)/4);
    height:calc((100% - 30px)/4);
  }
}

/* Lightbox – bez cieni */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;
  backdrop-filter:blur(8px);background:rgba(0,0,0,.35)}
.lightbox.open{display:flex}
.lightbox-inner{position:relative;max-width:min(92vw,1100px);max-height:90vh}
.lightbox-inner img{max-width:100%;max-height:90vh;border-radius:12px;display:block}
.lightbox-close{position:absolute;top:-14px;right:-14px;background:#fff;border:0;border-radius:999px;
  width:36px;height:36px;font-size:18px;cursor:pointer;box-shadow:none}
.view-post span {
  color: #a6aeb8 !important;
}

/* --- Dwukolumnowy układ z niezależnym przewijaniem lewej kolumny --- */
@media (min-width: 901px){
  body.split-cols{
    height:100vh;           /* pełna wysokość okna */
    overflow:hidden;        /* wyłącz główny scrollbar strony */
    /* jeśli masz nagłówek/menu o stałej wysokości, wpisz jego wysokość:
       body class="split-cols" style="--top-offset:72px"
    */
  }

  body.split-cols .wrap{
    display:grid;
    grid-template-columns: 1fr 320px;     /* lewa elastyczna, prawa stała 320px */
    gap:24px;
    height: calc(100vh - var(--top-offset, 0px));
    padding-block: 16px;
  }

  /* LEWA kolumna przewija się niezależnie */
  body.split-cols .wrap > main{
    min-width:0;                 /* ważne przy flex/grid, żeby nie robił poziomego scrolla */
    overflow-y:auto;
    padding-right:8px;           /* miejsce na scrollbar */
    max-height: calc(100vh - var(--top-offset, 0px) - 32px); /* -32px = padding-block powyżej */
    -webkit-overflow-scrolling: touch;  /* płynny scroll na mobilnych WebKit */
  }

  /* PRAWA kolumna stoi w miejscu; jeśli treści jest dużo, dostaje swój scrollbar */
  body.split-cols .wrap > .sidebar{
    height: calc(100vh - var(--top-offset, 0px) - 32px);
    overflow:auto;
    align-self:start;            /* nie rozciągaj na całą kolumnę, tylko do góry */
  }
}

/* Na mobile wracamy do zwykłego układu i głównego paska przewijania */
@media (max-width: 900px){
  body.split-cols{ overflow:auto; height:auto; }
  body.split-cols .wrap{ height:auto; grid-template-columns:1fr; }
  body.split-cols .wrap > main,
  body.split-cols .wrap > .sidebar{
    height:auto; overflow:visible; padding-right:0;
  }
}

/* Scrollbar: tor #001935, kciuk #122943 */
body.split-cols .wrap > main,
body.split-cols .wrap > .sidebar{
  /* Firefox */
  scrollbar-color: #122943 #001935; /* thumb track */
  scrollbar-width: thin;
}

/* WebKit (Chrome/Edge/Safari) */
body.split-cols .wrap > main::-webkit-scrollbar,
body.split-cols .wrap > .sidebar::-webkit-scrollbar{
  width: 10px;
}
body.split-cols .wrap > main::-webkit-scrollbar-track,
body.split-cols .wrap > .sidebar::-webkit-scrollbar-track{
  background: #001935;
}
body.split-cols .wrap > main::-webkit-scrollbar-thumb,
body.split-cols .wrap > .sidebar::-webkit-scrollbar-thumb{
  background: #122943;
  border-radius: 8px;
  /* opcjonalnie lekki „odstęp” od toru, bez ozdobników:
     border: 2px solid #001935; */
}

/* Mobilnie: nie rozszerzaj featured na 100% w view_post */
@media (max-width:560px){
  .view-post .content-area .featured{
    float:left;
    width:150px !important;
    height:auto !important;
    margin:0 12px 8px 0 !important;
  }
}
/* Mobile fix: na liście wpisów nie rozszerzaj featured do 100% */
@media (max-width:560px){
  body.split-cols .content-area .featured{
    float:left;
    width:150px !important;
    height:auto !important;
    margin:0 12px 8px 0 !important;
  }
}
html { background:#001935; }
body.view-post{
  background:#001935 !important;
  min-height:100vh;
}

/* Paginacja z ikonami */
.paginate-nav{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap; /* żeby ładnie się łamało */
}

/* Linki w paginacji jako flex (ikona + tekst) */
.paginate-nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px;          /* bez tła, spójne z Twoim stylem */
  text-decoration:none; /* hover underline zostaje wg .liprawa jeśli chcesz */
}

/* Szara informacja "Strona X / Y" */
.paginate-nav .page-indicator{ color:#a6aeb8; }

/* Ikony */
.paginate-nav .icon{
  width:28px;
  height:28px;
  display:inline-block;
  fill:currentColor; /* dziedziczy kolor linka */ 
}

/* Mobile: ukryj tekst, zostaw same strzałki */
@media (max-width:560px){
  .paginate-nav .label{ display:none; }
  .paginate-nav a{ padding:8px; } /* kompaktowo */
}

h1,h2,h3 {color: #9ca5b0 !important;}

/* view_post: stały, kwadratowy rozmiar miniatur na desktopie */
.view-post .gallery{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  width:100%;
}

.view-post .gallery img{
  width:120px !important;   /* stały rozmiar */
  height:120px !important;  /* kwadrat */
  object-fit:cover;
  border-radius:8px;
  display:block;
  max-width:none !important;
}

/* Mobile: 4 kolumny jak wcześniej (responsywne) */
@media (max-width:560px){
  .view-post .gallery img{
    width:calc((100% - 18px)/4) !important;
    height:calc((100% - 18px)/4) !important;
  }
}
body.view-post #gallery img{
  flex: 0 0 120px !important;   /* <- klucz: nadpisuje flex-basis */
  width: 120px !important;
  height: 120px !important;
  object-fit: cover;
  border-radius: 8px;
  max-width: none !important;
}

/* Mobile: wróć do responsywnych 4 kolumn */
@media (max-width:560px){
  body.view-post #gallery img{
    flex: 0 0 calc((100% - 18px)/4) !important;
    width: calc((100% - 18px)/4) !important;
    height: calc((100% - 18px)/4) !important;
  }
}
  .post-head { display:flex; align-items:center; gap:10px; }
  .avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
  .author { font-weight:600; }
  .meta { margin-left:auto; opacity:.8; font-size:.9em; }
.avatar-sm { width:20px; height:20px; border-radius:50%; object-fit:cover; }
/* Kompaktowe podglądy komentarzy na blog.php */
.comments-mini-wrap {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}

.comments-mini {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comments-mini .cm {
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.comments-mini .cm:first-child { border-top: 0; }

/* Nagłówek komentarza: autor • data */
.cm-author {
  font-weight: 600;
  letter-spacing: .2px;
}
.cm-dot {
  margin: 0 6px;
  opacity: .5;
}
.cm-time {
  font-size: .85em;
  opacity: .65;          /* data “lżejsza” od autora */
}

/* Treść komentarza – krótko i czytelnie */
.cm-text {
  margin-top: 4px;
  font-size: .95em;
  line-height: 1.45;
  display: -webkit-box;          /* 2-linijkowy skrót */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ładowanie/błąd i stopka akcji */
.cm-loading, .cm-error {
  font-size: .9em;
  opacity: .75;
}
.comments-mini-actions {
  margin-top: 8px;
  font-size: .9em;
  opacity: .8;
}
.cm-prefix { font-size: .85em; opacity: .65; margin-right: 6px; }
.post-meta{display:flex;align-items:center;gap:8px;margin:6px 0 12px}
.post-meta__avatar{
  width:40px;height:40px;flex:0 0 40px;
  border-radius:50%;object-fit:cover;display:block;
}