/*
 * Style wyświetlania danych pojazdu na froncie.
 *
 * Celowo BEZ ani jednej wartości koloru na sztywno — wszystko odwołuje
 * się do zmiennych CSS wystawianych przez motyw blokowy (theme.json /
 * Style Globalne: --wp--preset--color--*). To jest odpowiednik zasady ze
 * STYLEGUIDE.md ("jedno źródło prawdy dla kolorów"), tylko realizowany
 * natywnym mechanizmem motywu blokowego zamiast zmiennych z functions.php.
 * Zmiana palety (np. po dostarczeniu brandingu) w Stylach Globalnych
 * automatycznie przefarbuje też te elementy — nic tu nie trzeba będzie
 * ruszać.
 */

.fpsm-pojazd-details {
	margin: 0 0 2em;
	padding: 1.25em 1.5em;
	border: 1px solid var(--wp--preset--color--contrast-3);
	border-radius: 6px;
	background: var(--wp--preset--color--base-2);
}

.fpsm-pojazd-dane {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1em 2em;
	margin: 0;
}

.fpsm-pojazd-dane__item {
	margin: 0;
}

.fpsm-pojazd-dane__item dt {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 0.2em;
}

.fpsm-pojazd-dane__item dd {
	margin: 0;
	font-size: 1.1em;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.fpsm-pojazd-tagi {
	margin-top: 1.25em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.fpsm-tag {
	display: inline-block;
	padding: 0.3em 0.8em;
	border-radius: 999px;
	font-size: 0.85em;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast-3);
	color: var(--wp--preset--color--contrast);
}

.fpsm-tag--formacja {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--base-2));
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, var(--wp--preset--color--base-2));
	color: var(--wp--preset--color--accent);
}

.fpsm-tag--okres-uzytkowania {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, var(--wp--preset--color--base-2));
	color: var(--wp--preset--color--contrast-2);
}

/* Archiwum katalogu (szablon archive-pojazd.html) */

.fpsm-pojazdy-query .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fpsm-pojazd-card {
	box-sizing: border-box;
	height: 100%;
	border: 1px solid var(--wp--preset--color--contrast-3);
	border-radius: 6px;
	padding: 1em;
	overflow: hidden;
}

.fpsm-pojazd-card .wp-block-post-featured-image img {
	border-radius: 4px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.fpsm-pojazd-card__tagi {
	font-size: 0.85em;
	color: var(--wp--preset--color--contrast-2);
	margin: 0.5em 0;
}

/* Tagi pod tytułem karty szare, nie czerwone jak zwykłe linki — czerwień
   zostaje tylko na nazwie pojazdu (2026-10-23). */
.fpsm-pojazd-card__tagi a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}

.fpsm-pojazd-card__tagi a:hover {
	color: var(--wp--preset--color--accent);
}

/* Nazwa pojazdu na karcie: domyślny rozmiar H3 łamał dłuższe nazwy na
   2–3 linie (2026-10-23). */
.fpsm-pojazd-card .wp-block-post-title {
	font-size: 1.4rem;
	margin-top: 0.75em;
}

/* Odstępy między sekcjami strony głównej — za duże tylko na desktopie
   (na mobile skala odstępów motywu i tak jest płynna/mniejsza, zob.
   CLAUDE.md), więc zwężamy tylko od szerokiego ekranu. */
@media (min-width: 1000px) {
	.fpsm-tight-gap-desktop {
		height: 32px !important;
	}
}

/* Kafelki Aktualności na stronie głównej */

.fpsm-aktualnosci-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Formularz filtrowania (blok fpsm/pojazdy-filtry) */

.fpsm-pojazdy-filtry {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1em;
	margin: 1em 0 2em;
	padding: 1em;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, var(--wp--preset--color--base-2));
	border-radius: 6px;
}

.fpsm-pojazdy-filtry__pole {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.fpsm-pojazdy-filtry__pole label {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--contrast-2);
}

.fpsm-pojazdy-filtry select {
	padding: 0.4em 0.6em;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--contrast-3);
	min-width: 180px;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

.fpsm-pojazdy-filtry__submit {
	padding: 0.55em 1.2em;
	border-radius: 4px;
	border: none;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.fpsm-pojazdy-filtry__submit:hover {
	background: var(--wp--preset--color--contrast);
}

.fpsm-pojazdy-filtry__wyczysc {
	align-self: center;
	font-size: 0.9em;
	color: var(--wp--preset--color--accent-2);
}

/*
 * Siatki kart (katalog + Aktualności, 2026-10-22): post-template ma
 * layout "flow", który każdemu elementowi poza pierwszym dokłada
 * margin-block-start — w siatce przesuwało to 2. i 3. kartę w dół
 * względem pierwszej. Do tego karty mają wypełniać całą komórkę, żeby
 * rząd miał równą dolną krawędź.
 */
.fpsm-pojazdy-query .wp-block-post-template > li,
/* Pojedynczy wpis nie rozciąga się na całą szerokość (auto-fit dałby mu 1340px) */
.fpsm-aktualnosci-grid .wp-block-post-template:has(> li:only-child) {
	grid-template-columns: minmax(280px, 440px);
	justify-content: center;
}

.fpsm-aktualnosci-grid .wp-block-post-template > li {
	margin-block-start: 0;
	display: flex;
	flex-direction: column;
}

.fpsm-aktualnosci-grid .wp-block-post-template > li > .wp-block-group {
	box-sizing: border-box;
	flex: 1;
}