/* News/category grids: thumb images must span the column on large viewports too
   (responsive.css only set width:100% below 1200px, so CMS images stayed intrinsic width).

   Height is pinned to a ratio box instead of following the source image. Openers
   arrive from the CMS at whatever ratio the agency shot them (measured 1.14 to
   1.78 across the archive), so `height: auto` gave every card in a row a
   different image height and knocked the category pill, title and date below it
   out of alignment. 370x270 is the size the theme was drawn around and is the
   median ratio of the archive, so most images give up only a sliver to the crop.
   Declaring the ratio also reserves the box before the image loads, which is
   what used to make the cards jump. */
.single-post-wrap .thumb img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 370 / 270;
    object-fit: cover;
}

/* Reading column on every details page (news, articles, interviews, books,
   contests, CMS preview) — KOP-167. The template let the body run across the
   whole col-lg-9 (~840px, 110+ characters a line at 16px); editors asked for
   at most ~80 characters and more air on the sides. 37em is ~80 characters of
   the body font (measured on a news page), and centring it in the column splits the freed space between
   the left edge and the sidebar. Everything in the column (opener, meta, body,
   bios, related, comments) shares the width so the edges stay aligned. */
.blog-details-page-inner {
    max-width: 37em;
    margin-left: auto;
    margin-right: auto;
}

/* Book pages set the cover beside the review (col-md-4 / col-md-8), so the
   review is already a narrow column; capping the wrapper too would squeeze it
   to ~55 characters. */
.blog-details-page-inner--wide {
    max-width: none;
}

/* The opener at the top of a details page is the piece's main picture and has
   nothing beside it to line up with, so it keeps its own proportions — up to a
   height cap (KOP-168). At full proportions a squarish opener filled the first
   screen and pushed the text out of view; editors asked for a smaller photo
   so the article starts above the fold. Taller pictures are cropped around
   the centre rather than letterboxed. */
.single-blog-inner > .single-post-wrap .thumb img {
    aspect-ratio: auto;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
}

/* Book covers are portrait artwork — cropping them to landscape would cut off
   the title. Letterbox them in a square box so the row still lines up. */
.single-post-wrap .thumb.book-card__cover {
    background: #fff;
}

.single-post-wrap .thumb.book-card__cover img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* Search hits are a single column, but without a fixed thumb the text edge
   zig-zags down the page. */
.search-result-row .media-left img {
    width: 160px;
    height: 120px;
    object-fit: cover;
}

/* Listing cards — news, articles, interviews, contests and books all render as
   `.single-post-wrap.style-box` inside a Bootstrap column, while detail pages
   use `.style-overlay`, so these rules never touch an article body.

   KOP-90 gave every thumbnail in a row the same height, but the card still
   ended wherever the abstract ended: one row of /wiadomosci/medycyna measured
   1159 / 1128 / 863 px, so a ~300 px hole opened under the short card and
   `Czytaj więcej` sat at three different heights. Abstracts are written as the
   article lead, not as a teaser — across the archive their plain-text length
   runs 112 to 760 characters (median 479), which in a ~262 px column is a
   spread of roughly ten lines.

   The clamp is presentational only: the full abstract stays in the HTML, so
   crawlers still read it and no text is hidden from anyone who looks at the
   source. Listing pages are not canonical for that text anyway. */
.single-post-wrap.style-box {
    /* The card owns the 30px row gutter as its bottom margin (style.css).
       Filling the column with plain `height: 100%` would push that margin past
       the row and close the gap to the next one, so subtract it here. */
    --kw-card-gutter: 30px;
    height: calc(100% - var(--kw-card-gutter));
    margin-bottom: var(--kw-card-gutter);
    display: flex;
    flex-direction: column;
}

