/* ──────────────────────────────────────────────────────────────────
   Portal Tychy — main.css
   Editorial newspaper, paleta czerwieni z herbu Tychy + grafit + złoto.
   ────────────────────────────────────────────────────────────────── */

/* ── Fonty self-hosted, latin + latin-ext ─────────────────────── */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-regular.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-italic.woff2") format("woff2");
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-700.woff2") format("woff2");
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/plex-regular.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/plex-italic.woff2") format("woff2");
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/plex-500.woff2") format("woff2");
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/plex-700.woff2") format("woff2");
	font-weight: 700; font-style: normal; font-display: swap;
}

/* ── CSS vars ─────────────────────────────────────────────────── */
:root {
	--mag-accent:        #B91C2C;  /* czerwień Tychy */
	--mag-accent-hover:  #8E1322;
	--mag-accent-soft:   #fbeef0;
	--mag-gold:          #C9A24A;  /* złoty akcent secondary */
	--mag-ink:           #1F2429;
	--mag-ink-soft:      #2F353B;
	--mag-paper:         #ffffff;
	--mag-paper-alt:     #FAF7F2;  /* cream */
	--mag-rule:          #E5DFD3;
	--mag-rule-strong:   #C9C2B0;
	--mag-muted:         #6B6E78;

	--mag-font-display:  "Fraunces", "Iowan Old Style", Georgia, serif;
	--mag-font-body:     "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

	--mag-content-w:     1240px;
	--mag-prose-w:       720px;

	--mag-shadow-sm: 0 1px 2px rgba(31,36,41,0.04), 0 0 0 1px rgba(31,36,41,0.05);
	--mag-shadow-md: 0 12px 28px -12px rgba(185,28,44,0.18);

	--mag-r: 4px;
	--mag-tr: 180ms cubic-bezier(0.2,0.7,0.2,1);
}

/* ── Reset / podstawy ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--mag-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--mag-ink);
	background: var(--mag-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--mag-accent); text-decoration: none; transition: color var(--mag-tr); }
a:hover { color: var(--mag-accent-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--mag-rule); margin: 2rem 0; }
::selection { background: var(--mag-accent); color: var(--mag-paper); }

h1, h2, h3, h4 {
	font-family: var(--mag-font-display);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--mag-ink);
	margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1.15em; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }

/* ── Layout primitives ────────────────────────────────────────── */
.mag-container {
	width: 100%;
	max-width: var(--mag-content-w);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 40px);
}

.mag-skip {
	position: absolute; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.mag-skip:focus {
	position: fixed; left: 1rem; top: 1rem; width: auto; height: auto;
	padding: 0.6rem 1rem; background: var(--mag-accent); color: #fff; z-index: 9999;
}

/* ── Header ───────────────────────────────────────────────────── */
.mag-header {
	border-bottom: 1px solid var(--mag-rule);
	background: var(--mag-paper);
	position: sticky; top: 0; z-index: 50;
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
}
.mag-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: clamp(14px, 2vw, 20px);
	padding-bottom: clamp(14px, 2vw, 20px);
}
.mag-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--mag-font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	color: var(--mag-ink);
	letter-spacing: -0.015em;
}
.mag-logo:hover { color: var(--mag-accent); text-decoration: none; }
.mag-logo img { max-height: 44px; width: auto; }
.mag-logo-wrap { display: inline-flex; align-items: center; }
.mag-logo-wrap img,
.mag-logo-wrap .custom-logo { max-height: 56px; width: auto; height: auto; display: block; }
.mag-logo-wrap a { display: inline-flex; align-items: center; }
.mag-logo__mark {
	display: inline-block;
	width: 8px; height: 8px;
	background: var(--mag-accent);
	border-radius: 50%;
	flex-shrink: 0;
}

