/*
 * Strona robocza /sandbox/ (F1-04a, F1-06a): dwa zestawy krojów do decyzji A1 obok siebie.
 *
 * Ładowany tylko na stronie o slugu sandbox (inc/sandbox.php). Kroje nie są w theme.json: warianty przełączają je,
 * nadpisując zmienne --wp--custom--kroj--* na kontenerze wariantu; kolory, odstępy, skala i ruch to tokeny
 * z theme.json (--wp--custom--*, --wp--preset--*). Paleta zastępcza czeka na oceny stron referencyjnych.
 *
 * Reguły @font-face (kroje i zapasowe dopasowane metrycznie) wpisuje tools/kroje.mjs między znacznikami niżej.
 * Zasady jak w hoffa.css: promień 0, bez cieni, jedna krzywa ruchu z tokenu, zero jednostek vh, progi wysokości
 * 700 i 560 px przy każdej sekcji układu.
 */

/* ── kroje.mjs: początek (wygenerowane przez tools/kroje.mjs, nie edytuj ręcznie) ── */
@font-face {
	font-family: "IBM Plex Serif";
	src: url("../fonts/ibm-plex-serif-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "IBM Plex Serif zapas";
	src: local("Georgia");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
	size-adjust: 106.82%;
	ascent-override: 95.96%;
	descent-override: 25.75%;
	line-gap-override: 0.00%;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/ibm-plex-sans-400-600.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "IBM Plex Sans zapas";
	src: local("Arial"), local("ArialMT");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
	size-adjust: 99.65%;
	ascent-override: 102.86%;
	descent-override: 27.60%;
	line-gap-override: 0.00%;
}

@font-face {
	font-family: "IBM Plex Sans zapas";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600;
	font-style: normal;
	font-display: fallback;
	size-adjust: 97.89%;
	ascent-override: 104.71%;
	descent-override: 28.09%;
	line-gap-override: 0.00%;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "IBM Plex Mono zapas";
	src: local("Courier New"), local("CourierNewPSMT");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
	size-adjust: 99.98%;
	ascent-override: 102.52%;
	descent-override: 27.50%;
	line-gap-override: 0.00%;
}

@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-400-opsz-24-72.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Newsreader zapas";
	src: local("Times New Roman"), local("TimesNewRomanPSMT");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
	size-adjust: 109.29%;
	ascent-override: 67.25%;
	descent-override: 24.25%;
	line-gap-override: 0.00%;
}