.single-post-wrap.style-box .details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.single-post-wrap.style-box .details > .btn {
    /* Taking the leftover column height is what puts every `Czytaj więcej` on
       one baseline. `!important` is unavoidable here: the cards render the
       button with Bootstrap's `mt-4`, and Bootstrap spacing utilities are all
       `!important`, so a plain `margin-top: auto` loses no matter how specific
       the selector is. The gap above the button comes from the abstract below.
       `align-self` keeps the button at its text width — a column flex
       container would otherwise stretch it across the card. */
    margin-top: auto !important;
    align-self: flex-start;
}

.single-post-wrap.style-box .details > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
    /* Replaces the button's own `mt-4`, which the auto margin above consumed. */
    margin-bottom: 24px;
}

/* The API returns the abstract already wrapped in its own <p>, which
   dangerouslySetInnerHTML nests inside the card's paragraph. That inner
   paragraph picks up the theme's 16px `margin-top`, which lands inside the
   clamped box and leaves it 16px taller than the eight lines it should be. */
.single-post-wrap.style-box .details > p > p {
    margin: 0;
}

.post-meta-single--cat-author-row ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    width: 100%;
}

.post-meta-single--cat-author-row ul li {
    margin-left: 0;
    margin-right: 0;
}

.single-blog-inner a {
    text-decoration: underline;
}

/* Tag chips (footer cloud and sidebar widget). Tags come from the editors, so
   plenty of them are whole phrases — "Miesiąc Świadomości Nowotworów Piersi" is
   36 characters and cannot fit one line of a 262px footer column. The theme
   pins the chip with `height: 36px; line-height: 36px`, so a phrase that wraps
   keeps a one-line border box while its text runs out below and past it.

   `inline-flex` + `min-height` reproduces the theme's 36px for the single-word
   tags that are the common case, and lets the border grow with a wrapped
   phrase. `max-width` keeps a long phrase inside the column instead of pushing
   the footer sideways; `overflow-wrap` covers the tag that is one long
   unbreakable word. */
.widget_tag_cloud .tagcloud a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 36px;
    padding: 4px 15px;
    line-height: 1.4;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}

.label-news-medycyna {
    background-color: #ff33cc;
}
.label-news-technologia {
    background-color: #9549d2;
}
.label-news-psychologia {
    background-color: #3c5bed;
}
.label-news-zdrowie-uroda {
    background-color: #0073ff;
}
.label-news-bezpieczenstwo-it {
    background-color: #0299ff;
}
.label-news-nauki-przyrodnicze {
    background-color: #01bfff;
}
.label-news-astronomia-fizyka{
    background-color: #03a6cc;
}
.label-news-humanistyka {
    background-color: #006c7f;
}
.label-news-ciekawostki {
    background-color: #023334;
}
/* The pill text inherits the meta row's navy, which vanishes on this near-black
   teal; white keeps it readable, including over the theme's blue link hover. */
.label-news-ciekawostki,
.label-news-ciekawostki:hover,
.label-news-ciekawostki:focus {
    color: #fff;
}

/*
 * Home hero (template): navy panel, image + yellow offset frame, ~56px gutter
 * to text, meta row ~15px gap, typography + CTA rhythm.
 *
 * KOP-169: the template's 730x500 image and roomy padding made the hero
 * taller than a 1366x768 screen, so nothing below it showed on arrival.
 * Editors asked for a smaller hero so readers can see there is more below;
 * the image is now 560x384 (same 730:500 ratio) with tighter padding.
 */
.banner-area--home-hero {
    background-color: #0b2239;
}

.banner-inner--home-hero {
    padding-top: 32px;
    padding-bottom: 36px;
}

/* The theme's .banner-inner-1 adds another 43px under the hero box. */
.banner-area--home-hero.banner-inner-1 {
    padding-bottom: 0;
}

/* Space between hero block and the 4-card row */
.banner-inner--home-hero > .container + .container {
    margin-top: 48px;
}

.banner-hero__container {
    padding-left: 15px;
    padding-right: 15px;
}

.banner-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 56px;
    row-gap: 32px;
}

