/* Ranking (page-templates/ranking.php) i kalkulator (page-templates/kalkulator.php). */

/* ---------- Ranking: nagłówek ---------- */
.ranking-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-12) var(--space-24);
	margin-top: var(--space-8);
	font-size: var(--text-md);
	color: var(--color-on-dark-soft);
}

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

.ranking-author-text {
	display: flex;
	flex-direction: column;
	line-height: var(--leading-snug);
}

.ranking-author-name {
	font-weight: var(--weight-extrabold);
	color: var(--color-on-dark);
}

.ranking-author-role {
	font-size: var(--text-sm);
}

.ranking-checked {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
}

.link-on-dark {
	font-weight: var(--weight-bold);
	color: var(--color-eyebrow-on-dark);
}

.link-on-dark:hover {
	color: var(--color-on-dark);
}

.chip-on-dark[aria-current="page"] {
	border-color: var(--color-surface);
	background: var(--color-surface);
	color: var(--color-brand);
}

/* ---------- Ranking: karty zwycięzców (nachodzą na nagłówek) ---------- */
.ranking-winners {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
	margin-top: calc(var(--space-24) * -1);
}

.winner-card {
	flex: 1 1 var(--basis-winner);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	padding: var(--space-24);
	border-radius: var(--radius-5xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
}

.winner-card.is-best {
	border: var(--border-width-thick) solid var(--color-cta);
}

.winner-card > * {
	margin: 0;
}

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

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

.winner-card .eyebrow-sm {
	margin: 0;
}

.winner-brand {
	display: flex;
	align-items: center;
	gap: var(--space-14);
}

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

.winner-name {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.winner-title {
	font-size: var(--text-5xl);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-heading);
}

.winner-rating {
	font-size: var(--text-md);
	color: var(--color-text-muted);
}

.winner-rating-value {
	color: var(--color-brand);
}

.winner-text {
	font-size: var(--text-md);
	color: var(--color-text-body);
}

/* ---------- Ranking: lista ---------- */
.ranking-list-head {
	margin-bottom: var(--space-20);
}

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

.ranking-sort .form-label {
	margin: 0;
}

.ranking-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12) var(--space-24);
	margin-bottom: var(--space-20);
}

.ranking-note {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.ranking-table {
	border-radius: var(--radius-4xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	overflow: hidden;
}

.ranking-head,
.ranking-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-12) var(--space-20);
	padding: var(--space-20) var(--space-24);
}

.ranking-head {
	align-items: center;
	padding-block: var(--space-16);
	background: var(--color-bg);
	border-bottom: var(--border-width) solid var(--color-border);
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	color: var(--color-text-body);
}

.ranking-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ranking-row {
	border-bottom: var(--border-width) solid var(--color-border);
}

.ranking-row.is-first {
	background: var(--color-accent-tint-3);
}

.ranking-row[hidden] {
	display: none;
}

.rk-col-place {
	flex: 0 0 var(--width-rk-place);
}

.rk-col-account {
	flex: 1 1 var(--basis-rk-account);
	min-width: 0;
}

.rk-col-rating {
	flex: 0 0 var(--width-rk-rating);
}

.rk-col-cell {
	flex: 1 1 var(--basis-rk-cell);
	min-width: 0;
}

.rk-col-atm {
	flex-basis: var(--basis-rk-atm);
}

.rk-col-promo {
	flex: 0 0 var(--width-rk-promo);
}

.rk-col-actions {
	flex: 0 0 var(--width-rk-actions);
}

.ranking-place {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-rk-place);
	height: var(--size-rk-place);
	border-radius: var(--radius-lg);
	font-size: var(--text-lg);
	font-weight: var(--weight-extrabold);
}

.ranking-place-first {
	background: var(--color-cta);
	color: var(--color-on-cta);
}

.ranking-place-top {
	background: var(--color-brand);
	color: var(--color-on-dark);
}