.mag-nav { display: flex; align-items: center; gap: 1.75rem; }
.mag-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; align-items: center; }
.mag-nav a {
	color: var(--mag-ink);
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 0.4rem 0;
	position: relative;
}
.mag-nav a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
	height: 2px; background: var(--mag-accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--mag-tr);
}
.mag-nav a:hover { text-decoration: none; color: var(--mag-accent); }
.mag-nav a:hover::after,
.mag-nav .current-menu-item > a::after,
.mag-nav .current-cat > a::after { transform: scaleX(1); }

.mag-search-toggle, .mag-burger {
	display: none;
	background: none; border: 0; padding: 0;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	color: var(--mag-ink);
}
.mag-burger__bar {
	display: block; width: 22px; height: 2px;
	background: currentColor; position: relative;
}
.mag-burger__bar::before, .mag-burger__bar::after {
	content: ""; position: absolute; left: 0; width: 22px; height: 2px;
	background: currentColor;
	transition: transform var(--mag-tr), top var(--mag-tr);
}
.mag-burger__bar::before { top: -7px; }
.mag-burger__bar::after  { top:  7px; }
.mag-burger[aria-expanded="true"] .mag-burger__bar { background: transparent; }
.mag-burger[aria-expanded="true"] .mag-burger__bar::before { top: 0; transform: rotate(45deg); }
.mag-burger[aria-expanded="true"] .mag-burger__bar::after  { top: 0; transform: rotate(-45deg); }

/* ── Breadcrumbs ──────────────────────────────────────────────── */
.mag-breadcrumbs {
	font-size: 0.875rem;
	color: var(--mag-muted);
	padding: 1rem 0 0;
}
.mag-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.mag-breadcrumbs a { color: var(--mag-muted); }
.mag-breadcrumbs a:hover { color: var(--mag-accent); }
.mag-breadcrumbs__sep { color: var(--mag-rule-strong); }
.mag-breadcrumbs [aria-current="page"] { color: var(--mag-ink); }

/* ── Hero (3 ostatnie posty) ──────────────────────────────────── */
.mag-hero {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 1.5rem;
	margin: 2rem 0 3rem;
}
.mag-hero__main {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--mag-r);
	overflow: hidden;
	background: var(--mag-paper-alt);
}
.mag-hero__main img,
.mag-hero__side-item img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2,0.7,0.2,1);
}
.mag-hero__main:hover img,
.mag-hero__side-item:hover img { transform: scale(1.03); }
.mag-hero__main::after,
.mag-hero__side-item::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(17,19,26,0) 30%, rgba(14,27,97,0.78) 100%);
	pointer-events: none;
}
.mag-hero__main-text,
.mag-hero__side-text {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	color: #fff; z-index: 2;
}
.mag-hero__main-text .mag-eyebrow { color: rgba(255,255,255,0.85); }
.mag-hero__main-text h2 {
	color: #fff;
	font-size: clamp(1.5rem, 3.2vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.12;
	margin: 0.3rem 0 0;
	max-width: 30ch;
}
.mag-hero__main-text h2 a { color: #fff; }
.mag-hero__main-text h2 a:hover { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.6); }

.mag-hero__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 1.5rem;
}
.mag-hero__side-item {
	position: relative;
	border-radius: var(--mag-r);
	overflow: hidden;
	background: var(--mag-paper-alt);
}
.mag-hero__side-text h3 {
	color: #fff;
	font-size: 1.15rem;
	margin: 0.25rem 0 0;
	max-width: 24ch;
}
.mag-hero__side-text h3 a { color: #fff; }

/* ── Eyebrow / kategoria pill ─────────────────────────────────── */
.mag-eyebrow {
	display: inline-block;
	font-family: var(--mag-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mag-accent);
}
.mag-eyebrow--inverse { color: rgba(255,255,255,0.92); }

/* ── Section title (pomiędzy sekcjami home) ───────────────────── */
.mag-section-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--mag-ink);
}
.mag-section-title h2 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	margin: 0;
	letter-spacing: -0.01em;
}
.mag-section-title__more {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--mag-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── Card (uniwersalna karta artykułu) ────────────────────────── */
.mag-card { display: flex; flex-direction: column; gap: 0.85rem; }
.mag-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--mag-r);
	overflow: hidden;
	background: var(--mag-paper-alt);
}
.mag-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 500ms cubic-bezier(0.2,0.7,0.2,1);
}
.mag-card__media:hover img { transform: scale(1.04); }
.mag-card__title {
	font-family: var(--mag-font-display);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.25;
	margin: 0.1rem 0 0;
	letter-spacing: -0.01em;
}
.mag-card__title a { color: var(--mag-ink); }
.mag-card__title a:hover { color: var(--mag-accent); text-decoration: none; }
.mag-card__excerpt {
	font-size: 0.95rem;
	color: var(--mag-ink-soft);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mag-card__meta {
	font-size: 0.825rem;
	color: var(--mag-muted);
	display: flex; gap: 0.7rem; align-items: center;
}
.mag-card__meta time { font-variant-numeric: tabular-nums; }

/* ── Grid 4 ostatnich (front-page) ────────────────────────────── */
.mag-grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 2vw, 2rem);
	margin: 0 0 3rem;
}