.banner-hero__media {
    flex: 0 0 auto;
    width: 560px;
    max-width: 100%;
}

.banner-hero__media .thumb {
    width: 100%;
    max-width: 560px;
}

/* Template-style yellow layer (~18px offset vs theme default 30px, scaled
   down with the smaller image) */
.banner-area--home-hero .banner-hero__media .thumb.after-left-top {
    margin-left: 18px;
    margin-top: 18px;
}

.banner-area--home-hero .banner-hero__media .thumb.after-left-top::after {
    left: -18px;
    top: -18px;
    border-radius: 8px;
}

.banner-hero__media .thumb img {
    display: block;
    width: 560px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 730 / 500;
    object-fit: cover;
    border-radius: 8px;
}

.banner-hero__body {
    flex: 1 1 0;
    min-width: 0;
}

.banner-hero__details {
    padding-top: 0;
}

/* Meta: category pill + date on one row, ~15px between */
.banner-hero__meta.post-meta-single ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.banner-area--home-hero .banner-hero__meta.post-meta-single li.date {
    margin-left: 0;
}

.banner-area--home-hero .banner-hero__details .post-meta-single {
    margin-bottom: 24px;
}

.banner-inner--home-hero .banner-details h2.banner-hero__title {
    margin: 0 0 20px;
    color: #fff;
    font-weight: 700;
    line-height: 1.25;
    font-size: clamp(1.5rem, 2.2vw + 0.75rem, 2.25rem);
}

