/* Poradniki (/poradnik/*): tekst w wąskiej kolumnie, kafelki ofert na pełną szerokość.
   Kolory ze zmiennych motywu z banklik.css, więc jasny i ciemny motyw działają same. */
.guide { max-width: 1020px; }
/* Własna klasa zamiast .static-intro: banklik.js dokleja do .static-intro liczby z kafelków,
   a w poradniku kafelki to tylko wybór ofert. */
.guide-intro .static-eyebrow { margin: 0 0 12px; }
.guide-intro h1 { color: var(--ns-text); font-weight: 500; letter-spacing: -.045em; }
/* Podkreślenie pod całym nagłówkiem: przy kilku liniach blok ma szerokość najdłuższej, a pod nim jest
   miejsce, żeby zygzak nie dotykał wstępu. */
.guide-intro h1 .title-mark { display: inline-block; margin-bottom: .32em; }
.guide-intro > p:not(.static-eyebrow) { max-width: 760px; margin: 18px 0 0; color: var(--ns-soft); font-size: 1.05rem; line-height: 1.65; }
.guide-intro > p.guide-date { color: var(--ns-muted); font-size: .81rem; }
.guide :is(.guide-answer, .guide-toc, .guide-section > :not(.hub-list)) { max-width: 760px; }

.guide-answer, .guide-toc { margin-top: 30px; padding: 22px 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--ns-panel); }
.guide-answer { border-left: 3px solid var(--ns-green); }
.guide-answer-label { margin: 0; color: var(--ns-green); font: 600 .72rem 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.guide-answer p:not(.guide-answer-label) { margin: 10px 0 0; color: var(--ns-text); font-size: 1.05rem; line-height: 1.7; }
.guide-toc ol { margin: 10px 0 0; padding-left: 1.3em; color: var(--ns-muted); }
.guide-toc li { margin-top: 6px; line-height: 1.5; }
.guide-toc a { color: var(--ns-soft); text-underline-offset: 3px; }
.guide-toc a:hover { color: var(--ns-text); }

.guide-section { scroll-margin-top: 24px; }
.guide-section h2 { margin: 56px 0 0; color: var(--ns-text); font: 500 clamp(1.4rem, 2.4vw, 1.85rem)/1.25 Manrope, sans-serif; letter-spacing: -.035em; text-wrap: balance; }
.guide-section h3 { margin: 30px 0 0; color: var(--ns-text); font: 600 1.08rem/1.4 Manrope, sans-serif; letter-spacing: -.01em; }
.guide-section :is(p, li) { color: var(--ns-soft); font-size: 1.02rem; line-height: 1.75; }
.guide-section p { margin: 14px 0 0; }
.guide-section h3 + p { margin-top: 8px; }
.guide-section :is(ul, ol) { margin: 14px 0 0; padding-left: 1.3em; }
.guide-section li { margin-top: 10px; padding-left: 4px; }
.guide-section li::marker { color: var(--ns-green); }
.guide-section strong { color: var(--ns-text); font-weight: 600; }
.guide-section a { color: var(--ns-sky); text-underline-offset: 3px; }
.guide-section .hub-list { margin-top: 26px; }
.guide-section .hub-card a { color: inherit; }

/* Ranking ofert: numer, nazwa z trudnością i terminem, kwota po prawej, pod spodem co robić co miesiąc. */
.guide-section .guide-ranking { display: grid; gap: 16px; max-width: 860px; margin: 24px 0 0; padding: 0; list-style: none; }
/* Pozycja rankingu to kafelek .hub-card (ramka, poświata, animacja po najechaniu, podświetlenie na telefonie
   z hub-page.js); tu tylko odstępy, bo reguły list z .guide-section są mocniejsze od .hub-card. */
.guide-section .guide-rank-item { margin: 0; padding: 24px 26px; }
.guide-rank-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.guide-rank-no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ns-raised); color: var(--ns-text); font: 600 .95rem 'DM Sans', sans-serif; }
.guide-rank-title { display: grid; gap: 6px; }
.guide-section .guide-rank-name { margin: 0; color: var(--ns-text); font: 600 1.08rem/1.35 Manrope, sans-serif; letter-spacing: -.01em; }
.guide-rank-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ns-muted); font: 500 .82rem 'DM Sans', sans-serif; }
.guide-rank-amount { position: relative; color: var(--ns-text) !important; font: 400 1.5rem/1.2 'Special Gothic Expanded One', Manrope, sans-serif !important; white-space: nowrap; }
/* Podkreślenie kwoty jak na kafelkach ofert: wysuwa się od lewej po najechaniu. */
.guide-rank-amount::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--ns-grad-green); transform: scaleX(0); transform-origin: left center; opacity: 0; transition: transform .6s cubic-bezier(.2, .75, .2, 1), opacity .2s ease; }
.guide-rank-item:is(:hover, :focus-within, .is-in-view) .guide-rank-amount::after { transform: scaleX(1); opacity: 1; }
.guide-section .guide-rank-who { margin: 16px 0 0; color: var(--ns-muted); font-size: .92rem; }
.guide-section .guide-rank-todo { margin: 10px 0 0; }
.guide-section .guide-rank-item ul { margin: 6px 0 20px; }
.guide-section .guide-rank-item li { margin-top: 4px; font-size: .97rem; line-height: 1.6; }
.guide-section .guide-rank-item > .guide-rank-todo:last-of-type:not(:has(strong)) { margin-bottom: 20px; }

