/* ══════════════════════════════════════════════════════ blog.css — appme, lista wpisów i pojedynczy wpis Zmienne (--c1, --page-*) pochodzą z css/styles.css. Wszystkie klasy prefiksowane .blog-*, jak w faq.css i legal.css. Powłoka strony — .blog-page, breadcrumb, hero i kontener treści — jest wspólna dla contact / support / blog i mieszka w css/styles.css (sekcja POWŁOKA PODSTRON TREŚCIOWYCH). Tutaj zostaje tylko to, co jest specyficzne dla bloga. ══════════════════════════════════════════════════════ */ .blog-cta-btn { display: inline-block; margin-top: 1.5rem; padding: .8rem 1.6rem; border-radius: 99px; background: var(--c1); color: #05010a; font-weight: 700; font-size: .9rem; text-decoration: none; } .blog-cta-btn:hover { filter: brightness(1.1); } /* ── Siatka wpisów ─────────────────────────────────── */ /* Lista wpisów jest wyjątkiem: to siatka kafelków, nie kolumna tekstu, więc bierze pełną szerokość ramki (tę samą co navbar i breadcrumb), a nie węższą miarę czytania z --page-max. 340px na kartę zamiast 300px trzyma układ na trzech kolumnach — przy 300px na szerokim ekranie wchodziła czwarta i wpisy robiły się drobne. Poniżej ~1080px schodzi na dwie, na telefonie na jedną. */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.5rem; max-width: var(--shell-max, 1400px); margin: 0 auto; padding: 0 var(--shell-gutter, clamp(1rem, 4vw, 3rem)); } /* Oddech na dole tylko wtedy, gdy pod siatką nie ma już paginacji — inaczej odstęp liczyłby się dwa razy. */ .blog-grid:last-child { padding-bottom: var(--page-bottom, 5rem); } .blog-card { border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); transition: transform .2s, border-color .2s; } .blog-card:hover { transform: translateY(-3px); border-color: rgba(12,181,210,.3); } .blog-card-link { display: block; text-decoration: none; color: inherit; height: 100%; } .blog-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: rgba(255,255,255,.04); } .blog-card-img--empty { background: linear-gradient(135deg, rgba(12,181,210,.15), rgba(83,17,89,.2)); } .blog-card-body { padding: 1.25rem; } .blog-card-date { font-size: .72rem; color: rgba(255,255,255,.35); margin-bottom: .5rem; } .blog-card-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1.35; margin-bottom: .5rem; color: #fff; } /* Zajawka: 4 linie, ani mniej, ani wiecej. Ciecie w PHP (blog.php, $blogExcerpt) daje ~180 znakow, ale to liczba ZNAKOW — w waskim kafelku zajmie wiecej linii niz w szerokim. Klamra line-clamp pilnuje wiec gornej granicy i sama dokleja wielokropek, a min-height dolnej, zeby kafelek z krotka zajawka nie byl nizszy od sasiada. -webkit-box to jedyny sposob na line-clamp dzialajacy we wszystkich przegladarkach, ktore ta strona obsluguje; prefiks nie jest tu zaszloscia. */ .blog-card-excerpt { font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,.5); margin-bottom: .8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; min-height: calc(1.6em * 4); /* Justowanie w kolumnie tej szerokosci potrzebuje dzielenia wyrazow, inaczej polskie zlozenia rozpychaja spacje w rzeki bieli. Slownik przegladarka bierze z lang na , ktory blog.php ustawia z $t['html_lang']. */ text-align: justify; -webkit-hyphens: auto; hyphens: auto; } .blog-card-more { font-size: .8rem; font-weight: 700; color: var(--c1); } .blog-empty { max-width: var(--shell-max, 1400px); margin: 0 auto; padding: 2rem var(--shell-gutter, clamp(1rem, 4vw, 3rem)) 4rem; text-align: center; color: rgba(255,255,255,.45); } /* ── Paginacja ─────────────────────────────────────── */ .blog-pager { display: flex; justify-content: center; gap: .4rem; padding: 3rem var(--shell-gutter, clamp(1rem, 4vw, 3rem)) var(--page-bottom, 5rem); } .blog-pager-item { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: .82rem; font-weight: 600; text-decoration: none; color: rgba(255,255,255,.6); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); } .blog-pager-item:hover { color: #fff; } .blog-pager-item.active { color: var(--c1); border-color: rgba(12,181,210,.4); background: rgba(12,181,210,.1); } /* ══════════════════════════════════════════════════════ Pojedynczy wpis ══════════════════════════════════════════════════════ */ /* Szerokość z wspólnego kontenera; tutaj tylko odstęp nad tytułem. */ .blog-post { padding-top: 2.5rem; } .blog-post-head { margin-bottom: 2rem; } /* Ten sam krój i światło co nagłówki hero (styles.css); mniejsza skala, bo tytuł artykułu bywa dużo dłuższy niż nagłówek podstrony. */ .blog-post-head h1 { font-family: 'Syne', sans-serif; font-weight: 900; font-size: clamp(1.7rem, 4.2vw, 2.4rem); letter-spacing: -.03em; line-height: 1.2; color: #fff; margin-bottom: .8rem; } .blog-post-meta { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .8rem; color: rgba(255,255,255,.4); } /* Separator zapisany escapem CSS (\00B7 = U+00B7), a nie samym znakiem: arkusz bez zadeklarowanego kodowania bywa czytany jako Latin-1 i bajt C2 wychodzi wtedy jako widoczne "A z daszkiem" przed kropka. */ .blog-post-meta span::before { content: '\00B7'; margin-right: .8rem; opacity: .5; } .blog-post-meta time:only-child + span::before { content: none; } .blog-post-cover { width: 100%; border-radius: 16px; margin-bottom: 2.5rem; display: block; } /* ── Typografia treści ──────────────────────────────── Renderowany markdown emituje h1–h4, ol i table, czego ręcznie pisany HTML nigdy nie robił — te same reguły co .legal-doc-body i .lm-body. */ .blog-post-body { font-size: 1rem; line-height: 1.8; color: rgba(255,255,255,.78); overflow-wrap: anywhere; } .blog-post-body > :first-child { margin-top: 0; } .blog-post-body h1, .blog-post-body h2, .blog-post-body h3, .blog-post-body h4 { font-family: 'Syne', sans-serif; font-weight: 800; color: #fff; line-height: 1.3; margin: 2.2em 0 .6em; } .blog-post-body h1 { font-size: 1.8rem; } .blog-post-body h2 { font-size: 1.45rem; } .blog-post-body h3 { font-size: 1.2rem; } .blog-post-body h4 { font-size: 1rem; color: rgba(255,255,255,.65); } /* Justujemy tylko tekst plynacy — akapity i punkty list. Naglowki, tabele i bloki kodu zostaja do lewej: justowanie rozjezdza im rytm, a w 
 zmienia
   znaczenie spacji. */
.blog-post-body p,
.blog-post-body li {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.blog-post-body p  { margin: 0 0 1.3em; }
.blog-post-body strong { color: #fff; font-weight: 700; }
.blog-post-body a {
  color: var(--c1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-post-body ul,
.blog-post-body ol { margin: 0 0 1.3em 1.5rem; }
.blog-post-body li { margin-bottom: .5em; }
/* Numeracja zagnieżdżona jak w dokumentach Worda — litery, potem rzymskie.
   Markdown nie ma składni alfabetycznej, więc to należy do prezentacji. */
.blog-post-body ol ol    { list-style-type: lower-alpha; }
.blog-post-body ol ol ol { list-style-type: lower-roman; }
.blog-post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5em 0;
}
.blog-post-body blockquote {
  border-left: 3px solid var(--c1);
  padding-left: 1.2rem;
  margin: 0 0 1.3em;
  color: rgba(255,255,255,.6);
  font-style: italic;
}
.blog-post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em;
  background: rgba(255,255,255,.07);
  padding: .12rem .35rem;
  border-radius: 5px;
}
.blog-post-body pre {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 0 0 1.3em;
}
.blog-post-body pre code { background: none; padding: 0; }
.blog-post-body hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 2.5em 0;
}

/* Szeroka tabela przewija się we własnym pudełku, a nie całą stroną. */
.blog-post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.3em;
  font-size: .9rem;
  display: block;
  overflow-x: auto;
}
.blog-post-body th,
.blog-post-body td {
  border: 1px solid rgba(255,255,255,.12);
  padding: .6rem .8rem;
  text-align: left;
}
.blog-post-body th { background: rgba(255,255,255,.05); color: #fff; font-weight: 700; }

/* ── Załączniki ────────────────────────────────────── */
.blog-file {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.1rem;
  margin: 1.5em 0;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  color: #fff;
  text-decoration: none;
  transition: border-color .15s;
}
.blog-file:hover     { border-color: rgba(12,181,210,.35); }
.blog-file i         { font-size: 1.4rem; color: var(--c1); }
.blog-file-name      { font-size: .9rem; font-weight: 600; }
.blog-file-meta      { margin-left: auto; font-size: .75rem; color: rgba(255,255,255,.4); }

.blog-video video {
  width: 100%;
  max-height: 60vh;              /* film pionowy nie zajmuje kilometra */
  border-radius: 12px;
  background: #000;
  display: block;
  margin: 1.5em 0;
}

/* ── Osadzenie YouTube (zgoda dwukliknięciowa) ─────── */
.blog-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 1.5em 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(12,181,210,.12), rgba(83,17,89,.25));
  border: 1px solid rgba(255,255,255,.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}
.blog-embed-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.4rem;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.blog-embed-btn:hover { background: rgba(0,0,0,.65); border-color: var(--c1); }
.blog-embed-icon      { font-size: 1.2rem; line-height: 1; color: var(--c1); }
.blog-embed-note {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  padding: 0 1rem;
  text-align: center;
}
.blog-embed-frame { width: 100%; height: 100%; border: 0; display: block; }
.blog-embed.is-loaded { background: #000; gap: 0; }

/* ── Stopka wpisu ──────────────────────────────────── */
.blog-post-foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.blog-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 600;
  color: rgba(255,255,255,.6);
  text-decoration: none;
}
.blog-back:hover { color: var(--c1); }
.blog-back svg   { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}