/*
 * Stickerly — blog: typografia wpisu i dodatki modułu.
 *
 * Arkusz ładuje się WYŁĄCZNIE na wpisie, liście wpisów i archiwum kategorii.
 * Zero bibliotek, zero JavaScriptu — spis treści buduje PHP, a wszystkie
 * elementy są czytelne także wtedy, gdy skrypty nie wystartują.
 */

.st-wpis {
	--granat: #344a90;
	--granat-hover: #2b3d78;
	--granat-gleboki: #1f2c58;
	--blekit: #6f83c7;
	--blekit-jasny: #e8ecf8;
	--grafit: #181b22;
	--szary: #606775;
	--obwodka: #dce1ea;
	--tlo-chlodne: #f6f8fc;
}

/* ⚠️ JEDNA SZEROKOŚĆ DLA CAŁEGO WPISU — 920 px.
   Wcześniej kolumna miała 74 znaki (740 px) i wpis wyglądał na wciśnięty
   w wąski pasek, a tabela wychodziła poza niego i rozjeżdżała rytm.
   Teraz zdjęcie wyróżniające, TL;DR, spis treści, tekst, tabele i boksy mają
   DOKŁADNIE tę samą szerokość — krawędzie się pokrywają na całej długości.
   Stopień pisma podniesiony razem z szerokością, żeby wiersz nie urósł
   do stu kilkudziesięciu znaków. */
.st-wpis {
	--szerokosc-wpisu: min(920px, 100%);
}

.st-wpis .st-wpis-tresc,
.st-wpis .st-tldr,
.st-wpis .st-spis,
.st-wpis .st-autor,
.st-wpis .st-wpis-cta,
.st-wpis .st-wpis-produkty,
.st-wpis .entry-header-text,
.st-wpis .entry-image {
	width: var(--szerokosc-wpisu);
	margin-inline: auto;
}

/* Zdjęcie wyróżniające — te same zaokrąglenia co grafiki w treści. */
.st-wpis .entry-image img {
	border-radius: 20px;
	border: 1px solid var(--obwodka);
}

.st-wpis .entry-image a { display: block; }

/* ---------- typografia treści ---------- */

.st-wpis-tresc > * { max-width: 100%; }

.st-wpis-tresc p {
	margin: 0 0 1.2rem;
	font-size: 1.08rem;
	line-height: 1.75;
	color: #2b303b;
}

.st-wpis-tresc h2,
.st-wpis-tresc h3,
.st-wpis-tresc h4 {
	color: var(--grafit);
	letter-spacing: -0.015em;
	/* Kotwica ze spisu treści musi wylądować pod przyklejonym menu. */
	scroll-margin-top: 110px;
}

.st-wpis-tresc h2 {
	margin: 2.4rem 0 0.9rem;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	line-height: 1.22;
}

.st-wpis-tresc h3 {
	margin: 1.9rem 0 0.7rem;
	font-size: clamp(1.12rem, 1.8vw, 1.35rem);
	line-height: 1.3;
}

.st-wpis-tresc h4 {
	margin: 1.5rem 0 0.6rem;
	font-size: 1.05rem;
}

.st-wpis-tresc h2 strong,
.st-wpis-tresc h3 strong,
.st-wpis-tresc h4 strong { font-weight: inherit; }

.st-wpis-tresc ul,
.st-wpis-tresc ol {
	margin: 0 0 1.3rem;
	padding-left: 1.35rem;
}

.st-wpis-tresc li {
	margin-bottom: 0.5rem;
	font-size: 1.06rem;
	line-height: 1.7;
	color: #2b303b;
}

.st-wpis-tresc li::marker { color: var(--blekit); font-weight: 700; }
.st-wpis-tresc strong { color: var(--grafit); }

.st-wpis-tresc a {
	color: var(--granat);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.st-wpis-tresc a:hover { color: var(--granat-hover); }

.st-wpis-tresc blockquote {
	margin: 1.6rem 0;
	padding: 1.1rem 1.3rem;
	border: 0;
	border-left: 4px solid var(--granat);
	border-radius: 0 14px 14px 0;
	background: var(--tlo-chlodne);
}

.st-wpis-tresc blockquote p { margin: 0 0 0.6rem; color: var(--grafit); }
.st-wpis-tresc blockquote p:last-child { margin-bottom: 0; }

.st-wpis-tresc figure { margin: 1.8rem 0; }

.st-wpis-tresc .wp-block-image img,
.st-wpis-tresc figure img,
.st-wpis-tresc p > img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	border: 1px solid var(--obwodka);
}

.st-wpis-tresc figcaption {
	margin-top: 0.5rem;
	font-size: 0.88rem;
	color: var(--szary);
	text-align: center;
}