@font-face {
	font-family: "Geist";
	src: url("../fonts/geist-400-600.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Geist zapas";
	src: local("Arial"), local("ArialMT");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
	size-adjust: 103.88%;
	ascent-override: 96.74%;
	descent-override: 28.40%;
	line-gap-override: 0.00%;
}

@font-face {
	font-family: "Geist zapas";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600;
	font-style: normal;
	font-display: fallback;
	size-adjust: 101.57%;
	ascent-override: 98.94%;
	descent-override: 29.04%;
	line-gap-override: 0.00%;
}

@font-face {
	font-family: "Geist Mono";
	src: url("../fonts/geist-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: "Geist Mono zapas";
	src: local("Courier New"), local("CourierNewPSMT");
	font-weight: 400;
	font-style: normal;
	font-display: fallback;
	size-adjust: 99.98%;
	ascent-override: 100.52%;
	descent-override: 29.50%;
	line-gap-override: 0.00%;
}

/* ── kroje.mjs: koniec ── */

/* 1. Warianty: cztery role krojów. Stos: krój docelowy, zapasowy dopasowany metrycznie (local), rodzajowy.
 *    font-family na kontenerze, bo body ma już rozwiązaną wartość z theme.json. */
.hoffa-wariant--a {
	--wp--custom--kroj--display: "IBM Plex Serif", "IBM Plex Serif zapas", serif;
	--wp--custom--kroj--tekst: "IBM Plex Sans", "IBM Plex Sans zapas", sans-serif;
	--wp--custom--kroj--interfejs: "IBM Plex Sans", "IBM Plex Sans zapas", sans-serif;
	--wp--custom--kroj--dane: "IBM Plex Mono", "IBM Plex Mono zapas", monospace;
}

.hoffa-wariant--b {
	--wp--custom--kroj--display: "Newsreader", "Newsreader zapas", serif;
	--wp--custom--kroj--tekst: "Geist", "Geist zapas", sans-serif;
	--wp--custom--kroj--interfejs: "Geist", "Geist zapas", sans-serif;
	--wp--custom--kroj--dane: "Geist Mono", "Geist Mono zapas", monospace;
}

.hoffa-wariant,
.hoffa-zakreslacz {
	font-family: var(--wp--custom--kroj--tekst);
}

/* 2. Spis strony roboczej (poza wariantami: kroje systemowe jak nagłówek i stopka). */
.hoffa-sandbox__spis {
	padding-block-end: var(--wp--preset--spacing--6);
}

.hoffa-sandbox__spis > * {
	max-width: 40rem;
	margin-block: 0;
}

.hoffa-sandbox__spis > * + * {
	margin-block-start: var(--wp--preset--spacing--3);
}

.hoffa-sandbox__spis ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	padding: 0;
	list-style: none;
	font-family: var(--wp--custom--kroj--dane);
	font-size: var(--wp--preset--font-size--interfejs);
	line-height: var(--wp--custom--interlinia--interfejs);
	letter-spacing: var(--wp--custom--tracking--interfejs);
}

/* 3. Wariant: etykieta w mono nad fragmentem, oddzielona linią jak nagłówek formularza. */
.hoffa-wariant,
.hoffa-zakreslacz,
.hoffa-skala {
	margin-block-start: var(--wp--preset--spacing--9);
}

.hoffa-wariant > *,
.hoffa-zakreslacz > *,
.hoffa-skala > * {
	margin-block: 0;
}

.hoffa-wariant__etykieta {
	padding-block-start: var(--wp--preset--spacing--3);
	border-block-start: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--tekst);
	color: var(--wp--custom--kolor--tekst-drugorzedny);
	font-family: var(--wp--custom--kroj--dane);
	font-size: var(--wp--preset--font-size--interfejs);
	line-height: var(--wp--custom--interlinia--interfejs);
	letter-spacing: var(--wp--custom--tracking--interfejs);
	font-variant-numeric: tabular-nums;
}

/* Etykieta paragrafu (prawo 1): numer „§ n” w kroju danych, mała, drugorzędna. */
.hoffa-paragraf,
h2.hoffa-paragraf {
	margin: 0;
	color: var(--wp--custom--kolor--tekst-drugorzedny);
	font-family: var(--wp--custom--kroj--dane);
	font-size: var(--wp--preset--font-size--interfejs);
	font-weight: 400;
	line-height: var(--wp--custom--interlinia--interfejs);
	letter-spacing: var(--wp--custom--tracking--interfejs);
	font-variant-numeric: tabular-nums;
}

/* Sekcje fragmentu: odstęp jak między paragrafami umowy, treść od lewej. */
.hoffa-sekcja {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: var(--wp--preset--spacing--4);
	padding-block: var(--wp--preset--spacing--8);
	border-block-start: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--linia);
}

.hoffa-sekcja > * {
	max-width: 40rem;
	margin-block: 0;
}

.hoffa-sekcja h2:not(.hoffa-paragraf) {
	margin-block-end: var(--wp--preset--spacing--2);
}

/* 4. Hero (§ 1): od góry, nie wyśrodkowany w pionie; nagłówek, podtytuł i przycisk mieszczą się przy 1280×548. */
.hoffa-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: var(--wp--preset--spacing--7);
	min-height: min(100svh, 44rem);
	padding-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--8);
}

.hoffa-hero__tekst {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--4);
}

.hoffa-hero__tekst > * {
	margin-block: 0;
}

/* Tytuł o stałych wierszach (KROJE-ZESTAWY.md §1, zasada 9): wiersze z <br>, każdy bez łamania, więc zamiana
 * kroju zapasowego na docelowy nie przestawia słów między wierszami. Poniżej 22,5rem (telefon 320 px albo tekst
 * powiększony) łamanie wraca, żeby nic nie wystawało poza ekran. */
