/* ==========================================================================
   MK20 base: reset, fonty, typografia, siatka, przyciski, sygnatura marki.
   Kolory i fonty wyłącznie z tokens.css. Zero !important, zero zaokrągleń.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
	margin: 0;
}

ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

a {
	color: inherit;
}

address {
	font-style: normal;
}

summary {
	list-style: none;
}

summary::-webkit-details-marker {
	display: none;
}

/* Blokada przewijania, gdy otwarte jest menu mobilne (klasa nadaje JS). */
html.mk-no-scroll,
html.mk-no-scroll body {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Fonty lokalne (wcześniej siedem @import do Google Fonts na jednej stronie)
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/anton-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/manrope-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/manrope-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/manrope-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/manrope-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/manrope-800.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   3. Typografia bazowa
   -------------------------------------------------------------------------- */

body {
	font-family: var(--mk-font-body);
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-ink-light);
	background: var(--mk-bg-dark);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4,
.mk-tytul {
	font-family: var(--mk-font-display);
	font-weight: 400;
	line-height: var(--mk-lh-display);
	letter-spacing: var(--mk-ls-display);
	text-transform: uppercase;
	text-wrap: balance;
}

h1,
.mk-tytul {
	font-size: var(--mk-fs-h2);
}

h2 {
	font-size: var(--mk-fs-h2);
}

h3 {
	font-size: var(--mk-fs-h3);
}

h4 {
	font-family: var(--mk-font-body);
	font-weight: 700;
	font-size: var(--mk-fs-card-title);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
}

.mk-lead {
	font-size: var(--mk-fs-lead);
	line-height: var(--mk-lh-body);
	color: var(--mk-ink-dim);
	max-width: 62ch;
}

.mk-small {
	font-size: var(--mk-fs-small);
}

strong,
b {
	font-weight: 700;
}

/* Treść z edytora (regulamin, polityka, wpisy). */
.mk-prose {
	max-width: 72ch;
}

.mk-prose > * + * {
	margin-top: 1.2em;
}

.mk-prose h2,
.mk-prose h3 {
	margin-top: 2em;
}

.mk-prose ul,
.mk-prose ol {
	padding-left: 1.4em;
}

.mk-prose li + li {
	margin-top: 0.4em;
}

.mk-prose a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--mk-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.mk-prose a:hover {
	text-decoration-color: currentColor;
}

.mk-prose blockquote {
	padding-left: 24px;
	border-left: 3px solid var(--mk-accent);
	color: var(--mk-ink-dim);
}

.mk-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mk-fs-small);
}

.mk-prose th,
.mk-prose td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mk-line);
	text-align: left;
}

/* --------------------------------------------------------------------------
   4. Siatka i sekcje
   -------------------------------------------------------------------------- */

.mk-wrap {
	width: 100%;
	max-width: var(--mk-wrap-max);
	margin-inline: auto;
	padding-inline: var(--mk-gutter-desktop);
}

.mk-wrap--waska {
	max-width: 960px;
}

.mk-main {
	display: block;
}

.mk-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-block: var(--mk-section-pad);
	background: var(--mk-bg);
	color: var(--mk-ink);
}

/* Warianty tła ustawiają lokalne zmienne, z których korzystają komponenty w środku.
   Dzięki temu przycisk, eyebrow czy karta nie muszą wiedzieć, na jakim tle stoją. */
.mk-section--dark {
	--mk-bg: var(--mk-bg-dark);
	--mk-ink: var(--mk-ink-light);
	--mk-ink-dim: var(--mk-ink-dim-on-dark);
	--mk-ink-mute: var(--mk-ink-mute-on-dark);
	--mk-line: var(--mk-line-on-dark);
}

.mk-section--light {
	--mk-bg: var(--mk-bg-light);
	--mk-ink: var(--mk-ink-dark);
	--mk-ink-dim: var(--mk-ink-dim-on-light);
	--mk-ink-mute: var(--mk-ink-mute-on-light);
	--mk-line: var(--mk-line-on-light);
}

.mk-section--cream {
	--mk-bg: var(--mk-bg-cream);
	--mk-ink: var(--mk-ink-dark);
	--mk-ink-dim: var(--mk-ink-dim-on-light);
	--mk-ink-mute: var(--mk-ink-mute-on-light);
	--mk-line: var(--mk-line-on-light);
}

.mk-naglowek-strony {
	margin-bottom: 48px;
}

.mk-naglowek-strony .mk-eyebrow {
	margin-bottom: 20px;
}

.mk-naglowek-strony .mk-lead {
	margin-top: 20px;
}

/* --------------------------------------------------------------------------
   5. Przyciski
   -------------------------------------------------------------------------- */

