/* ==========================================================================
   EKRAN: POJEDYNCZY WPIS
   Odwzorowanie podglad-html/wpis.html. Wszystkie wartości pochodzą ze stylów
   inline podglądu; kolory podmienione na tokeny --mp-* ze style.css.

   MAPA KOLORÓW — podgląd nie ma tokenu dla pięciu odcieni, użyto najbliższych:
     #4A423A  lead                → var(--mp-strong)   #4A3E2E
     #D8CFC1  kreski w metryczce  → var(--mp-line-3)   #E0D8CC
     #EFE9E1  linie pod wpisami   → var(--mp-line)     #EBE4DB
     #F4F0EA / #F1EDE8 / #F6F3EF  → var(--mp-band)     #F5F1EC
     #F1ECE5  ramka miniatury     → var(--mp-line)     #EBE4DB
   Różnice są rzędu 4–11 punktów na kanał, na elementach nietekstowych
   i na tle o tej samej jasności — niewidoczne, a paleta zostaje spójna.
   ========================================================================== */

.mp-wpis{
	/* Odsunięcie kolumny bocznej od przyklejonego nagłówka (korekta 23):
	   70 px bez skryptu, 123 px ze skrótem. */
	--mp-wpis-bok-top:calc(var(--mp-naglowek-dol) + 19px);
	/* Punkt łamania układu — podgląd przełącza się na jedną kolumnę poniżej 860 px. */
}

/* --------------------------------------------------------------------------
   NAGŁÓWEK WPISU
   -------------------------------------------------------------------------- */

.mp-wpis__szczyt{
	background:var(--mp-warm);
	padding:clamp(30px, 4vw, 56px) 0 clamp(34px, 4.4vw, 62px);
	border-bottom:1px solid var(--mp-line);
}

.mp-wpis__szczyt-in{
	max-width:820px;
	margin:0 auto;
	padding-inline:var(--mp-gut);
	text-align:center;
}

/* Okruszki. W podglądzie zwykłe odnośniki w <div>; tutaj lista w <nav>,
   żeby czytnik ekranu zapowiedział ścieżkę. Tekst bez zmian. */
.mp-wpis__okruszki{ margin-bottom:26px; }

.mp-wpis__okruszki ol{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}

.mp-wpis__okruszki li{ display:flex; align-items:center; }

.mp-wpis__okruszki a{
	display:inline-block;
	padding:14px 0;             /* razem z wierszem daje 47 px celu dotykowego */
	font:400 11px/1.7 var(--mp-sans);
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--mp-body);
}

.mp-wpis__okruszki a:hover{ color:var(--mp-bronze); }

.mp-wpis__okruszek-sep{
	padding:0 .5em;
	font:400 11px/1.7 var(--mp-sans);
	color:var(--mp-body);
}

/* Metryczka: kategoria — kreska — data — kreska — czas czytania. */
.mp-wpis__metryczka{
	margin:0 0 22px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	flex-wrap:wrap;
}

.mp-wpis__kat{
	font:400 11px/1 var(--mp-sans);
	letter-spacing:.17em;
	text-transform:uppercase;
	color:var(--mp-taupe);
}

.mp-wpis__kreska{
	width:18px;
	height:1px;
	background:var(--mp-line-3);
	flex:0 0 auto;
}

.mp-wpis__data,
.mp-wpis__czas{
	font:300 12px/1 var(--mp-sans);
	color:var(--mp-body);
}

.mp-wpis__tytul{
	margin:0;
	font:300 clamp(30px, 4.4vw, 60px)/1.08 var(--mp-serif);
	color:var(--mp-ink);
	text-wrap:balance;
}

.mp-wpis__lead{
	margin:26px 0 0;
	font:300 clamp(17px, 1.6vw, 21px)/1.75 var(--mp-serif);
	color:var(--mp-strong);
	text-wrap:pretty;
}

/* --------------------------------------------------------------------------
   OBRAZ WYRÓŻNIAJĄCY
   Kadr 16:9 wchodzi 24 px na linię pod nagłówkiem — stąd ujemny margines.
   -------------------------------------------------------------------------- */

.mp-wpis__okladka{ background:var(--mp-warm); }

.mp-wpis__okladka-in{
	max-width:1100px;
	margin:0 auto;
	padding-inline:var(--mp-gut);
}

