:root {
    --kolor0: #a6a6a6;
    --kolor1: #23408e;
    --kolor2: #71bf44;
    --kolor3: #01ac50;
    --kolor4: #666666;
    --kolor5: #707070;
    --swiper-theme-color: #23408e;
    --color-txt2: #23408e;
    --w1: 1110px;
    --w2: 1280px;
}

#mapa-lokalizacja-item {
    --kmapa-1: #23408e !important;
    --kmapa-2: #ffffff !important;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.nav-links {
    padding-top: 35px;
    padding-bottom: 5px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.nav-links .page-numbers {
    padding: 0.5em 0.7em;
    line-height: 1;
    border: 1px solid var(--kolor1);
    color: var(--kolor1);
    background: #fff;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 14px;
}

.nav-links .page-numbers.current {
    color: #fff;
    background: var(--kolor1);
}

.nav-links .page-numbers.next,
.nav-links .page-numbers.prev {
    border: none;
}

html,
body {
    font-family: Montserrat, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    text-transform: none;
    color: var(--kolor4);
}

body {
    overflow-x: hidden;
}

#formularzkontakt {
    font-family: Montserrat, sans-serif;
}

#formularzkontakt form.formularz_bs .akcja .button {
    background: var(--kolor1);
    border-radius: 0.75rem;
}

.informacja-dodatkowa.inf-v2 {
    display: none;
    position: absolute;
    width: 684px;
    max-width: 90vw;
    background: #000;
    right: 40px;
    top: 140px;
    height: auto;
    color: #fff;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
    border-radius: 0;
    z-index: 999;
    padding: 30px;
    overflow-y: scroll;
}

.informacja-dodatkowa.inf-v2 .zamknij {
    position: absolute;
    cursor: pointer;
    top: 20px;
    right: 20px;
    font-size: 20px;
}

.informacja-dodatkowa.inf-v2 .tytul-info {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
}

.informacja-dodatkowa.inf-v2 .txt {
    font-size: 13px;
    line-height: 1.3;
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    display: flex;
    background: rgba(255, 255, 255, 0.5);
    z-index: 9;
}

#loader .spinner {
    display: block;
    margin: auto;
    font-size: 30px;
    color: var(--kolor1);
}

#fullcontent .load {
    height: 100dvh;
    overflow: hidden;
}

p {
    line-height: 1.3;
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

.container {
    margin-left: auto;
    margin-right: auto;
}

.formpass input[type="password"] {
    border: 1px solid #000;
    padding: 0.5em 1em;
}

.formpass input[type="submit"] {
    padding: 0.5em 1em;
    background: #000;
    color: #fff;
    border-radius: 0;
}

.smb {
    margin-bottom: 100px;
}

a {
    text-decoration: none;
}

/* Keep the header at viewport width even if a subpage widens the document,
   otherwise the "more" button slides off-screen and the menu cannot be opened.
   ASCII only on purpose - see the note above .hero-information-box. */
#Header {
    max-width: 100vw;
}

#Header a {
    text-decoration: none;
}

#hero .swiperHero {
    z-index: 3;
}

#hero .swiperHero[data-slide="0"] {
    z-index: 0;
}

#hero .swiperHero .swiper-wrapper {
    width: 100vw;
    height: calc(100% - 70px);
}

#hero .swiper-slide {
    overflow: hidden;
}

#hero .swiperThumb .swiper-slide:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    transition: 0.3s;
}

#hero .swiperThumb .swiper-slide-thumb-active:after {
    opacity: 0;
}

#hero .swiper-scrollbar {
    width: 90%;
    margin: auto;
    max-width: var(--w1);
    background: none;
    position: relative;
}

#hero .swiper-scrollbar:before {
    content: "";
    width: 100%;
    height: 1px;
    top: 2px;
    background: #fff;
    opacity: 0.6;
    position: absolute;
}

#hero .swiper-scrollbar .swiper-scrollbar-drag {
    height: 5px;
    background: #fff;
}

.buttons {
    display: flex;
    gap: 5px;
}

.btn {
    --borderradius: 0;
    --fontsize: 11px;
    border: 1px solid var(--kolor1);
    border-radius: var(--borderradius);
    padding: 0.8em 1.5em;
    color: var(--kolor1);
    background: #fff;
    font-weight: 600;
    font-size: var(--fontsize);
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
}

.btn:hover {
    color: #fff;
    background: var(--kolor1);
}

.btn[data-active="1"] {
    background: var(--kolor1);
    color: #fff;
}

.btn.btn2 {
    --fontsize: 15px;
    padding: 0.5em 2em;
}

.btn.btn-galeria {
    --fontsize: 12px;
    padding: 0.5em 2em;
    text-transform: uppercase;
}

.btn.btn-galeria[data-active="-1"] {
    background: none;
    border-color: #fff;
    color: #fff;
}

.btn.btn-galeria[data-active="1"] {
    background: #fff;
    border-color: #fff;
    color: #000;
}

[data-dohidden="-1"] [data-hidden="1"] {
    display: none;
}

[data-dohidden="-1"] [data-hidden="-1"] {
    display: block;
}

[data-dohidden="-1"] .czytaj-wiecej {
    display: inline;
    text-decoration: underline;
    cursor: pointer;
    color: var(--kolor1);
}

[data-dohidden="1"] [data-hidden="1"] {
    display: block;
}

[data-dohidden="1"] [data-hidden="-1"] {
    display: none;
}

[data-dohidden="1"] span[data-hidden="1"] {
    display: inline;
}

[data-dohidden="1"] .czytaj-wiecej {
    display: none;
}

#galeria {
    padding-top: 98px;
}

#galeria .swiper-wrapper {
    margin-bottom: 30px;
    align-items: stretch;
}