/* ── 3 kolumny kategorii ──────────────────────────────────────── */
.mag-cats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	margin: 0 0 3rem;
}
.mag-cats__col { display: flex; flex-direction: column; gap: 1.5rem; }
.mag-cats__col .mag-card { gap: 0.6rem; }
.mag-cats__col .mag-card__title { font-size: 1.1rem; }
.mag-cats__col .mag-card:not(:first-child) {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 0.85rem;
	align-items: start;
}
.mag-cats__col .mag-card:not(:first-child) .mag-card__media {
	aspect-ratio: 1 / 1;
}
.mag-cats__col .mag-card:not(:first-child) .mag-card__excerpt { display: none; }
.mag-cats__col .mag-card:not(:first-child) .mag-card__title { font-size: 1rem; }

/* ── SEO text block ───────────────────────────────────────────── */
.mag-seo-text {
	background: var(--mag-paper-alt);
	border-left: 3px solid var(--mag-accent);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 0 var(--mag-r) var(--mag-r) 0;
	margin: 0 0 3rem;
}
.mag-seo-text :first-child { margin-top: 0; }
.mag-seo-text :last-child { margin-bottom: 0; }
.mag-seo-text h2 { font-size: 1.5rem; }
.mag-seo-text p { color: var(--mag-ink-soft); }

/* ── Warto przeczytać ─────────────────────────────────────────── */
.mag-recommended {
	margin: 0 0 3.5rem;
}
.mag-recommended__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2vw, 2rem);
	list-style: none;
	margin: 0; padding: 0;
}
.mag-recommended__list .mag-card__media { aspect-ratio: 16 / 10; }
.mag-recommended__list .mag-card__title { font-size: 1.05rem; }

/* ── Single — układ TOC + content + sidebar ───────────────────── */
.mag-article-wrap {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 240px;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	margin: 1.5rem 0 4rem;
	align-items: start;
}

/* TOC po lewej (sticky) */
.mag-toc {
	position: sticky;
	top: 96px; /* poniżej sticky headera */
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding: 1.5rem 0 1.5rem 0.5rem;
	border-left: 2px solid var(--mag-rule);
	font-size: 0.9rem;
}
.mag-toc__toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: var(--mag-paper-alt);
	border: 1px solid var(--mag-rule);
	border-radius: var(--mag-r);
	padding: 0.75rem 1rem;
	font-weight: 600;
}
.mag-toc__list { list-style: none; margin: 0; padding: 0; }
.mag-toc__item { margin: 0; padding: 0.35rem 0; border-left: 2px solid transparent; margin-left: -0.5rem; padding-left: 0.85rem; transition: border-color var(--mag-tr), color var(--mag-tr); }
.mag-toc__item--h3 { padding-left: 1.85rem; font-size: 0.85rem; }
.mag-toc__item a {
	color: var(--mag-ink-soft);
	font-weight: 500;
	display: block;
	line-height: 1.35;
}
.mag-toc__item a:hover { color: var(--mag-accent); text-decoration: none; }
.mag-toc__item--active { border-left-color: var(--mag-accent); }
.mag-toc__item--active > a { color: var(--mag-accent); font-weight: 600; }