.banner-hero__abstract {
    overflow-wrap: anywhere;
    word-wrap: break-word;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.banner-hero__abstract p {
    margin: 0 0 12px;
    color: inherit;
}

.banner-hero__abstract p:last-child {
    margin-bottom: 0;
}

/* Softer than default theme paragraph spacing inside hero */
.banner-area--home-hero .banner-hero__details .banner-hero__abstract p {
    margin-top: 0;
}

.banner-area--home-hero .banner-hero__details .btn {
    margin-top: 28px;
}

/* CTA: muted slate on navy (template “read more”) */
.banner-hero__cta.btn {
    background-color: #1e3a52;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.banner-hero__cta.btn:hover,
.banner-hero__cta.btn:focus {
    background-color: #2a4d6b;
    color: #fff;
}

/* Ad bar: white background so the Kopalnia Wiedzy logo (on white) displays correctly */
.adbar-area {
    background-color: #fff;
}

/* Slimmer header bars on desktop (KOP-169). The three bars above the content
   (top links, logo + header ad, main menu) took 258px — a third of a laptop
   screen — before the homepage hero even began. Trim each one: top bar
   68 -> 48px, logo band 122 -> ~88px (logo 72 -> 60px; the 468x60 header ad
   still fits, the >=1600px 728x90 one sets its own height), menu 68 -> 56px.
   Below 992px the stacked mobile header keeps the theme's spacing. */
@media (min-width: 992px) {
    .topbar-area {
        padding: 8px 0;
    }
    .adbar-area {
        padding: 14px 0;
    }
    .adbar-area .logo a img {
        height: 60px;
    }
    .navbar-area .navbar {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .navbar-area .nav-container .navbar-collapse .navbar-nav li {
        line-height: 44px;
    }
    /* The theme pins the "+" crossbar at top:26px (half of its 52px line);
       centre it like the vertical stroke so the "+" survives the 44px line. */
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children:after {
        top: 50%;
    }
    /* Dropdowns hang from the bar's lower edge: 44px line + 6px padding (the
       theme's 60px matched its 52px + 8px), so the hover never crosses a gap. */
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu {
        top: 50px;
    }
    .menu-search-inner input {
        height: 40px;
    }
}

/* Brand lockup sizing. Both logo files ship at roughly 2x their largest display
   size for high-DPI screens, so the display height has to be pinned here —
   otherwise the intrinsic 629px-wide file would render at double size. Width
   stays auto to keep the 3.93:1 artwork ratio, and the width/height attributes
   on the <img> reserve the box before the file loads. */
.adbar-area .logo a img {
    height: 72px;
    width: auto;
}

.navbar-area .nav-container .logo a img {
    height: 40px;
    width: auto;
}

@media all and (max-width: 767px) {
    /* responsive.css pins width:140px below 576px; height-based sizing replaces
       it. The margin stands in for the padding the old logo file carried inside
       the image — below 768px the search field stacks directly underneath. */
    .navbar-area .nav-container .logo a img {
        height: 32px;
        width: auto;
        margin-bottom: 12px;
    }
}

.banner-inner .banner-hero__body .banner-hero__details {
    margin-left: 0;
}

@media (max-width: 1199px) {
    .banner-hero {
        flex-direction: column;
        align-items: stretch;
        column-gap: 0;
    }

    .banner-hero__media {
        width: 100%;
    }

    .banner-hero__details {
        padding-top: 8px;
    }
}

/*
 * In-content gallery box (replacement for legacy !RCOL/!LCOL tokens).
 * Renders thumbnails from News.gallery / Article.gallery floated next to
 * the surrounding paragraphs on desktop, full-width above on mobile.
 */
.kw-gallery-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 12px;
    background: #f5f7fa;
    border-radius: 8px;
    max-width: 320px;
}

.kw-gallery-box--right {
    float: right;
    margin-left: 24px;
    clear: right;
}

.kw-gallery-box--left {
    float: left;
    margin-right: 24px;
    clear: left;
}

.kw-gallery-box__item {
    flex: 0 0 calc(50% - 4px);
    display: block;
    margin: 0;
}

.kw-gallery-box__link {
    display: block;
    line-height: 0;
    text-decoration: none;
}

.kw-gallery-box__item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* Per-thumbnail photo credit inside the gallery box (KOP-156). */
.kw-gallery-box__credit {
    margin: 3px 0 0;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .kw-gallery-box,
    .kw-gallery-box--right,
    .kw-gallery-box--left {
        float: none;
        margin: 0 0 16px;
        max-width: 100%;
    }
}

/* Photo credit / attribution caption (KOP-156).

   The CMS carries a copyright string per image ("Prawa autorskie"); the API
   exposes it as ImageInfo.copyright and <ImageCredit> renders it wherever the
   photo is shown. Deliberately small and muted so it credits the source
   without competing with the article, matching how press photo credits read. */
.kw-image-credit {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: #8a8f98;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.kw-image-credit__symbol {
    font-weight: 600;
}

/* Under a details-page hero the credit sits just below the opener, inside the
   `.thumb` box (which has no fixed height, so it grows to fit — nothing is
   clipped by its `overflow: hidden`). Right-aligned with a little padding so
   the text clears the box's rounded corners. */
.kw-image-credit--hero {
    margin: 4px 0 0;
    padding: 0 4px 2px;
    text-align: right;
}
/* Ad slot (KOP-114).

   AdSense fills the <ins> asynchronously and the returned creative decides its
   own height, so without a reserved box the content below jumps when the ad
   lands. That is a Cumulative Layout Shift hit and CLS is a ranking signal, so
   the reservation is an SEO measure as much as a cosmetic one.

   90px is a leaderboard's short side. An unfilled slot therefore leaves a gap
   that size rather than collapsing — the deliberate trade of a little empty
   space for a stable page. */
.ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90px;
    margin: 30px 0;
    overflow: hidden;
}

.ad-slot > ins {
    width: 100%;
}

/* kw3-header, right of the logo. The column is ~760px wide from 1600px (the
   theme's 1580px container) and ~530-555px below that, so the unit is sized
   here per breakpoint instead of left to AdSense: a fixed header height, and a
   728px leaderboard never squeezed into a 540px column. Under 992px the header
   stacks and <AdSlot minViewport> does not render the unit at all. */
.ad-slot.ad-slot--header {
    justify-content: flex-end;
    min-height: 60px;
    margin: 0;
}

.ad-slot--header > ins.adsbygoogle {
    display: inline-block;
    width: 468px;
    height: 60px;
}

@media (min-width: 1600px) {
    .ad-slot.ad-slot--header {
        min-height: 90px;
    }
    .ad-slot--header > ins.adsbygoogle {
        width: 728px;
        height: 90px;
    }
}

@media (max-width: 991px) {
    .ad-slot.ad-slot--header {
        display: none;
    }
}

/* kw3-sidebar, the right-column box: 290-500px wide depending on the
   breakpoint, so a responsive rectangle; 280px reserves a 336x280. */
.ad-slot.ad-slot--sidebar {
    min-height: 280px;
    margin: 0 0 30px;
}

/* Units inside the content flow (in-feed between listing rows, in-article in
   the text) have no fixed height. An unfilled one collapses rather than
   leaving a hole in the middle of the content. */
.ad-slot.ad-slot--infeed {
    display: block;
    margin: 0 0 30px;
}

.ad-slot.ad-slot--in-article {
    display: block;
    margin: 24px 0;
    text-align: center;
}

.ad-slot--infeed:has(> ins[data-ad-status="unfilled"]),
.ad-slot--in-article:has(> ins[data-ad-status="unfilled"]) {
    display: none;
}

.ad-slot.ad-slot--after-article {
    margin: 30px 0 0;
}

/* `?ads=preview` (src/ads/preview.js): outline and label every slot so
   placements can be checked where AdSense serves nothing (staging). Unfilled
   in-content slots stay visible here instead of collapsing. */
.ad-slot--preview {
    position: relative;
    outline: 2px dashed #d6336c;
    outline-offset: -2px;
    background: repeating-linear-gradient(45deg, #fff0f5, #fff0f5 8px, #fff 8px, #fff 16px);
}

.ad-slot--preview::before {
    content: attr(data-ad-label);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 2px 8px;
    background: #d6336c;
    color: #fff;
    font: 600 12px/1.5 sans-serif;
    pointer-events: none;
}

.ad-slot--preview > ins.adsbygoogle {
    min-height: 60px;
}

.ad-slot--preview.ad-slot--infeed,
.ad-slot--preview.ad-slot--in-article {
    display: block !important;
    min-height: 120px;
}

/* X (formerly Twitter) brand icon — KOP-83.

   The theme ships Font Awesome 4.7, which predates X and so has no x-twitter
   glyph. Rather than upgrade the whole icon set (FA4 -> FA6 renames codepoints
   across nearly every icon in the app), we self-host only the Font Awesome 6
   *Brands* webfont and bind it to `.fa-brands` here; everything else stays FA4.

   We deliberately do NOT load FA6's own brands.min.css: its global
   `.fa-<brand>:before` rules would win over FA4's (e.g. fa-linkedin is \f0e1 in
   FA4 but \f08c in FA6) and corrupt the icons still rendered in the FA4 font.
   Only the two rules we actually need are reproduced below, so nothing else on
   the page is affected. Glyph \e61b is x-twitter, taken from FA 6.5.2 brands. */
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-brands-400.woff2) format("woff2");
}