.mp-wpis__okladka-kadr{
	aspect-ratio:16 / 9;
	background:var(--mp-band);
	overflow:hidden;
	position:relative;
	margin-top:clamp(-24px, -2.4vw, 0px);
}

.mp-wpis__okladka-kadr img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	max-width:none;
}

/* --------------------------------------------------------------------------
   KORPUS: treść + kolumna boczna
   -------------------------------------------------------------------------- */

.mp-wpis__korpus{
	background:var(--mp-cream);
	padding:clamp(44px, 6vw, 88px) 0 clamp(48px, 6.5vw, 96px);
}

.mp-wpis__korpus-in{
	max-width:var(--mp-max);
	margin:0 auto;
	padding-inline:var(--mp-gut);
	display:grid;
	grid-template-columns:1fr minmax(250px, 300px);
	gap:clamp(30px, 4.4vw, 80px);
	align-items:start;
}

/* Podgląd ogranicza kolumnę tekstu do 66ch = 633,6 px. Jednostka ch zależy od
   grubości pisma: tam kontener dziedziczył Jost 400, u nas body ma 300, więc
   „66ch” dałoby 612 px i węższą kolumnę. 39.6em to te same 633,6 px przy 16 px
   i tak samo skaluje się z rozmiarem tekstu. */
.mp-wpis__kolumna{
	max-width:39.6em;
	min-width:0;
}

/* --------------------------------------------------------------------------
   TREŚĆ WPISU
   Akapit, nagłówek, cytat i figura mają wartości 1:1 z podglądu.
   Listy, odnośniki w tekście, podpisy i tabele podgląd pomijał — dopisane
   w tej samej skali typograficznej.
   -------------------------------------------------------------------------- */

.mp-wpis__tresc p{
	margin:0 0 22px;
	font:300 16px/1.92 var(--mp-sans);
	color:var(--mp-deep);
	letter-spacing:.004em;
	text-wrap:pretty;
}

.mp-wpis__tresc h2{
	margin:clamp(34px, 4vw, 52px) 0 18px;
	font:300 clamp(23px, 2.2vw, 32px)/1.24 var(--mp-serif);
	color:var(--mp-ink);
	text-wrap:balance;
}

/* Podgląd zna tylko h2. h3 i h4 zeskalowane w tej samej proporcji. */
.mp-wpis__tresc h3{
	margin:clamp(28px, 3.2vw, 40px) 0 14px;
	font:300 clamp(20px, 1.8vw, 25px)/1.3 var(--mp-serif);
	color:var(--mp-ink);
	text-wrap:balance;
}

.mp-wpis__tresc h4{
	margin:clamp(24px, 2.8vw, 32px) 0 12px;
	font:400 13px/1.5 var(--mp-sans);
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--mp-ink-2);
}

.mp-wpis__tresc blockquote{
	margin:clamp(28px, 3.4vw, 44px) 0;
	padding-left:clamp(20px, 2.4vw, 34px);
	border-left:1px solid var(--mp-muted);
}

.mp-wpis__tresc blockquote p{
	margin:0;
	font:300 clamp(19px, 1.8vw, 25px)/1.62 var(--mp-serif);
	font-style:italic;
	color:var(--mp-accent);
	letter-spacing:normal;
	text-wrap:pretty;
}

.mp-wpis__tresc blockquote cite{
	display:block;
	margin-top:14px;
	font:300 13px/1.6 var(--mp-sans);
	font-style:normal;
	color:var(--mp-body);
}

.mp-wpis__tresc figure{
	margin:clamp(28px, 3.4vw, 46px) 0;
}

.mp-wpis__tresc figure img,
.mp-wpis__tresc > img{
	display:block;
	width:100%;
	height:auto;
	background:var(--mp-band);
}

.mp-wpis__tresc figcaption{
	margin-top:12px;
	font:300 13px/1.7 var(--mp-sans);
	color:var(--mp-body);
	text-align:left;
}

/* Listy — brak w podglądzie, skala jak w akapicie. */
.mp-wpis__tresc ul,
.mp-wpis__tresc ol{
	margin:0 0 22px;
	padding-left:1.5em;
	font:300 16px/1.92 var(--mp-sans);
	color:var(--mp-deep);
	letter-spacing:.004em;
}

