/*
Theme Name: TechnetBlog Mapa
Theme URI: https://technetblog.pl
Author: Daniel
Description: Motyw blokowy (FSE) technetblog.pl — „Mapa Przewodnika”: papier kartograficzny, wybrzeże SVG, kapsuły werdyktów, gwiazdki recenzji. Port 1:1 zaakceptowanego prototypu (katalog prototyp/ w repozytorium).
Version: 0.3.4
Requires at least: 6.5
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: technetblog
Tags: blog, block-patterns, full-site-editing
*/

/* Mapa Przewodnika — TechnetBlog, rejestr techniczny (mapa terenowa)
   Świat: papier kartograficzny, zieleń terenowa lądu, stalowy błękit wody;
   wybrzeże SVG jako jedyna organiczna geometria; sygnałowy orange i żółć
   tylko dla werdyktów i oznaczeń; jeden grotesk (Barlow), mono dla pomiarów;
   linie kropkowane i podziałki; ruch precyzyjny, zero przeskoku.
   Port z prototyp/style.css — sekcje „Gwiazdki” i „Dopasowania bloków
   WordPress” są jedynymi dodatkami motywu. */

:root {
  --papier: #f0ede0;
  --lad: #a3b672;
  --atrament: #23271f;
  --sygnal: #e8590c;         /* sygnał graficzny: punkty mapy, akcenty */
  --sygnal-gleboki: #c23a0b; /* tło etykiet werdyktu — tekst biały (5.4:1) */
  --sygnal-tekst: #b8430d;   /* sygnał na mały tekst i podkreślenia (4.6:1) */
  --amber: #e3b505;
  --stal: #3e6e9e;
  --biel: #ffffff;
  --linia-sladowa: rgba(35, 39, 31, 0.3);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  --font: "Barlow", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ruch: cubic-bezier(0.2, 0, 0.2, 1);
  --promien-kapsuly: 0.32em;
  --promien-wyspy: 8px;
}

* { box-sizing: border-box; }

html {
  scrollbar-width: thin;
  scrollbar-color: var(--atrament) var(--papier);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--font);
  font-size: 1.06rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber); color: var(--atrament); }
input { caret-color: var(--atrament); }

:focus-visible {
  outline: 2px solid var(--atrament);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: inherit; }

img, svg { display: block; }

.strona {
  width: min(72rem, 100% - 3rem);
  margin-inline: auto;
}

.pomin {
  position: absolute;
  left: -9999px;
  top: 0.8rem;
  z-index: 20;
  background: var(--amber);
  color: var(--atrament);
  font-weight: 700;
  padding: 0.6em 1.2em;
  border-radius: var(--promien-kapsuly);
}
.pomin:focus { left: 0.8rem; }

/* ── Nagłówek ─────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: 1.5rem 0 1.2rem;
  position: relative;
  z-index: 5;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.logo-blob {
  width: 2.6rem;
  height: 2.3rem;
  background: var(--lad);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.35rem;
  box-shadow: inset 0 0 0 1.5px var(--atrament);
}

.logo-nazwa {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.logo-haslo {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
}

.nawigacja ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.nawigacja a {
  font-weight: 500;
  text-decoration: none;
}

.nawigacja a:hover {
  text-decoration: underline dotted var(--sygnal-tekst) 2px;
  text-underline-offset: 0.38em;
}

/* ── Kapsuły i przyciski ──────────────────────────────────── */

.kapsula-werdykt {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 0.32em 0.85em;
  border-radius: var(--promien-kapsuly);
  white-space: nowrap;
}

.kapsula-werdykt.polecane { background: var(--sygnal-gleboki); color: var(--biel); }
.kapsula-werdykt.sprawdzone { background: var(--stal); color: var(--biel); }
.kapsula-werdykt.zastrzezenia { background: var(--amber); }
.kapsula-werdykt.odpadly {
  background: transparent;
  border: 1.5px dashed var(--atrament);
  padding: 0.2em 0.75em;
}
.kapsula-werdykt.encyklopedyczne {
  background: var(--papier);
  box-shadow: inset 0 0 0 1.5px var(--atrament);
}