/* Sidebar prawy */
.mag-sidebar { font-size: 0.95rem; }
.mag-sidebar > * + * { margin-top: 2rem; }
.mag-widget__title {
	font-family: var(--mag-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mag-ink);
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--mag-ink);
}
.mag-popular { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.mag-popular__item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 0.85rem;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--mag-rule);
	counter-increment: pop;
	position: relative;
}
.mag-popular__item:last-child { border-bottom: 0; }
.mag-popular__thumb {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--mag-r);
	overflow: hidden;
	background: var(--mag-paper-alt);
}
.mag-popular__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mag-popular__title {
	font-family: var(--mag-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--mag-ink);
	line-height: 1.25;
	letter-spacing: -0.005em;
}
.mag-popular__title:hover { color: var(--mag-accent); text-decoration: none; }
.mag-popular__item::before {
	content: counter(pop, decimal-leading-zero);
	position: absolute;
	right: 0; top: 0.75rem;
	font-family: var(--mag-font-display);
	font-size: 0.75rem;
	color: var(--mag-rule-strong);
	font-weight: 700;
}

.mag-widget--ad {
	text-align: center;
	background: var(--mag-paper-alt);
	padding: 1rem;
	border-radius: var(--mag-r);
	border: 1px solid var(--mag-rule);
}
.mag-ad__label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mag-muted);
	margin-bottom: 0.6rem;
}
.mag-widget--ad img { display: block; margin: 0 auto; max-width: 100%; height: auto; }

.mag-tagcloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mag-tagcloud a {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	background: var(--mag-paper-alt);
	border: 1px solid var(--mag-rule);
	color: var(--mag-ink-soft);
	border-radius: 999px;
	transition: background var(--mag-tr), color var(--mag-tr), border-color var(--mag-tr);
}
.mag-tagcloud a:hover {
	background: var(--mag-accent);
	color: #fff;
	border-color: var(--mag-accent);
	text-decoration: none;
}

/* ── Single — typografia treści ───────────────────────────────── */
.mag-article {
	max-width: var(--mag-prose-w);
	margin: 0 auto;
	width: 100%;
}
.mag-article__head { margin-bottom: 2rem; }
.mag-article__title {
	font-size: clamp(2rem, 4.2vw, 3rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.022em;
	margin: 0.5rem 0 0.75rem;
}
.mag-article__lede {
	font-family: var(--mag-font-display);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.45;
	color: var(--mag-ink-soft);
	margin: 0.5rem 0 1.5rem;
	max-width: 60ch;
}
.mag-article__meta {
	font-size: 0.875rem;
	color: var(--mag-muted);
	display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center;
	padding: 0.85rem 0;
	border-top: 1px solid var(--mag-rule);
	border-bottom: 1px solid var(--mag-rule);
}
.mag-article__meta a { color: var(--mag-ink-soft); }
.mag-article__meta a:hover { color: var(--mag-accent); }
.mag-article__meta__dot { color: var(--mag-rule-strong); }
.mag-article__featured {
	margin: 1.5rem 0 2rem;
	border-radius: var(--mag-r);
	overflow: hidden;
}

/* Treść */
.mag-prose { font-size: 1.0625rem; line-height: 1.75; }
.mag-prose h2 {
	margin-top: 2.5rem;
	font-size: 1.75rem;
	scroll-margin-top: 100px;
}
.mag-prose h2::before {
	content: "";
	display: block;
	width: 40px; height: 3px;
	background: var(--mag-accent);
	margin-bottom: 0.85rem;
}
.mag-prose h3 {
	margin-top: 2rem;
	font-size: 1.3rem;
	scroll-margin-top: 100px;
}
.mag-prose h2:first-child, .mag-prose h3:first-child { margin-top: 0; }
.mag-prose p, .mag-prose ul, .mag-prose ol, .mag-prose blockquote, .mag-prose figure { margin: 0 0 1.25em; }
.mag-prose ul, .mag-prose ol { padding-left: 1.4em; }
.mag-prose li { margin-bottom: 0.4em; }
.mag-prose blockquote {
	border-left: 3px solid var(--mag-accent);
	padding: 0.4rem 0 0.4rem 1.4rem;
	font-family: var(--mag-font-display);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--mag-ink-soft);
	margin: 1.75em 0;
}
.mag-prose code {
	font-family: ui-monospace, "Cascadia Mono", monospace;
	background: var(--mag-paper-alt);
	padding: 0.1em 0.4em;
	border-radius: 3px;
	font-size: 0.92em;
}
.mag-prose pre {
	background: var(--mag-ink);
	color: #f5f4ed;
	padding: 1rem 1.2rem;
	border-radius: var(--mag-r);
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.5;
}
.mag-prose pre code { background: transparent; padding: 0; color: inherit; }
.mag-prose figure img { border-radius: var(--mag-r); }
.mag-prose figcaption { font-size: 0.85rem; color: var(--mag-muted); margin-top: 0.5rem; text-align: center; }
.mag-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mag-prose sup a { text-decoration: none; }
.mag-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95rem; }
.mag-prose th, .mag-prose td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--mag-rule); }
.mag-prose th { font-weight: 600; background: var(--mag-paper-alt); }

