/* =====================================================================
 * Sekcja "Popularne przedmioty i lokalizacje" (strona główna).
 *
 * Tokeny designu (--brand-500, --radius-pill itd.) definiuje
 * style/payment_checkout_tokens.css, ale ten arkusz NIE jest ładowany na
 * stronie głównej — ustawia globalnie html/body/a (m.in. podkreślenie
 * wszystkich linków), co rozjechałoby resztę serwisu. Dlatego każdy token
 * ma tu fallback: var(--token, wartosc). Jeśli arkusz tokenów kiedyś stanie
 * się globalny, sekcja przejmie rebrand bez żadnej zmiany w tym pliku.
 *
 * Wszystko pod prefiksem .hp- — zero kolizji z main.css.
 * ===================================================================== */

/* Bez wlasnego max-width — sekcja idzie na pelna szerokosc .main-container
   z main.css (1170 px powyzej 1360, 900 ponizej, 660 ponizej 992). Makieta
   zakladala 1080 px, ale wtedy sekcja bylaby wezsza niz reszta strony glownej,
   a kolumnie miast brakowalo miejsca. */
.hp-pop {
	margin: 0 auto 60px;
	padding: 0 15px;
	text-align: left;
}

/* ------------------------------ nagłówek ------------------------------ */

/* Nagłówek i lead jadą na .section-heading z main.css — ten sam krój, rozmiar
   i odstępy co pozostałe sekcje strony głównej. Własny jest tylko akcent,
   wstawiony między h2 a p (p ma już margin-top 15px z main.css). */

.hp-accent {
	display: block;
	width: 44px;
	height: 4px;
	margin: 14px auto 0;
	background: var(--brand-500, #2db994);
	border-radius: var(--radius-sm, 4px);
}

/* ------------------------------ zakładki ------------------------------ */

.hp-tabs-outer { position: relative; margin-bottom: var(--space-6, 24px); }

.hp-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2, 8px);
}

