/*
 * Kuvings — komponenty treści artykułów (plansza „C · v2 REVO830”).
 * Wymaga _tokens.css. Mobile-first: bazowo 360 px, od 768 px układ desktopowy.
 *
 * KONWENCJA NAZW (CLAUDE.md): każdy komponent ma własny prefiks kvp-<nazwa>,
 * klasy NIGDY nie są dzielone między komponentami. Wspólne są wyłącznie tokeny
 * z _tokens.css (--kv-*). Dlatego np. przycisk ma osobną klasę w każdym bloku.
 *
 * Sekcje:
 *  kvp-box          boxy-wzorce do artykułów (patterns/*.php, zwykłe bloki WordPressa)
 *  kvp-dwa-boxy     układ dwóch kolumn boxów (wzorzec „Pomiar + uwaga + wskazówka”)
 *  kvp-pomiar       blok kuvings/pomiar
 *  kvp-kod          blok kuvings/kod-rabatowy
 *  kvp-porownanie   blok kuvings/porownanie (karty dwóch modeli)
 *  kvp-tabela-roznic blok kuvings/tabela-roznic
 *
 * Tekst dla czytników ekranu: klasa .screen-reader-text z WordPressa / motywu.
 */

/* ================================================================ kvp-box (wzorce) */

.kvp-box {
	container-type: inline-size;
	box-sizing: border-box;
	display: grid;
	gap: 12px;
	align-content: start;
	margin-block: var(--kv-space-4);
	padding: 20px;
	border-radius: var(--kv-radius-card);
	background: var(--kv-surface);
	color: var(--kv-ink);
	font-family: var(--kv-font);
}
@media (min-width: 768px) {
	.kvp-box { gap: 14px; padding: 28px; }
}

/* Motyw klasyczny (Kadence) owija dzieci grupy w .wp-block-group__inner-container; w edytorze go nie ma.
   display: contents włącza dzieci do siatki rodzica. */
:is(.kvp-box, .kvp-box__tresc, .kvp-box__kolumny, .kvp-box__plusy, .kvp-box__minusy) > .wp-block-group__inner-container { display: contents; }

/* reset marginesów motywu (Kadence: .single-content p/ul, specyficzność 0-1-1); odstępy daje gap */
:is(.kvp-box, .kvp-box__tresc, .kvp-box__kolumny, .kvp-box__plusy, .kvp-box__minusy,
	:is(.kvp-box, .kvp-box__tresc, .kvp-box__kolumny, .kvp-box__plusy, .kvp-box__minusy) > .wp-block-group__inner-container) > :is(p, ul, ol, figure, div, blockquote) { margin: 0; }

.kvp-box p,
.kvp-box li { font-size: var(--kv-size-body); line-height: var(--kv-lh-body); color: var(--kv-ink); }
@media (min-width: 768px) {
	.kvp-box p,
	.kvp-box li { font-size: 16px; line-height: 1.6; }
}
.kvp-box ul { margin: 0; padding: 0; list-style: none; }
.kvp-box li { margin: 0; }

/* etykieta-pigułka */
.kvp-box p.kvp-box__tytul,
.kvp-box p.kvp-box__podtytul {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-self: start;
	align-self: start;
	height: 28px;
	padding: 0 14px;
	border-radius: var(--kv-radius-round);
	background: var(--kv-surface-2);
	color: var(--kv-ink);
	font-size: var(--kv-size-label);
	font-weight: var(--kv-weight-bold);
	line-height: 1;
	white-space: nowrap;
}
@media (min-width: 768px) {
	.kvp-box p.kvp-box__tytul,
	.kvp-box p.kvp-box__podtytul { height: 30px; padding: 0 16px; }
}

.kvp-box--uwaga .kvp-box__tytul::before,
.kvp-box--wskazowka .kvp-box__tytul::before { font-family: var(--kv-font-mono); font-weight: var(--kv-weight-medium); }
.kvp-box--uwaga .kvp-box__tytul::before { content: "!"; }
.kvp-box--wskazowka .kvp-box__tytul::before { content: "i"; }

.kvp-box p.kvp-box__podpis { font-size: var(--kv-size-caption); line-height: var(--kv-lh-caption); color: var(--kv-muted); }