/* ── Pillar — szeroki layout, bez sidebara ────────────────────── */
.mag-pillar .mag-article-wrap { grid-template-columns: 280px 1fr; }
.mag-pillar .mag-article { max-width: 800px; }
.mag-pillar .mag-article__title { font-size: clamp(2.4rem, 5vw, 3.75rem); }
.mag-pillar .mag-article__featured { aspect-ratio: 21 / 9; }
.mag-pillar .mag-article__featured img { width: 100%; height: 100%; object-fit: cover; }
.mag-pillar .mag-prose { font-size: 1.1rem; line-height: 1.78; }
.mag-pillar .mag-prose > p:first-of-type::first-letter {
	font-family: var(--mag-font-display);
	font-weight: 700;
	float: left;
	font-size: 4.5rem;
	line-height: 0.9;
	margin: 0.18rem 0.7rem 0 0;
	color: var(--mag-accent);
}

/* ── Archive (kategoria) ──────────────────────────────────────── */
.mag-archive__head {
	padding: 2rem 0 2.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--mag-rule);
}
.mag-archive__eyebrow { color: var(--mag-accent); }
.mag-archive__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0.4rem 0 0.6rem;
	letter-spacing: -0.022em;
}
.mag-archive__desc {
	max-width: 60ch;
	color: var(--mag-ink-soft);
	font-size: 1.05rem;
	margin: 0;
}
.mag-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 2.5vw, 2.25rem);
	margin: 0 0 3rem;
}

/* Paginacja */
.mag-pagination {
	margin: 2rem 0 3rem;
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	justify-content: center;
}
.mag-pagination .page-numbers {
	display: inline-flex;
	min-width: 44px; height: 44px;
	padding: 0 0.9rem;
	align-items: center; justify-content: center;
	border: 1px solid var(--mag-rule);
	border-radius: var(--mag-r);
	color: var(--mag-ink);
	font-weight: 500;
	transition: all var(--mag-tr);
}
.mag-pagination .page-numbers:hover {
	background: var(--mag-paper-alt);
	border-color: var(--mag-rule-strong);
	text-decoration: none;
}
.mag-pagination .page-numbers.current {
	background: var(--mag-accent);
	color: #fff;
	border-color: var(--mag-accent);
}
.mag-pagination .page-numbers.dots { border: 0; background: transparent; }