.mk-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border: 2px solid transparent;
	border-radius: var(--mk-radius);
	font-family: var(--mk-font-display);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	transition:
		background-color var(--mk-dur) var(--mk-ease-soft),
		border-color var(--mk-dur) var(--mk-ease-soft),
		color var(--mk-dur) var(--mk-ease-soft),
		transform var(--mk-dur) var(--mk-ease-soft),
		box-shadow var(--mk-dur) var(--mk-ease-soft);
}

.mk-btn__text,
.mk-btn__arrow {
	position: relative;
	z-index: 1;
}

.mk-btn__arrow {
	width: 14px;
	height: 14px;
	flex: none;
	transition: transform var(--mk-dur) var(--mk-ease-soft);
}

.mk-btn:hover .mk-btn__arrow {
	transform: translateX(4px);
}

/* Główny: żółty, tekst zawsze ciemny. */
.mk-btn--primary {
	background: var(--mk-accent);
	border-color: var(--mk-accent);
	color: var(--mk-ink-dark);
}

.mk-btn--primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--mk-bg-light);
	opacity: 0.25;
	transform: translateX(-101%);
	transition: transform var(--mk-dur-reveal) var(--mk-ease-inout);
}

.mk-btn--primary:hover::before {
	transform: translateX(101%);
}

.mk-btn--primary:hover {
	background: var(--mk-accent-dark);
	border-color: var(--mk-accent-dark);
	transform: translateY(-2px);
	box-shadow: var(--mk-shadow-yellow);
}

/* Duch: obrys w kolorze tekstu sekcji, na hover wypełnienie żółtym. */
.mk-btn--ghost {
	background: transparent;
	border-color: var(--mk-ink, var(--mk-ink-light));
	color: var(--mk-ink, var(--mk-ink-light));
}

.mk-btn--ghost:hover {
	background: var(--mk-accent);
	border-color: var(--mk-accent);
	color: var(--mk-ink-dark);
}

/* Ciemny: na jasnych sekcjach, gdzie żółty byłby drugim CTA. */
.mk-btn--dark {
	background: var(--mk-ink-dark);
	border-color: var(--mk-ink-dark);
	color: var(--mk-ink-light);
}

.mk-btn--dark:hover {
	background: var(--mk-accent);
	border-color: var(--mk-accent);
	color: var(--mk-ink-dark);
}

.mk-btn--maly {
	padding: 10px 18px;
	font-size: 13px;
}

.mk-btn--pelny {
	width: 100%;
	justify-content: center;
}