/* Gallery cards (image/video + caption).

   task 152299: the cards used to be a fixed 16/9 while almost no render is — Prystora
   ships portrait stairwell shots, Motiff a square lobby, most sites 4:3 — so `cover`
   was slicing them (up to ~72% of a portrait). Instead the cards now share one height
   and take their width from the photo itself: a portrait render is a narrow tall card,
   a panorama a wide one, and every image shows in full with no filler at all.
   --gallery-ar (width / height) is set per slide in template/stale/galeria.php;
   anything without stored dimensions falls back to 16/9.

   The height steps are picked so that a 16/9 card — the common case across the fleet —
   lands just inside the padded container at every breakpoint, leaving a slice of the
   next card visible to signal that the row scrolls. Note the container padding itself
   steps at 48rem (px-6 -> md:px-10), so the 768px row gets a smaller height than the
   480px one would suggest.

   Deliberately no max-width here. Capping the width would hold the height but break the
   ratio, and object-fit: contain would letterbox the difference — the bars this change
   exists to remove. Prystora's 2.09 panorama therefore runs wider than a phone
   viewport; the swiper scrolls it, and tapping the card opens the lightbox, which fits
   the whole frame on screen. The track clips at the swiper, so nothing overflows the
   page. */
.gallery__swiper {
    --gallery-h: 170px;
}

@media only screen and (min-width: 30rem) {
    .gallery__swiper {
        --gallery-h: 230px;
    }
}

@media only screen and (min-width: 48rem) {
    .gallery__swiper {
        --gallery-h: 300px;
    }
}

@media only screen and (min-width: 64rem) {
    .gallery__swiper {
        --gallery-h: 360px;
    }
}

@media only screen and (min-width: 80rem) {
    .gallery__swiper {
        --gallery-h: 420px;
    }
}

.gallery__swiper .gallery__slide {
    height: auto;
    cursor: pointer;
    /* Width sits on the slide, not just the media, so a long caption can't stretch a
       narrow portrait card wider than its own photo. */
    width: calc(var(--gallery-h) * var(--gallery-ar, 1.7778));
}

.gallery__swiper .gallery__figure {
    margin: 0;
}

.gallery__swiper .gallery__media {
    position: relative;
    width: 100%;
    height: var(--gallery-h);
    overflow: hidden;
    background: #f0f0f3;
}

/* EWWW rewrites JPG-sourced images to <picture><source webp><img></picture>. The
   wrapper is auto-height, so the img's `height: 100%` below would resolve against
   nothing and the image would overflow the card (and get clipped — exactly the crop we
   are removing). Give the wrapper the card's height so the chain holds. */
.gallery__swiper .gallery__media picture {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.gallery__swiper .gallery__media img,
.gallery__swiper .gallery__media video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.gallery__swiper .gallery__slide:hover .gallery__media img {
    transform: scale(1.04);
}

.gallery__swiper .gallery__caption {
    margin-top: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--kolor1);
}

#HeaderFull .tlov .tl1 {
    fill: rgba(0, 0, 0, 0.02);
}

#HeaderFull .tlov .tl2 {
    stroke: rgba(0, 0, 0, 0.09);
}

#cechy .swiper-slide {
    width: auto;
}

#ogolne {
    text-align: left;
    position: relative;
    z-index: 1;
    font-family: "Montserrat";
    font-size: 16px;
    padding-bottom: 50px;
}

#ogolne h1 {
    font-size: 2rem;
    padding: 0.2em 0 2rem;
    line-height: 1.3em;
}

#ogolne h2 {
    line-height: normal;
    font-size: 2rem;
    line-height: 1.3em;
}

#ogolne h3 {
    font-size: 20px;
    margin: 1rem 0 0;
    line-height: 1.3em;
}

#ogolne .scLok {
    margin-bottom: 0;
    font-size: 0.8rem;
    color: #4a4a4a;
}

#ogolne .scLok span {
    display: inline-block;
    margin: auto 0.5rem;
}

#ogolne ul li,
#ogolne ol li {
    list-style-type: disc;
    margin-left: 1em;
    margin-bottom: 0.5em;
}

#ogolne ul li.blocks-gallery-item,
#ogolne ol li.blocks-gallery-item {
    margin-left: 0;
}

#ogolne ul li ul,
#ogolne ol li ul {
    margin-top: 0.5em;
}

#ogolne .polityka h3 + ol,
#ogolne .polityka h3 + ul {
    margin-left: 1em;
}

#ogolne a {
    color: rgba(0, 0, 0, 0.7);
}

#ng3dfull {
    height: calc(100vh - 135px);
}

#dane-dodatkowe-galeria .swiper-slide {
    width: auto;
}

#dane-dodatkowe-galeria .swiper-button-disabled {
    opacity: 0.5;
    cursor: auto;
}

.dynamic-swiper .play-overlay {
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dynamic-swiper .play-overlay.opacity-0 {
    opacity: 0 !important;
    pointer-events: none !important;
}

.dynamic-swiper .swiper-slide-active .video-player {
    transform: scale(1.02);
    z-index: 10;
}

.dynamic-swiper .swiper-slide-active video.video-player {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dynamic-swiper .swiper-slide-active .play-overlay i {
    animation: pulse 2s infinite;
}

.dynamic-swiper[data-swip*="plany"],
.dynamic-swiper[data-swip*="plan"] {
    height: 100vh !important;
}

.dynamic-swiper[data-swip*="plany"] .swiper-slide,
.dynamic-swiper[data-swip*="plany"] .swiper-slide,
.dynamic-swiper[data-swip*="plan"] .swiper-slide,
.dynamic-swiper[data-swip*="plan"] .swiper-slide {
    padding: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dynamic-swiper[data-swip*="plany"] img,
.dynamic-swiper[data-swip*="plan"] img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
    max-height: none !important;
    max-width: none !important;
}

.dynamic-swiper[data-swip*="plany"] .swiper-slide-active img,
.dynamic-swiper[data-swip*="plan"] .swiper-slide-active img {
    box-shadow: none !important;
}

.play-overlay {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.play-overlay.opacity-0 {
    opacity: 0;
    pointer-events: none;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

video::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    display: none;
}

video.loading::before {
    display: block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media only screen and (max-width: 48rem) {
    .smb {
        margin-bottom: 30vw;
    }

    #ng3dfull {
        height: calc(100vh - 110px);
    }

    #kontakt .items-grid-kontakt-formularz_bs {
        display: grid !important;
    }

    #kontakt .items-grid-kontakt-formularz_bs h1 {
        font-size: 7vw !important;
    }

    #kontakt .items-grid-kontakt-formularz_bs .dimg {
        position: relative !important;
        margin: 15vh auto auto !important;
        max-width: 40vw;
    }
}