.st-wpis-tresc .wp-block-separator {
	margin: 2.2rem auto;
	border: 0;
	border-top: 1px solid var(--obwodka);
}

/* ---------- tabele ---------- */

/* ⚠️ Szeroka tabela wychodzi poza kolumnę tekstu — dostaje własny, szerszy
   kontener. Poziome przewijanie zostaje wyłącznie jako ostatnia deska ratunku
   na wąskich ekranach; na telefonie wiersze zamieniają się w karty. */
/* ⚠️ TABELA TRZYMA SZEROKOŚĆ WPISU, nie wychodzi poza nią. Wcześniej była
   szersza od tekstu i jej krawędzie nie pokrywały się z niczym innym na
   stronie — wyglądało to jak element wklejony z innego szablonu. */
.st-wpis-tresc .wp-block-table {
	width: 100%;
	margin: 1.8rem 0 2.2rem;
	border-radius: 16px;
	overflow-x: auto;
}

.st-wpis-tresc table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--obwodka);
	border-radius: 14px;
	overflow: hidden;
	font-size: 0.95rem;
	background: #fff;
}

.st-wpis-tresc th {
	padding: 0.75rem 0.9rem;
	background: var(--granat);
	color: #fff;
	font-weight: 700;
	text-align: left;
}

.st-wpis-tresc td {
	padding: 0.7rem 0.9rem;
	border-top: 1px solid var(--obwodka);
	color: var(--szary);
	line-height: 1.6;
	vertical-align: top;
}

.st-wpis-tresc tbody tr:nth-child(even) { background: var(--tlo-chlodne); }
.st-wpis-tresc td:first-child { color: var(--grafit); }

/* ---------- TL;DR ---------- */

/*
 * ⚠️ PADDING BYŁ ZEROWANY PRZEZ CSS TEMPO, NIE PRZEZ NASZ ARKUSZ.
 * W „Flatsome → Advanced → Custom CSS" siedzi
 * `.single-post .entry-content > :first-child { padding: 0 }` — specyficzność
 * (0,3,0), a arkusz `custom-css` ładuje się PO plikach wtyczki, więc bił
 * `.st-tldr` (0,1,0). TL;DR jest pierwszym dzieckiem treści, więc tekst
 * dotykał krawędzi ramki. Reguła Tempo została zawężona o `:not([class*="st-"])`
 * — poprawka u źródła, dzięki której dotyczy to WSZYSTKICH naszych bloków.
 *
 * ⚠️ BEZ GRADIENTU (decyzja Dawida z 07.09: „ile można tych gradientów").
 * Płaskie tło marki plus jeden granatowy akcent przy krawędzi czyta się
 * jak decyzja, a nie jak domyślny efekt.
 */
.st-tldr {
	margin: 0 auto 1.5rem;
	padding: 1.15rem 1.4rem 1.25rem;
	border: 1px solid var(--obwodka);
	border-left: 3px solid var(--granat);
	border-radius: 4px 14px 14px 4px;
	background: var(--tlo-chlodne);
}

.st-tldr-etykieta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 0.4rem;
}

.st-tldr-etykieta span {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--granat);
}

.st-tldr-etykieta b {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--szary);
}

.st-tldr-tekst {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--grafit);
}

/* ---------- spis treści ---------- */

/* ⚠️ SPIS NUMERUJE TYLKO SEKCJE H2. Wspólny licznik dla H2 i H3 dawał
   numerację 1, 2, … 34, 35 z dziurami — bo podsekcje zabierały numer, choć
   same go nie pokazywały. Teraz licznik idzie wyłącznie po `.st-spis-p2`. */
.st-spis {
	margin: 0 auto 2rem;
	border: 1px solid var(--obwodka);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}

.st-spis summary {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.95rem 1.3rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.st-spis summary::-webkit-details-marker { display: none; }

.st-spis-tytul {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--granat);
}

.st-spis-ile {
	font-size: 0.78rem;
	color: var(--szary);
}

/* Strzałka po prawej — obraca się przy rozwinięciu. */
.st-spis summary::after {
	content: "";
	margin-left: auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--granat);
	border-bottom: 2px solid var(--granat);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.st-spis[open] summary::after { transform: rotate(-135deg); }
.st-spis summary:hover .st-spis-tytul { color: var(--granat-hover); }

.st-spis-lista {
	counter-reset: st-sekcja;
	margin: 0;
	padding: 0 1.3rem 1.1rem 1.3rem;
	list-style: none;
	columns: 2;
	column-gap: 2.4rem;
}

.st-spis-lista li {
	margin-bottom: 0.36rem;
	break-inside: avoid;
	font-size: 0.95rem;
	line-height: 1.45;
}

.st-spis-p2 { counter-increment: st-sekcja; padding-left: 1.7rem; text-indent: -1.7rem; }