/* ── Search form ──────────────────────────────────────────────── */
.mag-searchform {
	display: flex; gap: 0.5rem;
	border: 1px solid var(--mag-rule);
	border-radius: var(--mag-r);
	background: var(--mag-paper);
	padding: 0.3rem;
}
.mag-searchform input[type="search"] {
	flex: 1;
	border: 0;
	padding: 0.5rem 0.75rem;
	font: inherit;
	background: transparent;
	color: var(--mag-ink);
	min-width: 0;
}
.mag-searchform input[type="search"]:focus { outline: 0; }
.mag-searchform button {
	border: 0;
	background: var(--mag-accent);
	color: #fff;
	padding: 0.5rem 1.1rem;
	border-radius: calc(var(--mag-r) - 1px);
	font-weight: 500;
	transition: background var(--mag-tr);
}
.mag-searchform button:hover { background: var(--mag-accent-hover); }

/* ── 404 ──────────────────────────────────────────────────────── */
.mag-404 {
	text-align: center;
	padding: 4rem 0 5rem;
	max-width: 600px;
	margin: 0 auto;
}
.mag-404__code {
	font-family: var(--mag-font-display);
	font-weight: 700;
	font-size: clamp(5rem, 14vw, 9rem);
	line-height: 1;
	color: var(--mag-accent);
	letter-spacing: -0.04em;
	margin: 0 0 1rem;
}