.mk-btn:disabled,
.mk-btn[aria-disabled='true'] {
	opacity: 0.5;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. Sygnatura marki: narożniki, marker, eyebrow
   -------------------------------------------------------------------------- */

.mk-corners {
	position: relative;
}

.mk-corners::before,
.mk-corners::after {
	content: '';
	position: absolute;
	width: var(--mk-corner-size);
	height: var(--mk-corner-size);
	pointer-events: none;
	z-index: 3;
}

.mk-corners::before {
	top: -1px;
	left: -1px;
	border-top: var(--mk-corner-width) solid var(--mk-accent);
	border-left: var(--mk-corner-width) solid var(--mk-accent);
}

.mk-corners::after {
	right: -1px;
	bottom: -1px;
	border-right: var(--mk-corner-width) solid var(--mk-accent);
	border-bottom: var(--mk-corner-width) solid var(--mk-accent);
}

/* Wersja jako pusty <span> wewnątrz elementu z position: relative. */
span.mk-corners {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Żółte podkreślenie pod ciemnym tekstem. Na białym tle to jedyna dozwolona forma żółtego przy tekście. */
.mk-marker {
	background-image: linear-gradient(transparent 62%, var(--mk-accent) 62%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding-inline: 0.08em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.mk-marker--anim {
	background-size: 0% 100%;
	transition: background-size var(--mk-dur-marker) var(--mk-ease-out);
}

.is-visible .mk-marker--anim,
.mk-marker--anim.is-visible {
	background-size: 100% 100%;
}

/* Eyebrow: kreska + tekst w rozstrzelonych kapitalikach. */
.mk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--mk-font-body);
	font-size: var(--mk-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--mk-ls-eyebrow);
	text-transform: uppercase;
	color: var(--mk-accent);
}

.mk-section--light .mk-eyebrow,
.mk-section--cream .mk-eyebrow {
	color: var(--mk-ink-dark);
}

.mk-eyebrow__line {
	display: inline-block;
	width: 36px;
	height: 2px;
	background: var(--mk-accent);
	flex: none;
}

/* Wielka liczba w tle, jersey style. */
.mk-bignum {
	position: absolute;
	font-family: var(--mk-font-display);
	font-size: clamp(160px, 28vw, 420px);
	line-height: 0.8;
	letter-spacing: -0.05em;
	color: var(--mk-bignum-color);
	pointer-events: none;
	user-select: none;
}

/* Widoczny znacznik brakującej treści. Ma kłuć w oczy do czasu uzupełnienia. */
.mk-brak {
	display: inline-block;
	padding: 2px 6px;
	background: var(--mk-accent);
	color: var(--mk-ink-dark);
	font-weight: 700;
	font-size: var(--mk-fs-small);
}

/* --------------------------------------------------------------------------
   7. Dostępność: skip link, fokus, ukrywanie
   -------------------------------------------------------------------------- */

.mk-skip {
	position: absolute;
	top: -100%;
	left: 16px;
	z-index: 2000;
	padding: 12px 20px;
	background: var(--mk-accent);
	color: var(--mk-ink-dark);
	font-weight: 700;
	text-decoration: none;
	transition: top var(--mk-dur-fast) var(--mk-ease-soft);
}

.mk-skip:focus {
	top: 16px;
	outline: 2px solid var(--mk-ink-dark);
	outline-offset: 2px;
}

:focus-visible {
	outline: 3px solid var(--mk-accent);
	outline-offset: 3px;
}

.mk-btn--primary:focus-visible {
	outline-color: var(--mk-ink-dark);
}

:focus:not(:focus-visible) {
	outline: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* --------------------------------------------------------------------------
   8. Menu (wspólna baza; układ nagłówka i stopki w sections/header.css i footer.css)
   -------------------------------------------------------------------------- */

.mk-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-menu__item,
.mk-menu > li {
	margin: 0;
	padding: 0;
}

.mk-menu a {
	display: inline-block;
	position: relative;
	padding-block: 6px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--mk-ink-dim, var(--mk-ink-dim-on-dark));
	transition: color var(--mk-dur) var(--mk-ease-soft);
}

.mk-menu a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--mk-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--mk-dur) var(--mk-ease-inout);
}

.mk-menu a:hover,
.mk-menu .current-menu-item > a,
.mk-menu a[aria-current='page'] {
	color: var(--mk-ink, var(--mk-ink-light));
}

.mk-menu a:hover::after,
.mk-menu .current-menu-item > a::after,
.mk-menu a[aria-current='page']::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   9. Listy wpisów, artykuł, paginacja, wyszukiwarka, 404
   -------------------------------------------------------------------------- */

.mk-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 40px 32px;
}

.mk-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-top: 2px solid var(--mk-ink);
}

.mk-karta__foto {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--mk-chip-bg);
}

.mk-karta__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mk-dur-reveal) var(--mk-ease-out);
}

.mk-karta:hover .mk-karta__foto img {
	transform: scale(1.04);
}

.mk-karta__tresc {
	padding-top: 20px;
}

.mk-karta__data {
	font-size: var(--mk-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--mk-ls-eyebrow);
	text-transform: uppercase;
	color: var(--mk-ink-mute);
	margin-bottom: 12px;
}

.mk-karta__tytul {
	font-size: var(--mk-fs-h3);
	margin-bottom: 12px;
}

.mk-karta__tytul a {
	text-decoration: none;
}

.mk-karta__tytul a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.mk-karta__tytul a:hover {
	color: var(--mk-accent);
}

.mk-section--light .mk-karta__tytul a:hover,
.mk-section--cream .mk-karta__tytul a:hover {
	color: var(--mk-ink-dark);
	background-image: linear-gradient(transparent 62%, var(--mk-accent) 62%);
}

.mk-karta__lead {
	color: var(--mk-ink-dim);
}

.mk-pusto {
	max-width: 62ch;
	font-size: var(--mk-fs-lead);
	color: var(--mk-ink-dim);
}

.mk-pusto p + p {
	margin-top: 24px;
}

.mk-artykul__meta {
	margin-top: 16px;
	font-size: var(--mk-fs-small);
	color: var(--mk-ink-mute);
}

.mk-artykul__foto {
	margin-bottom: 48px;
	max-width: 960px;
}

.mk-artykul__stopka {
	max-width: 72ch;
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid var(--mk-line);
}

.mk-artykul__cta {
	margin-top: 32px;
}

.mk-artykul__nav .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.mk-artykul__nav a {
	display: block;
	text-decoration: none;
}

.mk-artykul__nav-label {
	display: block;
	font-size: var(--mk-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--mk-ls-eyebrow);
	text-transform: uppercase;
	color: var(--mk-ink-mute);
	margin-bottom: 6px;
}