.ranking-place-rest {
	background: var(--color-tint);
	color: var(--color-brand);
}

.ranking-account {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
}

.ranking-account .bank-logo {
	border: var(--border-width) dashed var(--color-placeholder-line);
	background: var(--color-tint);
}

.ranking-account-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.ranking-account-name {
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-snug);
	color: var(--color-ink);
	text-decoration: none;
}

.ranking-account-name:hover {
	color: var(--color-brand);
	text-decoration: underline;
}

.ranking-move {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-text-muted);
}

.ranking-move-up {
	color: var(--color-success);
}

.ranking-move-down {
	color: var(--color-accent-text);
}

.ranking-move-new {
	color: var(--color-brand);
}

.ranking-rating {
	font-size: var(--text-md);
	color: var(--color-text-muted);
}

.ranking-rating-value {
	font-size: var(--text-2xl);
	color: var(--color-brand);
}

.ranking-cell {
	display: flex;
	flex-direction: column;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-text-muted);
}

.ranking-cell-label {
	display: none;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.ranking-cell-value {
	font-size: var(--text-base);
	color: var(--color-ink);
}

.ranking-promo {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

.ranking-promo-text {
	display: flex;
	flex-direction: column;
}

.ranking-promo-value {
	font-size: var(--text-lg);
	color: var(--color-accent-text);
}

.ranking-promo-note {
	color: var(--color-text-muted);
}

.ranking-promo-note.is-urgent {
	font-weight: var(--weight-bold);
	color: var(--color-accent-text);
}

.ranking-promo.is-none {
	flex-direction: column;
	color: var(--color-text-muted);
}

.ranking-promo-none {
	font-weight: var(--weight-bold);
}

.ranking-promo-none-long {
	display: none;
}

.ranking-promo-notify {
	font-size: var(--text-sm);
}

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

.ranking-actions .button-primary,
.ranking-actions .button-ghost {
	width: 100%;
}

.ranking-details {
	order: 1;
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	margin-left: calc(var(--width-rk-place) + var(--space-20));
	padding-top: var(--space-14);
	border-top: var(--border-width) dashed var(--color-accent-line);
}

.ranking-pros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8) var(--space-28);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-md);
	color: var(--color-text-body);
}

.ranking-pro {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.ranking-pro-icon {
	flex: none;
	color: var(--color-success);
}

.ranking-pro.is-minus .ranking-pro-icon {
	color: var(--color-accent-text);
}

.ranking-for {
	margin: 0;
	align-self: flex-end;
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	color: var(--color-ink);
}

.ranking-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	padding: var(--space-14) var(--space-24);
	font-size: var(--text-md);
	color: var(--color-text-muted);
}

.ranking-foot [hidden] {
	display: none;
}

.ranking-banner {
	padding-bottom: var(--space-48);
}

.ranking-banner .calc-banner {
	padding: var(--space-28) var(--space-32);
	border-radius: var(--radius-5xl);
}

/* ---------- Ranking: metodologia, zmiany, newsletter ---------- */
.ranking-info {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-40);
	padding-bottom: var(--space-64);
}

.ranking-info-main {
	flex: 999 1 var(--basis-ranking-main);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

.ranking-info-side {
	flex: 1 1 var(--basis-ranking-side);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.ranking-method .eyebrow {
	margin: 0;
}

.ranking-method-title {
	font-size: var(--text-8xl);
	line-height: var(--leading-heading);
}

.ranking-method-text {
	color: var(--color-text-body);
}

.weight-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding: 0;
	list-style: none;
}

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

.weight-head {
	display: flex;
	justify-content: space-between;
	gap: var(--space-12);
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	color: var(--color-ink);
}

.weight-value {
	color: var(--color-brand);
}

.weight-bar {
	display: flex;
	height: var(--size-weight-bar);
	border-radius: var(--radius-pill);
	background: var(--color-tint);
	overflow: hidden;
}

/* Szerokość paska to dane z pola strony („Opłaty: 35” → 35%). */
.weight-fill {
	width: var(--weight);
	border-radius: var(--radius-pill);
	background: var(--color-brand);
}

.ranking-independent {
	display: flex;
	gap: var(--space-12);
	padding: var(--space-16) var(--space-20);
	border-radius: var(--radius-2xl);
	background: var(--color-accent-tint-3);
}

.ranking-independent-icon {
	flex: none;
	color: var(--color-accent-text);
}

.ranking-independent-text {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-text-body);
}