.hp-tab {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 9px 18px;
	font-family: inherit;
	font-size: var(--fs-sm, 14px);
	line-height: 1.4;
	font-weight: var(--fw-medium, 500);
	color: var(--text-primary, #161e1c);
	background: var(--bg-surface, #fff);
	border: 1px solid var(--border-subtle, #e2e7e5);
	border-radius: var(--radius-pill, 999px);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)),
	            border-color var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)),
	            color var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.hp-tab:hover { border-color: var(--border-default, #c8d0ce); }

.hp-tab:focus-visible {
	outline: 0;
	box-shadow: var(--shadow-focus, 0 0 0 3px rgba(45, 185, 148, 0.30));
}

.hp-tab.is-active {
	background: var(--brand-500, #2db994);
	border-color: var(--brand-500, #2db994);
	color: var(--text-on-brand, #fff);
}

/* ------------------------------- karta -------------------------------- */

.hp-card {
	display: flex;
	align-items: stretch;
	background: var(--bg-surface, #fff);
	border: 1px solid var(--border-subtle, #e2e7e5);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(14, 20, 19, 0.06), 0 1px 2px rgba(14, 20, 19, 0.04));
	padding: var(--space-6, 24px);
	gap: var(--space-6, 24px);
}

/* Powyżej 1360 px .main-container rośnie do 1170 — jest z czego dać oddech. */
@media (min-width: 1361px) {
	.hp-card { padding: var(--space-8, 32px); gap: var(--space-8, 32px); }
}

.hp-col { display: flex; flex-direction: column; min-width: 0; }

.hp-col-subjects { flex: 1 1 auto; }

/* Szerokość kolumny miast idzie za szerokością .main-container, żeby lewy panel
   został treścią dominującą na każdym progu:
     ≥1361 px  container 1170 → 400 px miast, ~609 px przedmiotów
     992–1360  container  900 → 360 px miast, ~413 px przedmiotów
   300 px z makiety było za ciasne — dwie kolumny muszą pomieścić nazwę razem
   z liczbą ("Bydgoszcz (2824)"), a przy 134 px na kolumnę zbijały się w ciąg. */
.hp-col-cities {
	flex: 0 0 360px;
	padding-left: var(--space-6, 24px);
	border-left: 1px solid var(--border-subtle, #e2e7e5);
}

@media (min-width: 1361px) {
	.hp-col-cities { flex-basis: 400px; padding-left: var(--space-8, 32px); }
}

.hp-list-cities { column-gap: var(--space-5, 20px); }

.hp-col-label {
	margin: 0 0 var(--space-4, 16px);
	font-size: var(--fs-xs, 12px);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide, 0.04em);
	font-weight: var(--fw-semibold, 600);
	color: var(--text-tertiary, #7c8886);
}

/* Panel nieaktywnej zakładki zostaje w DOM (atrybut hidden) — linki widzą roboty.
   [hidden] bywa nadpisane przez display:flex, więc wymuszamy je jawnie. */
.hp-panel[hidden] { display: none !important; }
.hp-panel { animation: hp-fade var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)); }

@keyframes hp-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.hp-panel { animation: none; }
	.hp-tab { transition: none; }
}

/* -------------------------------- listy ------------------------------- */

.hp-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px var(--space-8, 32px);
	margin: 0 0 var(--space-5, 20px);
	padding: 0;
	list-style: none;
}

/* Kolejność czytania w dwóch kolumnach jest wierszami (1|2 / 3|4) — zgodnie
   z makietą, gdzie najpopularniejszy przedmiot stoi w lewym górnym rogu. */
.hp-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3, 12px);
	padding: 7px 0;
	min-height: 30px;
}

/* Rozmiar i grubość ustawiamy jawnie — na stronie głównej li/a dziedziczą
   po body (bootstrap: 14px), przez co nazwy wychodziły mniejsze od liczb. */
.hp-link {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--text-primary, #384047);
	text-decoration: none;
	transition: color var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.hp-link:hover,
.hp-link:focus { color: var(--text-link-hover, #25a282); text-decoration: none; }

.hp-count {
	flex: 0 0 auto;
	font-size: var(--fs-sm, 14px);
	color: var(--text-tertiary, #7c8886);
}

/* --------------------------------- CTA -------------------------------- */

.hp-col-subjects .hp-cta { margin-top: auto; }

.hp-cta {
	display: inline-block;
	font-size: var(--fs-sm, 14px);
	font-weight: var(--fw-semibold, 600);
	color: var(--text-link, #1d8a6e);
	text-decoration: none;
}

.hp-cta:hover, .hp-cta:focus { color: var(--text-link-hover, #25a282); text-decoration: none; }

.hp-cta .fa { margin-left: 6px; }

.hp-links { margin: 0; display: flex; gap: var(--space-6, 24px); }

/* ------------------------------- mobile ------------------------------- */

/* Próg 991 px, nie 767 — to na nim main.css zwęża .main-container do 660 px
   i przełącza nawigację w drawer. Przy 768–991 dwie kolumny obok siebie
   zostawiały przedmiotom ~194 px. */
@media (max-width: 991px) {

	.hp-pop { padding: 0 12px; margin-bottom: 40px; }

	/* Szerokość leada zostawiamy main.css — ma już własne progi (70% / 90%). */

	/* Zakładki w jednym rzędzie przewijanym poziomo. Maska na prawej krawędzi
	   sygnalizuje, że lista jest dłuższa niż ekran.
	   Kolor NIE jest tokenem: maska musi zlać się dokładnie z tłem sekcji,
	   a to .bg-grey z main.css (#F7F8FA), nie --bg-page. */
	.hp-tabs-outer::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 40px;
		height: 100%;
		pointer-events: none;
		background: linear-gradient(to right, rgba(247, 248, 250, 0), rgba(247, 248, 250, 1));
	}

	.hp-tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.hp-tabs::-webkit-scrollbar { display: none; }

	.hp-tab { min-height: 44px; padding: 11px 18px; }

	/* Dwa panele jako osobne karty, jeden pod drugim. */
	.hp-card {
		flex-direction: column;
		padding: 0;
		gap: var(--space-4, 16px);
		background: none;
		border: 0;
		box-shadow: none;
	}

	.hp-col {
		background: var(--bg-surface, #fff);
		border: 1px solid var(--border-subtle, #e2e7e5);
		border-radius: var(--radius-lg, 12px);
		box-shadow: var(--shadow-sm, 0 1px 3px rgba(14, 20, 19, 0.06), 0 1px 2px rgba(14, 20, 19, 0.04));
		padding: var(--space-5, 20px);
	}

	.hp-col-cities { flex: 1 1 auto; padding-left: var(--space-5, 20px); border-left: 0; }

	/* Przedmioty w jednej kolumnie, 6 pozycji — reszta jest w HTML dla robotów,
	   ale na małym ekranie nie ma dla niej miejsca. */
	.hp-list-subjects { grid-template-columns: 1fr; }
	.hp-list-subjects .hp-item:nth-child(n+7) { display: none; }

	/* Miasta zostają w dwóch kolumnach (krótkie nazwy), pierwsze 6. */
	.hp-list-cities { gap: 2px var(--space-4, 16px); }
	.hp-list-cities .hp-item:nth-child(n+7) { display: none; }

	.hp-item { min-height: 44px; padding: 10px 0; }
}