/* WARNING - this file is minified by Autoptimize (CSSTidy) before it is served.
   Two things silently destroy output here, visible only in the generated
   wp-content/cache/autoptimize/css/autoptimize_single_*.css, never in this source:
     1. a block comment INSIDE this rule's declaration list drops the closing
        brace, so the rest of the file becomes nested inside .hero-information-box;
     2. non-ASCII characters in comments near a natively nested rule drop the whole
        rule together with its nested __title / __content / __logo children.
   Keep comments in this file ASCII-only and outside nested rules. Explanations in
   Polish belong in the commit message, not here. */
.hero-information-box {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateX(100%);
    min-width: 23rem;

    .hero-information-box__title {
        color: #283583;
        font-family: Montserrat;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding-right: 30%;
    }

    .hero-information-box__content {
        color: #1f1f1f;
        font-family: Lato;
        font-size: 0.8rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        max-width: 70%;
        margin-top: 0.2rem;
    }

    .hero-information-box__logo {
        right: 1.3rem;
        bottom: 1.2rem;
        pointer-events: none;
    }
}

/* Below 23rem (368px, e.g. 320 and 360px phones) the fixed min-width pushed the
   box past the right edge and clipped the "V" sygnet in its bottom-right corner.
   Separate non-nested rule on purpose - see the minifier warning above. */
@media only screen and (max-width: 23rem) {
    .hero-information-box {
        min-width: 100%;
    }
}

/* Below md the info box spans the full screen width, so the call-to-action button
   takes almost the whole inner row and the decorative "V" sygnet - absolutely
   positioned in the bottom-right corner - lands on top of it (measured 52px, 22%
   of the button at 356px viewport; at 320px no corner size clears the button at
   all). Take the sygnet out of absolute flow on phones and let it sit right
   aligned under the button. Desktop keeps the corner placement.
   Separate non-nested rule on purpose - see the minifier warning above. */
@media only screen and (max-width: 47.9375rem) {
    .hero-information-box__logo {
        position: static;
        display: block;
        width: 80px;
        height: auto;
        margin: 0.75rem 0 0 auto;
    }
}

/* Defensive clip for the multi-notification info-box slider. Clipping otherwise
   relies solely on Swiper's own `.swiper{overflow:hidden}` rule, which loads from
   the jsdelivr CDN; until that stylesheet applies (load race / FOUC) the inactive
   notification slide spills out onto the hero photo (e.g. "Dostępność biura
   sprzedaży" leaking left of the "Sezon na rabaty" box). Clip locally so the box
   always contains its slides regardless of CDN timing. The active slide's inset
   brand logo stays within the box, so it is unaffected. */
.hero-information-box .swiper {
    overflow: hidden;
}

.hero__characteristics {
    max-width: 1300px;
    margin: auto;
    margin-top: -1rem;
    padding: 0 25px;

    @media only screen and (max-width: 48rem) {
        margin-top: 2rem;
    }
}

.hero__img-container {
    @media only screen and (max-width: 48rem) {
        background-position: 49%;
    }
}

.hero__slide--video {
    position: relative;
    overflow: hidden;
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 90%;
}

@media only screen and (min-width: 64rem) {
    .hero__video {
        object-position: center 90%;
    }
}

.hero-characteristics__swiper.is-locked .hero-characteristics__swiper-wrapper {
    justify-content: center;
}

/* Keep slide layout even when a plugin loads Swiper CSS after the theme. */
.swiper-slide.hero-characteristic {
    height: 92px;
    border-radius: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

@media only screen and (max-width: 576px) {
    .swiper-slide.hero-characteristic {
        height: 110px;
    }
}

.hero-characteristic__text {
    color: #283583;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    max-width: 100%;
}

.hero-characteristics__swiper {
    .hero-characteristics__swiper-pagination {
        text-align: center;
        margin-top: 16px;

        .swiper-pagination-bullet {
            margin: 0 4px;
            width: 12px;
            height: 12px;
            color: #838ab5;
        }

        .swiper-pagination-bullet-active {
            color: #283583;
        }
    }
}

.localization {
    max-width: 1080px;
    padding: 0 20px;
    margin: 5.2rem auto 2.9rem;

    @media only screen and (max-width: 48rem) {
        margin-top: 3.8rem;
    }
}

.spravia__badge {
    color: #283583;
    font-family: Montserrat;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    border-radius: 0;
    background: #dfe1ed;
    display: inline-block;
    padding: 0.7rem 1.2rem;
    gap: 0.6rem;
    margin-bottom: 0.7rem;

    &.spravia__badge--height-holder {
        visibility: hidden;
    }
}

.localization__text {
    color: #283583;
    font-family: Montserrat;
    font-size: 2.3rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    max-width: 55rem;
}

@media screen and (max-width: 48rem) {
    .localization__text {
        font-size: 1.5rem;
    }
}

#lokalizacja-mapa {
    max-width: 1080px;
    margin: auto;
}