.kapsula-kat {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 0.28em 0.8em;
  border-radius: var(--promien-kapsuly);
  white-space: nowrap;
}
.kat-ai { background: var(--lad); }
.kat-poradniki { background: var(--amber); }
.kat-prywatnosc { background: var(--sygnal-gleboki); color: var(--biel); }
.kat-recenzje { background: var(--stal); color: var(--biel); }

.przycisk {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--atrament);
  padding: 0.8em 0.9em 0.8em 2.5em;
  border: 0;
  border-radius: var(--promien-kapsuly);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s var(--ruch);
}

/* dok na czoło kapsuły: wskaźnik wjeżdża przy aktywacji */
.przycisk::before {
  content: "";
  position: absolute;
  left: 0.45em;
  top: 50%;
  width: 1.85em;
  height: 1.85em;
  margin-top: -0.925em;
  border-radius: 50%;
  background-color: var(--sygnal-gleboki);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0ede0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.95em;
  opacity: 0;
  transform: translateX(-0.5em) scale(0.7);
  transition: transform 0.18s var(--ruch), opacity 0.18s var(--ruch);
}

.przycisk .napis { order: 1; }
.przycisk .zelko {
  order: 2;
  width: 1.85em;
  height: 1.85em;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--atrament);
  color: var(--papier);
  transition: transform 0.18s var(--ruch), opacity 0.18s var(--ruch);
}
.przycisk .zelko svg { width: 0.95em; height: 0.95em; }

.przycisk.glowny { background: var(--lad); }
.przycisk.brama { background: var(--amber); padding: 0.65em 0.8em 0.65em 2.3em; }
.przycisk.okreslony {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--atrament);
  padding: 0.65em 0.8em 0.65em 2.3em;
}

/* żywy stan (mysz i klawiatura): żelko przecina kapsułę na czoło */
.przycisk:hover,
.przycisk:focus-visible { transform: translateY(-1px); }

.przycisk:hover::before,
.przycisk:focus-visible::before { opacity: 1; transform: none; }

.przycisk:hover .zelko,
.przycisk:focus-visible .zelko { opacity: 0; transform: translateX(0.5em) scale(0.7); }
.przycisk:active { transform: translateY(0); }

/* ── Bohater (strona główna) ──────────────────────────────── */

.bohater {
  position: relative;
  overflow: hidden;
}

.brzeg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.brzeg .lad-path { fill: var(--lad); }
.brzeg .koral-path { fill: var(--sygnal); }

.staw-blob {
  position: absolute;
  left: 2%;
  bottom: 4%;
  width: 11rem;
  height: auto;
  z-index: 0;
}

.staw-path { fill: var(--stal); }

.bohater .wnetrze {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 3rem;
  align-items: center;
  min-height: 34rem;
  padding: 2.5rem 0 4.5rem;
}