.mk-artykul__nav-title {
	font-weight: 700;
}

.mk-artykul__nav .nav-next {
	text-align: right;
}

.mk-strony-wpisu {
	margin-top: 32px;
	font-weight: 700;
}

.mk-pagination {
	margin-top: 64px;
}

.mk-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mk-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 14px;
	border: 1px solid var(--mk-line);
	font-family: var(--mk-font-display);
	font-size: 15px;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background-color var(--mk-dur-fast) var(--mk-ease-soft), color var(--mk-dur-fast) var(--mk-ease-soft);
}

.mk-pagination .page-numbers:hover,
.mk-pagination .page-numbers.current {
	background: var(--mk-accent);
	border-color: var(--mk-accent);
	color: var(--mk-ink-dark);
}

.mk-szukaj {
	display: flex;
	gap: 0;
	max-width: 560px;
}

.mk-szukaj__pole {
	flex: 1;
	min-width: 0;
	padding: 14px 18px;
	border: 2px solid var(--mk-line);
	border-right: 0;
	border-radius: var(--mk-radius);
	background: transparent;
	color: inherit;
}

.mk-szukaj__pole::placeholder {
	color: var(--mk-ink-mute);
}

.mk-szukaj__pole:focus-visible {
	outline-offset: 0;
	border-color: var(--mk-accent);
}

.mk-szukaj-ponownie {
	margin-top: 32px;
}

.mk-404 {
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.mk-404__bignum {
	position: absolute;
	right: -0.05em;
	bottom: -0.1em;
	font-family: var(--mk-font-display);
	font-size: clamp(200px, 40vw, 560px);
	line-height: 0.8;
	letter-spacing: -0.05em;
	color: var(--mk-bignum-color);
	pointer-events: none;
	user-select: none;
}

.mk-404__tresc {
	position: relative;
	max-width: 640px;
}

.mk-404__tresc .mk-eyebrow {
	margin-bottom: 24px;
}

.mk-404__tresc .mk-tytul {
	font-size: var(--mk-fs-h2-alt);
	margin-bottom: 24px;
}

.mk-404__camp {
	margin-top: 16px;
	font-family: var(--mk-font-display);
	font-size: var(--mk-fs-h3);
	text-transform: uppercase;
	color: var(--mk-ink-dark);
}

.mk-404__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.mk-404__szukaj {
	margin-top: 48px;
}

.mk-404__szukaj-label {
	margin-bottom: 12px;
	font-size: var(--mk-fs-small);
	color: var(--mk-ink-mute);
}

.mk-404__kontakt {
	margin-top: 32px;
	color: var(--mk-ink-dim);
}

.mk-404__kontakt a {
	text-decoration: underline;
	text-decoration-color: var(--mk-accent);
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   10. Ruch: reveal sekcji i liczniki (klasy nadaje assets/js/mk20.js)
   -------------------------------------------------------------------------- */

.mk-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--mk-dur-reveal) var(--mk-ease-out),
		transform var(--mk-dur-reveal) var(--mk-ease-out);
	transition-delay: var(--mk-reveal-delay, 0s);
}

.mk-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Bez JS nic nie może zostać niewidoczne. */
html.no-js .mk-reveal,
html:not(.js) .mk-reveal {
	opacity: 1;
	transform: none;
}

[data-mk-count] {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. Responsywność
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.mk-wrap {
		padding-inline: var(--mk-gutter-1024);
	}
}

@media (max-width: 720px) {
	.mk-wrap {
		padding-inline: var(--mk-gutter-720);
	}

	.mk-section {
		padding-block: 56px;
	}

	.mk-naglowek-strony {
		margin-bottom: 32px;
	}

	.mk-lista {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.mk-artykul__nav .nav-links {
		flex-direction: column;
	}

	.mk-artykul__nav .nav-next {
		text-align: left;
	}

	.mk-szukaj {
		flex-direction: column;
	}

	.mk-szukaj__pole {
		border-right: 2px solid var(--mk-line);
	}

	.mk-btn {
		padding: 14px 20px;
		font-size: 14px;
	}

	.mk-404__akcje .mk-btn {
		width: 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   12. Ograniczony ruch: żadnych animacji i przejść
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		transition-delay: 0s;
		scroll-behavior: auto;
	}

	.mk-reveal {
		opacity: 1;
		transform: none;
	}

	.mk-marker--anim {
		background-size: 100% 100%;
	}

	.mk-btn:hover,
	.mk-btn--primary:hover {
		transform: none;
	}

	.mk-karta:hover .mk-karta__foto img {
		transform: none;
	}
}