/* Wpis poradnikowy: jasny nagłówek, treść z komponentami poradnika, panel ze spisem treści. */

/* ---------- Okruszki na jasnym tle ---------- */
.breadcrumbs-light,
.breadcrumbs-light .breadcrumbs-link {
	color: var(--color-text-muted);
}

.breadcrumbs-light .breadcrumbs-link:hover {
	color: var(--color-accent-text);
}

.breadcrumbs-light .breadcrumbs-current {
	color: var(--color-ink);
}

/* ---------- Nagłówek ---------- */
.guide-hero {
	border-bottom: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.guide-hero-inner {
	padding-block: var(--space-28) var(--space-40);
}

.guide-hero-text {
	max-width: var(--width-guide-hero);
	display: flex;
	flex-direction: column;
	gap: var(--space-18);
}

.guide-hero .badge {
	padding-inline: var(--space-12);
}

.badge-link {
	text-decoration: none;
}

.badge-link:hover {
	background: var(--color-tint-2);
}

.guide-title {
	margin: 0;
	font-size: var(--text-11xl);
	line-height: var(--leading-title);
	letter-spacing: var(--tracking-tight);
}

.guide-lead {
	margin: 0;
	font-size: var(--text-xl);
	color: var(--color-text-body);
}

.guide-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-14) var(--space-24);
	padding-top: var(--space-6);
}

.guide-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8) var(--space-18);
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
}

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

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

.guide-author-name {
	font-weight: var(--weight-extrabold);
	color: var(--color-ink);
	text-decoration: none;
}

.guide-author-name:hover {
	color: var(--color-accent-text);
}

.guide-meta-link {
	font-weight: var(--weight-bold);
	color: var(--color-brand);
}

.guide-image {
	margin: var(--space-32) 0 0;
	overflow: hidden;
	border-radius: var(--radius-5xl);
	background: var(--color-tint-2);
}

.guide-image-img {
	display: block;
	width: 100%;
	height: var(--size-guide-image-h);
	object-fit: cover;
	object-position: var(--position-image-crop);
}

/* ---------- Układ treści ---------- */
.guide-layout {
	gap: var(--space-48) var(--space-56);
}

.guide-main {
	max-width: var(--width-guide-main);
	gap: var(--space-24);
}

.guide-sidebar {
	flex-basis: var(--basis-guide-side);
	max-width: var(--width-guide-side);
}

.guide-content {
	gap: var(--space-18);
	font-size: var(--text-lg);
	line-height: var(--leading-loose);
	color: var(--color-ink-soft);
}

.guide-content > h2 {
	margin-top: var(--space-44);
	font-size: var(--text-8xl);
	color: var(--color-ink);
}

.guide-content > h2 + * {
	margin-top: calc(var(--space-16) - var(--space-18));
}

.guide-content :where(h3) {
	color: var(--color-ink);
}

.guide-content .content-note {
	margin-top: calc(var(--space-12) - var(--space-18));
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
}

.guide-content > .tip {
	padding: var(--space-18) var(--space-22);
	border-radius: var(--radius-3xl);
	font-size: var(--text-base);
}

.guide-content .wp-block-details {
	font-size: var(--text-base);
}

.guide-content > .wp-block-details + .wp-block-details {
	margin-top: calc(var(--space-8) - var(--space-18));
}

.related,
.guide-main > .comments {
	margin-top: var(--space-32);
}

/* ---------- W 30 sekund ---------- */
.summary-box {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--space-18);
	padding: var(--space-24) var(--space-28);
	border-radius: var(--radius-5xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

/* Naklejka wystaje nad kartę: ujemny margines zamiast pozycjonowania. */
.summary-box-sticker {
	display: flex;
	height: 0;
	margin: calc((var(--space-24) + var(--space-16)) * -1) 0 calc(var(--space-24) + var(--space-16));
	padding-left: var(--space-xs);
}

.summary-box-sticker .badge-hand {
	height: fit-content;
	font-size: var(--text-5xl);
}

.summary-box-title {
	margin: var(--space-8) 0 var(--space-12);
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
	color: var(--color-ink);
}

.summary-box .mark-list {
	gap: var(--space-10);
	font-size: var(--text-base);
}

/* ---------- Tabela ze stawkami ---------- */
.entry-content .rate-table {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-4xl);
	font-size: var(--text-base);
}