.basic-informations-icons {
    margin: 4.4rem auto 7rem;
    /* max-width: 71rem; */

    @media screen and (max-width: 48rem) {
        margin: 2.8rem auto 2.1rem;
    }
}

.basic-informations-icons__list {
    display: flex;
    gap: 0.9rem;
    color: #283583;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    align-items: center;
    line-height: 1rem;
    margin: 0.7rem 0 3.4rem;

    @media screen and (max-width: 48rem) {
        flex-wrap: wrap;
        gap: 0.2rem;
        font-size: 0.8rem;

        svg {
            height: 14px;
            width: 14px;
        }
    }
}

/* task 149971: multi-stage "Podstawowe informacje" (Prystora II etap). Each stage =
   a green header above its own stats row; the row reuses .basic-informations-icons__list.
   The wrapper carries the outer spacing the standalone/legacy list otherwise has. */
.basic-informations-icons__stages {
    margin: 0.7rem 0 3.4rem;

    @media screen and (max-width: 48rem) {
        margin: 0.7rem 0 2rem;
    }
}

.basic-informations-icons__stage + .basic-informations-icons__stage {
    margin-top: 1.1rem;
}

.basic-informations-icons__etap {
    display: block;
    color: #76b82a;
    font-family: Montserrat;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
    margin: 0 0 0.4rem;
}

/* Inside a stage the row sits tight under its green header; the wrapper owns outer gaps. */
.basic-informations-icons__stages .basic-informations-icons__list {
    margin: 0;
}

.spravia-icons__slider-container {
    position: relative;
    display: flex;
    align-items: center;
}

.swiper-slide.spravia-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 0.9rem;
}

.spravia-icon__text {
    max-width: 12rem;
    color: #283583;
    text-align: center;
    font-family: Lato;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2rem;
}

.spravia-icons__swiper-arrow-prev {
    position: absolute;
    left: -2.1rem;
    cursor: pointer;

    @media screen and (max-width: 80rem) {
        left: -1.1rem;
    }
}

.spravia-icons__swiper-arrow-next {
    position: absolute;
    right: -2.5rem;
    cursor: pointer;

    @media screen and (max-width: 80rem) {
        right: -1.5rem;
    }
}

.spravia-icons__swiper-arrow-next.swiper-button-disabled path,
.spravia-icons__swiper-arrow-prev.swiper-button-disabled path {
    fill: grey;
}

.communication {
    margin: 5.6rem auto 4.2rem;
    /* max-width: 71rem; */

    @media screen and (max-width: 48rem) {
        margin-top: 0;
    }
}

.communication-icons__slider-container {
    margin-top: 4.2rem;
}

.communication-icon__text {
    font-weight: 400;

    strong {
        font-weight: 600;
    }
}

.spravia__bigger-title {
    color: #283583;
    font-family: Montserrat;
    font-size: 52px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.1;
}

@media screen and (max-width: 48rem) {
    .spravia__bigger-title {
        font-size: 1.5rem;
    }
}

.spravia-bigger-title__second-color {
    color: #76b82a;
}

.spravia__content-text {
    max-width: 32rem;
    color: #1f1f1f;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
}

.spravia__content-text strong {
    color: #283583;
}

.spravia__smaller-title {
    color: #283583;
    font-family: Montserrat;
    font-size: 2.1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

@media screen and (max-width: 48rem) {
    .spravia__smaller-title {
        font-size: 1.5rem;
    }
}

.color__primary {
    color: #283583;
}

.spravia-smaller-title__second-color,
.color__secondary {
    color: #76b82a;
}

.color__tertiary {
    color: #838ab5;
}

.middle-alternating-paragraph__image-container {
    position: relative;
}

.middle-alternating-paragraphs__section .middle-alternating-paragraph__image {
    width: auto;
    max-width: 100%;
    height: auto;
}

.middle-alternating-paragraph__image-container--logo-top::before {
    bottom: unset;
    right: unset;
    top: 8px;
    display: block;
    left: 8px;
    z-index: 2;
}

#zielone-otoczenie {
    /* max-width: 71rem;
    margin: 4.4rem auto 0; */

    .spravia__smaller-title {
        margin-bottom: 0.9rem;
    }

    @media screen and (max-width: 48rem) {
        margin-top: 2.5rem;

        .spravia__smaller-title {
            font-size: 1.2rem;
        }
    }
}

.wypelnij {
    gap: 1.1rem;
}

.gsap.filling-chars {
    color: #838ab5;

    .word {
        display: inline-block;
        white-space: nowrap;
    }

    .char {
        display: inline-block;
        color: inherit;
        transition: color 0.3s ease;

        &.is-filled {
            color: #283583;
        }
    }
}

/*
.relative {
  position: relative;
}
*/

.accent {
    width: min(100vw, 100vh);
    height: min(100vw, 100vh);
    position: absolute;
    top: 50%;
    z-index: -1;
    opacity: 0.05;
    user-select: none;
    pointer-events: none;

    & svg {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.accent-left .accent {
    left: -35%;
}

.accent-right .accent {
    right: -35%;
}

@media (min-width: 2561px) {
    .accent-left .accent {
        left: -20%;
    }

    .accent-right .accent {
        right: -20%;
    }
}

#hero > div:first-child:after,
#kontakt:before {
    content: "";
    display: block;
    width: 100%;
    height: 20rem;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    background: linear-gradient(0deg, transparent, rgba(34, 49, 128, 0.05));
}

#kontakt:before {
    height: 10rem;
    top: unset;
    bottom: 100%;
    background: linear-gradient(180deg, transparent, rgba(34, 49, 128, 0.05));
}

#kontakt {
    background-color: rgba(34, 49, 128, 0.05);
}