.ranking-independent-text b {
	color: var(--color-ink);
}

.ranking-changes {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.ranking-changes .side-box-title,
.ranking-changes .side-note {
	margin: 0;
}

.change-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.change-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-10);
	font-size: var(--text-md);
	color: var(--color-text-body);
}

.change-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-change-icon);
	height: var(--size-change-icon);
	border-radius: var(--radius-pill);
}

.change-icon-up {
	background: var(--color-success-tint);
	color: var(--color-success);
}

.change-icon-down {
	background: var(--color-accent-tint);
	color: var(--color-accent-text);
}

.change-icon-new {
	background: var(--color-tint);
	color: var(--color-brand);
}

.ranking-newsletter {
	gap: var(--space-12);
}

.side-newsletter-heading {
	margin: 0;
	font-size: var(--text-lg);
}

.side-newsletter-lead {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-text-muted);
}

.ranking-newsletter .form-label {
	margin: 0;
}

/* ---------- Ranking: FAQ i komentarze ---------- */
.ranking-talk {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-40);
	padding-bottom: var(--space-88);
}

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

.ranking-faq-title {
	font-size: var(--text-7xl);
}

.ranking-faq .faq-item {
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.ranking-talk-comments {
	flex: 1 1 var(--basis-ranking-faq);
	min-width: 0;
}

/* Komentarze w ramce (ranking) i „Pytania i komentarze” (kalkulator). */
.comments-box {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	padding: var(--space-28);
	border-radius: var(--radius-5xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

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

.comments-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
}

.comments-title {
	font-size: var(--text-7xl);
}

.comments-tool .comment-form {
	padding: var(--space-20);
	border-radius: var(--radius-4xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

/* ---------- Kalkulator: nagłówek ---------- */
.calc-hero-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-16) var(--space-40);
}

.calc-hero-text {
	flex: 1 1 var(--basis-calc-form);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.calc-hero-text > * {
	margin: 0;
}

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

.calc-title {
	font-size: var(--text-10xl);
}

.calc-hero-note {
	align-self: flex-end;
	font-size: var(--text-7xl);
	color: var(--color-accent-text);
	transform: rotate(var(--size-hand-tilt));
}

/* ---------- Kalkulator lokaty ---------- */
.calc-tool-wrap {
	padding-top: var(--space-32);
}

.calc-tool {
	display: flex;
	flex-wrap: wrap;
	border-radius: var(--radius-5xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	box-shadow: var(--shadow-best-card);
	overflow: hidden;
}

.calc-tool-form {
	flex: 1 1 var(--basis-calc-form);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-26);
	padding: var(--space-32);
}

.calc-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	margin: 0;
	padding: 0;
	border: 0;
}

.calc-field-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
}

.calc-label {
	padding: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-extrabold);
	color: var(--color-ink);
}

.calc-periods .calc-label {
	margin-bottom: var(--space-10);
}

.calc-hint {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
}

.calc-input-wrap {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	padding: 0 var(--space-16);
	border-radius: var(--radius-2xl);
	border: var(--border-width) solid var(--color-border-input);
	background: var(--color-bg);
}

.calc-input-wrap:focus-within {
	border-color: var(--color-brand);
}

.calc-input-wrap-narrow {
	max-width: var(--width-calc-rate);
}