.fa-brands {
    /* Mirrors FA4's `.fa` base so a brand glyph lines up like every other icon;
       the font-family is what routes `.fa-brands` to the Brands face above. */
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-x-twitter::before {
    content: "\e61b";
}

/* The social badges hard-code Twitter blue in style.css; X's mark is monochrome,
   so the circle it sits in becomes black. Covers the round badges (footer, top
   bar, article share rows) and the followers-list badge (trending widget). */
.social-area-2 li a.twitter-icon {
    background: #000;
}

.social-area-list ul li .twitter i {
    background: #000;
}

/* Photo caption + copyright under images, and the gallery lightbox (KOP-156).

   The editors asked (KOP-156 thread) for the photo *caption* ("Opis") and the
   copyright to read in the article's own font — not the small muted credit the
   first pass shipped — and for gallery thumbnails to open a proper lightbox.
   <PhotoCaption> renders the caption (description) above the copyright; this
   block styles it below an image and, in white, inside the dark lightbox. */
.kw-photo-caption {
    margin: 8px 0 0;
    line-height: 1.45;
    color: #4a4a4a;
    /* ~1-2pt smaller than the body copy, which it otherwise inherits. */
    font-size: 0.9em;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* Under a details-page hero: a little more room before the title/meta below. */
.kw-photo-caption--hero {
    margin: 10px 0 18px;
}

.kw-photo-caption__desc {
    display: block;
}

/* The credit sits on its own line under the caption. Override the small muted
   <ImageCredit> base (12px / grey) so it matches the caption's body font; the
   base still applies to the bare gallery-thumbnail credits, which stay as they
   were. */
.kw-photo-caption__credit.kw-image-credit {
    display: block;
    margin-top: 2px;
    font-size: inherit;
    color: inherit;
}

/* "Źródło: …" under a news/article body (KOP-165), in the caption's quieter
   tone so it reads as attribution rather than part of the text. */
.kw-source-credit {
    margin: 0 0 20px;
    font-size: 0.9em;
    color: #4a4a4a;
    overflow-wrap: anywhere;
}

.kw-source-credit__label {
    font-weight: 600;
}

/* --- Lightbox (KOP-156) ----------------------------------------------------

   A fixed dark overlay with the photo centred (never scaled past 90vw/80vh, so
   there is always a black margin), the caption + copyright in white below it,
   and edge arrows + a close X. Portalled onto <body>, above everything. */
.kw-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.92);
}

