/* ==========================================================================
   Barbers Lab — baza wiedzy
   Design System v3. Wpinany PO tokens.css i PO style.css:

       tokens.css  -> zmienne
       style.css   -> nagłówek, stopka, pasma, przyciski, siatki strony głównej
       baza-wiedzy.css (ten plik) -> tylko to, czego strona główna nie ma

   Reguły systemu obowiązują tu tak samo jak na stronie głównej:
   border-radius 0, zero gradientów, zero backdrop-filter, głębia to twardy
   offset 8px albo blok koloru pod spodem, amber jest jedynym akcentem.
   Wszystkie kolory, fonty i odstępy wyłącznie przez zmienne z tokens.css -
   ani jednej wartości hex w tym pliku.

   Mobile-first. Punkty, na których to ma wyglądać dobrze: 360, 414, 768, 1440.
   ========================================================================== */

/* ==========================================================================
   1. Skip link
   ========================================================================== */

.bw-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: var(--sp-3) var(--sp-5);
    background: var(--bl-amber);
    color: var(--bl-ink);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.bw-skip:focus {
    left: 0;
}

/* ==========================================================================
   2. Nagłówek — dokładka do .site-header ze style.css

   Blog nie ładuje ui.js, więc burgera (toggleMobileMenu) tu nie ma: byłby
   przyciskiem, który nic nie robi. Zamiast niego pod paskiem leży przewijana
   poziomo listwa z nawigacją, widoczna do 1024px.

   Dlaczego 1024, a nie 900 jak na stronie głównej: pozycji jest siedem, nie
   sześć — "Baza wiedzy" jest długie i przy 900px wchodziło na REZERWUJ.
   ========================================================================== */

.bw-nav-strip {
    display: flex;
    gap: var(--sp-6);
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--gutter);
    border-top: var(--bw-hair) solid var(--line-hairline);
    background: var(--bl-ink-900);
}

.bw-nav-strip::-webkit-scrollbar {
    display: none;
}

.bw-nav-strip a {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--bl-paper);
    white-space: nowrap;
}

.bw-nav-strip a:hover {
    color: var(--bl-amber);
}

.bw-nav-strip a.is-current,
.bw-header .nav-links a.is-current {
    color: var(--bl-amber);
    box-shadow: inset 0 -2px 0 0 var(--bl-amber);
}

/* Siedem pozycji potrzebuje więcej powietrza niż sześć na stronie głównej. */
.bw-header .nav-links {
    gap: var(--sp-6);
}

/* PL/EN: PL jest zwykłym <span>, EN linkiem — nie ma tu JS, który by je
   przełączał. Oba muszą centrować tekst tak jak <button> na stronie głównej. */
.bw-lang .lang-switcher-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bw-lang a.lang-switcher-btn {
    color: var(--bl-grey-500);
}

.bw-lang a.lang-switcher-btn:hover {
    color: var(--bl-amber);
}

@media (min-width: 900px) and (max-width: 1023px) {
    /* style.css pokazuje .nav-links od 900px; na blogu odsuwamy to do 1024px. */
    .bw-header .nav-links {
        display: none;
    }
}

@media (min-width: 1024px) {
    .bw-nav-strip {
        display: none;
    }
}

/* ==========================================================================
   3. Okruszki
   ========================================================================== */

.bw-crumbs {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.bw-crumbs ol {
    /* style.css resetuje tylko ul; <ol> nadal ma numerki od przeglądarki. */
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: baseline;
}

.bw-crumbs li {
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    min-width: 0;
}

.bw-crumbs li + li::before {
    content: "/";
    color: var(--bl-amber);
}

.bw-crumbs a {
    color: var(--text-secondary);
}

.bw-crumbs a:hover {
    color: var(--bl-amber);
}

/* Tytuł artykułu w okruszkach bywa długi — na telefonie przycinamy ostatni
   element zamiast łamać pasek na trzy linie. */
.bw-crumbs li:last-child span {
    display: block;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

@media (min-width: 768px) {
    .bw-crumbs li:last-child span {
        max-width: none;
        white-space: normal;
    }
}

/* ==========================================================================
   4. Pasmo nagłówkowe listy i artykułu
   ========================================================================== */

.bw-head .section-label {
    margin-top: var(--sp-6);
}

.bw-head__page {
    margin-top: var(--sp-6);
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ==========================================================================
   5. Pigułki kategorii — kwadratowe, mono, aktywna wypełniona amber
   ========================================================================== */

.bw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-bottom: var(--sp-8);
    margin-bottom: var(--sp-8);
    border-bottom: var(--bw-strong) solid var(--line-rule);
}

.bw-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--sp-4);
    border: var(--bw-hair) solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-primary);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.bw-chip:hover {
    background: var(--bl-ink);
    border-color: var(--bl-ink);
    color: var(--bl-paper);
}

.bw-chip.is-current {
    background: var(--bl-amber);
    border-color: var(--bl-amber);
    color: var(--bl-ink);
}