.calc-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--size-calc-field);
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--text-5xl);
	font-weight: var(--weight-extrabold);
	color: var(--color-ink);
	outline: none;
}

.calc-unit {
	font-weight: var(--weight-extrabold);
	color: var(--color-text-muted);
}

.calc-range {
	width: 100%;
	height: var(--size-calc-range);
	margin: 0;
	accent-color: var(--color-cta);
}

.calc-period-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.calc-period {
	display: flex;
	cursor: pointer;
}

/* Radio jest ukryte wizualnie, wygląd przejmuje sąsiedni „chip”. */
.calc-period-input {
	width: var(--space-px);
	height: var(--space-px);
	margin: 0;
	opacity: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.calc-period-chip {
	display: inline-flex;
	align-items: center;
	min-height: var(--size-button-lg);
	padding: 0 var(--space-18);
	border-radius: var(--radius-pill);
	border: var(--border-width) solid var(--color-border-input);
	background: var(--color-surface);
	font-size: var(--text-md);
	font-weight: var(--weight-extrabold);
	color: var(--color-brand);
}

.calc-period-input:checked + .calc-period-chip {
	border-color: var(--color-brand);
	background: var(--color-brand);
	color: var(--color-on-dark);
}

.calc-period-input:focus-visible + .calc-period-chip {
	outline: var(--border-width-thick) solid var(--color-cta);
	outline-offset: var(--border-width-thick);
}

.calc-note {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.calc-tool-result {
	flex: 1 1 var(--basis-calc-result);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-18);
	padding: var(--space-32);
	background: var(--color-ink);
	color: var(--color-on-dark);
}

.calc-tool-result > * {
	margin: 0;
}

.calc-tool-result .eyebrow {
	color: var(--color-cta-hover);
}

.calc-result-value {
	font-size: var(--text-display);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-tight);
}

.calc-result-sub {
	font-size: var(--text-base-sm);
	color: var(--color-on-dark-soft);
}

.calc-result-list {
	display: flex;
	flex-direction: column;
	font-size: var(--text-base-sm);
}

.calc-result-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-12);
	padding: var(--space-10) 0;
	border-bottom: var(--border-width) solid var(--color-on-dark-line);
}

.calc-result-row:last-child {
	border-bottom: 0;
}

.calc-result-row dt {
	color: var(--color-on-dark-soft);
}

.calc-result-row dd {
	margin: 0;
	font-weight: var(--weight-extrabold);
}

.calc-result-minus {
	color: var(--color-cta-hover);
}

.calc-result-best {
	padding: var(--space-14) var(--space-16);
	border-radius: var(--radius-2xl);
	background: var(--color-ink-deep);
	font-size: var(--text-md);
	color: var(--color-on-dark-soft);
}

.calc-result-best b {
	color: var(--color-on-dark);
}

.calc-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin-top: auto;
}

.calc-result-actions .button-primary {
	flex: 1 1 var(--basis-calc-period);
}

.calc-result-actions .button-outline-light {
	flex: 1 1 var(--basis-calc-period);
	border-width: var(--border-width);
	border-color: var(--color-brand-strong);
}

/* ---------- Kalkulator: tabela lokat ---------- */
.calc-offers .section-head {
	margin-bottom: var(--space-16);
}

.calc-offers .section-title {
	font-size: var(--text-title);
}

.calc-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--radius-4xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	overflow: hidden;
	font-size: var(--text-base-sm);
}

.calc-table th,
.calc-table td {
	padding: var(--space-14) var(--space-20);
	border-bottom: var(--border-width) solid var(--color-tint);
	text-align: left;
	vertical-align: middle;
}

.calc-table thead th {
	background: var(--color-tint);
	font-weight: var(--weight-extrabold);
	color: var(--color-brand);
}

.calc-table tbody tr:last-child > * {
	border-bottom: 0;
}

.calc-table-name {
	font-weight: var(--weight-medium);
}