.kw-lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 90vw;
}

.kw-lightbox__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
}

.kw-lightbox__figure .kw-photo-caption {
    margin-top: 12px;
    max-width: 90vw;
}

/* White caption on the dark overlay; the description reads bold, per the mock. */
.kw-photo-caption--lightbox {
    color: #fff;
    font-size: 1em;
    text-align: left;
}

.kw-photo-caption--lightbox .kw-photo-caption__desc {
    font-weight: 700;
}

.kw-photo-caption--lightbox .kw-photo-caption__credit.kw-image-credit {
    margin-top: 4px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.kw-lightbox__close {
    position: fixed;
    top: 12px;
    right: 20px;
    padding: 8px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}

.kw-lightbox__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 16px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 56px;
    line-height: 1;
    cursor: pointer;
}

.kw-lightbox__nav--prev {
    left: 8px;
}

.kw-lightbox__nav--next {
    right: 8px;
}

.kw-lightbox__close:hover,
.kw-lightbox__nav:hover {
    color: #cfcfcf;
}

@media (max-width: 767px) {
    .kw-lightbox {
        padding: 12px;
    }

    .kw-lightbox__close {
        font-size: 32px;
        top: 8px;
        right: 10px;
    }

    .kw-lightbox__nav {
        font-size: 40px;
        padding: 8px;
    }
}

/* Hero caption placement fix (KOP-156 editor follow-up).

   On the details pages the opener sits in `.single-post-wrap.style-overlay`,
   whose `.details` (category/date/title) is absolutely positioned over the
   bottom of the image. The caption therefore has to live *after* that wrap, or
   it inflates the wrap and the overlaid title drops onto the image's bottom
   edge. Placed after the wrap it inherits the wrap's 30px bottom margin, which
   strands it too far below the photo — so pull it back up into that margin to
   keep it tight under the image. When there is no caption the wrap keeps its
   normal spacing. */
.kw-photo-caption--hero {
    margin-top: -20px;
}

/* Sponsored-article disclosure pill (KOP-148).

   Polish law requires sponsored articles to be visibly marked as promotional
   everywhere they appear; <ArticlePill> renders the sponsored disclosure label
   in place of the category pill. A muted brand khaki (#a6a988) with dark text for contrast, deliberately distinct from the
   category colours, so it reads as a disclosure rather than a browsable
   section. */
