/**
 * Style tabeli rankingu ([sprzet_ranking]).
 *
 * Skalowanie oparte o CSS Container Queries — tabela reaguje na szerokość
 * WŁASNEGO KONTENERA (np. kolumny Artykułu, sidebaru), a nie szerokość
 * okna przeglądarki jak przy zwykłych media queries.
 *
 * Kolory w PEŁNI podłączone pod globalne zmienne motywu strony
 * (:root / [data-theme="dark"]) — zero twardo wpisanych kolorów.
 * Dzięki temu tabela automatycznie dopasowuje się do obu motywów bez
 * żadnego dodatkowego kodu przy przełączaniu jasny/ciemny.
 *
 * Zmienne wykorzystywane (zdefiniowane globalnie, poza tą wtyczką):
 * --bg-color, --text-color, --card-bg_1, --card-bg_2, --card-border
 * oraz nowa --accent-color (patrz wiadomość — do dopisania przez Ciebie).
 *
 * Tam, gdzie potrzebny jest WARIANT danego koloru (np. delikatniejsza
 * linia separująca albo subtelny hover), zamiast twardego rgba() użyto
 * color-mix() — miesza dowolną zmienną motywu z przezroczystością,
 * więc automatycznie daje właściwy odcień w obu motywach bez definiowania
 * dodatkowych zmiennych.
 * WAŻNE — dlaczego jest dodatkowy element .sprzet-ranking-frame:
 * Element z ustawionym container-type NIE MOŻE reagować na @container
 * odpytujące jego własną szerokość (ograniczenie wprost ze specyfikacji
 * CSS — kontener nie odpytuje samego siebie). .sprzet-ranking-wrapper
 * jest kontenerem zapytań (bez żadnego stylu wizualnego), a widoczna
 * ramka/tło/zaokrąglenie żyją na .sprzet-ranking-frame — jego potomku,
 * który może już poprawnie znikać/pojawiać się w zależności od
 * szerokości kontenera nadrzędnego.
 */

.sprzet-ranking-wrapper {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	container-type: inline-size; /* włącza container queries dla potomków */
	container-name: sprzet-ranking;
}

.sprzet-ranking-wrapper * {
	box-sizing: border-box;
}

.sprzet-ranking-frame {
	background-color: var(--card-bg_2, transparent);
	border: 1px solid var(--card-border, transparent);
	border-radius: 12px;
	overflow: hidden;
}

.sprzet-ranking {
	width: 100%;
	table-layout: fixed; /* gwarancja stałej szerokości = 100% kontenera */
	border-collapse: collapse;
	color: var(--text-color, inherit);
}