.st-spis-p2::before {
	content: counter(st-sekcja) ".";
	display: inline-block;
	width: 1.7rem;
	text-indent: 0;
	color: var(--blekit);
	font-weight: 700;
}

.st-spis-p3 { padding-left: 2.9rem; text-indent: -1.2rem; }

.st-spis-p3::before {
	content: "–";
	display: inline-block;
	width: 1.2rem;
	text-indent: 0;
	color: var(--obwodka);
}

.st-spis a { color: var(--szary); text-decoration: none; }
.st-spis a:hover { color: var(--granat); text-decoration: underline; }

@media (max-width: 760px) {
	.st-spis-lista { columns: 1; }
}

/* ---------- polecane produkty ---------- */

.st-wpis-produkty { margin: clamp(2.2rem, 5vw, 3.4rem) auto 0; }

.st-wpis-produkty-tytul {
	margin: 0 0 1.1rem;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	color: var(--grafit);
	text-align: center;
}

.st-wpis-produkty-siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(0.8rem, 1.8vw, 1.3rem);
}

.st-wpis-produkt {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--obwodka);
	border-radius: 18px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}

.st-wpis-produkt:hover {
	transform: translateY(-4px);
	border-color: var(--blekit);
	box-shadow: 0 18px 38px -26px rgba(24, 27, 34, 0.5);
}

.st-wpis-produkt-obraz { display: block; background: var(--tlo-chlodne); }

.st-wpis-produkt-obraz img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.st-wpis-produkt-nazwa {
	display: block;
	padding: 0.8rem 0.9rem 0.2rem;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--grafit);
}

.st-wpis-produkt-cena {
	display: block;
	padding: 0 0.9rem 0.9rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--granat);
}

.st-wpis-produkt-cena del { color: var(--szary); font-weight: 400; }

/* ---------- CTA ---------- */

.st-wpis-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	margin: clamp(2.2rem, 5vw, 3.4rem) auto 0;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	border-radius: 22px;
	/* Plaski granat marki zamiast gradientu (decyzja Dawida 07.09). */
	background: var(--granat);
	color: #fff;
}

.st-wpis-cta-tresc { flex: 1 1 22rem; }

.st-wpis-cta-tytul {
	margin: 0 0 0.35rem;
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 700;
	line-height: 1.25;
}

.st-wpis-cta-tekst {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.st-wpis-cta-btn {
	flex: 0 0 auto;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	background: #fff;
	color: var(--granat);
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.st-wpis-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6);
	color: var(--granat-hover);
}

/* ---------- box autora ---------- */

.st-autor {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--obwodka);
	border-radius: 18px;
	background: var(--tlo-chlodne);
}

.st-autor-znak {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--granat);
	color: #fff;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;
}

.st-autor-nazwa {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--grafit);
}

.st-autor-opis {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--szary);
}

@media (prefers-reduced-motion: reduce) {
	.st-wpis-produkt,
	.st-wpis-cta-btn { transition: none; }
}

/* ================= STRONA Z WPISAMI ================= */

.st-blog {
	--granat: #344a90;
	--granat-hover: #2b3d78;
	--granat-gleboki: #1f2c58;
	--blekit: #6f83c7;
	--blekit-jasny: #e8ecf8;
	--grafit: #181b22;
	--szary: #606775;
	--obwodka: #dce1ea;
	--tlo-chlodne: #f6f8fc;
}

/*
 * ⚠️ NAGŁÓWEK WYCHODZI POZA KONTENER FLATSOME. Motyw pakuje treść w `.row-main`
 * (1240 px), a nagłówek bazy wiedzy ma zajmować całą szerokość okna — inaczej
 * ciemny pas urywa się w połowie ekranu. Ta sama technika co na stronie głównej.
 */
.st-blog-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(2.2rem, 5vw, 4rem) 1.25rem clamp(2.6rem, 6vw, 4.5rem);
	/* Jeden plaski kolor. Trzy nalozone gradienty czytaly sie jak tlo
	   wygenerowane, a nie jak pas marki (decyzja Dawida 07.09). */
	background: var(--granat-gleboki);
	color: #fff;
	overflow: hidden;
}

.st-blog-hero-srodek { width: min(1240px, 100%); margin-inline: auto; }
.st-blog-hero-gora { text-align: center; }

.st-blog-okruszki {
	display: flex;
	justify-content: center;
	gap: 0.45rem;
	margin-bottom: 0.9rem;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.62);
}