.hoffa-hero__tytul {
	white-space: normal;
}

@media (min-width: 22.5rem) {
	.hoffa-hero__tytul {
		white-space: nowrap;
	}
}

.hoffa-hero__podtytul {
	max-width: 34rem;
	color: var(--wp--custom--kolor--tekst);
}

.hoffa-hero__dzialania {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	padding-block-start: var(--wp--preset--spacing--2);
}

.hoffa-hero__dzialania > * {
	margin: 0;
}

/* Pole na zdjęcie Joanny w docelowej proporcji 4:5 (portret): neutralne tło z podpisem, bez obrazu. */
.hoffa-hero__zdjecie {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 5;
	width: 100%;
	max-width: 26rem;
	margin: 0;
	padding: var(--wp--preset--spacing--4);
	background-color: var(--wp--custom--kolor--linia);
}

.hoffa-hero__podpis {
	margin: 0;
	color: var(--wp--custom--kolor--tekst-drugorzedny);
	font-family: var(--wp--custom--kroj--interfejs);
	font-size: var(--wp--preset--font-size--interfejs);
	line-height: var(--wp--custom--interlinia--interfejs);
	letter-spacing: var(--wp--custom--tracking--interfejs);
}

@media (min-width: 48rem) {
	.hoffa-hero {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		column-gap: var(--wp--preset--spacing--8);
	}

	.hoffa-hero__zdjecie {
		justify-self: end;
	}
}

/* 5. Przegląd polis (§ 2): tekst w kolumnie treści, objaśnienia pojęć w kolumnie marginesu (prawo 5).
 *    Jedno źródło treści: <details> w HTML. Na wąskim ekranie rozwijane objaśnienie pod tekstem (bez JS);
 *    od 64rem ten sam element stoi w marginesie i jest zawsze otwarty (::details-content), a przeglądarka bez
 *    ::details-content zostawia zwykłe rozwijanie, więc treść jest dostępna w każdym przypadku. */
.hoffa-przeglad__tekst {
	color: var(--wp--custom--kolor--tekst);
}

/* Zakreślenie (prawo 2): statyczny stan końcowy efektu E1, jedno zdanie na widok. Pas jasnego tła zakreślenia
 * pod dolną częścią liter (atrament na nim co najmniej 7:1), a na dole pasa kreska koloru zakreślacza, którą
 * przecinają wydłużenia dolne (atrament na niej co najmniej 4,5:1). Bez animacji i bez JS. */
.hoffa-zakreslenie {
	background-color: transparent;
	background-image: linear-gradient(transparent 48%, var(--wp--custom--kolor--tlo-zakreslenia) 48%, var(--wp--custom--kolor--tlo-zakreslenia) 86%, var(--wp--custom--kolor--akcent) 86%, var(--wp--custom--kolor--akcent) 94%, transparent 94%);
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.hoffa-margines {
	display: grid;
	align-content: start;
	gap: 0;
	border-block-start: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--linia);
}

.hoffa-margines > * {
	margin-block: 0;
}

.hoffa-objasnienie {
	padding-block: var(--wp--preset--spacing--3);
	border-block-end: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--linia);
	color: var(--wp--custom--kolor--tekst-drugorzedny);
	font-family: var(--wp--custom--kroj--interfejs);
	font-size: var(--wp--preset--font-size--interfejs);
	line-height: var(--wp--custom--interlinia--interfejs);
	letter-spacing: var(--wp--custom--tracking--interfejs);
}

.hoffa-objasnienie > summary {
	color: var(--wp--custom--kolor--tekst);
	font-weight: 600;
	cursor: pointer;
}

.hoffa-objasnienie > p {
	margin-block: var(--wp--preset--spacing--2) 0;
}