.calc-table-name,
.calc-table-name-text {
	display: flex;
	align-items: center;
	gap: var(--space-12);
}

.calc-table-name-text {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.calc-table-name .bank-logo {
	border: var(--border-width) dashed var(--color-placeholder-line);
	background: var(--color-tint);
}

.calc-table-note {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
}

.calc-table-rate {
	font-size: var(--text-lg);
	font-weight: var(--weight-extrabold);
	color: var(--color-brand);
}

.calc-table-profit b {
	display: block;
	font-size: var(--text-lg);
}

.calc-table-capped {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	color: var(--color-accent-text);
}

.calc-table-capped[hidden] {
	display: none;
}

.calc-table-label {
	display: none;
}

.calc-table-action {
	text-align: right;
}

.table-note {
	margin: var(--space-10) 0 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* ---------- Kalkulator: treść i panel boczny ---------- */
.calc-layout {
	padding-top: var(--space-56);
}

.entry-content .is-style-wzor {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: var(--space-18) var(--space-22);
	border-radius: var(--radius-3xl);
	background: var(--color-tint);
	font-size: var(--text-body-lg);
	font-weight: var(--weight-bold);
	color: var(--color-ink-soft);
}

.entry-content .is-style-wzor > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.entry-content .is-style-wzor p {
	margin: 0;
	color: var(--color-ink-soft);
}

.entry-content .is-style-wzor p:last-child {
	color: var(--color-brand);
}

.calc-links {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.calc-link {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-12) var(--space-14);
	border-radius: var(--radius-2xl);
	border: var(--border-width) solid var(--color-border);
	font-size: var(--text-base-sm);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-snug);
	color: var(--color-ink);
	text-decoration: none;
}

.calc-link:hover {
	border-color: var(--color-placeholder-line);
	color: var(--color-brand);
}

.calc-link-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-calc-link-icon);
	height: var(--size-calc-link-icon);
	border-radius: var(--radius-lg);
	background: var(--color-ink);
	font-size: var(--text-sm);
	font-weight: var(--weight-extrabold);
	color: var(--color-cta-hover);
}

.side-disclaimer {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* ---------- Tablet: ranking jako karty ---------- */
@media (max-width: 1023px) {
	.ranking-head {
		display: none;
	}

	.ranking-row {
		gap: var(--space-12);
		margin: var(--space-12);
		padding: var(--space-16);
		border-radius: var(--radius-4xl);
		border: var(--border-width) solid var(--color-border);
		background: var(--color-surface);
	}

	.ranking-row.is-first {
		border: var(--border-width-thick) solid var(--color-cta);
	}

	.ranking-table {
		border: 0;
		background: transparent;
	}

	.ranking-rows {
		margin: calc(var(--space-12) * -1);
	}

	.rk-col-place {
		flex: none;
		order: 1;
	}

	.rk-col-account {
		order: 2;
		align-items: center;
	}

	.rk-col-rating {
		flex: none;
		order: 3;
		align-self: center;
	}

	.rk-col-promo {
		order: 4;
		flex: 1 1 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-12);
		padding: var(--space-12) var(--space-14);
		border-radius: var(--radius-2xl);
		border: var(--border-width) solid var(--color-accent-line);
		background: var(--color-accent-tint-3);
	}

	.ranking-promo.is-none {
		flex-direction: row;
		border-style: dashed;
		border-color: var(--color-border-strong);
		background: var(--color-surface);
	}

	.ranking-promo-none {
		font-weight: var(--weight-semibold);
	}

	.ranking-promo-none-long {
		display: inline;
	}

	.ranking-promo .ranking-cell-label {
		display: block;
		font-weight: var(--weight-bold);
		color: var(--color-accent-text);
	}

	.ranking-promo-value {
		font-size: var(--text-2xl);
	}

	.rk-col-cell {
		order: 5;
		flex: 1 1 0;
		padding: var(--space-10) var(--space-12);
		border-radius: var(--radius-xl);
		background: var(--color-bg);
	}

	.ranking-cell-label {
		display: block;
	}

	.ranking-details {
		order: 6;
		margin-left: 0;
		padding-top: 0;
		border-top: 0;
	}

	.ranking-pros {
		flex-direction: column;
	}

	.ranking-for {
		align-self: flex-start;
	}

	.rk-col-actions {
		order: 7;
		flex: 1 1 100%;
		flex-direction: row;
	}

	.ranking-actions .button-primary,
	.ranking-actions .button-ghost {
		flex: 1 1 0;
		width: auto;
	}

	.ranking-foot {
		margin-top: var(--space-12);
		padding: 0;
	}

	.ranking-info-side {
		flex-basis: 100%;
	}

	.ranking-changes,
	.ranking-newsletter {
		max-width: var(--basis-calc-form);
	}

	.ranking-faq,
	.ranking-talk-comments {
		flex-basis: 100%;
	}
}

