/* Strona kategorii: nagłówek, najlepsza oferta, lista treści, opis SEO, panel boczny. */

/* ---------- Nagłówek ---------- */
.archive-hero {
	background: var(--color-brand);
	color: var(--color-on-dark);
}

.archive-hero-inner {
	padding-block: var(--space-28) var(--space-56);
}

.archive-hero-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-24) var(--space-48);
}

.archive-hero-logo {
	display: flex;
	flex: none;
	align-self: flex-start;
}

.bank-facts {
	margin-bottom: var(--space-14);
}

.side-note {
	margin: 0 0 var(--space-16);
	font-size: var(--text-xs);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
}

.archive-hero-text {
	flex: 1 1 var(--basis-archive-text);
	min-width: 0;
}

.archive-title {
	margin: 0 0 var(--space-16);
	font-size: var(--text-11xl);
	line-height: var(--leading-title);
	letter-spacing: var(--tracking-tight);
	color: var(--color-on-dark);
}

.archive-lead {
	max-width: var(--width-lead);
	margin: 0;
	font-size: var(--text-lg);
	color: var(--color-on-dark-soft);
}

.archive-stats {
	flex: none;
	display: flex;
	gap: var(--space-12);
	margin: 0;
}

.archive-stat {
	min-width: var(--size-stat-min);
	padding: var(--space-14) var(--space-20);
	border-radius: var(--radius-2xl);
	background: var(--color-brand-strong);
}

.archive-stat-label {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-on-dark-muted);
}

.archive-stat-value {
	margin: 0;
	font-size: var(--text-7xl);
	font-weight: var(--weight-extrabold);
}

.archive-subs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin-top: var(--space-32);
}

.chip-on-dark {
	border-color: var(--color-brand-strong);
	background: var(--color-brand-strong);
	color: var(--color-on-dark);
	font-weight: var(--weight-bold);
	text-decoration: none;
}

.chip-on-dark:hover {
	background: var(--color-brand-soft);
	color: var(--color-on-dark);
}

/* ---------- Najlepsza oferta (nachodzi na nagłówek) ---------- */
.best-offer {
	margin-top: calc(var(--space-24) * -1);
}

.best-offer-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-32);
	border-radius: var(--radius-5xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	box-shadow: var(--shadow-best-card);
}

/* „mój typ!” wystaje nad kartę: ujemny margines zamiast pozycjonowania. */
.best-offer-sticker {
	display: flex;
	height: 0;
	margin: calc((var(--space-32) + var(--space-18)) * -1) 0 calc(var(--space-32) + var(--space-18));
}

.best-offer-sticker .badge-hand {
	height: fit-content;
	transform: rotate(var(--width-rotate-flip));
}

.best-offer-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-32) var(--space-48);
}

.best-offer-main {
	flex: 1 1 var(--basis-best-main);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.eyebrow-sm {
	margin: var(--space-8) 0 0;
	font-size: var(--text-sm);
}

.best-offer-brand {
	display: flex;
	align-items: center;
	gap: var(--space-16);
}

.best-offer-brand .bank-logo-lg {
	border: var(--border-width) dashed var(--color-placeholder-line);
	background: var(--color-tint);
}

.best-offer-name {
	min-width: 0;
}

.best-offer-title {
	font-size: var(--text-7xl);
	line-height: var(--leading-heading);
}

.best-offer-kind {
	margin: 0;
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
}

.amount-display {
	margin: 0;
	gap: var(--space-8) var(--space-12);
}

.amount-display .amount-value {
	font-size: var(--text-display);
	line-height: 1;
	letter-spacing: var(--tracking-tight);
}

.amount-display .amount-label {
	font-size: var(--text-base);
}

.best-offer-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.best-offer-step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-16);
	border-radius: var(--radius-2xl);
	background: var(--color-bg);
}

.best-offer-step-text {
	font-size: var(--text-base-sm);
	font-weight: var(--weight-semibold);
}

.best-offer-side {
	flex: 1 1 var(--basis-best-side);
	max-width: var(--width-best-side);
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding-top: var(--space-8);
}

.best-offer-facts {
	gap: var(--space-10);
}

.best-offer-deadline {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin: 0;
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	color: var(--color-accent-text);
}

/* Karta „Najlepsze konto w kategorii”: ocena zamiast kwoty premii, plusy zamiast kroków. */
.best-account-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8) var(--space-16);
}

.best-account-max {
	font-size: var(--text-2xl);
	color: var(--color-text-muted);
}