/* Przypis: przekazanie sprawy specjaliście, jak w umowie (krótka linia nad tekstem). */
.hoffa-przypis {
	color: var(--wp--custom--kolor--tekst-drugorzedny);
	font-family: var(--wp--custom--kroj--interfejs);
	font-size: var(--wp--preset--font-size--interfejs);
	line-height: var(--wp--custom--interlinia--interfejs);
	letter-spacing: var(--wp--custom--tracking--interfejs);
}

.hoffa-przypis::before {
	content: "";
	display: block;
	width: 4rem;
	margin-block-end: var(--wp--preset--spacing--3);
	border-block-start: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--linia);
}

@media (min-width: 64rem) {
	.hoffa-przeglad {
		grid-template-columns: minmax(0, 40rem) minmax(12rem, 17rem);
		column-gap: var(--wp--preset--spacing--8);
	}

	.hoffa-przeglad > * {
		grid-column: 1;
	}

	.hoffa-przeglad > .hoffa-margines {
		grid-column: 2;
		grid-row: 3 / span 2;
	}

	@supports selector(::details-content) {
		.hoffa-objasnienie::details-content {
			content-visibility: visible;
		}

		.hoffa-objasnienie > summary {
			list-style: none;
			pointer-events: none;
			cursor: default;
		}

		.hoffa-objasnienie > summary::-webkit-details-marker {
			display: none;
		}

		.hoffa-objasnienie > summary::after {
			content: ":";
		}

		.hoffa-objasnienie > p {
			margin-block-start: var(--wp--preset--spacing--1);
		}
	}
}

/* 6. Dane jak pola polisy (prawo 3): etykieta pola i wartość w kroju danych z cyframi tabelarycznymi. */
.hoffa-sekcja > .hoffa-pola__lista {
	max-width: 48rem;
}

.hoffa-pola__lista {
	display: grid;
	border-block-start: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--linia);
}

.hoffa-pola__lista > * {
	margin-block: 0;
}

.hoffa-pole {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--5);
	padding-block: var(--wp--preset--spacing--3);
	border-block-end: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--linia);
}

.hoffa-pole > * {
	margin-block: 0;
}

.hoffa-pole__etykieta {
	color: var(--wp--custom--kolor--tekst-drugorzedny);
	font-family: var(--wp--custom--kroj--interfejs);
	font-size: var(--wp--preset--font-size--interfejs);
	line-height: var(--wp--custom--interlinia--tekst);
	letter-spacing: var(--wp--custom--tracking--interfejs);
}

.hoffa-pole__wartosc {
	font-variant-numeric: tabular-nums lining-nums;
	overflow-wrap: anywhere;
}

.hoffa-pole__uwaga {
	font-family: var(--wp--custom--kroj--interfejs);
	font-size: var(--wp--preset--font-size--interfejs);
	line-height: var(--wp--custom--interlinia--interfejs);
	letter-spacing: var(--wp--custom--tracking--interfejs);
}

@media (min-width: 40rem) {
	.hoffa-pole {
		grid-template-columns: 12rem minmax(0, 1fr);
		align-items: baseline;
	}

	.hoffa-pole__uwaga {
		grid-column: 2;
	}
}

/* 7. Mikroefekt (prawo 4): najechanie to wjazd tła zakreślacza od lewej. Jedna krzywa i czas interfejsu z tokenów.
 *    Ścieżki: mocny i słaby GPU tak samo (przejście background-size maluje tylko pole odnośnika, bez warstw,
 *    filtrów i will-change); telefon (pointer: coarse) bez najechania, stan aktywny przy dotknięciu i podświetlenie
 *    dotyku w kolorze zakreślacza; ograniczony ruch: hoffa.css zeruje czasy, zostaje sama zmiana koloru.
 *    Odnośnik w tekście zostaje podkreślony (rozróżnialny nie tylko kolorem), fokus z klawiatury jak w hoffa.css. */
:is(.hoffa-wariant, .hoffa-zakreslacz) a,
:is(.hoffa-wariant, .hoffa-zakreslacz) .wp-element-button {
	background-image: linear-gradient(var(--wp--custom--kolor--tlo-zakreslenia), var(--wp--custom--kolor--tlo-zakreslenia));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition-property: background-size, color, text-decoration-color;
	transition-duration: var(--wp--custom--ruch--czas--interfejs);
	transition-timing-function: var(--wp--custom--ruch--krzywa);
}