.spravia__button {
    display: flex;
    width: fit-content;
    margin: 1.9rem 0 1.1rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    cursor: pointer;

    & * {
        user-select: none;
        /* Kill pointer-events on every child so the click target is always
           the <a> itself. GTM's auto link-click (Click Element / Click URL)
           then resolves to the anchor, never an inner <span>/<svg>. */
        pointer-events: none;
    }

    @media screen and (max-width: 48rem) {
        margin-bottom: 0.8rem;
    }

    & .spravia__button-text {
        margin-right: 0;
        padding: 0.875rem 1rem;
        background: #76b82a;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        transition: all 0.3s ease;

        & span {
            display: inline-block;
            padding-right: 0.5rem;
            transform: translateY(1px);
            transition: all 0.3s ease;
        }
    }

    & .spravia__button-icon {
        margin-left: 0;
        overflow: hidden;
        padding: 0.875rem;
        background: #76b82a;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        position: relative;
        transition: all 0.3s ease;

        & svg {
            display: block;
            width: 14px;
            height: auto;

            &.spravia__button-icon-left {
                transform: translate(calc(-3rem - 50%), -50%);
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 1;
                transition: all 0.3s ease;
            }

            &.spravia__button-icon-right {
                transform: translateX(0);
                transition: all 0.3s ease;
            }
        }
    }

    &:active,
    &:hover {
        & .spravia__button-text {
            margin-right: 0.25rem;
            background-color: #009e3d;
            border-radius: 0;

            & span {
                padding-right: 0;
            }
        }

        & .spravia__button-icon {
            margin-left: 0.25rem;
            background-color: #009e3d;
            border-radius: 0;

            & .spravia__button-icon-left {
                transform: translate(-50%, -50%);
            }

            & .spravia__button-icon-right {
                transform: translateX(3rem);
            }
        }
    }

    &:last-child {
        margin-bottom: 0;
    }

    &.spravia__button--no-arrow {
        & .spravia__button-text {
            margin-right: 0;
            border-radius: 0;

            & span {
                padding: 0;
            }
        }

        & .spravia__button-icon {
            display: none;
        }
    }

    &.spravia__button--secondary {
        & .spravia__button-text {
            background: transparent;
            border: 1px solid #283583;
            color: #838ab5;
        }

        &.is-active,
        &:hover,
        &:active {
            & .spravia__button-text {
                background: #283583;
                color: #ffffff;
            }
        }
    }
}

/* Compact variant of the Spravia button for the narrowest phones (iPhone SE at
   375px and below). On those widths the full-size label plus arrow crowd their
   container - most visibly inside the hero info box, where the button sits next
   to the decorative sygnet. Text drops 14px -> 13px and the arrow 14px -> 12px.
   spravia_button() puts this class on every button, so the variant is opt-out
   (drop it from the helper) rather than opt-in per template.
   Flat, non-nested rules and an ASCII comment on purpose - see the minifier
   warning above .hero-information-box. */
@media only screen and (max-width: 24rem) {
    .spravia__button--mobile-sm {
        font-size: 13px;
    }

    .spravia__button--mobile-sm .spravia__button-icon svg {
        width: 12px;
    }
}

.flex.flex-row .spravia__button {
    margin-top: 0;
    margin-bottom: 0;
}

.map__link {
    display: block;
    color: #283583;
    text-align: right;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    margin-top: 12px;
    cursor: pointer;

    @media screen and (max-width: 48rem) {
        text-align: center;
    }
}

form.formularz_bs .akcja .button {
    padding: 0.875rem 1.5rem;
    font-family: Montserrat, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;

    &:active,
    &:hover {
        background-color: #76b82a !important;
    }
}

.spravia__content-text-container {
    position: relative;
}

[data-show-target] {
    transition: height 0.3s ease;
}

[data-show-target]:not(.is-expanded) {
    overflow: hidden;
}

section[data-show-target]:not(.is-expanded) + section {
    margin-top: 0;
}

picture {
    display: block;
}

.spravia__subtitle {
    margin: 0;
    color: #838ab5;
    font-family: Montserrat;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

@media screen and (max-width: 48rem) {
    .spravia__subtitle {
        font-size: 1.125rem;
    }
}

/* Home gallery — fullscreen lightbox */
body.gallery-lightbox-open {
    overflow: hidden;
}

.gallery__lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem clamp(1rem, 4vw, 4rem);
    background: rgba(18, 22, 38, 0.94);
}

.gallery__lightbox.is-open {
    display: flex;
}

