/*
Theme Name: Ranking Podlasia
Theme URI: https://ranking.podlaskie.news/
Description: Motyw katalogu firm z Podlasia. Wyglad aplikacji biznesowej: typografia systemowa, gestosc zamiast przestrzeni, promien 3 px, ramki zamiast cieni, filtry nad lista wynikow. Kolory z portalu podlaskie.news. Dwa warianty kolorystyczne do wyboru w Dostosuj. Dane, filtry, rezerwacje i logika rankingu siedza we wtyczce ranking-core.
Author: Mamy Strategie Sp. z o.o.
Author URI: https://mamystrategie.pl
Version: 0.5.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: ranking
*/

/* ==========================================================================
   Zalozenia

   Punkt odniesienia: dzialajacy serwis ogloszeniowy, nie makieta i nie
   gazeta. Gestosc zamiast przestrzeni, font systemowy, promien 3 px,
   ramka 1 px zamiast cienia, filtry nad lista, licznik wynikow.
   Kolor niesie znaczenie, nie dekoruje.

   Paleta z portalu macierzystego podlaskie.news: niebieski #2484c5
   wziety wprost z jego arkusza. Wariant B to ten sam niebieski
   na granatowych paskach - do wyboru w Wyglad > Dostosuj.

   Serwis jest ZAWSZE jasny. Nie ma reguly prefers-color-scheme i nie ma
   jej wracac: katalog ze zdjeciami na ciemnym tle wyglada inaczej
   u kazdego czytelnika zaleznie od ustawien systemu, a firmy placa
   za wyglad swojej wizytowki, nie za loterie.
   ========================================================================== */

:root {
	--tekst: #1d2024;
	--przygas: #4d535b;
	--slabo: #767d86;
	--ramka: #e1e4e8;
	--ramka-mocna: #c4c9cf;
	--tlo: #fff;
	--tlo-przyg: #f4f6f8;
	--tlo-strony: #eef1f4;
	--ciemny: #1b232e;          /* przyciski i paski */
	--ciemny-hover: #2b3545;
	--zielen: #2484c5;          /* niebieski portalu, w roli akcentu */
	--zielen-ciemna: #1b6697;
	--ocena-tlo: #2484c5;
	--hero-tlo: #1b232e;
	--promien: 3px;             /* 2-3 px czyta sie jak narzedzie, 12 px jak makieta */
	--szer: 1440px;
	--odstep: clamp(14px, 2.4vw, 22px);
	--font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Wariant B: ten sam niebieski, granatowe paski zamiast grafitowych. */
body.wariant-b {
	--tekst: #16202e;
	--przygas: #45515f;
	--slabo: #6d7988;
	--ramka: #dde3ea;
	--ramka-mocna: #bac3ce;
	--tlo-przyg: #f2f6fa;
	--tlo-strony: #eaeff5;
	--ocena-tlo: #14385c;
	--hero-tlo: #14385c;
}

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

body {
	margin: 0;
	font-family: var(--font);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--tekst);
	/* Jasnoszare tlo, biale karty. Na calkiem bialej stronie karty
	   znikaly i wszystko zlewalo sie w jedna plachte. */
	background: var(--tlo-strony);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 10px;
	letter-spacing: -0.005em;
}

h1 { font-size: clamp(20px, 1.9vw, 24px); }
h2 { font-size: 16px; }
h3 { font-size: 14.5px; }

a { color: var(--tekst); }
a:hover { color: var(--zielen-ciemna); }

img { max-width: 100%; height: auto; }

.owijka {
	max-width: var(--szer);
	margin: 0 auto;
	padding: 0 var(--odstep);
}

.pomin { position: absolute; left: -9999px; }

.pomin:focus {
	left: 12px;
	top: 12px;
	z-index: 100;
	background: var(--ciemny);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--promien);
}

:focus-visible {
	outline: 2px solid var(--zielen);
	outline-offset: 2px;
}

/* ==========================================================================
   Naglowek
   ========================================================================== */

.naglowek {
	border-bottom: 1px solid var(--ramka);
	background: var(--tlo);
	position: sticky;
	top: 0;
	z-index: 40;
}

.naglowek-rzad {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 64px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}

.logo-znak { fill: var(--ciemny); flex: none; }
.logo-znak rect:last-child { fill: var(--zielen); }

.logo-napis {
	font-size: 17px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--tekst);
	white-space: nowrap;
}