.st-blog-okruszki a { color: rgba(255, 255, 255, 0.62); text-decoration: none; }
.st-blog-okruszki a:hover { color: #fff; }
.st-blog-okruszki b { color: #fff; font-weight: 600; }

.st-blog-h1 {
	margin: 0 0 0.7rem;
	font-size: clamp(1.9rem, 4vw, 3.1rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}

.st-blog-lead {
	max-width: 62ch;
	margin: 0 auto;
	font-size: clamp(0.98rem, 1.4vw, 1.1rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

.st-blog-hero-dol {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: center;
	gap: clamp(1.6rem, 4vw, 3.5rem);
	margin-top: clamp(1.8rem, 4vw, 3rem);
}

.st-blog-nadtytul {
	margin: 0 0 0.5rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.st-blog-podtytul {
	margin: 0 0 1.2rem;
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	line-height: 1.3;
	color: #fff;
}

.st-blog-punkty { margin: 0; padding: 0; list-style: none; }

.st-blog-punkty li {
	position: relative;
	padding: 0.7rem 0 0.7rem 1.7rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.st-blog-punkty li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

/* Ptaszek rysowany dwiema krawędziami — bez pliku i bez czcionki ikon. */
.st-blog-punkty li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 1.15rem;
	width: 0.32rem;
	height: 0.6rem;
	border-right: 2px solid #8fe3b0;
	border-bottom: 2px solid #8fe3b0;
	transform: rotate(45deg);
}

/* ---------- wyróżniony wpis ---------- */

.st-blog-wyrozniony {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 22px;
	background: #0f172f;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.st-blog-wyrozniony:hover { transform: translateY(-4px); box-shadow: 0 36px 70px -30px rgba(0, 0, 0, 0.8); }

.st-blog-wyrozniony img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	/* Lekkie przygaszenie zdjęcia — biały tytuł ma leżeć na nim, a nie z nim
	   konkurować. Docelowe grafiki będą fotografiami, więc zostawiamy układ
	   z napisem na zdjęciu; przy dzisiejszych, z wypalonym tekstem, to
	   przygaszenie robi robotę. */
	filter: brightness(0.86) saturate(1.02);
}

/* Napis leży na zdjęciu, więc pod nim musi być przyciemnienie — inaczej
   biały tekst ginie na jasnej grafice. */
.st-blog-wyrozniony-opis {
	position: absolute;
	inset: auto 0 0 0;
	display: block;
	padding: clamp(1rem, 2.4vw, 1.8rem);
	background: linear-gradient(180deg, rgba(10, 15, 30, 0) 0%, rgba(10, 15, 30, 0.6) 38%, rgba(10, 15, 30, 0.94) 100%);
	padding-top: clamp(3rem, 8vw, 5rem);
}

.st-blog-badge {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #fff;
}

.st-blog-wyrozniony-tytul {
	display: block;
	font-size: clamp(1.05rem, 1.8vw, 1.45rem);
	font-weight: 700;
	line-height: 1.28;
	color: #fff;
}

.st-blog-wyrozniony-data {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 900px) {
	.st-blog-hero-dol { grid-template-columns: 1fr; }
	.st-blog-hero-tekst { order: 2; }
	.st-blog-wyrozniony { order: 1; }
}

/* ---------- lista wpisów ---------- */

/* Kafle Flatsome przerobione na nasze karty: zaokrąglone zdjęcie, obwódka,
   uniesienie przy najechaniu. Nie ruszamy szablonu motywu — tylko styl. */
.st-blog .post-item .col-inner {
	height: 100%;
	border: 1px solid var(--obwodka);
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.st-blog .post-item .col-inner:hover {
	transform: translateY(-4px);
	border-color: var(--blekit);
	box-shadow: 0 22px 44px -28px rgba(24, 27, 34, 0.55);
}

.st-blog .post-item .box-image,
.st-blog .post-item .box-image img { border-radius: 0; }

.st-blog .post-item .box-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.st-blog .post-item .box-text {
	padding: 1rem 1.15rem 1.3rem;
	text-align: left;
}

.st-blog .post-item .post-title {
	margin: 0.35rem 0 0.5rem;
	font-size: 1.05rem;
	line-height: 1.32;
	color: var(--grafit);
}

.st-blog .post-item .post-title:hover { color: var(--granat); }

.st-blog .post-item .from_the_blog_excerpt,
.st-blog .post-item .is-divider + p,
.st-blog .post-item .box-text p {
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--szary);
}

.st-blog .post-item .is-divider { display: none; }

.st-blog .post-item .post-meta,
.st-blog .post-item .entry-meta {
	font-size: 0.78rem;
	color: var(--szary);
	text-transform: none;
}

/* Data na kaflu Flatsome („badge") w barwach marki zamiast domyślnych. */
.st-blog .post-item .badge-inner {
	border-radius: 12px;
	background: var(--granat);
	color: #fff;
}

.st-blog .page-title,
.st-blog .archive-page-header { display: none; }