.rate-table table {
	font-size: var(--text-base);
}

.rate-caption {
	order: -1;
	margin: 0;
	padding: var(--space-14) var(--space-20) 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-accent-text);
}

.entry-content .rate-table :where(th, td) {
	padding: var(--space-12) var(--space-20);
	vertical-align: middle;
}

.entry-content .rate-table thead th {
	background: transparent;
	color: var(--color-brand);
}

.entry-content .rate-table tbody th {
	background: transparent;
	font-weight: var(--weight-bold);
}

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

.entry-content .rate-table .rate-head,
.rate-cell {
	text-align: right;
}

.rate-value {
	font-weight: var(--weight-extrabold);
}

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

.rate-free .rate-value {
	color: var(--color-success);
}

.rate-extra .rate-value {
	color: var(--color-accent-text);
}

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

/* ---------- Przykład ---------- */
.example {
	margin-block: var(--space-10);
	padding: var(--space-22) var(--space-26);
	border-radius: var(--radius-4xl);
	background: var(--color-tint);
	font-size: var(--text-base);
}

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

.example-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

.example-card {
	flex: 1 1 var(--basis-example);
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: var(--space-14) var(--space-16);
	border-radius: var(--radius-xl);
	background: var(--color-surface);
}

.example-label {
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
}

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

.example-result {
	font-size: var(--text-5xl);
	line-height: var(--leading-relaxed);
	color: var(--color-ink);
}

/* ---------- Szybki kalkulator w treści ---------- */
.quick-calc {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	margin-block: var(--space-10) var(--space-18);
	padding: var(--space-24) var(--space-26);
	border-radius: var(--radius-5xl);
	background: var(--color-ink);
	color: var(--color-on-dark);
	font-size: var(--text-base);
}

.quick-calc-head {
	display: flex;
	align-items: center;
	gap: var(--space-12);
}

.quick-calc-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-avatar-md);
	height: var(--size-avatar-md);
	border-radius: var(--radius-lg);
	background: var(--color-ink-deep);
	color: var(--color-icon-on-dark);
}

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

.quick-calc-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-16);
}

.quick-calc-field {
	flex: 1 1 var(--basis-calc-field);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.quick-calc-label {
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	color: var(--color-on-dark-muted);
}

.quick-calc-input {
	width: 100%;
	min-height: var(--size-calc-input);
	padding: 0 var(--space-16);
	border-radius: var(--radius-lg);
	border: var(--border-width) solid var(--color-brand-strong);
	background: var(--color-ink-deep);
	color: var(--color-on-dark);
	font: inherit;
	font-size: var(--text-2xl);
	font-weight: var(--weight-extrabold);
}

.quick-calc-results {
	flex: 1 1 var(--basis-calc-results);
	min-width: 0;
	display: flex;
	gap: var(--space-10);
	margin: 0;
}

.quick-calc-result {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--space-10) var(--space-14);
	border-radius: var(--radius-lg);
	background: var(--color-ink-deep);
}

.quick-calc-result-label {
	font-size: var(--text-sm);
	color: var(--color-on-dark-muted);
}

.quick-calc-result-value {
	margin: 0;
	font-size: var(--text-4xl);
	font-weight: var(--weight-extrabold);
	white-space: nowrap;
}

.quick-calc-result-accent {
	color: var(--color-icon-on-dark);
}

.entry-content .quick-calc-link {
	align-self: flex-start;
	font-size: var(--text-base-sm);
	font-weight: var(--weight-extrabold);
	color: var(--color-icon-on-dark);
}

.quick-calc-link .icon-sm {
	vertical-align: middle;
}

.entry-content .quick-calc-link:hover {
	color: var(--color-on-dark);
}

/* ---------- Kroki z numerami ---------- */
.entry-content .number-rows {
	gap: var(--space-10);
	padding: 0;
	list-style: none;
	font-size: var(--text-base);
}

.number-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-14);
	padding: var(--space-14) var(--space-18);
	border-radius: var(--radius-2xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.number-row-number {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-tile-number);
	height: var(--size-tile-number);
	border-radius: var(--radius-pill);
	background: var(--color-brand);
	color: var(--color-on-dark);
	font-weight: var(--weight-extrabold);
}