.logo-napis b { font-weight: 700; }

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

.menu a {
	display: block;
	padding: 4px 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tekst);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.menu a:hover,
.menu .current-menu-item > a { border-bottom-color: var(--zielen); }

.naglowek-rozwijane {
	display: contents;    /* na szerokim ekranie panel nie istnieje jako pudelko */
}

.naglowek-akcje {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.menu-przycisk { display: none; }
.naglowek-cta { margin-left: 10px; }

/* ==========================================================================
   Przyciski
   ========================================================================== */

.przycisk {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--tekst);
	background: var(--tlo);
	border: 1px solid var(--ramka-mocna);
	border-radius: var(--promien);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* Przycisk po najechaniu wypelnia sie kolorem #1b232e, nie niebieskim.
   Niebieski zostaje dla odnosnikow w tekscie. */
.przycisk:hover {
	color: #fff;
	background: var(--ciemny);
	border-color: var(--ciemny);
}

.przycisk-glowny {
	color: #fff;
	background: var(--ciemny);
	border-color: var(--ciemny);
}

.przycisk-glowny:hover {
	color: #fff;
	background: var(--ciemny-hover);
	border-color: var(--ciemny-hover);
}

/* ==========================================================================
   Tresc
   ========================================================================== */

.tresc { padding: 18px 0 56px; }

.okruszki {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--slabo);
}

.okruszki ol {
	list-style: none;        /* bez tego przegladarka numeruje kroki sciezki */
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.okruszki li + li::before {
	content: "\203A";
	padding: 0 7px;
	color: var(--ramka-mocna);
}

.okruszki a { color: var(--slabo); text-decoration: none; }
.okruszki a:hover { color: var(--tekst); text-decoration: underline; }
.okruszki [aria-current="page"] { color: var(--tekst); }

.strona { max-width: 1100px; }
.strona > h1 { margin-bottom: 14px; }

/* Narzedzie to nie tekst do czytania, wiec nie obowiazuje go limit
   dlugosci wiersza z .wpis-tresc. */
.strona-narzedzie .wpis-tresc { max-width: none; }

.wpis-tresc { max-width: 70ch; font-size: 15px; line-height: 1.6; }
.wpis-tresc p { margin: 0 0 1.1em; }

.wpis-meta {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--slabo);
}

.opis-kategorii {
	margin: 0 0 18px;
	font-size: 14.5px;
	color: var(--przygas);
	max-width: 80ch;
}

.dwie-kolumny {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	align-items: start;
}

/* ==========================================================================
   Naglowek strony glownej

   Zdjecie w tle, pod nim zaslona, na wierzchu tekst i wyszukiwarka.
   Zaslona nie jest ozdoba: bialy tekst na zdjeciu bez niej ma kontrast
   zalezny od tego, co akurat jest na fotografii.
   ========================================================================== */

.hero {
	position: relative;
	/* Blok zostaje w kontenerze. Pelna szerokosc okna wymagalaby 100vw,
	   a 100vw liczy sie razem z paskiem przewijania - na Windowsie
	   dawalo to kilkanascie pikseli poziomego suwaka. */
	margin: 0 0 18px;
	border-radius: var(--promien);
	background-size: cover;
	background-position: center 60%;
	background-repeat: no-repeat;
	overflow: hidden;
}

.hero-zaslona {
	position: absolute;
	inset: 0;
	border-radius: var(--promien);
	background: linear-gradient(90deg,
		rgba(10, 13, 16, .92) 0%,
		rgba(10, 13, 16, .80) 46%,
		rgba(10, 13, 16, .42) 100%);
}

.hero-tresc {
	position: relative;
	padding: 36px 32px 32px;
	color: #fff;
}

.hero-nad {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.hero h1 {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(24px, 2.6vw, 32px);
	letter-spacing: -0.02em;
}

.hero-lid {
	margin: 0 0 22px;
	max-width: 58ch;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .85);
}

.hero-szukaj {
	display: grid;
	grid-template-columns: 1.3fr 1.1fr .8fr auto;
	gap: 10px;
	align-items: end;
	max-width: 900px;
	background: var(--tlo);
	border-radius: var(--promien);
	padding: 14px 16px;
}