@media (max-width: 640px) {
  .guide-section .guide-rank-item { padding: 20px; }
  .guide-rank-head { grid-template-columns: auto minmax(0, 1fr); }
  .guide-rank-amount { grid-column: 2; }
  .guide-answer, .guide-toc { padding: 18px 18px; border-radius: 16px; }
  .guide-section h2 { margin-top: 44px; }
}

/* Porównanie w poradniku: kolory, fonty i szerokość jak w pozostałych sekcjach Banklika. */
.guide-section .guide-table-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--ns-panel); }
.guide-table-wrap:focus-visible { outline: 2px solid var(--ns-sky); outline-offset: 4px; }
.guide-offer-table { width: 100%; min-width: 640px; border-collapse: collapse; font: 400 .92rem/1.6 'DM Sans', sans-serif; }
.guide-offer-table th { padding: 16px; text-align: left; vertical-align: top; color: var(--ns-text); font-weight: 600; background: var(--ns-raised); }
.guide-offer-table td { padding: 18px 16px; vertical-align: top; border-top: 1px solid var(--line); color: var(--ns-soft); }
.guide-offer-table td:nth-child(2) { white-space: nowrap; color: var(--ns-text); font-weight: 600; }
.guide-table-note { display: block; margin-top: 6px; color: var(--ns-muted); font-size: .78rem; }
.guide-offer-table td:nth-child(2) .guide-table-note { white-space: normal; font-weight: 400; }
/* Kod promocyjny: wyróżniony i zaznaczany jednym kliknięciem, żeby łatwo go skopiować. */
.guide-code { display: inline-block; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--ns-raised); color: var(--ns-text); font: 600 .9em/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; user-select: all; }
@media (max-width: 640px) {
  .guide-section .guide-table-wrap { border-radius: 16px; }
  .guide-offer-table th, .guide-offer-table td { padding: 14px; }
}

/* Tabela z objaśnieniami: tekst zawija się także na telefonie. */
.guide-explainer-table { min-width: 0; }
.guide-explainer-table td:nth-child(2) { white-space: normal; font-weight: 400; color: var(--ns-soft); }

/* Jeden kafelek przy przykładzie ma układ i szerokość kart z pozostałych poradników. */
.guide-section .guide-offer-list-single { grid-template-columns: minmax(0, 1fr); max-width: 500px; }