.number-row-text {
	min-width: 0;
	padding-top: var(--space-xs);
}

/* ---------- Karta promocji w treści ---------- */
.entry-content .promo-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16) var(--space-20);
	margin-block: var(--space-8) var(--space-18);
	padding: var(--space-18) var(--space-20);
	border-radius: var(--radius-4xl);
	border: var(--border-width-thick) solid var(--color-cta);
	background: var(--color-surface);
	color: var(--color-ink);
	font-size: var(--text-base);
	text-decoration: none;
}

.entry-content .promo-inline:hover .promo-inline-title {
	color: var(--color-brand);
	text-decoration: underline;
}

.promo-inline-text {
	flex: 1 1 var(--basis-promo-inline);
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.promo-inline .eyebrow {
	font-size: var(--text-xs);
}

.promo-inline-title {
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
}

/* ---------- Karty (tytuł + opis) ---------- */
.entry-content .info-cards {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-12);
	padding: 0;
	list-style: none;
	font-size: var(--text-base-sm);
	line-height: var(--leading-relaxed);
}

.info-card {
	flex: 1 1 var(--basis-info-card);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: var(--space-18);
	border-radius: var(--radius-3xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.info-card-title {
	font-size: var(--text-base);
	color: var(--color-ink);
}

.info-card-text {
	color: var(--color-text-body);
}

/* ---------- Źródła ---------- */
.entry-content > .sources {
	margin-top: var(--space-18);
	padding-top: var(--space-20);
	border-top: var(--border-width) solid var(--color-border);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-text-body);
}

.sources .collapsible-summary {
	margin-bottom: var(--space-8);
}

.sources .collapsible-title {
	font-size: var(--text-base-sm);
}

.sources .collapsible-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}

.sources .collapsible-body > * {
	margin: 0;
}

.sources :where(ul) {
	gap: var(--space-xs);
	padding-left: var(--space-18);
}

.sources .content-note {
	margin: 0;
	font-size: var(--text-sm);
}

/* ---------- Czytaj dalej ---------- */
.related-title {
	margin: 0;
	font-size: var(--text-7xl);
}

.related .section-head {
	align-items: flex-end;
}

.related-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-14);
}

.related-card {
	flex: 1 1 var(--basis-related);
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-3xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-ink);
	text-decoration: none;
}

.related-card:hover {
	border-color: var(--color-placeholder-line);
}

.related-card:hover .related-card-title {
	color: var(--color-brand);
	text-decoration: underline;
}

.related-card-thumb {
	height: var(--size-related-thumb);
	border-radius: 0;
}

.related-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: var(--space-14) var(--space-16);
}

.related-card-meta {
	font-size: var(--text-xs);
	font-weight: var(--weight-extrabold);
	color: var(--color-text-muted);
}

.related-card-title {
	font-size: var(--text-base);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-snug);
}

/* ---------- Spis treści z paskiem „przeczytane” ---------- */
.toc-box {
	border-radius: var(--radius-4xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.toc-box-side {
	padding: var(--space-18) var(--space-12) var(--space-12);
}

.toc-box-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	padding: 0 var(--space-8) var(--space-10);
}

.toc-box-title {
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-extrabold);
}

.toc-box-meta {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-text-muted);
}

.toc-progress {
	display: flex;
	height: var(--size-progress);
	margin: 0 var(--space-8) var(--space-10);
	border-radius: var(--radius-pill);
	background: var(--color-tint);
}

.toc-progress-bar {
	width: 0;
	height: var(--size-progress);
	border-radius: var(--radius-pill);
	background: var(--color-cta);
}

.toc-box-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
}

.toc-box-link {
	display: flex;
	align-items: center;
	min-height: var(--size-toc-link);
	padding: 0 var(--space-10);
	border-radius: var(--radius-md);
	color: var(--color-text-body);
	text-decoration: none;
}

.toc-box-link:hover,
.toc-box-link[aria-current="true"] {
	background: var(--color-tint);
	color: var(--color-brand);
}

