/* Super Express — własne poprawki nad oryginalnym CSS donora. */

html, body {
	background: #fff;
}

/* ---- Przełącznik desktop/mobile header + tap-bar (bez zmiany oryginalnych klas) ---- */
.header-mobile,
.tap-bar-wrap {
	display: none;
}
.header-desktop {
	display: block;
}

@media (max-width: 1023.98px) {
	.header-desktop {
		display: none;
	}
	.header-mobile {
		display: block;
	}
	.tap-bar-wrap {
		display: block;
	}
	/* miejsce na fixed tap-bar, żeby nie zasłaniał treści na dole strony */
	body {
		padding-bottom: 76px;
	}
	.tap-bar {
		position: fixed;
		/* .zpr_screening z-index z donora to 999900 — tap-bar musi być ponad tym. */
		z-index: 1000000;
	}
	/* mobile_site_header.css ustawia .site-menu na z-index:99 — poniżej .zpr_screening (999900), panel byłby niewidoczny. */
	.site-menu {
		z-index: 1000001 !important;
	}
	/* left:-50% + translateX(-50%) w oryginalnym CSS to pozycja "zamknięta" bez odpowiadającego
	   stanu "otwarta" (JS donora poza zasięgiem klonu) — przypinamy panel do lewej krawędzi. */
	.site-menu.site-menu-show {
		left: 0 !important;
		transform: none !important;
	}
	/* Pliki .../television-b1a595.svg itp. to sprity donora: viewBox 0 0 27 72 z DWIEMA
	   wersjami ikony jedna pod drugą (domyślna u góry, "aktywna" u dołu — do transform:translateY
	   po kliknięciu). Wymuszone width:24/height:24 bez object-fit ściska obie w kwadrat 24×24,
	   więc widać obie naraz jako "podwójny rząd". Przycinamy do góry (pierwsza ikona), bez zniekształceń.
	*/
	.tap-bar__icon {
		height: 24px !important;
		width: 24px !important;
		object-fit: cover;
		object-position: top;
		transform: none !important;
	}
}

/* ---- H1 kategorii/listingu — czerwony, jak u donora. Artykuł (.title h1) zostaje czarny. ---- */
.blockinfo__text h1 {
	color: var(--color-main, #ed2125);
}

/* ---- Zdjęcie leadowe artykułu ---- */
.lead-gallery {
	position: relative;
	display: block;
	margin-bottom: 24px;
	border-radius: 4px;
	overflow: hidden;
}
.lead-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Autor / data w artykule (uproszczony layout bez zdjęcia autora) ---- */
.neck.display-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}
.autor.flex.display-flex {
	display: flex;
	align-items: center;
	gap: 16px;
}
.article-authors .article-author__name {
	font-weight: 700;
}
.pub_time_date,
.pub_time_hours_minutes {
	color: #666;
	font-size: 14px;
}

/* ---- Share buttons — dekoracyjne, ikonki z SVG donora ---- */
.share-buttons {
	display: flex;
	gap: 8px;
}
.share-buttons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #f2f2f2;
	background-size: 18px 18px;
	background-repeat: no-repeat;
	background-position: center;
}
.share-buttons .fb-button {
	background-image: url(../img/article-share-facebook-design-system-17d053.svg);
}
.share-buttons .tt-button {
	background-image: url(../img/article-share-x-design-system-137cc2.svg);
}
.share-buttons .mail-button {
	background-image: url(../img/article-share-mail-design-system-a6127b.svg);
}

/* ---- Tagi pod artykułem ---- */
.tags.gl_plugin {
	display: flex;
	gap: 8px;
	margin-top: 24px;
}
.tags.gl_plugin .breadcrumb__link {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: #f2f2f2;
	color: #333;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

/* ---- Typografia treści artykułu (the_content) ---- */
.block_list__container h2 {
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	margin: 24px 0 14px;
}
.block_list__container p {
	font-size: 18px;
	line-height: 30px;
	margin-bottom: 20px;
	color: #222;
}
.block_list__container img {
	max-width: 100%;
	height: auto;
}
.block_list__container blockquote {
	border-left: 4px solid var(--color-main, #ed2125);
	padding: 8px 20px;
	margin: 20px 0;
	font-style: italic;
	color: #444;
}
.block_list__container ul,
.block_list__container ol {
	margin: 0 0 20px 24px;
}

/* ---- Realna paginacja WP: mapowanie klas page-numbers na styl donora ---- */
.paginacja li {
	list-style: none;
	display: inline-flex;
	margin: 0 4px;
}
.paginacja .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border-radius: 50%;
	text-decoration: none;
	color: var(--color-main, #1677ff);
	font-weight: 600;
}
.paginacja .page-numbers.current {
	border: 1px solid var(--color-main, #1677ff);
}
.paginacja .page-numbers.dots {
	border: 0;
}
.paginacja .page-numbers.next,
.paginacja .page-numbers.prev {
	background: var(--color-main, #1677ff);
	color: #fff;
}

/* ---- Boczna kolumna "Dzieje się" — nagłówek czerwony jak u donora ---- */
.section__v4 .section__title {
	color: var(--color-main, #ed2125);
}

/* ---- Footer: proste kolumny zamiast oryginalnego JS-owego "show-list" ---- */
.gl_plugin.footer .about ul,
.gl_plugin.footer .legal ul {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.gl_plugin.footer .about ul li,
.gl_plugin.footer .legal ul li {
	margin-bottom: 8px;
}
.gl_plugin.footer .about ul a,
.gl_plugin.footer .legal ul a {
	color: #ccc;
	text-decoration: none;
	font-size: 14px;
}
.gl_plugin.footer .about ul a:hover,
.gl_plugin.footer .legal ul a:hover {
	color: #fff;
}
.gl_plugin.footer footer {
	background: #111;
	color: #ccc;
	padding: 32px 0 0;
}
.gl_plugin.footer .legal-info p {
	color: #999;
	font-size: 12px;
	line-height: 18px;
}
.gl_plugin.footer .h3 {
	color: #fff;
	font-size: 16px;
	margin-bottom: 4px;
}
.copyright.variant2 {
	margin-top: 24px;
	padding: 16px 0;
	background: #000;
	text-align: center;
}
.copyright__text {
	color: #999;
	font-size: 12px;
}

/* ---- Brak obrazka wyróżniającego w kafelku — placeholder bez zniekształcenia ---- */
.element__media img {
	background-color: #eee;
}

/* ---- Menu boczne: przygaszenie tła pod otwartym menu (fallback gdyby brakło ::before z arkuszy donora) ---- */
body.opened-menu {
	overflow: hidden;
}