@media (hover: hover) and (pointer: fine) {
	:is(.hoffa-wariant, .hoffa-zakreslacz) a:hover,
	:is(.hoffa-wariant, .hoffa-zakreslacz) .wp-element-button:hover {
		background-size: 100% 100%;
		color: var(--wp--custom--kolor--tekst);
	}
}

:is(.hoffa-wariant, .hoffa-zakreslacz) a:active,
:is(.hoffa-wariant, .hoffa-zakreslacz) .wp-element-button:active {
	background-size: 100% 100%;
	color: var(--wp--custom--kolor--tekst);
}

@media (pointer: coarse) {
	:is(.hoffa-wariant, .hoffa-zakreslacz) a,
	:is(.hoffa-wariant, .hoffa-zakreslacz) .wp-element-button {
		-webkit-tap-highlight-color: var(--wp--custom--kolor--tlo-zakreslenia);
	}
}

:is(.hoffa-wariant, .hoffa-zakreslacz) a:not(.wp-element-button) {
	text-decoration-line: underline;
}

/* 7a. Dwa przyciski w § 4: wypełniony (theme.json) i z obrysem 1 px w kolorze atramentu. Obrys zjada 1 px z każdej
 *    strony paddingu, więc oba przyciski mają ten sam rozmiar. Najechanie to ten sam wjazd tła zakreślacza (reguły
 *    wyżej, cztery ścieżki bez zmian); przy obrysie tekst przez całe przejście jest atramentem na papierze albo na tle
 *    zakreślenia, a przy wypełnionym końcówka napisu przez chwilę stoi na granacie. */
.hoffa-przyciski {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
}

.hoffa-przyciski > *,
.hoffa-przyciski__probka > * {
	margin: 0;
}

.hoffa-przyciski__probka {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--2);
}

.hoffa-przyciski__podpis,
.hoffa-zakreslacz__podpis {
	color: var(--wp--custom--kolor--tekst-drugorzedny);
	font-family: var(--wp--custom--kroj--dane);
	font-size: var(--wp--preset--font-size--interfejs);
	line-height: var(--wp--custom--interlinia--interfejs);
	letter-spacing: var(--wp--custom--tracking--interfejs);
	font-variant-numeric: tabular-nums;
}

.hoffa-przycisk--obrys .wp-block-button__link {
	padding: calc(var(--wp--preset--spacing--3) - var(--wp--custom--linia--grubosc)) calc(var(--wp--preset--spacing--5) - var(--wp--custom--linia--grubosc));
	border: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--tekst);
	background-color: transparent;
	color: var(--wp--custom--kolor--tekst);
}

/* 7b. Kolor zakreślacza (decyzja A1): trzy pary na tej samej chłodnej bieli i atramencie, kroje wariantu A.
 *    Blok nadpisuje tylko dwa tokeny koloru; zakreślenie, przycisk i odnośnik to te same reguły co w wariantach.
 *    Wartości to kandydaci do decyzji (jeszcze nie w theme.json); kontrast atramentu #1C2A4A jest w podpisach. */
.hoffa-zakreslacz__wstep {
	max-width: 40rem;
}

.hoffa-zakreslacz > .hoffa-zakreslacz__wstep {
	margin-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
}

.hoffa-zakreslacz__bloki {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--7);
	border-block-start: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--linia);
}

.hoffa-zakreslacz__bloki > * {
	margin: 0;
}

.hoffa-zakreslacz__blok {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: var(--wp--preset--spacing--4);
	padding-block: var(--wp--preset--spacing--5);
	border-block-end: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--linia);
}

.hoffa-zakreslacz__blok > * {
	margin: 0;
}

/* Żółty: obecne tokeny z theme.json, bez nadpisania. */
.hoffa-zakreslacz__blok--mieta {
	--wp--custom--kolor--akcent: #5DB8A6;
	--wp--custom--kolor--tlo-zakreslenia: #BCE6DD;
}