/* W skrócie: szary, pigułka w tuszu */
.kvp-box--skrot p.kvp-box__tytul { background: var(--kv-ink); color: var(--kv-bg); }
.kvp-box--skrot ul { display: grid; gap: 8px; }
.kvp-box--skrot li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.kvp-box--skrot li::before { content: ""; width: 6px; height: 6px; margin: 0.7em auto 0; border-radius: var(--kv-radius-round); background: var(--kv-ink); }
@media (min-width: 768px) {
	.kvp-box--skrot ul { gap: 10px; }
	.kvp-box--skrot li { grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
}

/* listy „etykieta / treść” */
.kvp-box .kvp-box__fakty { display: grid; gap: 16px; padding-top: 16px; border-top: 1px solid var(--kv-line); }
.kvp-box .kvp-box__fakty li { font-size: 15px; line-height: 1.5; }
.kvp-box__fakty strong { display: block; font-size: var(--kv-size-caption); font-weight: var(--kv-weight-bold); line-height: 1.45; color: var(--kv-muted); }

/* Z mojego doświadczenia: biały, pigułka czerwona */
.kvp-box--doswiadczenie { background: var(--kv-bg); border: 1px solid var(--kv-line); }
.kvp-box--doswiadczenie p.kvp-box__tytul { background: var(--kv-action); color: var(--kv-on-action); }
.kvp-box p.kvp-box__opinia { font-size: var(--kv-size-quote); line-height: 1.45; font-weight: var(--kv-weight-medium); }
@container (min-width: 560px) {
	.kvp-box--doswiadczenie .kvp-box__fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* wariant ze zdjęciem: tekst + zdjęcie 280 px po prawej (od 768 px), na telefonie zdjęcie pod tekstem */
.kvp-box.kvp-box--ze-zdjeciem { padding: 12px; gap: 12px; }
.kvp-box--ze-zdjeciem .kvp-box__tresc { display: grid; gap: 12px; align-content: start; padding: 8px 8px 0; }
.kvp-box--ze-zdjeciem .kvp-box__zdjecie { order: 2; display: flex; flex-direction: column; margin: 0; }
.kvp-box--ze-zdjeciem .kvp-box__zdjecie img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.kvp-box--ze-zdjeciem .kvp-box__zdjecie figcaption { margin: 0; padding: 8px 4px 4px; font-size: var(--kv-size-caption); line-height: var(--kv-lh-caption); color: var(--kv-muted); text-align: left; }
/* media query, nie @container: box jest swoim własnym kontenerem, a zapytanie nie styluje samego kontenera */
@media (min-width: 768px) {
	.kvp-box.kvp-box--ze-zdjeciem { grid-template-columns: minmax(0, 1fr) 280px; gap: 0; align-items: stretch; }
	.kvp-box--ze-zdjeciem .kvp-box__tresc { gap: 16px; padding: 20px 28px 20px 16px; }
	.kvp-box--ze-zdjeciem .kvp-box__zdjecie img { flex-grow: 1; aspect-ratio: auto; min-height: 300px; height: 100%; }
}

/* Uwaga / wada: biały, ramka i pigułka w tuszu */
.kvp-box--uwaga { background: var(--kv-bg); border: 1px solid var(--kv-ink); }
.kvp-box--uwaga p.kvp-box__tytul { background: var(--kv-ink); color: var(--kv-bg); }

/* Wskazówka: szary, biała pigułka */
.kvp-box--wskazowka p.kvp-box__tytul { background: var(--kv-bg); }

/* Plusy i minusy: biały, dwie kolumny, szare pigułki */
.kvp-box--plusy-minusy { background: var(--kv-bg); border: 1px solid var(--kv-line); gap: 20px; }
.kvp-box__kolumny { display: grid; gap: 20px; }
.kvp-box__plusy,
.kvp-box__minusy { display: grid; gap: 12px; align-content: start; }
.kvp-box__plusy ul,
.kvp-box__minusy ul { display: grid; gap: 8px; }
.kvp-box__plusy li,
.kvp-box__minusy li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.kvp-box__plusy li::before,
.kvp-box__minusy li::before { font-family: var(--kv-font-mono); font-weight: var(--kv-weight-medium); text-align: center; }
.kvp-box__plusy li::before { content: "+"; }
.kvp-box__minusy li::before { content: "−"; }
@container (min-width: 560px) {
	.kvp-box__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	.kvp-box__minusy { padding-left: 32px; border-left: 1px solid var(--kv-line); }
}

/* Werdykt: mocna ramka, czerwona pigułka */
.kvp-box--werdykt { background: var(--kv-bg); border: 2px solid var(--kv-ink); gap: 16px; }
.kvp-box--werdykt p.kvp-box__tytul { background: var(--kv-action); color: var(--kv-on-action); }
.kvp-box--werdykt .kvp-box__fakty li { font-size: 16px; }
@container (min-width: 560px) {
	.kvp-box--werdykt .kvp-box__fakty li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; }
	.kvp-box--werdykt .kvp-box__fakty strong { display: inline; }
}
@media (min-width: 768px) {
	.kvp-box.kvp-box--werdykt { padding: 32px; gap: 18px; }
}
/* blok kodu rabatowego wstawiony do werdyktu staje się panelem (styl kontekstowy, bez wspólnych klas) */
.kvp-box--werdykt .kvp-kod { margin: 0; padding: 18px 20px; border-radius: var(--kv-radius-inner); }

/* ================================================================ kvp-dwa-boxy */

.kvp-dwa-boxy { display: grid; gap: 16px; align-items: start; margin-block: var(--kv-space-4); }
.kvp-dwa-boxy > .wp-block-group__inner-container,
.kvp-dwa-boxy__kolumna > .wp-block-group__inner-container { display: contents; }
.kvp-dwa-boxy__kolumna { display: grid; gap: 16px; }
.kvp-dwa-boxy :is(.kvp-box, .kvp-pomiar) { margin: 0; }
.kvp-dwa-boxy > :is(div, p, aside) { margin: 0; }
@media (min-width: 768px) {
	.kvp-dwa-boxy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================ kvp-pomiar (blok) */

.kvp-pomiar {
	box-sizing: border-box;
	display: grid;
	gap: 4px;
	align-content: start;
	margin-block: var(--kv-space-4);
	padding: 20px;
	border-radius: var(--kv-radius-card);
	background: var(--kv-surface);
	color: var(--kv-ink);
	font-family: var(--kv-font);
}
@media (min-width: 768px) {
	.kvp-pomiar { padding: 28px; }
}
.kvp-pomiar > * { margin: 0; }
.kvp-pomiar p.kvp-pomiar__tytul {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	height: 28px;
	margin-bottom: 10px;
	padding: 0 14px;
	border-radius: var(--kv-radius-round);
	background: var(--kv-bg);
	font-size: var(--kv-size-label);
	font-weight: var(--kv-weight-bold);
	line-height: 1;
	white-space: nowrap;
}
.kvp-pomiar p.kvp-pomiar__wartosc { font-size: var(--kv-size-num-lg); font-weight: var(--kv-weight-regular); line-height: 1.02; font-variant-numeric: tabular-nums; }
.kvp-pomiar__jednostka { margin-left: 8px; font-size: 20px; color: var(--kv-muted); }
.kvp-pomiar p.kvp-pomiar__co { font-size: 16px; font-weight: var(--kv-weight-medium); }
.kvp-pomiar__meta {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 4px 12px;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--kv-line);
	font-size: var(--kv-size-caption);
	line-height: var(--kv-lh-caption);
	color: var(--kv-muted);
}
.kvp-pomiar__meta dt { font-weight: var(--kv-weight-bold); }
.kvp-pomiar__meta dd { margin: 0; }

/* ================================================================ kvp-kod (blok) */

.kvp-kod {
	container-type: inline-size;
	box-sizing: border-box;
	display: grid;
	gap: 12px;
	margin-block: var(--kv-space-4);
	padding: 20px;
	border-radius: var(--kv-radius-card);
	background: var(--kv-surface);
	color: var(--kv-ink);
	font-family: var(--kv-font);
}
.kvp-kod p { margin: 0; }
.kvp-kod__uklad { display: grid; gap: 16px; align-items: center; }
.kvp-kod__lewa { display: grid; gap: 8px; }
.kvp-kod__prawa { display: grid; gap: 6px; justify-items: start; }
.kvp-kod p.kvp-kod__etykieta { font-size: var(--kv-size-caption); line-height: 1.45; font-weight: var(--kv-weight-bold); }
.kvp-kod__rzad { display: flex; gap: 8px; }
.kvp-kod__wartosc {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 16px;
	border: 1.5px dashed var(--kv-ink);
	border-radius: var(--kv-radius-button);
	background: var(--kv-bg);
	font-family: var(--kv-font-mono);
	font-size: 16px;
	font-weight: var(--kv-weight-medium);
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
	user-select: all;
}
.kvp-kod__kopiuj {
	min-height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--kv-radius-button);
	background: var(--kv-bg);
	color: var(--kv-ink);
	font: var(--kv-weight-bold) 16px/1.2 var(--kv-font);
	cursor: pointer;
}
.kvp-kod__kopiuj:hover { background: var(--kv-surface-2); }
.kvp-kod__przycisk,
.kvp-kod__przycisk:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: var(--kv-radius-button);
	background: var(--kv-action);
	color: var(--kv-on-action);
	font: var(--kv-weight-bold) 16px/1.2 var(--kv-font);
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease;
}
.kvp-kod__przycisk:hover,
.kvp-kod__przycisk:focus { background: var(--kv-action-hover); color: var(--kv-on-action); }
.kvp-kod :focus-visible { outline: var(--kv-focus); outline-offset: 2px; }
.kvp-kod p.kvp-kod__nota,
.kvp-kod p.kvp-kod__drobne { font-size: var(--kv-size-caption); line-height: 1.45; color: var(--kv-muted); }
@container (min-width: 520px) {
	.kvp-kod__uklad { grid-template-columns: minmax(0, 1fr) auto; }
	.kvp-kod__prawa { justify-items: end; }
}