/* ---------- Telefon ---------- */
@media (max-width: 600px) {
	.ranking-byline {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-10);
	}

	.ranking-winners {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--space-8);
	}

	.winner-card {
		flex: 0 0 var(--width-scroll-card);
		scroll-snap-align: start;
		padding: var(--space-20);
	}

	.ranking-list-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.ranking-sort .select {
		flex: 1 1 auto;
	}

	.ranking-row {
		gap: var(--space-10);
	}

	.rk-col-place {
		order: 1;
	}

	.rk-col-cell {
		padding: var(--space-8) var(--space-10);
	}

	.ranking-cell-value {
		font-size: var(--text-md);
	}

	.ranking-cell-note {
		font-size: var(--text-xs);
	}

	.ranking-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.ranking-banner .calc-banner {
		padding: var(--space-24);
	}

	.ranking-method-title,
	.comments-title,
	.ranking-faq-title {
		font-size: var(--text-5xl);
	}

	.comments-box {
		padding: var(--space-20);
	}

	.calc-title {
		font-size: var(--text-hero-sm);
	}

	.calc-hero-note {
		align-self: flex-start;
		font-size: var(--text-5xl);
	}

	.calc-tool-form,
	.calc-tool-result {
		padding: var(--space-24);
	}

	.calc-result-value {
		font-size: var(--text-11xl);
	}

	.calc-result-actions {
		flex-direction: column;
	}

	.calc-result-actions .button-primary,
	.calc-result-actions .button-outline-light {
		flex: none;
	}
}

/* Tabela lokat jako karty (tablet i telefon): każdy wiersz to osobna karta z etykietami. */
@media (max-width: 1023px) {
	.calc-table,
	.calc-table tbody {
		display: flex;
		flex-direction: column;
		gap: var(--space-12);
		border: 0;
		background: transparent;
		overflow: visible;
	}

	.calc-table thead {
		display: none;
	}

	.calc-table-row {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-10) var(--space-16);
		padding: var(--space-16);
		border-radius: var(--radius-4xl);
		border: var(--border-width) solid var(--color-border);
		background: var(--color-surface);
	}

	.calc-table th,
	.calc-table td {
		display: flex;
		flex-direction: column;
		padding: 0;
		border: 0;
	}

	.calc-table .calc-table-name {
		flex-direction: row;
		flex-basis: 100%;
	}

	.calc-table td {
		flex-basis: 40%;
	}

	.calc-table-label {
		display: block;
		font-size: var(--text-sm);
		font-weight: var(--weight-semibold);
		color: var(--color-text-muted);
	}

	.calc-table .calc-table-action {
		flex-basis: 100%;
		text-align: left;
	}

	.calc-table-action .button-ghost {
		width: 100%;
	}
}

@media (min-width: 601px) and (max-width: 1023px) {
	.calc-table td {
		flex-basis: 20%;
	}
}