.tag-sponsored {
    background: #a6a988;
    color: #2b2b26;
    cursor: default;
}

/* Homepage recent-news carousel (KOP-150). The rows reuse the standard card
   grid; this only styles the up/down pager beneath them. Editors found the
   first 44px/20px grey-ringed buttons too easy to miss (KOP-166), so they are
   a little larger, with a brand-blue ring and a bigger chevron. */
.kw-news-carousel__controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 20px;
}
.kw-news-carousel__btn {
    width: 52px;
    height: 52px;
    border: 2px solid #1a63c0;
    border-radius: 50%;
    background: #fff;
    color: #1a63c0;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.kw-news-carousel__btn:hover:not(:disabled) {
    background: #1a63c0;
    color: #fff;
}
.kw-news-carousel__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Space the recent-news carousel off the hero (KOP-150) — without it the first
   row sits flush against the dark hero box. 32px (was 50px) lets the top of
   the first row show under the hero on a 768px-tall screen (KOP-169). */
.kw-news-carousel {
    margin-top: 32px;
}

/* Pin the carousel card title to a two-line box (KOP-150). Headlines wrap to
   1–3 lines, so rows used to have different heights; paging (up/down) swapped
   rows and changed the carousel's total height, which made the browser nudge
   the page scroll by about a row height and push the carousel out of view.
   A fixed two-line title keeps every row — and the whole carousel — the same
   height on every page, so paging never moves the page. The clamp also stops
   a long headline from stretching a single card. */
.kw-news-carousel .details .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.68em;
}

/* KOP-163: keep the desktop navbar on one row across all desktop widths.
   The container caps at 1170px for every width >=1200px, and the theme's
   default ~37px inter-item spacing made the full menu + search overflow even
   that: the last items ("Tresci partnerow", "Forum") wrapped to a second row,
   which in turn squeezed the search field into a stacked input+icon. Tighten
   the spacing and pin a compact single-row search box so it all stays on one
   line from 992px up. Below 992px the mobile hamburger menu takes over. */
@media (min-width: 992px) {
    .navbar-area .nav-container .navbar-collapse .navbar-nav {
        white-space: nowrap;
    }
    .navbar-area .nav-container .navbar-collapse .navbar-nav li a {
        font-size: 14px;
    }
    .navbar-area .nav-container .navbar-collapse .navbar-nav li + li {
        margin-left: 10px;
        padding-left: 12px;
    }
    .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children {
        padding-right: 12px;
    }
    .nav-right-part-desktop {
        margin-left: 12px;
    }
    .menu-search-inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    .menu-search-inner input {
        width: 130px;
        padding-left: 14px;
    }
    .menu-search-inner button {
        padding: 0 14px;
    }
}

/* KOP-152: the "Praca" dropdown made the menu ~70px wider, which at the
   narrow end of desktop (992-1199px, a 960px container) pushed the search
   box past the edge. Tighten the item spacing and the search field there;
   from 1200px up the 1170px container has room to spare. */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-area .nav-container .navbar-collapse .navbar-nav li + li {
        margin-left: 6px;
        padding-left: 8px;
    }
    .menu-search-inner input {
        width: 100px;
    }
}

/* Forum comments box (KOP-157). The theme's `.blog-comment` rules were drawn
   for short WordPress comments: they centre the avatar against the whole
   reply, let the photo keep its own proportions, and size every link in the
   text at 18px. Forum replies run long and quote each other, so the box gets
   its own avatar column and a plain reading style for the post body. */
.kw-comments .media {
    display: flex;
    align-items: flex-start;
}

/* The theme stacks the avatar above the reply on narrow screens; the forum
   keeps it beside the text, which wastes less of a phone's width. */
.kw-comments .media .media-body {
    min-width: 0;
    margin-top: 0;
    margin-left: 20px;
}

