/*
 * Style blogu. Samodzielny arkusz, bo strony blogu nie przechodzą przez Vite ani Tailwinda —
 * są generowane bezpośrednio do dist. Wartości kolorów są kopią tokenów z `src/index.css`
 * i przy zmianie marki trzeba ruszyć oba miejsca. To ta sama świadoma duplikacja, co między
 * landingiem a aplikacją, i z tego samego powodu: dwa konsumenty nie uzasadniają biblioteki.
 *
 * Blog nie pokazuje okładek na stronie. Zawierają tytuł artykułu, więc obok tego samego tytułu
 * w tekście byłyby powtórzeniem. Ich zadaniem jest podgląd przy udostępnianiu linku — tam obraz
 * z tytułem ma sens, bo tytułu nie widać inaczej.
 *
 * Zamiast obrazów ciężar niesie typografia: jedna duża rzecz na stronę, reszta cicho.
 */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonty/plus-jakarta-sans-latin.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Polskie znaki diakrytyczne mieszkają w tym podzbiorze. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonty/plus-jakarta-sans-latin-ext.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --ink: #1f2937;
  --ink-muted: #4b5563;
  --ink-subtle: #6b7280;
  --brand: #0f766e;
  --brand-ciemny: #134e4a;
  --brand-tlo: #f0fdfa;
  --powierzchnia: #ffffff;
  --tlo: #fafafa;
  --linia: #e4e4e7;
  --radius-karta: 1.25rem;
  --radius-kontrolka: 0.875rem;
  --cien-karta: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px -12px rgb(15 23 42 / 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--tlo);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Widoczne ogniskowanie — ta sama reguła co w aplikacji (WCAG 2.4.7). */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Pasek górny ─────────────────────────────────────────────────────────
   Bez niego blog wygląda jak dokument, który przypadkiem stoi pod tą domeną.
   Ten sam układ co na landingu: znak po lewej, wyjście do aplikacji po prawej. */

.pasek {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--linia);
  background: rgb(255 255 255 / 0.85);
  backdrop-filter: blur(8px);
}

.pasek-wnetrze {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
}

.znak {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brand);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.znak svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.pasek-akcja {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 1rem;
  border-radius: var(--radius-kontrolka);
  background: var(--brand);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms;
}

.pasek-akcja:hover {
  background: var(--brand-ciemny);
}

/* ── Wspólne ─────────────────────────────────────────────────────────── */

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

a {
  color: var(--brand);
}

/*
 * Nadtytuł. Ten sam zabieg co na landingu: mała wersalikowa etykieta nad nagłówkiem,
 * która mówi, gdzie jesteś, zanim przeczytasz tytuł.
 */
.nadtytul {
  margin: 0 0 0.75rem;
  color: var(--brand);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.data {
  color: var(--ink-subtle);
  font-size: 0.9375rem;
}

/* ── Lista artykułów ─────────────────────────────────────────────────────
   Indeks typograficzny, nie siatka kart. Kart używa się, gdy pozycje mają obraz
   i konkurują o uwagę; tutaj pozycji jest kilka i każda ma się dać przeczytać. */

.wstep {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: var(--ink-muted);
  font-size: 1.125rem;
}

.lista {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.lista li + li {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--linia);
}

/*
 * Miniatura obok tekstu, nie nad nim: schemat jest wąskim paskiem, więc na pełnej szerokości
 * zajmowałby połowę wysokości pozycji i spychał tytuł poniżej krawędzi ekranu.
 *
 * Okładka jest ozdobą — `alt=""` i `aria-hidden`, bo tytuł tuż obok mówi to samo, a odnośnik
 * ma `tabindex="-1"`, żeby klawiatura nie zatrzymywała się dwa razy na tym samym celu.
 */
@media (min-width: 40rem) {
  .lista li {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 1.75rem;
    align-items: start;
  }
}

.miniatura {
  display: block;
  overflow: hidden;
  border: 1px solid var(--linia);
  border-radius: var(--radius-kontrolka);
  line-height: 0;
}

.miniatura img {
  width: 100%;
  height: auto;
}

.lista li:not(:has(.miniatura)) {
  display: block;
}

.pozycja-tresc {
  min-width: 0;
}

.okladka {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
  border: 1px solid var(--linia);
  border-radius: var(--radius-karta);
}

.lista h2 {
  margin: 0;
  font-size: clamp(1.375rem, 3.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lista h2 a {
  color: var(--ink);
  text-decoration: none;
}

.lista h2 a:hover {
  color: var(--brand);
}

.lista p {
  margin: 0.625rem 0 0;
  color: var(--ink-muted);
}

.lista .data {
  margin-top: 0.75rem;
  display: block;
}

.pusto {
  margin: 3rem 0 0;
  color: var(--ink-subtle);
}

/* ── Artykuł ─────────────────────────────────────────────────────────── */

.powrot {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.powrot:hover {
  color: var(--brand);
}

article {
  margin-top: 2.5rem;
}

article h2 {
  margin: 3rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

article h3 {
  margin: 2.25rem 0 0;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

article p {
  margin: 1.125rem 0 0;
}

article ul,
article ol {
  margin: 1.125rem 0 0;
  padding-left: 1.25rem;
}

article li + li {
  margin-top: 0.5rem;
}

article strong {
  font-weight: 700;
}

/*
 * Odnośnik w treści jest podkreślony, nie tylko kolorowy. Przy treści opartej na źródłach
 * czytelnik ma widzieć, że coś jest odsyłaczem, zanim najedzie na to kursorem — a sam kolor
 * nie wystarcza osobom nierozróżniającym barw.
 */
article a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ── Wezwanie do działania ──────────────────────────────────────────────
   Karta na końcu artykułu, wizualnie spójna z sekcjami landingu. Jedno miejsce,
   w którym tekst przestaje tłumaczyć, a zaczyna proponować. */

.wezwanie {
  margin: 4rem 0 0;
  padding: 2rem 1.75rem;
  border-radius: var(--radius-karta);
  background: var(--brand-tlo);
}

.wezwanie p {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--ink);
}

.wezwanie a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 1.25rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-kontrolka);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms;
}

.wezwanie a:hover {
  background: var(--brand-ciemny);
}

/* ── Stopka ──────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--linia);
  background: var(--powierzchnia);
}

footer > * {
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding-top: 2rem;
}

footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

footer nav a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/*
 * `margin-block`, nie skrót `margin` — ten zerowałby też `margin-inline: auto` z reguły
 * `footer > *` i akapit uciekłby do lewej krawędzi ekranu, podczas gdy nawigacja nad nim
 * zostałaby wyśrodkowana.
 */
footer p {
  margin-block: 0;
  padding-bottom: 2.5rem;
  color: var(--ink-subtle);
  font-size: 0.875rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}