/* =============================================================================
   Tripinvest ES — warstwa poradników (/pl/poradniki/*).
   Nadbudowa nad warstwą edytorską /assets/home-editorial.css: układ dokumentu
   (.ti-doc / .ti-toc / .ti-prose / .ti-callout) przychodzi stamtąd, tutaj są
   tylko elementy typowe dla poradnika — nagłówek ze zdjęciem, kroki procesu,
   karty, checklisty, źródła, FAQ, pasek udostępniania i kolumna boczna.
   Ładowana przez poszczególne poradniki; przy zmianach podbij ?v= w <link>.
   ============================================================================= */
/* ——— Nagłówek ze zdjęciem ——— */
.guide-head { position: relative; }
.guide-head__bg { position: absolute; inset: 0; overflow: hidden; }
.guide-head__bg img { width: 100%; height: 100%; object-fit: cover; }
.guide-head__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8, 23, 44, .88) 0%, rgba(8, 23, 44, .76) 100%);
}
.guide-head .ti-wrap { position: relative; z-index: 1; }
.guide-back {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.75rem;
    font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
    color: rgba(255, 255, 255, .62); text-decoration: none; transition: color .3s var(--ti-ease);
}
.guide-back:hover { color: var(--ti-gold); }
.guide-head__sub {
    font-size: clamp(1rem, .95rem + .3vw, 1.25rem); font-weight: 300; line-height: 1.6;
    color: rgba(255, 255, 255, .78); max-width: 46ch; margin: 0 0 1.5rem;
}
.guide-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
}
.guide-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ti-gold); }

/* ——— Kroki procesu (wariant .ti-svc w jednej kolumnie) ——— */
.guide-steps { margin: 0 0 1.5rem; }
.guide-steps > article {
    display: grid; grid-template-columns: 2.75rem 1fr; gap: .5rem;
    padding: 1.75rem 0; border-top: 1px solid var(--ti-line);
}
.guide-steps > article:first-child { padding-top: 1.25rem; }
.guide-steps b {
    font-size: .6875rem; letter-spacing: .16em; font-weight: 600; color: var(--ti-brass);
    padding-top: .45rem; font-variant-numeric: tabular-nums;
}
.guide-steps h3 { font-size: 1.0625rem; font-weight: 500; color: var(--ti-ink); margin: 0 0 .6rem; }
.guide-steps p { margin: 0 0 1rem; }
.guide-steps p:last-child { margin-bottom: 0; }
.guide-steps .ti-callout { margin-bottom: 1rem; }
.guide-steps > article > div > :last-child { margin-bottom: 0; }

/* ——— Odnośnik zewnętrzny / wewnętrzny w treści ——— */
.guide-more {
    display: inline-flex; align-items: center; gap: .55rem; border: 0;
    font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
    color: var(--ti-ink); text-decoration: none;
}
.guide-more:hover { color: var(--ti-brass); }
.guide-more .ti-ico { width: .85em; height: .85em; color: var(--ti-brass); }
.ti-prose a.guide-more { border-bottom: 0; }

/* ——— Ilustracja z podpisem ——— */
.guide-figure { margin: 1.5rem 0 0; }
.guide-figure img { width: 100%; height: clamp(12rem, 22vw, 16rem); object-fit: cover; border-radius: 2px; display: block; }
.guide-figure figcaption {
    margin-top: .7rem; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ti-ink-3);
}

/* ——— Karty (rynki, powiązane artykuły) ——— */
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.guide-card {
    background: #fff; border: 1px solid var(--ti-line); border-radius: 2px;
    padding: 1.5rem 1.6rem; text-decoration: none; display: block;
    transition: border-color .3s var(--ti-ease);
}
a.guide-card:hover { border-color: var(--ti-ink); }
.guide-card h3 { font-size: 1.0625rem; font-weight: 500; color: var(--ti-ink); margin: 0 0 .6rem; }
.guide-card p { font-size: .875rem; line-height: 1.72; color: var(--ti-ink-2); margin: 0 0 .9rem; }
.guide-card p:last-child { margin-bottom: 0; }
a.guide-card:hover h3 { color: var(--ti-brass); }
@media (max-width: 640px) { .guide-cards { grid-template-columns: 1fr; } }

/* ——— Wyróżniona liczba ——— */
.guide-figure-box { background: #0b1c36; color: #fff; border-radius: 2px; padding: 1.85rem 1.75rem; margin: 0 0 1.5rem; }
.guide-figure-box p:first-child {
    font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ti-gold);
    font-weight: 600; margin: 0 0 .9rem;
}
.guide-figure-box p { color: rgba(255, 255, 255, .72); font-size: .9375rem; line-height: 1.75; margin: 0; }
.guide-figure-box strong { font-size: 1.35em; font-weight: 300; color: #fff; letter-spacing: -.01em; }

/* ——— Podsumowanie ——— */
.guide-dark { background: #0b1c36; color: #fff; border-radius: 2px; padding: clamp(1.75rem, 3vw, 2.5rem); }
.guide-dark p { font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, .72); margin: 0 0 1.6rem; }
.guide-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.guide-tags span {
    padding: .5rem .95rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 2px;
    font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
}

/* ——— Źródła ——— */
.guide-src { margin: 0; }
.guide-src > div { padding: 1.15rem 0; border-top: 1px solid var(--ti-line); }
.guide-src p { font-size: .9375rem; font-weight: 500; color: var(--ti-ink); margin: 0 0 .45rem; }
.guide-src__row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.guide-src__tag {
    font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ti-ink-3); background: var(--ti-bone); padding: .25rem .6rem; border-radius: 2px;
}