/* ================================================================ kvp-porownanie (blok) */

.kvp-porownanie { display: grid; gap: 24px; margin-block: var(--kv-space-5); font-family: var(--kv-font); color: var(--kv-ink); }
.kvp-porownanie p { margin: 0; }
.kvp-porownanie__glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 24px; }
.kvp-porownanie__glowa > div { display: grid; gap: 6px; }
.kvp-porownanie h2.kvp-porownanie__tytul { margin: 0; font-size: var(--kv-size-h2); line-height: var(--kv-lh-h2); font-weight: var(--kv-weight-heading); }
.kvp-porownanie__nota { font-size: var(--kv-size-caption); line-height: 1.45; color: var(--kv-muted); }
.kvp-porownanie__link { font-size: var(--kv-size-caption); color: var(--kv-ink); text-decoration: underline; text-underline-offset: 3px; }
.kvp-porownanie__link:hover { color: var(--kv-ink); text-decoration-thickness: 2px; }

/* telefon: karty jedna pod drugą, pełna szerokość */
.kvp-porownanie__karty { display: grid; gap: 40px; }
.kvp-porownanie__karta { display: grid; gap: 12px; align-content: start; min-width: 0; }
.kvp-porownanie__foto { position: relative; margin: 0; padding: 20px; border-radius: var(--kv-radius-media); background: var(--kv-surface); }
.kvp-porownanie__foto img { display: block; width: 100%; height: 220px; object-fit: contain; mix-blend-mode: multiply; }
.kvp-porownanie__wybor {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 14px;
	border-radius: var(--kv-radius-round);
	background: var(--kv-action);
	color: var(--kv-on-action);
	font-size: var(--kv-size-label);
	font-weight: var(--kv-weight-bold);
	line-height: 1;
}
.kvp-porownanie__karta-glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.kvp-porownanie h3.kvp-porownanie__nazwa { margin: 0; font-size: 20px; line-height: 1.3; font-weight: var(--kv-weight-heading); }