.gallery__lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.gallery__lightbox-logo {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.gallery__lightbox-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gallery__lightbox-tab {
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    background: transparent;
    border-radius: 2px;
    padding: 0.5rem 1.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gallery__lightbox-tab.is-active {
    background: var(--kolor1);
    color: #fff;
    border-color: var(--kolor1);
}

/* Full/zoom view: tabs get a green hover (on-page tabs keep their blue hover). */
.gallery__lightbox-tab:hover {
    background: #76b82a;
    color: #fff;
    border-color: #76b82a;
}

.gallery__lightbox-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

/* Close sits ON the photo's top-right corner (per Figma), not in the header. */
.gallery__lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    color: var(--kolor1);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 2px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.gallery__lightbox-swiper {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.gallery__lightbox-swiper .swiper-slide {
    height: 100%;
}

.gallery__lightbox-swiper .gallery__figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gallery__lightbox-swiper .gallery__media {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* Anchor the fitted image. The media grows to the free vertical space and
       the absolutely-filled image below scales to it — avoids the flex
       percentage-height collapse that let the image render at natural height
       and overflow-crop the zoom view. */
    position: relative;
}

.gallery__lightbox-swiper .gallery__media img,
.gallery__lightbox-swiper .gallery__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain; /* zoom view = scale the WHOLE photo to fit, never crop */
    display: block;
}

.gallery__lightbox-swiper .gallery__caption {
    margin-top: 0.75rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 0.8rem;
}

.gallery__lightbox-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.gallery__lightbox-progress {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.gallery__lightbox-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #fff;
    transition: width 0.3s ease;
}

.gallery__lightbox-nav {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.gallery__lightbox-prev,
.gallery__lightbox-next {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 2px;
    border: none;
    background: #fff;
    color: var(--kolor1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.gallery__lightbox-prev.swiper-button-disabled,
.gallery__lightbox-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

.gallery__lightbox-prev .gallery__chevron,
.gallery__lightbox-next .gallery__chevron {
    width: 0.8rem;
    height: auto;
    display: block;
}

.gallery__lightbox-prev .gallery__chevron {
    transform: scaleX(-1); /* mirror the brand chevron to point left */
}

.swiper-pagination-bullet {
    cursor: pointer;
}

.break-word {
    word-break: break-word;
}

#bs {
    position: relative;

    img {
        user-select: none;
    }

    &:before {
        content: "";
        display: block;
        width: 100%;
        height: 150%;
        position: absolute;
        top: -25%;
        left: 0;
        z-index: -1;
        background: linear-gradient(
            0deg,
            transparent,
            rgba(34, 49, 128, 0.05),
            transparent
        );
    }

    & .bs-inner {
        margin-top: 54px;
        margin-bottom: 96px;
        margin-left: auto;
        margin-right: auto;

        & .bs-krotki__carousel {
            padding-left: calc(var(--spacing) * 10);

            & .swiper-slide {
                display: flex;

                & * {
                    user-select: none;
                }

                @media (max-width: 400px) {
                    flex-direction: column;
                    text-align: center;

                    & > img {
                        margin: 0 auto;
                    }
                }
            }

            &:after {
                content: "";
                display: block;
                width: 15%;
                height: 100%;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.625)
                );
                pointer-events: none;
            }
        }

        & .bs-krotki__pagination {
            text-align: center;
            margin-top: 8px;
            margin-bottom: 24px;

            & .swiper-pagination-bullet {
                margin: 0 4px;
                width: 12px;
                height: 12px;
                color: #838ab5;
            }

            & .swiper-pagination-bullet-active {
                color: #283583;
            }
        }
    }
}

.spravia__header {
    transform: translateY(0);
    transition: transform 1.3s ease;
}

.hero__swiper {
    transform: translateY(-1.3rem);
    scale: 100%;
    transition: all 1.3s ease;
    position: relative;
}

.hero-information-box {
    transform: translateX(0);
    transition: transform 1.3s ease;
}

body:not(.is-loaded) {
    /* overflow-y: hidden; */
    .spravia__header {
        transform: translateY(-100%);
    }

    .dni-otwarte--hero {
        transform: translateY(-100%);
    }

    .hero__swiper {
        transform: translateY(-100%);
        scale: 130%;
    }

    .hero-information-box {
        transform: translateX(100%);
    }

    .hero__swiper-navigation {
        opacity: 0;
    }
}

.hero__swiper-navigation {
    position: relative;
    top: -1.3rem;
    width: 100%;
    height: 0;
    z-index: 20;
    transition: opacity 0.3s 1.3s;
}

/* Outside the transformed slider so the info panel cannot cover the controls.
   Match the slider's -1.3rem offset and keep contrast over photos and the panel. */
.hero__slider .hero__swiper-navigation .hero__swiper-button-prev,
.hero__slider .hero__swiper-navigation .hero__swiper-button-next {
    width: 40px;
    height: 40px;
    margin: 0;
    left: 25px;
    right: auto;
    bottom: 40px;
    cursor: pointer;
    top: auto;
    background-color: rgba(40, 53, 131, 0.35);
}
.hero__slider .hero__swiper-navigation .hero__swiper-button-next {
    right: 25px;
    left: auto;
}

#formularzkontakt .container {
    border-radius: 0.75rem;
}

#formularzkontakt .content-form .rounded-tl-xl {
    border-radius: 0.75rem 0 0 0.75rem;
}

#formularzkontakt form.formularz_bs .inputy .input {
    border-radius: 0.75rem;
}

#formularzkontakt form.formularz_bs .inputy .input::before {
    border-radius: 0.75rem;
}

.swiper.is-locked {
    overflow: hidden;
}

.swiper.is-locked .swiper-slide {
    margin: 0 !important;
    box-sizing: border-box;
}

.swiper.is-locked .swiper-wrapper {
    gap: 19px;
}

.swiper-backface-hidden .swiper-slide {
    transform: none;
}

.scroll-icon {
    position: absolute;
}


.middle-alternating-paragraphs__section {
    padding: 0;
}

.middle-alternating-paragraphs__section .mt-24 {
    margin-top: 80px;
}

.middle-alternating-paragraphs__section ul {
    max-width: 32rem;
    color: #1f1f1f;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;

    & > li {
        padding-left: 1.75rem;
        position: relative;

        &:before {
            content: '';
            display: block;
            width: 8px;
            height: 8px;
            position: absolute;
            top: .5rem;
            left: .5rem;
            background: #DFE1ED;
        }

        &:not(:last-child) {
            margin-bottom: .5em;
        }
    }

    &:not(:last-child) {
        margin-bottom: 1em;
    }
}
/* === "Dni Otwarte" promo banner (Odoo 150000 / 154049) ====================
   Uklad 1:1 z projektem Figma (plik 5Tb7B4wI72ZX8d9XnQyUxa):
     wariant bialy    - wezel 5362:3312 (1300x118)
     wariant granatowy- wezel 5362:3324 (1205x185)
   Jeden poziomy rzad: [naglowek + oferta] [logo] [lokalizacja | godziny].

   Wysokosc: pas ma 24px paddingu i 70px tresci = 118px, czyli tyle co ramka
   wariantu bialego. Ramka granatowa ma w Figmie 185px, ale to recznie rozciagniety
   blizniak tej samej kompozycji (tresc stoi w niej wysrodkowana, same elementy sa
   identyczne) - trzymamy sie wyliczonych 118px zamiast zapiekac 185px.

   Liczby ponizej pochodza z absoluteBoundingBox snapshotu REST, nie z oka:
     padding 24/32 | gap rzedu 46 | pin 24.8x29.9 | odstep pin-tekst 8.75
   Logotyp inwestycji z projektu pomijamy TU swiadomie: na stronie inwestycji jestes
   juz u niej, wiec nic nie wnosi. Zostaje na banerze miasta (spravia.pl), gdzie
   mowi, ktorej inwestycji dotyczy komunikat.
     naglowek Montserrat 700 40/48.76 | oferta Lato 600 24/21
     lokalizacja Montserrat 400 22.34/27.23 | godziny Lato 600 24/28.8 */