/* ——— FAQ ——— */
.guide-faq { border-top: 1px solid var(--ti-line); }
.guide-faq details { border-bottom: 1px solid var(--ti-line); }
.guide-faq summary {
    cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between;
    gap: 1.5rem; padding: 1.35rem 0; font-size: 1.0625rem; font-weight: 500; color: var(--ti-ink); line-height: 1.5;
}
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary i { color: var(--ti-brass); font-size: .7rem; flex-shrink: 0; transition: transform .3s var(--ti-ease); }
.guide-faq details[open] summary i { transform: rotate(180deg); }
.guide-faq__answer { padding: 0 0 1.6rem; color: var(--ti-ink-2); line-height: 1.85; }

/* ——— CTA na końcu ——— */
.guide-cta { background: #0b1c36; color: #fff; border-radius: 2px; padding: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.guide-cta h2 { border-top: 0; padding-top: 0; margin-top: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-weight: 300; line-height: 1.25; color: #fff; margin: 0 0 1rem; }
.guide-cta p { font-size: .9375rem; line-height: 1.75; color: rgba(255, 255, 255, .72); margin: 0 0 1.75rem; max-width: 52ch; }

/* ——— Kolumna boczna ——— */
.guide-side { position: sticky; top: 7rem; }
.guide-side__block { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ti-line); }
.guide-side__label { font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ti-ink-3); margin: 0 0 1rem; }
.guide-share { display: flex; gap: .4rem; }
.guide-share a, .guide-share button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: .65rem 0;
    background: transparent; border: 1px solid var(--ti-line); border-radius: 2px; cursor: pointer;
    color: var(--ti-ink-2); text-decoration: none; transition: border-color .3s var(--ti-ease), color .3s var(--ti-ease);
}
.guide-share a:hover, .guide-share button:hover { border-color: var(--ti-ink); color: var(--ti-ink); }
.guide-share svg { width: 1rem; height: 1rem; }
.guide-help { background: #0b1c36; border-radius: 2px; padding: 1.5rem; }
.guide-help p:first-child { font-size: .9375rem; font-weight: 500; color: #fff; margin: 0 0 .5rem; }
.guide-help p { font-size: .8125rem; line-height: 1.65; color: rgba(255, 255, 255, .6); margin: 0 0 1.25rem; }

@media (max-width: 900px) {
    .guide-side { position: static; }
    .guide-side__block { border-top: 1px solid var(--ti-line); }
}

/* ——— Kroki bez numeracji (etapy nazwane, nie ponumerowane) ——— */
.guide-steps--plain > article { grid-template-columns: 1fr; }

/* ——— Checklista ——— */
.guide-check { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.guide-check li {
    position: relative; padding: .75rem 0 .75rem 1.75rem;
    border-top: 1px solid var(--ti-line); color: var(--ti-ink-2); font-size: .9375rem;
}
.guide-check li::before {
    content: ""; position: absolute; left: 0; top: 1.35em;
    width: .55rem; height: 1px; background: var(--ti-gold);
}

/* ——— Cennik (etykieta + kwota na włosowych liniach) ——— */
.guide-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0 0 1.5rem; }
.guide-cols h3 { margin-top: 0; }
.guide-price { margin: 0; }
.guide-price > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .7rem 0; border-top: 1px solid var(--ti-line); font-size: .9375rem; color: var(--ti-ink-2);
}
.guide-price > div:last-child { border-bottom: 1px solid var(--ti-line); }
.guide-price > div > span:last-child { color: var(--ti-ink); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-price > div.is-total { border-top: 1px solid var(--ti-ink); color: var(--ti-ink); font-weight: 500; }
.guide-price > div.is-total > span:last-child { color: var(--ti-brass); font-size: 1.1rem; }
@media (max-width: 640px) { .guide-cols { grid-template-columns: 1fr; } }

/* ——— Karta ze zdjęciem (miejscowości) ——— */
.guide-card--media { padding: 0; overflow: hidden; }
.guide-card--media img { width: 100%; height: 11rem; object-fit: cover; display: block; }
.guide-card--media > div { padding: 1.25rem 1.5rem 1.4rem; }
.guide-card__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }
.guide-card__price { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ti-brass); font-variant-numeric: tabular-nums; }
.guide-card--media .guide-card__row .guide-more { font-size: .625rem; }