/* ==========================================================================
   6. Siatka kart

   12 artykułów na stronę dzieli się bez reszty przez 1, 2 i 3 kolumny, więc
   pełna strona nigdy nie zostawia niedokończonego rzędu. Ostatnia strona bywa
   krótsza — to przyjęte świadomie, tak samo jak poszarpana siatka opinii na
   stronie głównej: ukrycie artykułu, żeby rząd się domknął, kosztowałoby
   dostęp do treści. Patrz "Whole rows only" w specu Design Systemu.
   ========================================================================== */

.bw-cards {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
    .bw-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-8);
    }
}

@media (min-width: 1000px) {
    .bw-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bw-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: var(--bw-hair) solid var(--line-hairline);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

/* Głębia to twardy offset, nie cień z rozmyciem. */
.bw-card:hover,
.bw-card:focus-within {
    transform: translate(-4px, -4px);
    box-shadow: var(--shadow-hard-amber);
    border-color: var(--bl-ink);
}

.bw-card__media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bl-ink);
    border-bottom: var(--bw-strong) solid var(--bl-amber);
}

.bw-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--img-filter);
    transition: transform var(--dur-base) var(--ease-out);
}

.bw-card:hover .bw-card__media img {
    transform: scale(1.03);
}

/* Zastępnik przy braku okładki: znak marki na ink, nie rozciągnięte zdjęcie. */
.bw-card__mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8);
}

.bw-card__mark img {
    width: 60%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    opacity: .55;
}

.bw-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex: 1 1 auto;
    padding: var(--sp-5);
}

.bw-card__cat {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label-wide);
    text-transform: uppercase;
    color: var(--bl-amber);
}

.bw-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
    text-wrap: balance;
}

.bw-card__title a {
    color: var(--text-primary);
}

.bw-card__title a:hover {
    color: var(--bl-amber);
}

.bw-card__excerpt {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.bw-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: var(--bw-hair) solid var(--line-hairline);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.bw-card__go {
    color: var(--bl-amber);
}

.bw-empty {
    padding: var(--sp-12) 0;
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ==========================================================================
   7. Paginacja
   ========================================================================== */

.bw-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-12);
    padding-top: var(--sp-6);
    border-top: var(--bw-strong) solid var(--line-rule);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.bw-pager__step {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--sp-4);
    border: var(--bw-strong) solid var(--line-rule);
    color: var(--text-primary);
}

.bw-pager__step:hover {
    background: var(--bl-amber);
    border-color: var(--bl-amber);
    color: var(--bl-ink);
}

.bw-pager__step.is-off {
    border-color: var(--line-hairline);
    color: var(--text-muted);
}

.bw-pager__pages {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    order: 3;
    width: 100%;
    justify-content: center;
}

.bw-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    color: var(--text-secondary);
}

.bw-pager__page:hover {
    color: var(--bl-ink);
    background: var(--bl-amber);
}

.bw-pager__page.is-current {
    background: var(--bl-amber);
    color: var(--bl-ink);
}

.bw-pager__gap {
    padding: 0 var(--sp-1);
    color: var(--text-muted);
}

@media (min-width: 768px) {
    .bw-pager__pages {
        order: 0;
        width: auto;
    }
}

/* ==========================================================================
   8. Artykuł — nagłówek, okładka, stopka treści
   ========================================================================== */

.bw-article__title {
    margin-top: var(--sp-8);
    font-family: var(--font-poster);
    font-weight: var(--fw-regular);
    font-size: var(--fs-h1);
    line-height: var(--lh-hero);
    letter-spacing: var(--ls-poster);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--text-primary);
    max-width: 20ch;
}

.bw-article__lead {
    margin-top: var(--sp-6);
    max-width: 62ch;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-snug);
    color: var(--text-secondary);
}

.bw-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: var(--bw-hair) solid var(--line-hairline);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Okładka w ramce z przesuniętym blokiem amber — ten sam chwyt co .hero__frame
   i .about-figure. Offset twardy, 8px, bez cienia i bez zaokrągleń. */
.bw-figure {
    position: relative;
    margin-top: var(--sp-10);
}

.bw-figure::before {
    content: "";
    position: absolute;
    left: calc(var(--sp-2) * -1);
    bottom: calc(var(--sp-2) * -1);
    width: 55%;
    height: 60%;
    background: var(--bl-amber);
}

.bw-figure img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: var(--img-filter-hard);
    border: var(--bw-strong) solid var(--line-rule);
}

.bw-article__back {
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
    border-top: var(--bw-strong) solid var(--line-rule);
}

/* ==========================================================================
   9. Typografia treści

   content_html przychodzi z silnika bez ani jednej klasy, więc wszystko idzie
   po selektorach potomnych z .bw-prose. Nie stylujemy tu gołych h2/p globalnie:
   to samo pasmo paper niesie też okruszki, pigułki i karty.
   ========================================================================== */