.sprzet-ranking th,
.sprzet-ranking td {
	padding:
		clamp(0.5em, 0.35em + 0.6cqw, 0.9em)
		clamp(0.6em, 0.4em + 0.6cqw, 1.1em);
	font-size: clamp(0.72rem, 0.6rem + 0.5cqw, 0.95rem);
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid color-mix(in srgb, var(--text-color, #808080) 12%, transparent);

	/* Zawijanie zamiast obcinania — nic nie ginie, wiersz po prostu
	   robi się wyższy, gdy treść nie mieści się w jednej linii. */
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

.sprzet-ranking thead th {
	font-weight: 600;
	font-size: clamp(0.66rem, 0.55rem + 0.4cqw, 0.8rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-color, inherit);
	background-color: var(--card-bg_1, transparent);
	border-bottom: 2px solid var(--accent-color, var(--card-border, currentColor));
}

.sprzet-ranking th.is-sortable {
	cursor: pointer;
	user-select: none;
	position: relative;
	padding-right: 1.8em;
	transition: background-color 0.15s ease;
}

.sprzet-ranking th.is-sortable:hover {
	background-color: color-mix(in srgb, var(--accent-color, var(--text-color, #808080)) 10%, var(--card-bg_1, transparent));
}

.sprzet-ranking th.is-sortable::after {
	content: '\2195'; /* strzałka dwukierunkowa */
	position: absolute;
	right: 0.6em;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.4;
	font-size: 0.9em;
}

.sprzet-ranking th.is-sortable[aria-sort='ascending']::after,
.sprzet-ranking th.is-sortable[aria-sort='descending']::after {
	color: var(--accent-color, currentColor);
	opacity: 1;
}

.sprzet-ranking th.is-sortable[aria-sort='ascending']::after {
	content: '\2191';
}

.sprzet-ranking th.is-sortable[aria-sort='descending']::after {
	content: '\2193';
}

/* Nazwa produktu w kolorze akcentu marki zamiast domyślnego niebieskiego
   linku przeglądarki — spójne z resztą strony, w obu motywach. */
.sprzet-ranking__col-name a {
	color: var(--accent-color, var(--text-color, inherit));
	font-weight: 500;
	text-decoration: none;
}

.sprzet-ranking__col-name a:hover,
.sprzet-ranking__col-name a:focus-visible {
	text-decoration: underline;
}

/* Kolumna zdjęcia ma stałą, wąską szerokość — reszta kolumn dzieli
   pozostałą przestrzeń między sobą równo. */
.sprzet-ranking__col-image {
	width: clamp(56px, 12cqw, 90px);
}

.sprzet-ranking__col-image img {
	display: block;
	width: clamp(36px, 9cqw, 72px);
	height: clamp(36px, 9cqw, 72px);
	object-fit: contain;
	border-radius: 6px;
	transition: transform 0.2s ease;
}

.sprzet-ranking__col-image a:hover img {
	transform: scale(1.08);
}

.sprzet-ranking tbody tr:nth-child(even) {
	background-color: var(--card-bg_1, transparent);
}

.sprzet-ranking tbody tr:hover {
	background-color: color-mix(in srgb, var(--accent-color, var(--text-color, #808080)) 8%, var(--card-bg_2, transparent));
}

.sprzet-ranking-empty {
	padding: 1em;
	font-style: italic;
	color: var(--text-color, inherit);
	opacity: 0.7;
}

/* === Wąski kontener: tabela rozkłada się w pionowe karty === */
@container sprzet-ranking (max-width: 560px) {

	.sprzet-ranking-frame {
		border: none;
		border-radius: 0;
		background-color: transparent;
	}

	.sprzet-ranking thead {
		display: none;
	}

	.sprzet-ranking,
	.sprzet-ranking tbody,
	.sprzet-ranking tr,
	.sprzet-ranking td {
		display: block;
		width: 100%;
	}

	.sprzet-ranking tbody tr {
		margin-bottom: 1em;
		border: 1px solid var(--card-border, transparent);
		border-radius: 10px;
		overflow: hidden;
		background-color: var(--card-bg_1, transparent);
	}

	.sprzet-ranking tbody tr:hover {
		background-color: var(--card-bg_1, transparent); /* hover z desktopu nie ma sensu na karcie dotykowej */
	}

	.sprzet-ranking td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1em;
		border-bottom: 1px solid color-mix(in srgb, var(--text-color, #808080) 10%, transparent);
		text-align: right;
		white-space: normal;
	}

	.sprzet-ranking td:last-child {
		border-bottom: none;
	}

	.sprzet-ranking td::before {
		content: attr(data-label);
		font-weight: 600;
		text-align: left;
		flex-shrink: 0;
		color: color-mix(in srgb, var(--text-color, #808080) 65%, transparent);
	}

	.sprzet-ranking__col-image {
		justify-content: center;
		width: 100%;
		padding-top: 1.2em;
	}

	.sprzet-ranking__col-image::before {
		content: none;
	}
}

/* === Fallback dla bardzo starych przeglądarek bez wsparcia Container Queries === */
@supports not (container-type: inline-size) {

	@media (max-width: 780px) {

		.sprzet-ranking-frame {
			border: none;
			border-radius: 0;
			background-color: transparent;
		}

		.sprzet-ranking thead {
			display: none;
		}

		.sprzet-ranking,
		.sprzet-ranking tbody,
		.sprzet-ranking tr,
		.sprzet-ranking td {
			display: block;
			width: 100%;
		}

		.sprzet-ranking tbody tr {
			margin-bottom: 1em;
			border: 1px solid var(--card-border, transparent);
			border-radius: 10px;
			overflow: hidden;
			background-color: var(--card-bg_1, transparent);
		}

		.sprzet-ranking td {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 1em;
			border-bottom: 1px solid color-mix(in srgb, var(--text-color, #808080) 10%, transparent);
			text-align: right;
			white-space: normal;
		}

		.sprzet-ranking td::before {
			content: attr(data-label);
			font-weight: 600;
			text-align: left;
			flex-shrink: 0;
			color: color-mix(in srgb, var(--text-color, #808080) 65%, transparent);
		}

		.sprzet-ranking__col-image {
			justify-content: center;
			width: 100%;
			padding-top: 1.2em;
		}

		.sprzet-ranking__col-image::before {
			content: none;
		}
	}
}