.display {
  font-weight: 800;
  font-size: clamp(2.5rem, 4.3vw, 4.1rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  max-width: 15ch;
}

.dopisek {
  margin-top: 1.4rem;
  font-size: 1.18rem;
  font-weight: 500;
  max-width: 34ch;
}

.bohater .przycisk { margin-top: 1.8rem; }

/* najnowszy artykuł: biała wyspa na lądzie wybrzeża — kontener
   znosi dowolną długość tytułu i zajawki bez rozjechania kompozycji */
.najnowszy {
  background: var(--biel);
  border-radius: var(--promien-wyspy);
  box-shadow: inset 0 0 0 1.5px var(--linia-sladowa);
  padding: 1.7rem 1.8rem 1.9rem;
  max-width: 27rem;
  justify-self: end;
}

.brama-testu {
  display: inline-block;
  background: var(--amber);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.38em 0.9em;
  border-radius: 0.25em;
  box-shadow: inset 0 0 0 1.5px var(--atrament);
}

.najnowszy-tytul {
  margin-top: 1.1rem;
  font-size: 1.55rem;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.najnowszy-tytul a { text-decoration: none; }
.najnowszy-tytul a:hover {
  text-decoration: underline dotted var(--atrament) 2px;
  text-underline-offset: 0.3em;
}

/* zajawka karty: trzy linie twardego clampu — długi exceprt nie
   rozpycha wyspy */
.najnowszy-def {
  margin-top: 0.8rem;
  font-size: 1.02rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.najnowszy-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 0.88rem;
  font-weight: 500;
}

.najnowszy .przycisk { margin-top: 1.5rem; }

/* ── Sekcje i szlak ───────────────────────────────────────── */

.sekcja-glowa {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 4.5rem 0 1.6rem;
}

.sekcja-glowa h2 {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.miara {
  flex: 1;
  height: 0.6rem;
  color: var(--atrament);
  min-width: 3rem;
}

.szlak { margin-bottom: 2rem; }

.miejsce {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.4rem 1.2rem;
  align-items: start;
  padding: 1.2rem 0;
}

.miejsce + .miejsce { border-top: 2px dotted var(--linia-sladowa); }

.znacznik {
  width: 2.9rem;
  height: 2.5rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-top: 0.15rem;
}

.znacznik svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--atrament);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.miejsce-tytul {
  font-size: 1.14rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.miejsce-tytul a { text-decoration: none; }
.miejsce-tytul a:hover {
  text-decoration: underline dotted var(--sygnal-tekst) 2px;
  text-underline-offset: 0.3em;
}

.miejsce-def {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  max-width: 58ch;
}

.miejsce-bok {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  text-align: right;
}

.miejsce-data {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

/* szlak wyprowadza do archiwum */
.koniec-szlaku {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 2px dotted var(--linia-sladowa);
}

/* ── Obraz wyróżniający wpisu ─────────────────────────────── */
.wp-block-post-featured-image.okladka { margin: 0 0 1.6rem; }
.wp-block-post-featured-image.okladka img {
  display: block;
  width: 100%;
  border-radius: var(--promien-wyspy);
  box-shadow: inset 0 0 0 1.5px var(--linia-sladowa);
}

/* ── 404 — poza mapą ──────────────────────────────────────── */

.blad-404 h1 { font-size: 2.3rem; letter-spacing: -0.03em; }
.blad-404 p { max-width: 58ch; margin: 1rem 0 0; }

/* ── Stopka — ląd z blokiem o blogu ───────────────────────── */

.stopka { margin-top: 5rem; }

.brzeg-stopki {
  display: block;
  width: 100%;
  height: 5.5rem;
  fill: var(--lad);
}

.stopka-land {
  position: relative;
  background: var(--lad);
  padding: 0.5rem 0 3rem;
}

/* kreski pomiarowe wzdłuż wybrzeża stopki */
.stopka-land::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 0;
  right: 0;
  height: 0.4rem;
  background: repeating-linear-gradient(90deg, rgba(35, 39, 31, 0.45) 0 2px, transparent 2px 16px);
}

.o-blogu {
  margin: 1.2rem 0 2.4rem;
  max-width: 46rem;
}

.o-blogu p {
  margin: 0;
  font-size: 0.98rem;
}

.brama-zapisu { max-width: 30rem; }
.brama-zapisu h2 {
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}
.brama-zapisu p { margin: 0.5rem 0 1rem; font-size: 0.98rem; }

.brama-formularz { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.brama-formularz input {
  flex: 1;
  min-width: 12rem;
  font: inherit;
  color: var(--atrament);
  background: var(--papier);
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--atrament);
  border-radius: var(--promien-kapsuly);
  padding: 0.7em 1.3em;
}

.brama-formularz input::placeholder { color: rgba(35, 39, 31, 0.7); }

.pomiar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0.9rem;
}

.skala-linia {
  width: 7rem;
  height: 0.5rem;
  flex: none;
  border: 1.5px solid var(--atrament);
  background: repeating-linear-gradient(90deg, var(--atrament) 0 1.75rem, transparent 1.75rem 3.5rem);
}

.pomiar-etykieta {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.stopka-dol {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 2px dotted rgba(35, 39, 31, 0.35);
  font-size: 0.92rem;
}

.stopka-dol p { margin: 0 0 0.5rem; }

.stopka-kategorie {
  display: flex;
  gap: 1.3rem;
  flex-wrap: wrap;
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
  font-weight: 500;
}

.stopka-kategorie a { text-decoration: none; }
.stopka-kategorie a:hover {
  text-decoration: underline dotted var(--atrament) 2px;
  text-underline-offset: 0.35em;
}

/* ── Pomocnicze ───────────────────────────────────────────── */

.sekcja-stopki {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  margin: 1.4rem 0 0.6rem;
}

.wizualnie-ukryte {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.definicja-artykulu {
  font-size: 1.22rem;
  line-height: 1.55;
}

.definicja-artykulu dfn { font-style: normal; }

/* ── Post ─────────────────────────────────────────────────── */

.naglowek-lad {
  position: relative;
  overflow: hidden;
}

.naglowek-lad .brzeg-static {
  display: block;
  width: 100%;
  height: 9.5rem;
  fill: var(--lad);
}

.naglowek-lad .brzeg-static path { fill: var(--lad); }

.naglowek-land {
  background: var(--lad);
  padding: 0.5rem 0 3.2rem;
  margin-top: -1px;
}

.naglowek-land .kapsula-kat { margin-bottom: 1.1rem; }

.naglowek-land h1 {
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 24ch;
}

.naglowek-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.naglowek-meta span { font-variant-numeric: tabular-nums; }

.tekst {
  max-width: 68ch;
  padding: 2.8rem 0 1rem;
}

/* treść posta renderuje się w .entry-content — jedno piętro niżej */
:is(.tekst, .tekst .entry-content) > p,
:is(.tekst, .tekst .entry-content) > ul,
:is(.tekst, .tekst .entry-content) > ol { font-size: 1.06rem; }

.tekst h2 {
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  margin: 2.6rem 0 0.9rem;
}

/* podziałka pomiarowa nad każdym nagłówkiem sekcji posta */
.tekst h2::before {
  content: "";
  display: block;
  width: 4rem;
  height: 0.45rem;
  margin-bottom: 0.55rem;
  background: repeating-linear-gradient(90deg, var(--atrament) 0 2px, transparent 2px 8px);
  opacity: 0.55;
}

.tekst a { text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.tekst a:hover { text-decoration: underline dotted var(--sygnal-tekst) 2px; }

.pagunia {
  background: var(--amber);
  border-radius: 0.2em;
  padding: 0.08em 0.25em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.wyspa {
  background: var(--biel);
  border-radius: var(--promien-wyspy);
  box-shadow: inset 0 0 0 1.5px var(--linia-sladowa);
  padding: 1.4rem 1.6rem;
  margin: 1.2rem 0;
}

.odmiana-wrap { overflow-x: auto; scrollbar-width: thin; }

.odmiana {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
}

.odmiana caption {
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  padding-bottom: 0.8rem;
}

.odmiana th, .odmiana td {
  text-align: left;
  padding: 0.65em 0.9em 0.65em 0;
  vertical-align: top;
}

.odmiana thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.odmiana tbody tr + tr { border-top: 2px dotted var(--linia-sladowa); }

.kroki {
  counter-reset: krok;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.kroki li {
  counter-increment: krok;
  position: relative;
  padding-left: 3.4rem;
  margin: 0 0 1.1rem;
}

.kroki li::before {
  content: counter(krok);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 2.3rem;
  height: 2rem;
  background: var(--lad);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--atrament);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
}

/* spis treści długich tekstów */
.spis-trasy ol {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.spis-trasy li { padding: 0.55rem 0; }
.spis-trasy li + li { border-top: 2px dotted var(--linia-sladowa); }

.spis-trasy a { font-weight: 500; text-decoration: none; }
.spis-trasy a:hover {
  text-decoration: underline dotted var(--sygnal-tekst) 2px;
  text-underline-offset: 0.3em;
}

.por-takze { font-weight: 500; }

.przypis {
  font-size: 0.9rem;
  font-weight: 500;
  max-width: 58ch;
}

.werdykt-wyspa {
  background: var(--sygnal-gleboki);
  color: var(--biel);
  border-radius: var(--promien-wyspy);
  padding: 1.8rem 2rem;
  margin: 2.4rem 0;
  max-width: 62ch;
}

.werdykt-wyspa p { margin: 0.9rem 0 0; }

.werdykt-wyspa .kapsula-werdykt.polecane {
  background: var(--biel);
  color: var(--sygnal-gleboki);
}

.pokrewne {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.pokrewne li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.8rem 0;
}

.pokrewne li + li { border-top: 2px dotted var(--linia-sladowa); }

.pokrewne a {
  font-weight: 500;
  text-decoration: none;
}
.pokrewne a:hover {
  text-decoration: underline dotted var(--sygnal-tekst) 2px;
  text-underline-offset: 0.3em;
}

/* ── Gwiazdki (ocena recenzji) ────────────────────────────── */
/* Decyzja właściciela 2026-09-24: Recenzje ocenia gwiazdkami.
   Ta sama ręka co znaczniki: kontur atramentowy 1.8, wypełnienie
   amber tylko dla pełnych — żółć należy do werdyktów. */

.gwiazdki {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 1.4rem 0;
}

.gwiazdki svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--atrament);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.gwiazdki .pelna svg { fill: var(--amber); }

.gwiazdki-liczba {
  margin-left: 0.6rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

/* w sygnałowej wyspie werdyktu gwiazdki kreślą się bielą */
.werdykt-wyspa .gwiazdki { margin: 0.9rem 0 0; }
.werdykt-wyspa .gwiazdki svg { stroke: var(--biel); }

/* ── Wąskie ekrany: wybrzeże schodzi w dół kadru ─────────── */

@media (max-width: 56rem) {
  .brzeg-desktop, .staw-blob { display: none; }

  .bohater .wnetrze {
    display: block;
    min-height: 0;
    padding: 0 0 3rem;
  }

  /* wybrzeże schodzi w dół kadru: ląd jako pełnokrwista płaszczyzna
     pod displayem, z wybrzeżem SVG na dole */
  .wojscie {
    background: var(--lad);
    margin: 0 -1.5rem;
    padding: 1.8rem 1.5rem 0;
  }
  .wojscie::after {
    content: "";
    display: block;
    height: 3.4rem;
    margin: 1.8rem -1.5rem 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath fill='%23a3b672' d='M0 0h400v16c-48 26-82 0-132 18-52 18-82-8-130 8-50 16-94-8-138 8z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  }

  .dopisek { font-size: 1.06rem; }

  .najnowszy {
    max-width: none;
    margin: 1.7rem 0 0;
    padding: 1.4rem 1.3rem 1.6rem;
    justify-self: auto;
  }

  .miejsce { grid-template-columns: 2.7rem 1fr; }
  .miejsce-bok {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 40rem) {
  body { font-size: 1.02rem; }
  .strona { width: calc(100% - 2.2rem); }
  .masthead { padding-top: 1.1rem; }
  .nawigacja ul { gap: 1rem 1.2rem; }
  .display { font-size: 2.35rem; }
  .najnowszy-tytul { font-size: 1.32rem; }
  .sekcja-glowa { gap: 1rem; margin-top: 3.4rem; }
  .sekcja-glowa h2 { font-size: 1.3rem; white-space: normal; }
  .wyspa { padding: 1.1rem 1.1rem; }
  .odmiana { font-size: 0.92rem; }
  .werdykt-wyspa { padding: 1.4rem 1.4rem; }
  .tekst { padding-top: 2rem; }
  .brzeg-stopki { height: 4rem; }
  .pomiar { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .przycisk, .przycisk .zelko, .przycisk::before, .przycisk::after { transition: none; }
  .przycisk:hover, .przycisk:focus-visible { transform: none; }
  .przycisk:hover .zelko, .przycisk:focus-visible .zelko { transform: none; }
  .przycisk:hover::before, .przycisk:focus-visible::before { transform: none; }
  .przycisk:hover::after, .przycisk:focus-visible::after { transform: none; opacity: 1; }
}

/* ── Dopasowania bloków WordPress ─────────────────────────── */
/* Rdzeń renderuje własne klasy (wp-block-*); te reguły wprowadzają
   wyjścia bloków w język Mapy Przewodnika. Prototyp pozostaje
   źródłem prawdy dla designu. */

/* lista artykułów: pętla zapytania jako szlak — reguły celują wyłącznie
   w listę .szlak; post-template bohatera (karta najnowszego) pozostaje
   pionowym blokiem */
.wp-block-post-template { margin: 0; padding: 0; list-style: none; }

.szlak > :is(article, li) {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.4rem 1.2rem;
  align-items: start;
  padding: 1.2rem 0;
}

.szlak > :is(article, li) + :is(article, li) {
  border-top: 2px dotted var(--linia-sladowa);
}

@media (max-width: 56rem) {
  .szlak > :is(article, li) { grid-template-columns: 2.7rem 1fr; }
  .szlak > :is(article, li) .miejsce-bok {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }
}

/* paginacja archiwum: kapsuły numerów nad kropkowaną linią */
.wp-block-query-pagination {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 2px dotted var(--linia-sladowa);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next { text-decoration: none; }
.wp-block-query-pagination-numbers { display: flex; gap: 0.5rem; }
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span {
  padding: 0.32em 0.85em;
  border-radius: var(--promien-kapsuly);
  box-shadow: inset 0 0 0 1.5px var(--atrament);
}
.wp-block-query-pagination-numbers .current {
  background: var(--atrament);
  color: var(--papier);
}

/* znacznik kategorii w liście: ikona liniowa dobierana wg sluga;
   nazwa kategorii pozostaje w DOM (czytniki), wzrokowo milczy.
   Nieznany slug (np. przed ułożeniem kategorii) dostaje neutralny
   znacznik mapowy zamiast dziury */
.wp-block-post-terms.znacznik {
  width: 2.9rem;
  height: 2.5rem;
  margin-top: 0.15rem;
  background-color: var(--papier);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323271f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.35rem;
  box-shadow: inset 0 0 0 1.5px var(--linia-sladowa);
  border-radius: 8px;
}

.znacznik a { font-size: 0; color: transparent; text-decoration: none; }
.znacznik:focus-within {
  outline: 2px solid var(--atrament);
  outline-offset: 3px;
  border-radius: 8px;
}

.znacznik:has(a[href*="ai-i-narzedzia"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323271f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.1 5.4L20 11l-5.9 2.6L12 19l-2.1-5.4L4 11l5.9-2.6z'/%3E%3C/svg%3E");
}
.znacznik:has(a[href*="poradniki"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323271f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C6.5 4 9.5 4 12 5.5c2.5-1.5 5.5-1.5 8 0v13c-2.5-1.5-5.5-1.5-8 0-2.5-1.5-5.5-1.5-8 0z'/%3E%3Cpath d='M12 5.5v13'/%3E%3C/svg%3E");
}
.znacznik:has(a[href*="prywatnosc"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323271f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.8-3.2 8-7 9.8-3.8-1.8-7-5-7-9.8V5.8z'/%3E%3C/svg%3E");
}
.znacznik:has(a[href*="recenzje"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323271f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.5 5.2 5.7.8-4.1 4 1 5.6-5.1-2.7-5.1 2.7 1-5.6-4.1-4 5.7-.8z'/%3E%3C/svg%3E");
}

/* kapsuła kategorii w nagłówku posta: blok post-terms linkuje */
.kapsula-kat a {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 0.28em 0.8em;
  border-radius: var(--promien-kapsuly);
  white-space: nowrap;
  text-decoration: none;
}

.kapsula-kat:has(a[href*="ai-i-narzedzia"]) a { background: var(--lad); }
.kapsula-kat:has(a[href*="poradniki"]) a { background: var(--amber); }
.kapsula-kat:has(a[href*="prywatnosc"]) a { background: var(--sygnal-gleboki); color: var(--biel); }
.kapsula-kat:has(a[href*="recenzje"]) a { background: var(--stal); color: var(--biel); }

/* wypisy dat/autora w wierszach meta: bloki lądują jako divy */
.najnowszy-meta .wp-block-post-author-name,
.naglowek-meta .wp-block-post-date,
.naglowek-meta .wp-block-post-author-name {
  display: inline;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.najnowszy-meta .wp-block-post-author-name::before,
.naglowek-meta .wp-block-post-author-name::before { content: "autor: "; }

/* zajawki: klasa prototypu siedzi na divie bloku, marginesy trzyma <p> */
.wp-block-post-excerpt p { margin: 0; }

/* „Czytaj artykuł” (blok read-more): żelko odgrywane pseudoelementem */
.przycisk.wp-block-read-more::after {
  content: "";
  order: 2;
  width: 1.85em;
  height: 1.85em;
  flex: none;
  border-radius: 50%;
  background-color: var(--atrament);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0ede0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.95em;
  transition: transform 0.18s var(--ruch), opacity 0.18s var(--ruch);
}

.przycisk.wp-block-read-more:hover::after,
.przycisk.wp-block-read-more:focus-visible::after {
  opacity: 0;
  transform: translateX(0.5em) scale(0.7);
}

/* tabela wyników jako blok: figura przejmuje rolę .odmiany,
   podpis tabeli jedzie do figcaption (kwestia bloku, nie designu) */
figure.wp-block-table.odmiana-wrap { margin: 0; overflow-x: auto; scrollbar-width: thin; }

figure.wp-block-table.odmiana-wrap table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
}

figure.wp-block-table.odmiana-wrap th,
figure.wp-block-table.odmiana-wrap td {
  text-align: left;
  padding: 0.65em 0.9em 0.65em 0;
  vertical-align: top;
  border: 0;
}

figure.wp-block-table.odmiana-wrap thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

figure.wp-block-table.odmiana-wrap tbody tr + tr {
  border-top: 2px dotted var(--linia-sladowa);
}

figure.wp-block-table.odmiana-wrap figcaption {
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  padding-bottom: 0.8rem;
}

/* tytuł strony statycznej (szablon page) */
.tytul-strony {
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ── Powiązane artykuły (shortkod [powiazane] na single) ──── */
.powiazane {
  margin-top: 2.6rem;
  padding-top: 1.5rem;
  border-top: 2px dotted var(--linia-sladowa);
}
.powiazane ul { list-style: none; margin: 0; padding: 0; }
.powiazane li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
}
.powiazane li + li { border-top: 2px dotted var(--linia-sladowa); }
.powiazane a { font-weight: 700; letter-spacing: -0.01em; }
.powiazane li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgba(35, 39, 31, 0.7);
}
@media (max-width: 30rem) {
  .powiazane li { flex-direction: column; gap: 0.2rem; }
}

/* ── Baza narzędzi AI (shortkod [narzedzia] na stronie „Narzędzia AI”) ──── */

/* strona bazy: tabela wychodzi poza miarę tekstu (68ch w .tekst) na szerokość
   kontenera .strona; akapity wstępu zostają przy wąskiej miarze czytania.
   Przeglądarki bez :has() dostają dotychczasowy wąski układ */
.tekst:has(.hub-narzedzia) { max-width: none; }
.tekst:has(.hub-narzedzia) .entry-content > p { max-width: 68ch; }

.hub-narzedzia { margin-top: 1.8rem; }

.hub-filtry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.85rem 1rem;
  background: var(--biel);
  border-radius: var(--promien-wyspy);
  box-shadow: inset 0 0 0 1.5px var(--linia-sladowa);
}
.hub-filtry select {
  font: inherit;
  color: var(--atrament);
  background: var(--papier);
  border: 1.5px solid var(--linia-sladowa);
  border-radius: 6px;
  padding: 0.32rem 0.5rem;
  margin-left: 0.5rem;
}
.hub-filtry input[type="checkbox"] {
  accent-color: var(--sygnal-gleboki);
  margin-right: 0.5rem;
}

.tabela-przewij { overflow-x: auto; }
.tabela-narzedzi {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.4rem;
  font-size: 0.95rem;
}
.tabela-narzedzi thead th {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(35, 39, 31, 0.62);
  padding: 0.55rem 0.5rem;
  border-bottom: 2px solid var(--linia-sladowa);
  white-space: nowrap;
}
.tabela-narzedzi tbody th,
.tabela-narzedzi td {
  padding: 0.85rem 0.5rem;
  border-bottom: 2px dotted var(--linia-sladowa);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.tabela-narzedzi tbody tr:hover { background: rgba(255, 255, 255, 0.55); }

.nazwa-narz {
  display: block;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.producent-narz {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: rgba(35, 39, 31, 0.7);
}
.kategorie-narz { display: block; margin-top: 0.5rem; }
.kaps-narz {
  display: inline-block;
  margin: 0 0.22rem 0.22rem 0;
  padding: 0.18em 0.6em;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: var(--papier);
  border: 1.5px solid var(--linia-sladowa);
  border-radius: var(--promien-kapsuly);
}
.plakietka-darmowy {
  display: inline-block;
  padding: 0.2em 0.65em;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--promien-kapsuly);
}
.plakietka-darmowy.tak { background: var(--lad); color: var(--atrament); }
.plakietka-darmowy.nie {
  border: 1.5px solid var(--linia-sladowa);
  color: rgba(35, 39, 31, 0.7);
}
.plakietka-darmowy.nieznane {
  border: 1.5px solid var(--amber);
  color: rgba(35, 39, 31, 0.8);
}
.darmowy-opis {
  display: block;
  margin-top: 0.4rem;
  max-width: 13rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(35, 39, 31, 0.75);
}

.kom-cena { white-space: nowrap; }
.cena {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.cena-dol {
  display: block;
  margin-top: 0.3rem;
  max-width: 13rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.45;
  color: rgba(35, 39, 31, 0.7);
  white-space: normal;
}
.kom-jezyk {
  font-family: var(--mono);
  font-size: 0.8rem;
}
.kom-linki { white-space: nowrap; }
.kom-linki a { font-weight: 700; }
.odstep-linkow { color: rgba(35, 39, 31, 0.45); }

.hub-notka {
  margin: 1.1rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: rgba(35, 39, 31, 0.7);
}

/* na wąskim ekranie tabela zamienia się w stos kart wierszy:
   nagłówki kolumn znikają, bloki układają się jeden pod drugim,
   nic nie wystaje poza ekran */
@media (max-width: 40rem) {
  .tabela-przewij { overflow-x: visible; }
  .tabela-narzedzi thead { display: none; }
  .tabela-narzedzi,
  .tabela-narzedzi tbody,
  .tabela-narzedzi tr,
  .tabela-narzedzi tbody th,
  .tabela-narzedzi td { display: block; width: 100%; }
  .tabela-narzedzi tr {
    padding: 1.1rem 0;
    border-bottom: 2px dotted var(--linia-sladowa);
  }
  .tabela-narzedzi tbody th { padding: 0 0 0.2rem; border-bottom: none; }
  .tabela-narzedzi td { padding: 0.4rem 0; border-bottom: none; }
  .tabela-narzedzi .kom-jezyk { display: none; }
  .kom-cena { white-space: normal; }
  .darmowy-opis, .cena-dol { max-width: none; }
  .hub-filtry { gap: 0.6rem 1rem; }
}