.dni-otwarte {
    /* Naglowek strony jest fixed, wiec baner nad hero musi sie spod niego wysunac:
       .spravia (50px) + .inwestycja (60px) = 110px, na xl 135px (nizej w pliku).
       Osadzenie nad lista mieszkan zeruje to w .dni-otwarte--katalog. */
    --do-header: 110px;
    position: relative;
    background: #fff;
    width: 100%;
}

/* The hero placement enters with the two navbar rows when the loader clears. */
.dni-otwarte--hero {
    transform: translateY(0);
    transition: transform 1.3s ease;
    will-change: transform;
}

.dni-otwarte__inner {
    max-width: var(--w1);
    margin: 0 auto;
    padding: calc(var(--do-header) + 24px) 32px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

/* ---- Kolumna 1: naglowek + oferta (Figma "Frame 474") ---------------- */
.dni-otwarte__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dni-otwarte__heading {
    margin: 0;
    font-family: Montserrat;
    font-weight: 700;
    /* Figma: 40/48.76 na siatce 1205px. Motyw ma --w1 1110px, więc o stopień niżej,
       inaczej "Dni Otwarte 10-12.09" nie mieści się w jednej linii. */
    font-size: 32px;
    line-height: 39px;
    letter-spacing: -0.01em;
}

.dni-otwarte__title {
    /* Granat wg Figmy (wezel 5362:3312). Zadanie 150137 kazalo tu kiedys zielen,
       ale przy ukladzie z projektu cale "Dni Otwarte 10-12.09" wychodzilo zielone
       i naglowek przestawal sie odcinac od dat - swiadomy powrot do projektu.
       Wariant granatowy nadpisuje to na biel nizej w pliku. */
    color: #283583;
}

.dni-otwarte__dates {
    color: #76b82a;
    white-space: nowrap;
}

/* Interlinia 21px na foncie 24px jest z projektu i dziala dla jednej linii;
   ponizej desktopu, gdzie oferta sie lamie, rozluzniamy ja w media query. */
.dni-otwarte__offer {
    margin: 0;
    font-family: Lato;
    font-weight: 600;
    font-size: 19px;
    line-height: 22px;
    color: #283583;
}

/* Opis i CTA nie wystepuja w projekcie, ale pola istnieja - laduja pod oferta. */
.dni-otwarte__body {
    margin: 0.5rem 0 0;
    max-width: 46rem;
    font-family: Lato;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #1f1f1f;
}

.dni-otwarte__cta.spravia__button {
    margin: 0.9rem 0 0;
}

/* ---- Kolumna 3: lokalizacja obok godzin (Figma "Frame 473") ---------- */
.dni-otwarte__aside {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    color: #283583;
}

.dni-otwarte__location {
    display: flex;
    align-items: center;
    gap: 8.75px;
}

.dni-otwarte__icon {
    color: #283583;
    width: 24.8px;
    height: 29.9px;
    flex: 0 0 auto;
}

.dni-otwarte__location-text {
    display: flex;
    flex-direction: column;
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
}

.dni-otwarte__hours {
    padding-left: 0;
}

.dni-otwarte__hours-text {
    display: flex;
    flex-direction: column;
    font-family: Lato;
    font-weight: 600;
    font-size: 19px;
    line-height: 23px;
}

.dni-otwarte__hours-line {
    white-space: nowrap;
}

/* ---- Hero: baner zabiera gore ekranu, wiec hero nie dubluje odstepu -- */
body.has-dni-otwarte #hero {
    padding-top: 0;
}

body.has-dni-otwarte .hero__slider {
    height: calc(80vh - var(--do-banner-height, 0px));
}

/* ---- xl (>=1280px): pasek .spravia rosnie do 75px -> naglowek 135px -- */
@media only screen and (min-width: 80rem) {
    .dni-otwarte {
        --do-header: 135px;
    }
}

/* ---- Osadzenie nad lista mieszkan: brak naglowka nad soba ------------
   Dwie klasy, zeby bic regule --do-header z media query xl niezaleznie od
   kolejnosci w pliku. */
.dni-otwarte.dni-otwarte--katalog {
    --do-header: 0px;
    /* Sekcja katalogu idzie z shortcode'u wtyczki flotowej (wbpblc_katalogJC)
       i nie ma wlasnego odstepu od gory, wiec jej odznaka "MIESZKANIA" doklejala
       sie do pasa. Odstep trzymamy tutaj, bo tylko to osadzenie ma cos tuz pod
       soba - baner nad hero zostaje nietkniety. */
    margin-bottom: 32px;
}

@media only screen and (max-width: 68.75rem) {
    .dni-otwarte.dni-otwarte--katalog {
        margin-bottom: 24px;
    }
}

/* ---- Kolorystyka: granat (Figma 5362:3324) --------------------------
   tlo #283583 | naglowek #fff | daty i akcent #76b82a | reszta #fff.
   Zielen jest wspolna dla obu wariantow. */