.hero-pole {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hero-pole > span {
	font-size: 12px;
	font-weight: 600;
	color: var(--slabo);
}

.hero-pole select {
	width: 100%;
	height: 40px;
	padding: 0 10px;
	font: inherit;
	font-size: 14px;
	color: var(--tekst);
	background: var(--tlo);
	border: 1px solid var(--ramka-mocna);
	border-radius: var(--promien);
}

.hero-szukaj button {
	height: 40px;
	padding: 0 28px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--ciemny);
	border: 1px solid var(--ciemny);
	border-radius: var(--promien);
	cursor: pointer;
}

.hero-szukaj button:hover { background: var(--ciemny-hover); border-color: var(--ciemny-hover); }

.hero-liczby {
	margin: 18px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
	font-size: 13px;
	color: rgba(255, 255, 255, .72);
}

.hero-liczby strong { color: #fff; font-size: 15px; }

.hero-podpis {
	position: absolute;
	right: 10px;
	bottom: 6px;
	margin: 0;
	font-size: 10.5px;
	color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   Uklad katalogu: filtry nad lista, wyniki szeroko, kolumna pomocnicza
   ========================================================================== */

.uklad-katalog {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
}

.uklad-wyniki { min-width: 0; }
.uklad-dodatki { min-width: 0; }
.uklad-dodatki > * { margin-bottom: 12px; }

.dzial {
	margin-bottom: 18px;
	background: var(--tlo);
	border: 1px solid var(--ramka);
	border-radius: var(--promien);
	padding: 16px 18px 18px;
}

.dzial > h2 { margin: 0 0 12px; font-size: 16px; }

/* ==========================================================================
   Kolumna pomocnicza
   ========================================================================== */

.panel {
	border: 1px solid var(--ramka);
	border-radius: var(--promien);
	padding: 14px 16px;
	margin-bottom: 12px;
	background: var(--tlo);
}

.panel h2 {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
}

.panel ul { list-style: none; margin: 0; padding: 0; }

.panel > ul > li {
	border-top: 1px solid var(--ramka);
	padding: 7px 0;
	font-size: 13.5px;
	line-height: 1.4;
}

.panel > ul > li:first-child { border-top: 0; padding-top: 0; }
.panel > ul > li > a { color: var(--tekst); text-decoration: none; font-weight: 500; }
.panel > ul > li > a:hover { color: var(--zielen-ciemna); }

/* ==========================================================================
   Kategorie i miasta
   ========================================================================== */

.kafle {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kafel a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--ramka);
	border-radius: var(--promien);
	color: var(--tekst);
	text-decoration: none;
	background: var(--tlo);
}

.kafel a:hover { border-color: var(--ciemny); }

.kafel-nazwa { font-weight: 600; font-size: 14px; }

.kafel-ile {
	font-size: 12.5px;
	color: var(--slabo);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* W kolumnie pomocniczej kategorie sa lista, nie siatka pudelek. */
.kafle-waskie { grid-template-columns: 1fr; gap: 0; }

.kafle-waskie .kafel a {
	border: 0;
	border-bottom: 1px solid var(--ramka);
	border-radius: 0;
	padding: 7px 0;
	background: transparent;
}

.kafle-waskie .kafel:last-child a { border-bottom: 0; }
.kafle-waskie .kafel a:hover { color: var(--zielen-ciemna); }

/* ==========================================================================
   Wyszukiwarka
   ========================================================================== */

.szukaj { display: flex; gap: 8px; }

.szukaj input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: var(--tekst);
	background: var(--tlo);
	border: 1px solid var(--ramka-mocna);
	border-radius: var(--promien);
}

.szukaj button {
	padding: 10px 20px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	background: var(--ciemny);
	border: 1px solid var(--ciemny);
	border-radius: var(--promien);
	cursor: pointer;
}

.szukaj button:hover { background: var(--ciemny-hover); border-color: var(--ciemny-hover); }

.szukaj-blok { max-width: 560px; margin-bottom: 18px; }

/* ==========================================================================
   Lista wpisow (blog, wyszukiwanie)
   ========================================================================== */

.wpis-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.wpis-karta {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 14px;
	padding: 12px;
	border: 1px solid var(--ramka);
	border-radius: var(--promien);
	background: var(--tlo);
}

.wpis-karta img {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: var(--promien);
}

.wpis-karta h2 { font-size: 16px; margin: 0 0 5px; }
.wpis-karta h2 a { color: var(--tekst); text-decoration: none; }
.wpis-karta h2 a:hover { color: var(--zielen-ciemna); }
.wpis-karta p { margin: 0; color: var(--przygas); font-size: 13.5px; }

.etykieta {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11.5px;
	font-weight: 700;
	color: #fff;
	background: var(--zielen);
	border-radius: var(--promien);
}

/* ==========================================================================
   Wizytowka firmy
   ========================================================================== */

.firma-naglowek {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 28px;
	margin-bottom: 24px;
	align-items: start;
}

.firma-foto { margin-bottom: 16px; }

.firma-foto img {
	display: block;
	width: 100%;
	border-radius: var(--promien);
}

/* Lista dwukolumnowa: nazwa pola po lewej, wartosc po prawej.
   Etykiety sa zwyklym tekstem - kolorowa plakietka przy kazdym wierszu
   robilaby z danych kontaktowych choinke. */
.dane-firmy {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
}

.dane-firmy li {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 10px;
	padding: 7px 0;
	border-top: 1px solid var(--ramka);
}

.dane-firmy li:first-child { border-top: 0; padding-top: 0; }

.dane-etykieta { font-size: 12.5px; color: var(--slabo); }

/* ==========================================================================
   Strony wynikow
   ========================================================================== */

.strony {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13.5px;
}

.strony .page-numbers {
	display: block;
	min-width: 36px;
	text-align: center;
	padding: 7px 11px;
	border: 1px solid var(--ramka-mocna);
	border-radius: var(--promien);
	color: var(--tekst);
	text-decoration: none;
}

.strony .page-numbers:hover { border-color: var(--tekst); }

.strony .current {
	color: #fff;
	background: var(--ciemny);
	border-color: var(--ciemny);
}

/* ==========================================================================
   Stopka
   ========================================================================== */

.stopka {
	margin-top: 36px;
	border-top: 1px solid var(--ramka);
	background: var(--tlo);
	font-size: 13px;
	color: var(--przygas);
}

.stopka-rzad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 32px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.stopka-wydawca {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 62ch;
}

.stopka-wydawca .logo-znak { flex: none; margin-top: 1px; }
.stopka-wydawca p { margin: 0; line-height: 1.6; }
.stopka-wydawca strong { color: var(--tekst); font-weight: 600; }

.stopka a { color: var(--przygas); text-decoration: underline; }
.stopka a:hover { color: var(--tekst); }

.stopka-nawigacja {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}

.stopka-nawigacja a { text-decoration: none; }
.stopka-nawigacja a:hover { text-decoration: underline; }

/* Nota prawna na ciemnym pasku: jedno zdanie, nie trzy akapity.
   Informacja o platnych pozycjach ma byc widoczna, ale nie musi
   zajmowac pol ekranu. */
.stopka-pasek {
	background: var(--ciemny);
	color: rgba(255, 255, 255, .72);
	padding: 10px 0;
	font-size: 12px;
}

.stopka-pasek p { margin: 0; line-height: 1.6; }
.stopka-pasek a { color: rgba(255, 255, 255, .85); }
.stopka-pasek span { margin-left: 10px; color: rgba(255, 255, 255, .5); }

/* ==========================================================================
   Wezsze ekrany
   ========================================================================== */

@media (max-width: 1000px) {
	.dwie-kolumny,
	.firma-naglowek { grid-template-columns: 1fr; }
}

/* Na waskim ekranie najpierw wyniki, kolumna pomocnicza na koniec. */
@media (max-width: 980px) {
	.uklad-katalog {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.uklad-wyniki { order: 1; }
	.uklad-dodatki { order: 2; }
}

@media (max-width: 860px) {
	.hero-szukaj { grid-template-columns: 1fr 1fr; }
	.hero-szukaj button { grid-column: 1 / -1; }
	.hero-zaslona { background: rgba(10, 13, 16, .84); }

	.naglowek { position: static; }

	.naglowek-rzad {
		flex-wrap: nowrap;
		gap: 10px;
		min-height: 56px;
		padding: 8px 0;
	}

	.logo-napis { font-size: 15.5px; }
	.logo-znak { width: 22px; height: 22px; }

	/* Hamburger. Nie ikonka z czcionki, tylko trzy kreski z pseudoelementow -
	   zawsze sie narysuja i nie wymagaja dodatkowego pobrania. */
	.menu-przycisk {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-left: auto;
		padding: 8px 12px;
		min-height: 40px;
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		color: var(--tekst);
		background: var(--tlo);
		border: 1px solid var(--ramka-mocna);
		border-radius: var(--promien);
		cursor: pointer;
	}

	.menu-kreski,
	.menu-kreski::before,
	.menu-kreski::after {
		display: block;
		width: 16px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}

	.menu-kreski {
		position: relative;
	}

	.menu-kreski::before,
	.menu-kreski::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.menu-kreski::before { top: -5px; }
	.menu-kreski::after { top: 5px; }

	[aria-expanded="true"] .menu-kreski { background: transparent; }
	[aria-expanded="true"] .menu-kreski::before { top: 0; transform: rotate(45deg); }
	[aria-expanded="true"] .menu-kreski::after { top: 0; transform: rotate(-45deg); }

	/* Panel z menu. Dopoki JavaScript nie oznaczy strony jako obslugiwanej,
	   panel jest po prostu widoczny pod naglowkiem. */
	.naglowek-rozwijane {
		display: block;
		order: 4;
		flex: 1 0 100%;
		margin: 0 calc(-1 * var(--odstep));
		padding: 0 var(--odstep);
		border-top: 1px solid var(--ramka);
	}

	.menu-zwijane .naglowek-rozwijane { display: none; }
	.menu-zwijane .naglowek-rozwijane.otwarte { display: block; }

	.naglowek-rzad { flex-wrap: wrap; }

	/* Odnosniki na calej szerokosci, wysokie na tyle, zeby trafic palcem. */
	.naglowek-rozwijane .menu {
		flex-direction: column;
		gap: 0;
		padding: 4px 0;
	}

	.naglowek-rozwijane .menu a {
		padding: 12px 0;
		font-size: 15px;
		border-bottom: 1px solid var(--ramka);
		border-top: 0;
	}

	.naglowek-rozwijane .menu li:last-child a { border-bottom: 0; }

	.naglowek-rozwijane .menu a:hover,
	.naglowek-rozwijane .menu .current-menu-item > a {
		color: var(--zielen-ciemna);
		border-bottom-color: var(--ramka);
	}

	.naglowek-rozwijane .naglowek-akcje {
		margin: 10px 0 14px;
		gap: 8px;
	}

	.naglowek-rozwijane .przycisk {
		flex: 1;
		justify-content: center;
		min-height: 42px;
	}

	.naglowek-cta {
		margin-left: 0;
		min-height: 40px;
		padding: 8px 14px;
		font-size: 13px;
	}

	/* Stopka na telefonie: wydawca, pod nim menu w dwoch kolumnach.
	   Jeden rzad z justify-content: space-between zostawial odnosniki
	   przyklejone do prawej krawedzi i rozrzucone po calej szerokosci. */
	.stopka-rzad {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.stopka-wydawca { max-width: none; }

	.stopka-nawigacja {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		border-top: 1px solid var(--ramka);
	}

	.stopka-nawigacja a {
		padding: 11px 0;
		border-bottom: 1px solid var(--ramka);
		font-size: 13.5px;
	}

	/* Nieparzysta liczba pozycji zostawia dziure w ostatnim rzedzie -
	   ostatni odnosnik rozciaga sie wtedy na obie kolumny. */
	.stopka-nawigacja a:last-child:nth-child(odd) { grid-column: 1 / -1; }

	.stopka-pasek { padding: 12px 0; }
	.stopka-pasek p { font-size: 11.5px; }
	.stopka-pasek span { display: block; margin: 6px 0 0; }
}

@media (max-width: 680px) {
	.wpis-karta { grid-template-columns: 1fr; }
	.wpis-karta img { height: 170px; }
}

@media (max-width: 520px) {
	.hero-szukaj { grid-template-columns: 1fr; }
	.hero-tresc { padding: 26px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* Wylogowanie to akcja drugiego rzedu - bez ramki, zeby nie konkurowala
   z panelem i zgloszeniem firmy. */
.przycisk-cichy {
	border-color: transparent;
	color: var(--slabo);
	padding-left: 8px;
	padding-right: 8px;
}

.przycisk-cichy:hover { border-color: var(--ramka-mocna); color: var(--tekst); }

/* Panel firmy zajmuje cala szerokosc kontenera. Wlasny naglowek H1
   jest w srodku panelu, wiec szablon go nie powtarza. */
.strona-panel { max-width: none; }