.kw-comments .kw-comment-avatar-link {
    flex: 0 0 auto;
}

/* Shared by the article comments and the homepage recent-comments box;
   each sets its own size. */
.kw-comment-avatar {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.kw-comment-avatar--letter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.kw-comments .kw-comment-body {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.7;
    color: #3d3d3d;
    overflow-wrap: anywhere;
}

.kw-comments .media .media-body .kw-comment-body p {
    margin: 0 0 12px;
    font-size: inherit;
    color: inherit;
}

.kw-comments .media .media-body .kw-comment-body a {
    font-size: inherit;
    font-weight: inherit;
    color: var(--main-color);
    text-decoration: underline;
}

.kw-comments .kw-comment-body img {
    max-width: 100%;
    height: auto;
}

.kw-comments .kw-comment-body blockquote {
    margin: 0 0 12px;
    padding: 8px 14px;
    border-left: 3px solid #dbdfe5;
    background: #f6f7f9;
    font-size: 14px;
    color: #616161;
}

.kw-comments .kw-comment-body blockquote cite {
    display: block;
    margin-bottom: 4px;
    font-style: normal;
    font-weight: 600;
    color: var(--heading-color);
}

.kw-comments .kw-comment-body blockquote p:last-child {
    margin-bottom: 0;
}

/* Long replies: about ten lines, faded out, with a toggle to read the rest. */
.kw-comments .kw-comment-body--clamped {
    max-height: 17em;
    overflow: hidden;
}

.kw-comments .kw-comment-body--faded {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.kw-comments .kw-comment-toggle {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color);
    cursor: pointer;
}

.kw-comments .kw-comment-toggle:hover {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .kw-comments .kw-comment-avatar {
        width: 44px;
        height: 44px;
    }
    .kw-comments .kw-comment-avatar--letter {
        font-size: 20px;
    }
    .kw-comments .media .media-body {
        margin-left: 12px;
    }
}

/* Homepage "Komentarze z forum" box under "Dołącz do nas": compact rows in
   the narrow fourth column, each an avatar, author/date, the topic as the
   link and a two-line excerpt. */
.kw-recent-comments {
    margin-top: 50px;
}

.kw-recent-comment {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.kw-recent-comment .kw-comment-avatar-link {
    flex: 0 0 auto;
}

.kw-recent-comment .kw-comment-avatar {
    width: 36px;
    height: 36px;
}

.kw-recent-comment .kw-comment-avatar--letter {
    font-size: 16px;
}

.kw-recent-comment__body {
    min-width: 0;
}

.kw-recent-comment__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 13px;
    line-height: 1.4;
}

.kw-recent-comment__author {
    font-weight: 700;
    color: var(--heading-color);
    overflow-wrap: anywhere;
}

.kw-recent-comment__date {
    color: #616161;
}

.kw-recent-comment__topic {
    margin: 2px 0 4px;
    font-size: 15px;
    line-height: 1.35;
}

.kw-recent-comment__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    overflow-wrap: anywhere;
}

.kw-recent-comments__more {
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color);
}

.kw-recent-comments__more:hover {
    text-decoration: underline;
}

/* Homepage "Polecane książki" box above "Ostatnie" in the second column,
   carried over from the old site: title, then the cover floated left with
   the start of the review wrapping around it, and a "więcej" link. */
.kw-latest-book {
    margin-bottom: 40px;
}

.kw-latest-book__title {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.35;
}

.kw-latest-book__body {
    display: flow-root;
}

.kw-latest-book__cover {
    float: left;
    width: 80px;
    margin: 4px 14px 6px 0;
}

.kw-latest-book__cover img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.kw-latest-book__abstract {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
    overflow-wrap: anywhere;
}

.kw-latest-book__more {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color);
}

.kw-latest-book__more:hover {
    text-decoration: underline;
}

.kw-latest-book__more .fa {
    margin-left: 4px;
}