.hoffa-zakreslacz__blok--sliwka {
	--wp--custom--kolor--akcent: #D879C7;
	--wp--custom--kolor--tlo-zakreslenia: #F2CAEA;
}

@media (min-width: 64rem) {
	.hoffa-zakreslacz__bloki {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 8. Skala na telefonie (decyzja A1): ramka o szerokości treści na ekranie 390 px (358 px = 390 - 2 × 16),
 *    krawędź jako obrys do środka (nie zmienia szerokości), co wystaje poza ramkę jest ucięte. Ekran węższy niż
 *    390 px przewija sam rząd próbek, nie stronę. */
.hoffa-skala__wstep {
	max-width: 40rem;
}

.hoffa-skala__wariant {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin-block-start: var(--wp--preset--spacing--7);
}

.hoffa-skala__przewijanie {
	overflow-x: auto;
}

.hoffa-skala__rzad {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hoffa-skala__probka {
	display: grid;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
}

.hoffa-skala__ramka {
	box-sizing: content-box;
	width: 358px;
	padding: 0.15em 0 var(--wp--custom--zejscie-display);
	overflow: clip;
	outline: var(--wp--custom--linia--grubosc) solid var(--wp--custom--kolor--tekst-drugorzedny);
	outline-offset: calc(-1 * var(--wp--custom--linia--grubosc));
	color: var(--wp--custom--kolor--tekst);
	font-family: var(--wp--custom--kroj--display);
	font-weight: 400;
	line-height: var(--wp--custom--interlinia--display);
	letter-spacing: var(--wp--custom--tracking--display);
}

.hoffa-skala__ramka p {
	margin: 0;
}

.hoffa-skala__ramka--52 {
	font-size: 3.25rem;
}

.hoffa-skala__ramka--65 {
	font-size: 4.0625rem;
}

.hoffa-skala__podpis {
	color: var(--wp--custom--kolor--tekst-drugorzedny);
	font-family: var(--wp--custom--kroj--dane);
	font-size: var(--wp--preset--font-size--interfejs);
	line-height: var(--wp--custom--interlinia--interfejs);
	letter-spacing: var(--wp--custom--tracking--interfejs);
	font-variant-numeric: tabular-nums;
}

/* 9. Niskie okno: mniejsza skala tytułu w hero i mniejsze odstępy pionowe (STANDARD-JAKOSCI.md §4b, reguła 3). */
@media (max-height: 700px) {
	.hoffa-hero {
		gap: var(--wp--preset--spacing--6);
		padding-block: var(--wp--preset--spacing--5) var(--wp--preset--spacing--7);
	}

	.hoffa-hero__tekst {
		gap: var(--wp--preset--spacing--3);
	}

	.hoffa-hero__tytul {
		font-size: min(var(--wp--preset--font-size--display), 4.5rem);
	}

	.hoffa-sekcja {
		padding-block: var(--wp--preset--spacing--7);
	}

	.hoffa-wariant,
	.hoffa-zakreslacz,
	.hoffa-skala {
		margin-block-start: var(--wp--preset--spacing--8);
	}
}

@media (max-height: 560px) {
	.hoffa-hero {
		gap: var(--wp--preset--spacing--5);
		padding-block: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6);
	}

	.hoffa-hero__tekst {
		gap: var(--wp--preset--spacing--2);
	}

	.hoffa-hero__tytul {
		font-size: min(var(--wp--preset--font-size--display), 4rem);
	}

	.hoffa-sekcja {
		padding-block: var(--wp--preset--spacing--6);
	}

	.hoffa-wariant,
	.hoffa-zakreslacz,
	.hoffa-skala {
		margin-block-start: var(--wp--preset--spacing--7);
	}

	.hoffa-zakreslacz__blok {
		padding-block: var(--wp--preset--spacing--4);
	}
}

/* Telefon w poziomie: hero przestaje być pełnoekranowy (reguła 9). */
@media (orientation: landscape) and (max-height: 500px) {
	.hoffa-hero {
		min-height: 0;
	}
}