/* Strony treściowe: „O projekcie" i FAQ. Kolumna tekstu zakotwiczona do lewej,
   szerokość ok. 90 znaków — wygodna do czytania bez wrażenia pustki obok. */

.tresc {
    max-width: 90ch;
}

.tresc__tytul {
    margin: 0 0 12px;
    padding-bottom: 12px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tw-ink);
    border-bottom: 3px solid var(--tw-accent);
    display: inline-block;
}

/* Drugi selektor jest potrzebny wewnątrz .tresc, gdzie ogólna reguła
   „.tresc p” ma wyższą specyficzność; pierwszy obsługuje lead poza treścią
   (strona kontaktu). */
.tresc__lead,
.tresc .tresc__lead {
    margin: 0 0 30px;
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--tw-muted);
}

/* Paragrafy dokumentu (regulamin). scroll-margin, żeby kotwica ze spisu
   nie wsuwała nagłówka pod górną krawędź okna. */
.tresc__paragraf {
    margin: 38px 0 14px;
    padding-top: 14px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tw-ink);
    border-top: 1px solid var(--tw-line);
    scroll-margin-top: 20px;
}

.tresc__paragraf:first-of-type {
    margin-top: 26px;
}

/* Wideo skaluje się do kolumny tekstu — atrybuty width/height zostają jako
   proporcja, żeby przeglądarka rezerwowała miejsce przed załadowaniem. */
.tresc__wideo {
    display: block;
    width: 100%;
    height: auto;
    margin: 6px 0 24px;
    background: #000;
}

.tresc p,
.tresc li {
    font-size: 17px;
    line-height: 1.75;
    color: #333;
}

.tresc p {
    margin-bottom: 16px;
}

.tresc h2,
.tresc h3,
.tresc h4 {
    margin: 34px 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--tw-ink);
}

.tresc ul,
.tresc ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.tresc li + li {
    margin-top: 8px;
}

/* Podkreślenie, a nie sama barwa: odnośnik w środku akapitu musi dać się
   odróżnić również przy zaburzeniach rozpoznawania barw (WCAG 1.4.1).
   Kontrast barwy odnośnika wobec tekstu wokół nie sięga wymaganych 3:1. */
.tresc a {
    color: var(--tw-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── FAQ: składany akordeon (natywny <details>, bez JavaScriptu) ─────────── */

.faq-lista {
    border-top: 1px solid var(--tw-line);
}

.faq-pozycja {
    border-bottom: 1px solid var(--tw-line);
}

.faq-pozycja__pytanie {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 4px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--tw-ink);
    cursor: pointer;
    list-style: none;
    transition: color .15s ease;
}

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

/* Znacznik rozwinięcia rysowany samodzielnie — domyślny trójkąt jest drobny
   i nie da się go ostylować spójnie między przeglądarkami. */
.faq-pozycja__pytanie::before {
    content: "+";
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tw-accent);
    color: var(--tw-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.faq-pozycja[open] .faq-pozycja__pytanie::before {
    content: "–";
}

.faq-pozycja__pytanie:hover,
.faq-pozycja__pytanie:focus-visible {
    color: var(--tw-brand);
}

.faq-pozycja__odpowiedz {
    padding: 0 4px 20px 40px;
}

.faq-pozycja__odpowiedz p:last-child,
.faq-pozycja__odpowiedz ol:last-child,
.faq-pozycja__odpowiedz ul:last-child {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .faq-pozycja__odpowiedz {
        padding-left: 4px;
    }
}

/* ── Kontakt ────────────────────────────────────────────────────────────── */

.kontakt {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 46px;
    align-items: start;
}

.kontakt__lista {
    margin: 0;
}

.kontakt__lista > div {
    padding: 16px 0;
    border-bottom: 1px solid var(--tw-line);
}

.kontakt__lista > div:first-child {
    padding-top: 0;
}

.kontakt__lista > div:last-child {
    border-bottom: 0;
}

.kontakt__lista dt {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tw-muted);
}

.kontakt__lista dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--tw-ink);
}

.kontakt__lista a {
    color: var(--tw-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--tw-accent);
}

.kontakt__lista a:hover {
    color: var(--tw-brand);
}

.kontakt__osoba {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--tw-muted);
}

.kontakt__mapa iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 1px solid var(--tw-line);
}

.kontakt__mapa-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--tw-brand);
}

@media (max-width: 991px) {
    .kontakt {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .kontakt__mapa iframe {
        height: 320px;
    }
}

/* ── Strony treściowe z kolumną boczną ──────────────────────────────────── */

.tresc-uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 46px;
    align-items: start;
}

.tresc-uklad .tresc {
    max-width: none;
}

.tresc-bok {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tresc-bok__karta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--tw-surface);
    border: 1px solid var(--tw-line);
}

/* Odstępy w karcie zadaje gap, nie marginesy poszczególnych elementów.
   Motyw narzuca akapitom na tych stronach ujemny margines (.about-page p
   { margin-bottom: -7px }) o wyższej specyficzności niż klasy komponentu —
   przez to przycisk wchodził na adres e-mail. */
.tresc-bok__karta > * {
    margin: 0;
}

.tresc-bok__karta--akcja {
    background: var(--tw-brand);
    border-color: var(--tw-brand);
}

.tresc-bok__tytul {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tw-muted);
}

.tresc-bok__karta--akcja .tresc-bok__tytul {
    color: var(--tw-accent);
}

.tresc-bok__mapa .mapa-powiatow__svg {
    max-width: 100%;
}

.tresc-bok__lista {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.tresc-bok__lista li {
    padding: 5px 0 5px 16px;
    position: relative;
    font-size: 13px;
    color: #444;
}

.tresc-bok__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    background: var(--tw-accent);
}

/* Spis treści dokumentu — numeracja z licznika, żeby cyfra była w barwie akcentu. */
.tresc-bok__spis {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paragraf;
}

.tresc-bok__spis li {
    counter-increment: paragraf;
}

.tresc-bok__spis li + li {
    border-top: 1px solid var(--tw-line);
}

.tresc-bok__spis a {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--tw-ink);
    text-decoration: none;
}

.tresc-bok__spis a::before {
    content: "§ " counter(paragraf);
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--tw-accent-dark);
}

.tresc-bok__spis a:hover,
.tresc-bok__spis a:focus {
    color: var(--tw-brand);
    text-decoration: underline;
}

.tresc-bok__opis {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.tresc-bok__kontakt {
    font-size: 14.5px;
    line-height: 1.7;
}

.tresc-bok__kontakt a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--tw-accent);
}

.tresc-bok__cta {
    display: block;
    padding: 11px 16px;
    background: var(--tw-accent);
    color: var(--tw-ink);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}

.tresc-bok__cta:hover {
    background: #e6bf00;
    color: var(--tw-ink);
}

@media (max-width: 991px) {
    .tresc-uklad {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .tresc-bok {
        position: static;
    }
}