/**
 * Bloki „Polecane produkty" i „Ranking" — style frontu + podglądu w edytorze.
 *
 * Kafelek `.typ-card` ma bazowy wygląd w style.css (współdzielony ze stroną
 * główną i archiwum /typ/). Tutaj są tylko: kontenery układów (siatka,
 * karuzela), wariant kafelka z przyciskiem (`.typ-card--cta`) i drobne style
 * panelu edytora.
 */

/* ============================================================================
   Kontener bloku
   ============================================================================ */

.fa-prods {
	/* Szerokość karty = jeden tor siatki 3-kolumnowej. Trzymamy ją w zmiennej,
	   bo używają jej wszystkie układy (siatka, karuzela, pojedyncza karta) —
	   dzięki temu 1, 2, 3 i 4+ kart ma dokładnie tę samą szerokość. Wzór zamiast
	   sztywnej liczby, żeby nadążał za szerokością kolumny z treścią. */
	--fa-card-w: calc((100% - 2 * 18px) / 3);

	margin: 32px 0;
	font-family: var(--sans);
}

.fa-prods__empty {
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--border-dark);
	border-radius: 12px;
	color: var(--text-secondary);
	text-align: center;
	font-family: var(--sans);
}

/* ============================================================================
   Układ: siatka
   ============================================================================ */

/* Tory mają stałą szerokość (nie 1fr), więc dwie karty nie rozpychają się na pół
   kolumny — zostają takie jak przy trzech, a nadmiar miejsca idzie na marginesy. */
.fa-prods--grid {
	display: grid;
	grid-template-columns: repeat(var(--fa-prods-cols, 3), var(--fa-card-w));
	justify-content: center;
	gap: 18px;
}

/* Węższe ekrany zmieniają liczbę kolumn, więc tor liczy się inaczej. Nie ruszamy
   tu `--fa-card-w` — karuzela ma zostać przy kanonicznej szerokości karty.
   (Odpowiedniki dla pojedynczej karty są w jej sekcji, bo muszą stać PO regule
   bazowej — przy równej specyficzności decyduje kolejność w pliku.) */
@media (max-width: 900px) {
	.fa-prods--grid {
		grid-template-columns: repeat(2, calc((100% - 18px) / 2));
	}
}

@media (max-width: 560px) {
	.fa-prods--grid {
		grid-template-columns: 100%;
	}

	/* Od 3 kart jedna kolumna robi się długą pionową listą — na telefonie lepiej
	 * czyta się poziomy swipe. To ten sam scroller co `.fa-prods__track` (patrz
	 * sekcja KARUZELA); strzałek nie ma, bo poniżej 782px i tak są ukryte. */
	.fa-prods--grid.fa-prods--swipe-sm {
		display: flex;
		/* Zdejmujemy centrowanie z reguły siatki — w przewijanym kontenerze
		   wyśrodkowana zawartość potrafi obciąć dostęp do pierwszych kart. */
		justify-content: flex-start;
		gap: 18px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding: 4px 4px 14px;
		scrollbar-width: thin;
		scrollbar-color: var(--border-dark) transparent;
	}

	.fa-prods--grid.fa-prods--swipe-sm > .typ-card {
		flex: 0 0 auto;
		width: 220px;
		scroll-snap-align: start;
	}
}

/* ============================================================================
   Układ: karuzela
   ============================================================================ */

.fa-prods--carousel {
	position: relative;
}

.fa-prods__track {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 4px 4px 14px;
	/* Firefox; WebKit niżej. */
	scrollbar-width: thin;
	scrollbar-color: var(--border-dark) transparent;
}

.fa-prods__track:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 12px;
}

.fa-prods__track::-webkit-scrollbar {
	height: 6px;
}

.fa-prods__track::-webkit-scrollbar-track {
	background: var(--bg-alt);
	border-radius: 3px;
}

.fa-prods__track::-webkit-scrollbar-thumb {
	background: var(--border-dark);
	border-radius: 3px;
}

.fa-prods__track > .typ-card {
	flex: 0 0 auto;
	width: var(--fa-card-w);
	scroll-snap-align: start;
}

/* Strzałki — pokazywane przez JS dopiero gdy jest co przewijać. */
.fa-prods__nav {
	position: absolute;
	top: calc(50% - 24px);
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--bg-card);
	color: var(--text-primary);
	box-shadow: 0 4px 14px rgba(17, 24, 39, 0.12);
	cursor: pointer;
	transition: background 150ms var(--ease-std), border-color 150ms var(--ease-std), opacity 150ms var(--ease-std);
}

.fa-prods__nav:hover:not(:disabled) {
	background: var(--bg-alt);
	border-color: var(--border-dark);
}

.fa-prods__nav:disabled {
	opacity: 0;
	pointer-events: none;
}

.fa-prods__nav[hidden] {
	display: none;
}