.bw-prose {
    max-width: 68ch;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--text-primary);
    overflow-wrap: break-word;
}

.bw-prose > * + * {
    margin-top: var(--sp-5);
}

.bw-prose h2 {
    margin-top: var(--sp-12);
    padding-top: var(--sp-4);
    border-top: var(--bw-block) solid var(--bl-amber);
    font-family: var(--font-poster);
    font-weight: var(--fw-regular);
    font-size: var(--fs-h2);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-poster);
    text-transform: uppercase;
    text-wrap: balance;
}

.bw-prose h3 {
    margin-top: var(--sp-10);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
}

.bw-prose h4 {
    margin-top: var(--sp-8);
    font-family: var(--font-mono);
    font-size: var(--fs-label-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.bw-prose p {
    line-height: var(--lh-body);
}

.bw-prose strong,
.bw-prose b {
    font-weight: var(--fw-bold);
}

.bw-prose a {
    color: var(--bl-amber-600);
    border-bottom: var(--bw-hair) solid var(--bl-amber);
}

.bw-prose a:hover {
    color: var(--bl-ink);
    border-color: var(--bl-ink);
}

.bw-prose ul,
.bw-prose ol {
    padding-left: 0;
    list-style: none;
}

.bw-prose li + li {
    margin-top: var(--sp-3);
}

.bw-prose ul > li {
    position: relative;
    padding-left: var(--sp-6);
}

/* Kwadrat, nie kropka — okrągły punktor jest jedynym zaokrągleniem, jakie
   ten system by tolerował, i i tak go nie chcemy. */
.bw-prose ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--lh-body) * 0.5em - 3px);
    width: 6px;
    height: 6px;
    background: var(--bl-amber);
}

.bw-prose ol {
    counter-reset: bw-ol;
}

.bw-prose ol > li {
    position: relative;
    counter-increment: bw-ol;
    padding-left: var(--sp-8);
}

.bw-prose ol > li::before {
    content: counter(bw-ol, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
    color: var(--bl-amber);
}

.bw-prose ul ul,
.bw-prose ol ol,
.bw-prose ul ol,
.bw-prose ol ul {
    margin-top: var(--sp-3);
    padding-left: var(--sp-5);
}

.bw-prose blockquote {
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
    border-left: var(--bw-block) solid var(--bl-amber);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: var(--lh-snug);
    text-transform: none;
    color: var(--text-primary);
}

.bw-prose blockquote p + p {
    margin-top: var(--sp-4);
}

.bw-prose figure {
    margin-top: var(--sp-8);
}

.bw-prose img {
    width: 100%;
    height: auto;
    border: var(--bw-strong) solid var(--line-rule);
    filter: var(--img-filter);
}

.bw-prose figcaption {
    margin-top: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Tabela z silnika bywa szeroka — na telefonie ma się przewijać, a nie
   rozpychać dokumentu w poziomie. */
.bw-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--fs-body);
}

.bw-prose th,
.bw-prose td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    vertical-align: top;
    border: var(--bw-hair) solid var(--line-strong);
}

.bw-prose th {
    background: var(--bl-ink);
    color: var(--bl-paper);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.bw-prose code {
    padding: 2px var(--sp-1);
    background: var(--surface-inset);
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
}

.bw-prose pre {
    padding: var(--sp-5);
    overflow-x: auto;
    background: var(--bl-ink);
    color: var(--bl-paper);
}

.bw-prose pre code {
    padding: 0;
    background: none;
}

.bw-prose hr {
    height: 0;
    border: 0;
    border-top: var(--bw-strong) solid var(--line-strong);
}

@media (min-width: 768px) {
    .bw-prose {
        font-size: 17px;
    }

    .bw-article__title {
        font-size: var(--fs-display);
    }
}

/* ==========================================================================
   10. Powiązane teksty

   Do trzech kafli. Liczba kolumn to liczba kart (--bw-related-count z szablonu),
   więc rząd zawsze jest pełny — ta sama zasada co Zespół i Studio na stronie
   głównej, które są przypięte na 1 albo 3 kolumny.
   ========================================================================== */

.bw-related .bw-cards {
    margin-top: var(--sp-8);
}

@media (min-width: 760px) {
    .bw-cards--related {
        grid-template-columns: repeat(var(--bw-related-count, 3), minmax(0, 1fr));
    }
}

/* ==========================================================================
   11. Pasmo CTA
   ========================================================================== */

.bw-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
}

.bw-cta__actions .btn {
    flex: 1 1 240px;
}

@media (min-width: 600px) {
    .bw-cta__actions .btn {
        flex: 0 0 auto;
    }
}

/* .btn--outline ze style.css robi na hover tło amber. Na paśmie amber to
   przycisk, który znika. Na tym paśmie odwracamy go na ink. */
[data-theme="amber"] .btn--outline:hover {
    background: var(--bl-ink);
    border-color: var(--bl-ink);
    color: var(--bl-paper);
}