/* ---------- Lista ---------- */
.archive-layout {
	padding-block: var(--space-72) var(--space-88);
}

.archive-main {
	gap: 0;
}

.archive-section-head {
	align-items: flex-end;
	gap: var(--space-16);
	margin-bottom: var(--space-20);
}

.archive-list-title {
	font-size: var(--text-8xl);
	scroll-margin-top: var(--space-88);
}

.archive-list-count {
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	color: var(--color-text-muted);
}

.archive-sort {
	display: flex;
	align-items: center;
	gap: var(--space-10);
}

.archive-sort .form-label {
	margin: 0;
	color: var(--color-text-body);
}

.archive-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-12) var(--space-24);
	margin-bottom: var(--space-24);
	padding: var(--space-14) 0 var(--space-24);
	border-bottom: var(--border-width) solid var(--color-border);
}

.archive-filters .chip {
	text-decoration: none;
}

.archive-ended {
	min-height: var(--size-touch);
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	color: var(--color-text-body);
}

.entry-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.entry-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-20);
	padding: var(--space-16);
	border-radius: var(--radius-4xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-ink);
	text-decoration: none;
}

.entry-row:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-card);
}

.entry-row.is-ended {
	border-style: dashed;
	border-color: var(--color-border-strong);
}

.entry-row-thumb {
	flex: 0 0 var(--basis-entry-thumb);
	min-height: var(--size-thumb-min-h);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--color-tint-2);
	color: var(--color-brand);
}

.entry-row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--position-image-crop);
}

.entry-row.has-image {
	flex-direction: column;
	gap: var(--space-16);
}

.entry-row.has-image .entry-row-thumb {
	flex: 0 0 auto;
	width: 100%;
	min-height: 0;
	aspect-ratio: var(--ratio-entry-image);
}

.entry-row.has-image .entry-row-body {
	flex: 0 0 auto;
}

.entry-row.is-ended .entry-row-image img {
	filter: grayscale(1);
	opacity: var(--opacity-ended-image);
}

.entry-row-thumb-accent {
	background: var(--color-accent-tint);
}

.entry-row-thumb-ended {
	background: var(--color-ended-tint-3);
}

.entry-row-thumb-logo {
	border: var(--border-width) solid var(--color-border);
	background: var(--color-bg);
}

.entry-row-thumb-guide {
	background: var(--color-tint-3);
}

.entry-row-thumb-dark {
	background: var(--color-ink);
	color: var(--color-icon-on-dark);
}

.entry-row-icon {
	width: var(--size-entry-icon);
	height: var(--size-entry-icon);
	stroke-width: var(--stroke-icon-thin);
}

.entry-row-body {
	flex: 1 1 var(--basis-entry-body);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding-block: var(--space-xs);
}

.entry-row-title {
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
	font-weight: var(--weight-extrabold);
}

.entry-row:hover .entry-row-title {
	color: var(--color-brand);
}

.entry-row-excerpt {
	font-size: var(--text-base-sm);
	color: var(--color-text-body);
}

.entry-row.is-ended .entry-row-title {
	color: var(--color-text-body);
}

.entry-row.is-ended .entry-row-excerpt {
	color: var(--color-text-muted);
}

.entry-row-fees {
	font-size: var(--text-sm);
}

.entry-row-meta {
	margin-top: auto;
}

.entry-row-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	align-self: flex-start;
	margin-top: auto;
	font-size: var(--text-md);
	font-weight: var(--weight-extrabold);
	color: var(--color-brand);
}

.badge-dark {
	background: var(--color-ink);
	color: var(--color-on-dark);
}

.badge-plain {
	background: none;
	color: var(--color-text-muted);
}

/* ---------- Numeracja stron ---------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-8);
	margin-top: var(--space-36);
}

.pagination-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-touch);
	height: var(--size-touch);
	border-radius: var(--radius-lg);
	border: var(--border-width) solid var(--color-border-strong);
	background: var(--color-surface);
	color: var(--color-brand);
	font-weight: var(--weight-extrabold);
	text-decoration: none;
}

.pagination-item:hover {
	background: var(--color-tint);
}

.pagination-item.current {
	border-color: var(--color-brand);
	background: var(--color-brand);
	color: var(--color-on-dark);
}

.pagination-item.dots {
	width: auto;
	padding: 0 var(--space-xs);
	border: 0;
	background: none;
	color: var(--color-text-muted);
}

/* ---------- Pusty stan ---------- */
.empty-state-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	padding: var(--space-32);
	border-radius: var(--radius-4xl);
	border: var(--border-width) dashed var(--color-border-strong);
	background: var(--color-surface);
}