/* Wersja na telefon (nad treścią): na większych ekranach ukryta. */
.toc-box-mobile {
	display: none;
	flex: 1 1 100%;
	padding: 0 var(--space-18);
}

.toc-box-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	min-height: var(--size-summary);
	list-style: none;
	cursor: pointer;
}

.toc-box-summary::-webkit-details-marker {
	display: none;
}

.toc-box-summary-text {
	display: flex;
	flex-direction: column;
	line-height: var(--leading-snug);
}

.toc-box-mobile .toc-box-meta {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
}

.toc-box-mobile[open] .collapsible-icon {
	transform: rotate(180deg);
}

.toc-box-mobile .toc-progress {
	margin-inline: 0;
}

.toc-box-mobile .toc-box-list {
	padding-bottom: var(--space-12);
}

/* ---------- Panel boczny ---------- */
.guide-calc .button-primary {
	margin-top: var(--space-xs);
}

.side-collapse-summary {
	list-style: none;
	cursor: default;
}

.side-collapse-summary::-webkit-details-marker {
	display: none;
}

.side-collapse-icon {
	display: none;
}

.side-newsletter {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	padding: var(--space-20);
	border-radius: var(--radius-4xl);
	background: var(--color-tint);
}

.side-newsletter-title {
	font-size: var(--text-base);
	font-weight: var(--weight-extrabold);
}

.side-newsletter .button-brand {
	min-height: var(--size-input);
}

/* Karty: trzy w rzędzie, ostatnia nie rozciąga się na całą szerokość. */
@media (min-width: 601px) {
	.info-card {
		flex: 0 1 calc((100% - var(--space-12) * 2) / 3);
	}
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.guide-hero-inner {
		padding-block: var(--space-24) var(--space-40);
	}

	.guide-title {
		font-size: var(--text-display-sm);
	}

	.guide-lead {
		font-size: var(--text-lg);
	}

	.guide-image-img {
		height: auto;
		aspect-ratio: 16 / 6;
	}

	.guide-content > h2 {
		font-size: var(--text-7xl);
	}
}

/* ---------- Telefon ---------- */
@media (max-width: 600px) {
	.guide-hero-inner {
		padding-block: var(--space-24) var(--space-24);
	}

	.guide-hero-text {
		gap: var(--space-16);
	}

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

	.guide-lead {
		font-size: var(--text-base);
	}

	.guide-meta {
		gap: var(--space-8) var(--space-18);
	}

	.guide-author {
		flex: 1 1 100%;
	}

	.guide-image {
		margin-top: var(--space-24);
	}

	.guide-layout {
		gap: var(--space-24);
	}

	.toc-box-mobile {
		display: block;
	}

	.toc-box-side,
	.guide-calc {
		display: none;
	}

	.guide-content > h2 {
		margin-top: var(--space-18);
		font-size: var(--text-5xl);
	}

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

	.example,
	.quick-calc {
		padding: var(--space-22) var(--space-20);
	}

	.entry-content .rate-table :where(th, td) {
		padding-inline: var(--space-16) var(--space-xs);
	}

	.entry-content .promo-inline {
		flex-direction: column;
		align-items: flex-start;
	}

	.promo-inline-text {
		flex-basis: auto;
	}

	.entry-content > .sources {
		padding: 0 var(--space-18);
		border-radius: var(--radius-2xl);
		border: var(--border-width) solid var(--color-border);
		background: var(--color-surface);
	}

	.sources .collapsible-summary {
		margin: 0;
	}

	.sources .collapsible-title {
		font-size: var(--text-lg);
	}

	.sources .collapsible-body {
		padding-bottom: var(--space-16);
	}

	.related-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: var(--space-8);
	}

	.related-card {
		flex: none;
		width: var(--width-carousel-card);
	}

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

	.side-collapse {
		padding: 0;
	}

	.side-collapse-summary {
		min-height: var(--size-summary);
		cursor: pointer;
	}

	.side-collapse:not([open]) .side-collapse-summary {
		border-bottom: 0;
	}

	.side-collapse-tag,
	.side-collapse-more {
		display: none;
	}

	.side-collapse-icon {
		display: block;
	}

	.side-collapse[open] .side-collapse-icon {
		transform: rotate(180deg);
	}

	.guide-sidebar {
		max-width: none;
	}
}