.fa-prods__nav--prev {
	left: -18px;
}

.fa-prods__nav--next {
	right: -18px;
}

/* Na wąskich ekranach zostaje sam swipe — strzałki zabierałyby miejsce kartom. */
@media (max-width: 782px) {
	.fa-prods__nav {
		display: none;
	}

	.fa-prods__track > .typ-card {
		width: 220px;
	}
}

/* ============================================================================
   Kafelek z przyciskiem (blok w treści — bez stretched linku)
   ============================================================================ */

/* Uwaga na specyficzność: treść wpisu ma `.single-entry-content a` (0,1,1),
   które nadpisałoby kolor i podkreślenie zwykłej klasy (0,1,0). Wszystkie
   linki bloku kwalifikujemy więc `.fa-prods a.klasa` (0,2,1). */

.typ-card--cta .typ-card__photo {
	display: flex;
}

/* Wyrównanie rzędów między sąsiednimi kartami.
 *
 * Na listingach cena ma `margin-top: auto` (style.css) i dosuwa się do dołu
 * kafelka. W bloku karty stoją obok siebie i rozciągają się do wspólnej
 * wysokości, więc to samo `auto` wypycha wolne miejsce na ŚRODEK karty, a
 * przyciski sąsiednich kart lądują na różnych wysokościach — widać to zwłaszcza
 * gdy jeden produkt ma link do opinii, a drugi nie.
 *
 * Tutaj treść płynie od góry, a nadmiar miejsca zostaje na dole karty. Żeby to
 * zadziałało, rzędy nad przyciskiem muszą mieć równą wysokość — stąd rezerwacja
 * dwóch linii na nazwę (nazwy modeli raz mieszczą się w jednej, raz w dwóch).
 * Rezerwacja dotyczy tylko układów wielokartowych; pojedyncza karta nie ma
 * z czym się równać, więc nie nosiłaby pustej linii bez powodu.
 */
/* Box w treści jest gęstszy od kafelka na listingu: bez rzędu z oceną zostały
   trzy elementy, więc odstępy z listingu (gap 8px + własny padding ceny)
   robiły się za duże. Tło białe jak w części ze zdjęciem — cała karta jest
   jednolita, bez podziału na jaśniejszą górę i szarą stopkę. */
.fa-prods .typ-card__body {
	gap: 6px;
	background: var(--bg-card);
}

.fa-prods .typ-card--cta .typ-card__price {
	margin-top: 0;
	padding-top: 0;
}

.fa-prods--grid .typ-card__name,
.fa-prods__track .typ-card__name {
	min-height: calc(2 * 1.35em);
}

.fa-prods .typ-card__name a {
	color: inherit;
	text-decoration: none;
}

.fa-prods .typ-card__name a:hover {
	text-decoration: underline;
}

.typ-card__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin-top: 12px;
}

.fa-prods a.typ-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 16px;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 150ms var(--ease-std);
}

.fa-prods a.typ-card__cta:hover,
.fa-prods a.typ-card__cta:focus {
	background: var(--accent-dark);
	color: #fff;
	text-decoration: none;
}

.fa-prods a.typ-card__more {
	font-size: 13px;
	color: var(--text-secondary);
	text-align: center;
	text-decoration: underline;
	text-decoration-color: currentColor;
}

.fa-prods a.typ-card__more:hover {
	color: var(--text-primary);
	text-decoration-color: currentColor;
}

/* ============================================================================
   Układ: pojedyncza karta
   ============================================================================ */

/* Ten sam kafelek co w siatce i karuzeli — różni się tylko tym, że nie rozciąga
   się na całą szerokość kolumny z treścią. */
.fa-prods--single {
	display: flex;
	justify-content: center;
}

.fa-prods--single > .typ-card {
	width: 100%;
	max-width: var(--fa-card-w);
}

/* Te same progi co przy siatce — karta trzyma szerokość jednego toru. */
@media (max-width: 900px) {
	.fa-prods--single > .typ-card {
		max-width: calc((100% - 18px) / 2);
	}
}

@media (max-width: 560px) {
	.fa-prods--single > .typ-card {
		max-width: 100%;
	}
}

/* ============================================================================
   Panel edytora (lista wybranych produktów, pasek nad podglądem)
   ============================================================================ */

.fa-prods-editbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 6px 10px;
	border-radius: 4px;
	background: #f0f0f0;
	color: #1e1e1e;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.fa-prods-chosen {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.fa-prods-chosen__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-top: 1px solid #e0e0e0;
}

.fa-prods-chosen__thumb {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}

.fa-prods-chosen__thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.fa-prods-chosen__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.fa-prods-chosen__name {
	font-size: 12px;
	line-height: 1.3;
}

.fa-prods-chosen__warn {
	font-size: 11px;
	line-height: 1.3;
	color: #bd8600;
}

.fa-prods-chosen__tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}