.empty-state-title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-extrabold);
	color: var(--color-ink);
}

/* ---------- Opis SEO + FAQ ---------- */
/* Dalsza część opisu kategorii (po <!--more-->) – ta sama karta co opis SEO; drugi z rzędu bliżej. */
.archive-description .archive-seo-text {
	margin-bottom: 0;
}

.archive-description + .archive-seo {
	margin-top: var(--space-24);
}

.archive-seo {
	margin-top: var(--space-64);
	padding: var(--space-32);
	border-radius: var(--radius-5xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.archive-seo-title {
	margin: 0 0 var(--space-12);
	font-size: var(--text-6xl);
}

.archive-seo-text {
	max-width: var(--width-seo-text);
	margin-bottom: var(--space-24);
	color: var(--color-text-body);
}

.archive-seo-text p {
	margin: 0 0 var(--space-12);
}

.archive-seo-text p:last-child {
	margin-bottom: 0;
}

.archive-seo-subtitle {
	margin: 0 0 var(--space-12);
	font-size: var(--text-lg);
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.faq-item {
	padding: 0 var(--space-18);
	border-radius: var(--radius-xl);
	background: var(--color-bg);
}

.faq-question {
	display: flex;
	align-items: center;
	min-height: var(--size-button-lg);
	font-weight: var(--weight-bold);
	list-style: none;
	cursor: pointer;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-answer {
	margin: 0 0 var(--space-16);
	color: var(--color-text-body);
}

/* ---------- Panel boczny ---------- */
.side-soon {
	padding: var(--space-16) var(--space-20) var(--space-20);
	background: var(--color-accent-tint-3);
}

.eyebrow-xs {
	margin-bottom: var(--space-10);
	font-size: var(--text-xs);
}

.side-soon-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-12);
	padding-block: var(--space-8);
	font-size: var(--text-md);
	color: var(--color-ink);
	text-decoration: none;
}

.side-soon-row:hover {
	color: var(--color-brand);
}

.side-soon-title {
	font-weight: var(--weight-bold);
}

.side-soon-days {
	flex: none;
	font-weight: var(--weight-extrabold);
	color: var(--color-accent-text);
}

.side-comment {
	display: flex;
	gap: var(--space-12);
	padding-block: var(--space-14);
	border-bottom: var(--border-width) solid var(--color-tint);
}

.side-comment:last-child {
	border-bottom: 0;
}

.side-comment .avatar {
	flex: none;
	width: var(--size-avatar-comment);
	height: var(--size-avatar-comment);
	font-size: var(--text-md);
}

.side-comment-body {
	min-width: 0;
}

.side-comment-head {
	margin: 0;
	font-size: var(--text-md);
}

.side-comment-time {
	color: var(--color-text-muted);
}

.side-comment-text {
	margin: var(--space-2xs) 0 var(--space-xs);
	font-size: var(--text-md);
	color: var(--color-ink-soft);
}

.side-comment-link {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-brand);
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.archive-title {
		font-size: var(--text-display-sm);
	}

	.archive-layout {
		padding-block: var(--space-56) var(--space-64);
	}
}

/* ---------- Telefon ---------- */
@media (max-width: 600px) {
	.archive-hero-logo .bank-logo-hero {
		width: var(--size-bank-logo-hero-sm);
		height: var(--size-bank-logo-hero-sm);
	}

	.archive-hero-inner {
		padding-block: var(--space-20) var(--space-48);
	}

	.archive-title {
		font-size: var(--text-8xl);
		margin-bottom: var(--space-10);
	}

	.archive-stats {
		flex: 1 1 100%;
	}

	.archive-stat {
		flex: 1 1 0;
	}

	.best-offer-card {
		padding: var(--space-32) var(--space-20) var(--space-24);
	}

	.best-offer-title {
		font-size: var(--text-5xl);
	}

	.amount-display .amount-value {
		font-size: var(--text-10xl);
	}

	.best-offer-side {
		max-width: none;
	}

	.archive-layout {
		padding-block: var(--space-40) var(--space-48);
	}

	.archive-list-title {
		font-size: var(--text-5xl);
	}

	.archive-filters {
		padding-top: 0;
	}

	.entry-row-thumb {
		flex-basis: 100%;
	}

	.entry-row-title {
		font-size: var(--text-lg);
	}

	.archive-seo {
		margin-top: var(--space-40);
		padding: var(--space-24) var(--space-20);
	}

	.archive-seo-title {
		font-size: var(--text-4xl);
	}
}