.dni-otwarte--granatowy {
    background: #283583;
}

.dni-otwarte--granatowy .dni-otwarte__title,
.dni-otwarte--granatowy .dni-otwarte__offer,
.dni-otwarte--granatowy .dni-otwarte__body,
.dni-otwarte--granatowy .dni-otwarte__aside,
.dni-otwarte--granatowy .dni-otwarte__icon {
    color: #fff;
}

.dni-otwarte__accent {
    color: #76b82a;
}

/* ---- Ponizej 1100px: gorny rzad zwija sie w kolumne ------------------
   Uwaga: lokalizacja ZOSTAJE obok godzin. Mobilna ramka Figmy (5367:2679)
   ma Frame 478 pionowo z odstepem 26, ale Frame 473 nadal poziomo (gap 17.25)
   - czyli lamie sie tylko gorny poziom, nie prawa kolumna.
   flex-wrap ratuje przypadek dluzszej tresci niz w projekcie: projekt pokazuje
   jeden krotki adres, a Poznan ma dwa pelne adresy z kodem pocztowym. */
@media only screen and (max-width: 68.75rem) {
    .dni-otwarte__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
        padding-left: 22.08px;
        padding-right: 22.08px;
    }

    .dni-otwarte__aside {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 17.25px;
    }

    /* oferta moze sie tu zlamac, wiec ciasna interlinia z projektu musi puscic */
    .dni-otwarte__offer {
        line-height: 1.2;
    }

}

/* ---- Skala z mobilnej ramki Figmy 5367:2679 (394x166) --------------- */
@media only screen and (max-width: 30rem) {
    .dni-otwarte__inner {
        padding-top: calc(var(--do-header) + 16.56px);
        padding-bottom: 16.56px;
    }

    .dni-otwarte__heading {
        font-size: 27.6px;
        line-height: 33.64px;
    }

    .dni-otwarte__offer {
        font-size: 16.56px;
    }

    .dni-otwarte__location {
        gap: 6.04px;
    }

    .dni-otwarte__icon {
        width: 17.1px;
        height: 20.6px;
    }

    .dni-otwarte__location-text {
        font-size: 15.41px;
        line-height: 18.79px;
    }

    .dni-otwarte__hours-text {
        font-size: 16.56px;
        line-height: 19.87px;
    }
}

section#katalog {
    margin-bottom: 90px;
}

section#lokalizacja {
    margin-bottom: 40px;
}

section#o-osiedlu {
    margin-top: 90px;
    margin-bottom: 0;
}

.section-with-accent {
    margin-top: 63px;
}

.middle-alternating-paragraphs__section:not(.section-with-accent) .spravia__bigger-title {
    font-size: 35px;
}

.middle-alternating-paragraph {
    padding-top: 20px;
    padding-bottom: 105px;
}

/* === Belka promocyjna "Tydzień niższych cen" — banner o stałej szerokości (Odoo 151587) === */
/* Obrazek belki (<picture> w promo-belka.php) ma max-width 1110px, żeby był równy
   szerokością z kontenerem menu i strony. Na szerszych ekranach puste divy po bokach
   przedłużają kolory z krawędzi banera — #009E3D z lewej, #76B82A z prawej (gradient
   biegnie z lewej na prawą) — więc odcięcie obrazka jest niewidoczne. Poniżej 1110px
   obrazek zwęża się do szerokości ekranu (divy znikają); na mobile (<768px) pokazuje
   się osobny wariant grafiki, pełną szerokością. Na niskich ekranach (max-height:650px)
   banner zwężamy do 900px, żeby nie zabierał zbyt dużo wysokości. */
.promo-belka {
    /* Przyklejona do góry: zostaje w normalnym flow (rezerwuje wysokość, więc
       odstępy treści bez zmian), a przy scrollu przypina się do top:0. #Header
       (fixed) jest stale zsunięty w dół o wysokość belki — patrz initPromoBelka(). */
    position: sticky;
    top: 0;
    z-index: 9999; /* nad #Header (z-9998), żeby belka była zawsze na wierzchu */
    display: flex;
    align-items: stretch;
    width: 100%;
}

.promo-belka__img {
    flex: 0 1 1110px; /* max 1110px; kurczy się na węższych ekranach, nigdy nie rośnie powyżej */
    min-width: 0;
    line-height: 0;
}

.promo-belka__img img {
    display: block;
    width: 100%;
    height: auto;
}

.promo-belka__fill {
    flex: 1 1 0; /* wypełnia równo wolną przestrzeń po obu stronach banera */
    align-self: stretch;
}

.promo-belka__fill--left {
    background-color: #009E3D;
}

.promo-belka__fill--right {
    background-color: #76B82A;
}

@media (max-height: 650px) {
    .promo-belka__img {
        flex-basis: 900px;
    }
}

/* Odoo 153143: preserve the approved Bokserska layout on both hosts. */
main[data-site*="osiedlebokserska"] .spravia-icon__logo { width: 50px; height: 50px; object-fit: contain; }
main[data-site*="osiedlebokserska"] .spravia-icons__swiper.is-locked .swiper-wrapper,
main[data-site*="osiedlebokserska"] .spravia-icons__swiper.is-locked .swiper-wrapper:active { cursor: default; }
@media (min-width: 1024px) {
  main[data-site*="osiedlebokserska"] .middle-alternating-paragraphs__section > .grid:has(> .middle-alternating-paragraph__image-container) { align-items: center; }
  main[data-site*="osiedlebokserska"] .middle-alternating-paragraph__image-container,
  main[data-site*="osiedlebokserska"] .middle-alternating-paragraph__image-container > picture { height: 100%; }
  main[data-site*="osiedlebokserska"] .middle-alternating-paragraph__image-container > picture { display: block; }
}