.mp-wpis__tresc li{ margin-bottom:8px; }
.mp-wpis__tresc li:last-child{ margin-bottom:0; }
.mp-wpis__tresc li::marker{ color:var(--mp-muted); }
.mp-wpis__tresc li > ul,
.mp-wpis__tresc li > ol{ margin:8px 0 0; }

/* Odnośnik w treści — podgląd nie pokazuje żadnego, a bez podkreślenia
   nie dałoby się go odróżnić od tekstu (wymóg 1.4.1 WCAG). */
.mp-wpis__tresc a{
	color:var(--mp-bronze);
	border-bottom:1px solid var(--mp-line-3);
}

.mp-wpis__tresc a:hover,
.mp-wpis__tresc a:focus-visible{
	color:var(--mp-ink);
	border-bottom-color:var(--mp-rule);
}

.mp-wpis__tresc strong,
.mp-wpis__tresc b{ font-weight:400; color:var(--mp-ink-2); }

.mp-wpis__tresc em,
.mp-wpis__tresc i{ font-style:italic; }

.mp-wpis__tresc hr{
	margin:clamp(34px, 4vw, 52px) 0;
	border:0;
	border-top:1px solid var(--mp-line);
}

.mp-wpis__tresc code,
.mp-wpis__tresc kbd{
	font-size:.92em;
	background:var(--mp-band);
	padding:.12em .4em;
}

/* Tabele w treści — na wąskim ekranie przewijają się we własnym pudełku,
   strona nigdy nie przewija się w poziomie. */
.mp-wpis__tresc .wp-block-table,
.mp-wpis__tresc figure.wp-block-table{ overflow-x:auto; }

.mp-wpis__tresc table{
	width:100%;
	border-collapse:collapse;
	font:300 15px/1.7 var(--mp-sans);
	color:var(--mp-deep);
}

.mp-wpis__tresc th,
.mp-wpis__tresc td{
	padding:12px 14px;
	border-bottom:1px solid var(--mp-line);
	text-align:left;
}

.mp-wpis__tresc th{ font-weight:400; color:var(--mp-ink-2); }

.mp-wpis__tresc > *:first-child{ margin-top:0; }
.mp-wpis__tresc > *:last-child{ margin-bottom:0; }

/* Wyrównania z edytora. */
.mp-wpis__tresc .aligncenter{ margin-inline:auto; text-align:center; }

@media (min-width:600px){
	.mp-wpis__tresc .alignleft{ float:left; margin:6px clamp(20px, 2.4vw, 34px) 20px 0; max-width:50%; }
	.mp-wpis__tresc .alignright{ float:right; margin:6px 0 20px clamp(20px, 2.4vw, 34px); max-width:50%; }
	.mp-wpis__tresc::after{ content:""; display:table; clear:both; }
}

/* Wpis podzielony znacznikiem <!--nextpage-->. */
.mp-wpis__strony{
	margin-top:clamp(28px, 3.2vw, 40px);
	display:flex;
	align-items:center;
	gap:6px;
	flex-wrap:wrap;
	font:400 11px/1 var(--mp-sans);
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--mp-body);
}

.mp-wpis__strony span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:var(--mp-tap);
	min-height:var(--mp-tap);
	border:1px solid var(--mp-line);
}

.mp-wpis__strony > span:first-child{ border:0; min-width:0; letter-spacing:.16em; }
.mp-wpis__strony a{ color:var(--mp-ink); }
.mp-wpis__strony a:hover span{ border-color:var(--mp-rule); }

/* --------------------------------------------------------------------------
   NOTA AUTORKI
   -------------------------------------------------------------------------- */

.mp-wpis__autor{
	margin-top:clamp(40px, 5vw, 66px);
	padding-top:clamp(26px, 3.2vw, 42px);
	border-top:1px solid var(--mp-line);
	display:flex;
	align-items:center;
	gap:20px;
	flex-wrap:wrap;
}

.mp-wpis__autor-portret{
	width:64px;
	height:64px;
	border-radius:50%;
	overflow:hidden;
	background:var(--mp-band);
	flex:0 0 auto;
}

.mp-wpis__autor-portret img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.mp-wpis__autor-tekst{ flex:1; min-width:200px; }

.mp-wpis__autor-nazwa{
	margin:0;
	font:400 clamp(17px, 1.5vw, 20px)/1.3 var(--mp-serif);
	color:var(--mp-ink);
}

.mp-wpis__autor-nota{
	margin:7px 0 0;
	font:300 13px/1.7 var(--mp-sans);
	color:var(--mp-body);
}