/* sześć pól: zawsze ta sama siatka 2 × 3, ta sama kolejność w każdej karcie */
.kvp-porownanie__pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 0; }
.kvp-porownanie__pole { display: grid; gap: 2px; align-content: start; padding: 12px 0; border-top: 1px solid var(--kv-line); }
.kvp-porownanie__pole:nth-last-child(-n + 2) { border-bottom: 1px solid var(--kv-line); }
.kvp-porownanie__pole dd { order: -1; margin: 0; font-size: var(--kv-size-stat); line-height: 1.15; font-weight: var(--kv-weight-regular); font-variant-numeric: tabular-nums; }
.kvp-porownanie__pole dd small { margin-left: 4px; font-size: 14px; color: var(--kv-muted); }
.kvp-porownanie__pole dd.kvp-porownanie__brak { font-size: var(--kv-size-small); line-height: 1.55; color: var(--kv-muted); }
.kvp-porownanie__pole dt { font-size: var(--kv-size-caption); line-height: 1.35; color: var(--kv-muted); }
.kvp-porownanie__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kvp-porownanie__przycisk,
.kvp-porownanie__przycisk:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: var(--kv-radius-button);
	background: var(--kv-surface-2);
	color: var(--kv-ink);
	font: var(--kv-weight-bold) 16px/1.2 var(--kv-font);
	text-decoration: none;
	transition: background-color .15s ease;
}
.kvp-porownanie__przycisk:hover,
.kvp-porownanie__przycisk:focus { background: var(--kv-line); color: var(--kv-ink); }
.kvp-porownanie__przycisk--glowny,
.kvp-porownanie__przycisk--glowny:visited { background: var(--kv-ink); color: var(--kv-bg); }
.kvp-porownanie__przycisk--glowny:hover,
.kvp-porownanie__przycisk--glowny:focus { background: var(--kv-ink-hover); color: var(--kv-bg); }
.kvp-porownanie :focus-visible { outline: var(--kv-focus); outline-offset: 2px; }