/* ── Footer ───────────────────────────────────────────────────── */
.mag-footer {
	background: var(--mag-ink);
	color: rgba(255,255,255,0.85);
	padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
	margin-top: 3rem;
}
.mag-footer a { color: rgba(255,255,255,0.85); }
.mag-footer a:hover { color: #fff; }
.mag-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mag-foot-widget__title {
	font-family: var(--mag-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1rem;
}
.mag-foot-widget ul { list-style: none; margin: 0; padding: 0; }
.mag-foot-widget li + li { margin-top: 0.4rem; }
.mag-footer__bottom {
	display: flex; flex-wrap: wrap; gap: 1rem;
	justify-content: space-between;
	padding-top: 2rem;
	font-size: 0.875rem;
	color: rgba(255,255,255,0.6);
}
.mag-footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ── Search results / page ────────────────────────────────────── */
.mag-search__results { margin: 1.5rem 0 3rem; }
.mag-search__item {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--mag-rule);
}
.mag-search__title {
	font-family: var(--mag-font-display);
	font-size: 1.4rem;
	font-weight: 600;
	margin: 0 0 0.4rem;
}
.mag-search__title a { color: var(--mag-ink); }
.mag-search__title a:hover { color: var(--mag-accent); }
.mag-search__excerpt { color: var(--mag-ink-soft); margin: 0; }

/* ── Comments (jeśli włączone) ────────────────────────────────── */
.mag-comments {
	max-width: var(--mag-prose-w);
	margin: 3rem auto;
	padding-top: 2rem;
	border-top: 1px solid var(--mag-rule);
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────── */

/* Tablet < 1100px — single bez TOC sticky */
@media (max-width: 1100px) {
	.mag-article-wrap {
		grid-template-columns: minmax(0, 1fr) 220px;
	}
	.mag-toc {
		position: relative;
		grid-column: 1 / -1;
		grid-row: 1;
		max-height: none;
		top: auto;
		border-left: 0;
		border: 1px solid var(--mag-rule);
		border-radius: var(--mag-r);
		padding: 0;
		margin-bottom: 1.5rem;
		overflow: hidden;
	}
	.mag-toc__toggle { display: flex; }
	.mag-toc__list {
		max-height: 0;
		overflow: hidden;
		transition: max-height 300ms ease;
		padding: 0 1rem;
	}
	.mag-toc[data-mag-open="true"] .mag-toc__list {
		max-height: 70vh;
		padding: 0.5rem 1rem 1rem;
		overflow-y: auto;
	}
	.mag-toc[data-mag-open="true"] .mag-toc__chevron { transform: rotate(180deg); }
	.mag-toc__chevron {
		width: 12px; height: 12px;
		border-right: 2px solid var(--mag-ink);
		border-bottom: 2px solid var(--mag-ink);
		transform: rotate(45deg);
		transition: transform var(--mag-tr);
		display: inline-block;
		margin-bottom: 4px;
	}
	.mag-toc__item { padding-left: 0; margin-left: 0; border-left: 0; }
	.mag-toc__item--h3 { padding-left: 1rem; }
	.mag-toc__item--active { background: var(--mag-accent-soft); border-radius: 4px; }
	.mag-pillar .mag-article-wrap { grid-template-columns: 1fr; }
}

/* Tablet < 980px — hero kolumnowo, grid 2x2, kategorie 2-kolumnowe */
@media (max-width: 980px) {
	.mag-hero {
		grid-template-columns: 1fr;
	}
	.mag-hero__main { aspect-ratio: 16 / 10; }
	.mag-hero__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
	.mag-hero__side-item { aspect-ratio: 4 / 3; }

	.mag-grid4 { grid-template-columns: repeat(2, 1fr); }
	.mag-cats { grid-template-columns: 1fr; gap: 2.5rem; }
	.mag-recommended__list { grid-template-columns: repeat(2, 1fr); }
	.mag-archive__grid { grid-template-columns: repeat(2, 1fr); }

	.mag-article-wrap {
		grid-template-columns: 1fr;
	}
	.mag-sidebar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		margin-top: 3rem;
		padding-top: 2rem;
		border-top: 1px solid var(--mag-rule);
	}
	.mag-sidebar > * + * { margin-top: 0; }
	.mag-widget--tags { grid-column: 1 / -1; }

	.mag-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* Mobile < 700px */
@media (max-width: 700px) {
	.mag-burger { display: inline-flex; }
	.mag-nav { display: none; }
	.mag-nav.is-open {
		display: flex;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--mag-paper);
		flex-direction: column;
		padding: 1rem clamp(20px, 4vw, 40px) 1.5rem;
		border-bottom: 1px solid var(--mag-rule);
		box-shadow: var(--mag-shadow-md);
	}
	.mag-nav.is-open ul { flex-direction: column; gap: 0; width: 100%; }
	.mag-nav.is-open li { width: 100%; border-bottom: 1px solid var(--mag-rule); }
	.mag-nav.is-open li:last-child { border-bottom: 0; }
	.mag-nav.is-open a { display: block; padding: 0.85rem 0; font-size: 1rem; }
	.mag-nav.is-open a::after { display: none; }

	.mag-grid4 { grid-template-columns: 1fr; }
	.mag-cats__col .mag-card:not(:first-child) {
		grid-template-columns: 100px 1fr;
		gap: 0.75rem;
	}
	.mag-recommended__list { grid-template-columns: 1fr; }
	.mag-archive__grid { grid-template-columns: 1fr; }

	.mag-sidebar { grid-template-columns: 1fr; }
	.mag-widget--tags { grid-column: auto; }

	.mag-article__title { font-size: 1.7rem; }
	.mag-pillar .mag-article__title { font-size: 2rem; }
	.mag-pillar .mag-prose > p:first-of-type::first-letter { font-size: 3rem; }

	.mag-footer__cols { grid-template-columns: 1fr; gap: 2rem; }
	.mag-footer__bottom { flex-direction: column; gap: 0.6rem; align-items: flex-start; }

	h1 { font-size: 2rem; }
}

/* Mobile small < 420px */
@media (max-width: 420px) {
	.mag-hero__side { grid-template-columns: 1fr; }
	.mag-hero__side-item { aspect-ratio: 16 / 10; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Print */
@media print {
	.mag-header, .mag-footer, .mag-sidebar, .mag-toc, .mag-recommended, .mag-breadcrumbs { display: none !important; }
	.mag-article-wrap { grid-template-columns: 1fr; }
	body { color: #000; background: #fff; }
}