/* --------------------------------------------------------------------------
   KOLUMNA BOCZNA
   -------------------------------------------------------------------------- */

.mp-wpis__bok{
	position:sticky;
	top:var(--mp-wpis-bok-top);
	display:flex;
	flex-direction:column;
	gap:clamp(24px, 3vw, 38px);
	min-width:0;
}

.mp-wpis__bok-etykieta{
	margin:0 0 16px;
	font:400 11px/1 var(--mp-sans);
	letter-spacing:.15em;
	text-transform:uppercase;
	color:var(--mp-body);
}

.mp-wpis__bok-etykieta--kreska{
	margin:0 0 6px;
	padding-bottom:14px;
	border-bottom:1px solid var(--mp-line-2);
}

/* Boks „Plakat do tego tematu”. */
.mp-wpis__plakat{
	border:1px solid var(--mp-line);
	background:var(--mp-warm);
	padding:clamp(20px, 2.4vw, 30px);
}

.mp-wpis__plakat-link{ display:block; }

.mp-wpis__plakat-kadr{
	display:block;
	background:var(--mp-white);
	aspect-ratio:5 / 7;
	position:relative;
	overflow:hidden;
	border:1px solid var(--mp-line);
}

.mp-wpis__plakat-kadr img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:contain;
	padding:6%;
	display:block;
	max-width:none;
}

.mp-wpis__plakat-nazwa{
	display:block;
	margin-top:14px;
	font:400 clamp(16px, 1.4vw, 19px)/1.3 var(--mp-serif);
	color:var(--mp-ink);
	text-wrap:pretty;
}

.mp-wpis__plakat-cena{
	display:block;
	margin-top:7px;
	font:300 13px/1 var(--mp-sans);
	color:var(--mp-body-2);
}

/* Cena wariantowa i przeceniona przychodzi z WooCommerce jako del/ins. */
.mp-wpis__plakat-cena del{ margin-right:8px; opacity:.7; }
.mp-wpis__plakat-cena ins{ text-decoration:none; }

.mp-wpis__plakat-link:hover .mp-wpis__plakat-nazwa{ color:var(--mp-bronze); }

.mp-wpis__katalog{
	display:inline-flex;
	align-items:flex-end;
	min-height:var(--mp-tap);
	margin-top:14px;
	padding-bottom:7px;
	font:400 11px/1 var(--mp-sans);
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--mp-ink);
	border-bottom:1px solid var(--mp-rule);
}

.mp-wpis__katalog:hover{ color:var(--mp-bronze); border-bottom-color:var(--mp-bronze); }

/* Lista „Czytaj dalej”. */
.mp-wpis__dalej ul{
	list-style:none;
	margin:0;
	padding:0;
}

.mp-wpis__dalej a{
	display:block;
	padding:15px 0;
	border-bottom:1px solid var(--mp-line);
}

.mp-wpis__dalej-data{
	display:block;
	font:300 11px/1 var(--mp-sans);
	letter-spacing:.06em;
	color:var(--mp-muted);
}

.mp-wpis__dalej-tytul{
	display:block;
	margin-top:8px;
	font:400 15px/1.4 var(--mp-serif);
	color:var(--mp-ink);
	text-wrap:pretty;
}

.mp-wpis__dalej a:hover .mp-wpis__dalej-tytul{ color:var(--mp-bronze); }

/* --------------------------------------------------------------------------
   TELEFON — podgląd przełącza układ poniżej 860 px
   -------------------------------------------------------------------------- */

@media (max-width:860px){

	.mp-wpis{ --mp-wpis-bok-top:calc(var(--mp-naglowek-dol) + 17px); }

	.mp-wpis__korpus-in{ grid-template-columns:1fr; }

	.mp-wpis__kolumna{ max-width:none; }

	/* W jednej kolumnie kolumna boczna nie ma się do czego przykleić —
	   sticky tylko utrudniałby przewijanie na dole strony. */
	.mp-wpis__bok{ position:static; }

	.mp-wpis__tresc .alignleft,
	.mp-wpis__tresc .alignright{ float:none; margin-inline:0; max-width:100%; }
}

/* Miejsce pod dolny pasek nawigacji rezerwuje style.css motywu
   (body{padding-bottom:64px} poniżej 860 px) — tutaj nic nie dokładamy. */