/* desktop: dwie kolumny, wiersze kart wyrównane (subgrid) — pola stoją na tej samej wysokości */
@media (min-width: 768px) {
	.kvp-porownanie__karty { grid-template-columns: repeat(var(--kvp-porownanie-kolumny, 2), minmax(0, 1fr)); gap: 16px 24px; }
	.kvp-porownanie__karta { gap: 16px; }
	.kvp-porownanie__foto { padding: 24px; }
	.kvp-porownanie__foto img { height: 300px; }
	.kvp-porownanie__wybor { top: 20px; left: 20px; height: 30px; padding: 0 16px; }
	.kvp-porownanie h3.kvp-porownanie__nazwa { font-size: var(--kv-size-h3); }
	.kvp-porownanie__pole { padding: 14px 0; }
	.kvp-porownanie__pole dd small { font-size: 16px; }
	@supports (grid-template-rows: subgrid) {
		.kvp-porownanie__karta { grid-row: span 4; grid-template-rows: subgrid; row-gap: 16px; }
	}
}

/* ================================================================ kvp-tabela-roznic (blok) */

.kvp-tabela-roznic { display: grid; gap: 12px; margin-block: var(--kv-space-5); font-family: var(--kv-font); }
.kvp-tabela-roznic__wrap { overflow-x: auto; border: 1px solid var(--kv-line); border-radius: var(--kv-radius-card); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.kvp-tabela-roznic__wrap:focus-visible { outline: var(--kv-focus); outline-offset: 2px; }
.kvp-tabela-roznic table { width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.45; }
.kvp-tabela-roznic caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kvp-tabela-roznic th,
.kvp-tabela-roznic td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--kv-line); background: var(--kv-bg); text-align: left; white-space: nowrap; color: var(--kv-ink); }
.kvp-tabela-roznic thead th { background: var(--kv-surface); color: var(--kv-muted); font-size: 13px; font-weight: var(--kv-weight-bold); }
.kvp-tabela-roznic tbody tr:last-child > * { border-bottom: 0; }
.kvp-tabela-roznic th[scope="row"] { font-weight: var(--kv-weight-bold); }
.kvp-tabela-roznic td { font-variant-numeric: tabular-nums; }
.kvp-tabela-roznic td.kvp-tabela-roznic__brak { color: var(--kv-muted); }
.kvp-tabela-roznic__przypisy { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.kvp-tabela-roznic__przypisy li { margin: 0; font-size: var(--kv-size-caption); line-height: 1.45; color: var(--kv-muted); }
@media (min-width: 768px) {
	.kvp-tabela-roznic table { font-size: 16px; }
	.kvp-tabela-roznic th,
	.kvp-tabela-roznic td { padding: 14px 20px; }
	.kvp-tabela-roznic thead th { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.kvp-kod__przycisk,
	.kvp-porownanie__przycisk { transition: none; }
}