/* =========================================================
   MDK SIEMIANOWICE ŚLĄSKIE
   Cassiopeia Extended – styl strony
   ========================================================= */


/* =========================================================
   1. LINK „PRZEJDŹ DO TREŚCI”
   ========================================================= */
.skip-link {
    position: absolute !important;
    left: 1rem !important;
    top: -100px !important;
    z-index: 10000;
    padding: 0.75rem 1rem;

    background: #ffffff;
    color: #001b4c;

    font-weight: 700;
    text-decoration: underline;
    border: 3px solid #001b4c;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 1rem !important;
}

/* =========================================================
   MDK � pe�na nazwa patrona w nag��wku
   przywr�cono po migracji na domen� produkcyjn�
   ========================================================= */

.container-header .navbar-brand .brand-logo > span::after {
    content: "im. dr. Henryka Jordana" !important;
}
/* =========================================================
   2. GÓRNY PASEK NARZĘDZIOWY
   ========================================================= */

.container-topbar {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #f4f6f8;
    color: #172033;
}

.container-topbar .mdk-topbar {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0.55rem 2rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mdk-topbar-label {
    font-size: 0.9rem;
    line-height: 1.3;
}

.mdk-topbar-links {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.container-topbar .mdk-topbar-links a,
.container-topbar .mdk-topbar-links a:visited {
    color: #172033 !important;
    font-weight: 600;
    text-decoration: underline;
}

.container-topbar .mdk-topbar-links a:hover {
    color: #1b3769 !important;
    text-decoration-thickness: 2px;
}

.container-topbar .mdk-topbar-links a:focus-visible {
    outline: 3px solid #1b3769;
    outline-offset: 3px;
}


/* =========================================================
   3. GŁÓWNY NAGŁÓWEK
   Makieta nr 2 – jasny, zwarty, profesjonalny
   ========================================================= */

.container-header {
    width: 100%;
    margin: 0 !important;

    background: #ffffff !important;
    background-image: none !important;
    color: #1b3769 !important;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}


/* Nazwa MDK */

.container-header .navbar-brand {
    margin: 0 !important;
    min-width: 0;
}

.container-header .site-title {
    margin: 0 !important;

    color: #1b3769 !important;
    font-size: 1.55rem !important;
    font-weight: 700;
    line-height: 1.15;
}

.container-header .site-description {
    margin: 0.3rem 0 0 !important;

    color: #44546a !important;
    font-size: 0.9rem;
    line-height: 1.3;
}


/* =========================================================
   4. NAGŁÓWEK DESKTOP:
   nazwa po lewej + menu po prawej
   ========================================================= */

@media (min-width: 1201px) {

    .container-header {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;

        gap: 0.5rem 2rem;

        padding: 0.8rem 2.5rem !important;
    }

    .container-header .navbar-brand {
        flex: 1 1 390px;
        padding: 0 !important;
    }

    .container-header .container-nav {
        flex: 2 1 850px;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }

    .container-header .mod-menu {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;

        column-gap: 0.8rem;
        row-gap: 0.25rem;
    }

    .container-header .mod-menu > li {
        margin: 0 !important;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > button {
        padding: 0.55rem 0.25rem !important;

        color: #1b3769 !important;
        font-size: 0.92rem !important;
        font-weight: 600;

        line-height: 1.2;
        white-space: nowrap;
    }
}


/* =========================================================
   5. NAGŁÓWEK – MNIEJSZE EKRANY
   ========================================================= */

@media (max-width: 1200px) {

    .container-header {
        padding: 0.8rem 1.5rem !important;
    }

    .container-header .navbar-brand {
        padding: 0 0 0.5rem !important;
    }

    .container-header .container-nav {
        width: 100%;
        max-width: none;

        margin: 0 !important;
        padding: 0 !important;
    }
}


/* Kolor linków głównego menu */

.container-header .mod-menu {
    color: #1b3769 !important;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button {
    color: #1b3769 !important;
}

.container-header .metismenu.mod-menu .mm-toggler {
    color: #1b3769 !important;
}


/* Aktywna pozycja / hover */

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > button:hover {
    color: #a61e4d !important;
}


/* Fokus klawiatury */

.container-header .mod-menu a:focus-visible,
.container-header .mod-menu button:focus-visible {
    outline: 3px solid #1b3769 !important;
    outline-offset: 3px;
}


/* Rozwijane menu */

.container-header .metismenu.mod-menu .mm-collapse {
    background: #ffffff;
    color: #1b3769;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.15);
}

.container-header .metismenu.mod-menu .mm-collapse a {
    color: #1b3769 !important;
}


/* =========================================================
   6. BANER + SZYBKI DOSTĘP
   ========================================================= */

.container-banner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);

    align-items: stretch;
    gap: 0;

    width: 100%;
    max-width: none;

    padding: 0;
    margin: 0;
}


/* ---------- BANER MDK ---------- */

.container-banner .mdk-hero-banner {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.container-banner .mdk-hero-banner .mod-custom {
    height: 100%;
}

.container-banner .mdk-hero-banner p {
    margin: 0;
    height: 100%;
}

.container-banner .mdk-hero-banner img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    margin: 0;
    padding: 0;
}


/* ---------- SZYBKI DOSTĘP ---------- */

.container-banner .mdk-quick-links {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.container-banner .mdk-quick-links .mod-custom {
    height: 100%;
}

.mdk-quick-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr);

    height: 100%;

    margin: 0;
    padding: 0;
}


/* Pojedynczy kafelek */

.mdk-quick-tile {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: flex-start;

    min-width: 0;
    min-height: 150px;

    padding: 1.5rem;

    color: #ffffff !important;
    text-decoration: none !important;
}

.mdk-quick-tile strong {
    display: block;

    margin-bottom: 0.4rem;

    font-size: 1.2rem;
    line-height: 1.25;
}

.mdk-quick-tile span {
    display: block;

    font-size: 0.95rem;
    line-height: 1.4;
}


/* Kolory kafelków */

.mdk-quick-tile:nth-child(1) {
    background-color: #a61e4d;
}

.mdk-quick-tile:nth-child(2) {
    background-color: #1b3769;
}

.mdk-quick-tile:nth-child(3) {
    background-color: #24577a;
}

.mdk-quick-tile:nth-child(4) {
    background-color: #2d6a4f;
}


/* Hover */

.mdk-quick-tile:hover {
    filter: brightness(0.88);
    color: #ffffff !important;
}


/* Fokus klawiatury */

.mdk-quick-tile:focus-visible {
    position: relative;
    z-index: 2;

    outline: 4px solid #ffffff;
    outline-offset: -7px;
}


/* =========================================================
   7. BANER – TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .container-banner {
        grid-template-columns: 1fr;
    }

    .container-banner .mdk-hero-banner img {
        width: 100%;
        height: auto;
    }

    .mdk-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .mdk-quick-tile {
        min-height: 120px;
    }
}


/* =========================================================
   8. TELEFON
   ========================================================= */

@media (max-width: 600px) {

    .container-topbar .mdk-topbar {
        padding: 0.5rem 1rem;
        flex-wrap: wrap;
    }

    .mdk-topbar-links {
        gap: 0.8rem;
        flex-wrap: wrap;
    }

    .container-header {
        padding: 0.75rem 1rem !important;
    }

    .container-header .site-title {
        font-size: 1.3rem !important;
    }

    .mdk-quick-grid {
        grid-template-columns: 1fr;
    }

    .mdk-quick-tile {
        min-height: auto;
        padding: 1.25rem;
    }
}
/* =========================================================
   MDK – korekta jasnego nagłówka
   ========================================================= */

/* Nazwa placówki – granatowa na białym tle */
.container-header .navbar-brand a,
.container-header .navbar-brand a:visited {
    color: #1b3769 !important;
    text-decoration: none !important;
}

/* Mniej pustej przestrzeni w części z nazwą */
.container-header .navbar-brand {
    padding-top: 0.75rem !important;
    padding-bottom: 0.35rem !important;
}

/* Tagline bliżej nazwy */
.container-header .site-description {
    margin-top: 0.2rem !important;
    margin-bottom: 0 !important;
}

/* Menu bliżej części z nazwą */
.container-header .container-nav {
    padding-top: 0.25rem !important;
    padding-bottom: 0.65rem !important;
}

/* Usunięcie nadmiernych odstępów narzuconych przez Cassiopeię */
.container-header .grid-child {
    min-height: 0 !important;
}
/* MDK – poprawne wyrównanie górnego paska */
.container-topbar .mdk-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

.container-topbar .mdk-topbar-label {
    margin: 0 !important;
}

.container-topbar .mdk-topbar-links {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    white-space: nowrap;
}
/* =========================================================
   MDK – DOCELOWE KOLORY I ROZMIESZCZENIE GÓRY
   ========================================================= */

/* ---------- GÓRNY PASEK ---------- */

.container-topbar {
    width: 100%;
    margin: 0;
    padding: 0;

    background: linear-gradient(90deg, #0b4f8f 0%, #1b3769 100%) !important;
    color: #ffffff !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.container-topbar .mdk-topbar {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;

    padding: 0.6rem 2rem;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

.container-topbar .mdk-topbar-label {
    margin: 0 !important;
    color: #ffffff !important;
    font-weight: 600;
}

.container-topbar .mdk-topbar-links {
    margin-left: auto !important;

    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;

    white-space: nowrap;
}

.container-topbar .mdk-topbar-links a,
.container-topbar .mdk-topbar-links a:visited {
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none !important;
}

.container-topbar .mdk-topbar-links a:hover {
    color: #ffffff !important;
    text-decoration-thickness: 2px;
}

.container-topbar .mdk-topbar-links a:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px;
}


/* ---------- GŁÓWNY NAGŁÓWEK ---------- */

.container-header {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: #ffffff !important;
    background-image: none !important;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}


/* Granatowa część z nazwą placówki */

.container-header .navbar-brand {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 1.6rem max(2rem, calc((100% - 1600px) / 2)) 1.35rem !important;

    background: linear-gradient(90deg, #0b4f8f 0%, #1b3769 100%) !important;
}

.container-header .navbar-brand a,
.container-header .navbar-brand a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

.container-header .site-title {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: clamp(1.8rem, 2.7vw, 2.7rem) !important;
    font-weight: 400;
    line-height: 1.15;
}

.container-header .site-description {
    margin: 0.45rem 0 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 1rem;
    line-height: 1.3;
}


/* ---------- BIAŁE MENU ---------- */

.container-header .container-nav {
    width: 100% !important;
    max-width: 1600px !important;

    margin: 0 auto !important;
    padding: 0.75rem 2rem !important;

    background: #ffffff !important;
}

.container-header .mod-menu {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    column-gap: 1rem;
    row-gap: 0.3rem;

    color: #163b6d !important;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button {
    padding: 0.6rem 0.3rem !important;

    color: #163b6d !important;

    font-size: 0.95rem !important;
    font-weight: 600;

    white-space: nowrap;
}


/* Aktywna pozycja */

.container-header .mod-menu > li.active > a {
    color: #b5184c !important;
}


/* Hover */

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > button:hover {
    color: #b5184c !important;
}


/* Strzałki rozwijanych pozycji */

.container-header .metismenu.mod-menu .mm-toggler {
    color: #163b6d !important;
}


/* Fokus klawiatury */

.container-header .mod-menu a:focus-visible,
.container-header .mod-menu button:focus-visible {
    outline: 3px solid #163b6d !important;
    outline-offset: 3px;
}


/* Rozwijane podmenu */

.container-header .metismenu.mod-menu .mm-collapse {
    background: #ffffff !important;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.container-header .metismenu.mod-menu .mm-collapse a {
    color: #163b6d !important;
}


/* ---------- TELEFON / TABLET ---------- */

@media (max-width: 900px) {

    .container-topbar .mdk-topbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .container-header .navbar-brand {
        padding: 1.1rem 1rem !important;
    }

    .container-header .container-nav {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .container-header .site-title {
        font-size: 1.55rem !important;
    }
}


@media (max-width: 600px) {

    .container-topbar .mdk-topbar {
        flex-wrap: wrap !important;
        gap: 0.5rem;
    }

    .container-topbar .mdk-topbar-links {
        gap: 1rem !important;
    }
}
/* MDK – pełna szerokość granatowego pola z nazwą placówki */
.container-header .navbar-brand {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding-left: max(2rem, calc((100vw - 1600px) / 2)) !important;
    padding-right: max(2rem, calc((100vw - 1600px) / 2)) !important;
}
/* MDK – wyrównanie tekstu w granatowym nagłówku */
.container-header .navbar-brand {
    padding-left: clamp(2rem, 5vw, 6rem) !important;
    padding-right: clamp(2rem, 5vw, 6rem) !important;
}
/* MDK – lżejszy wygląd nagłówka powitalnego na stronie głównej */
.item-page h2:first-of-type {
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}
/* =========================================================
   MDK – sekcja najważniejszych zadań
   ========================================================= */

.item-page h2:nth-of-type(2) {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;

    font-size: clamp(1.45rem, 2vw, 1.8rem);
    line-height: 1.3;
    font-weight: 600;

    color: #1b3769;
}

/* Lista zadań */
.item-page ol {
    margin-top: 0;
    margin-bottom: 2rem;
    padding-left: 1.6rem;
}

.item-page ol li {
    margin-bottom: 0.65rem;
    padding-left: 0.35rem;
    line-height: 1.6;
}
/* MDK – prawidłowa szerokość treści artykułu */
.item-page {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

.item-page p,
.item-page ol {
    max-width: 1200px;
}

@media (max-width: 700px) {
    .item-page {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* MDK – nagłówek powitalny na stronie głównej */
.item-page h2:first-of-type {
    font-size: clamp(1.5rem, 2vw, 1.85rem) !important;
    line-height: 1.3;
    font-weight: 500 !important;
    text-align: left;
    color: #1b3769;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}
/* MDK – lista najważniejszych zadań */
.item-page ol {
    max-width: 1100px;
    margin: 0 0 2.5rem 0;
    padding: 1.25rem 1.5rem 1.25rem 3.5rem;

    background: #f5f7fa;
    border-left: 5px solid #286487;
    border-radius: 0 6px 6px 0;
}

.item-page ol li {
    margin-bottom: 0.7rem;
    padding-left: 0.35rem;
    line-height: 1.55;
}

.item-page ol li:last-child {
    margin-bottom: 0;
}

.item-page ol li::marker {
    color: #1b3769;
    font-weight: 700;
}
/* =========================================================
   MDK – poziomy układ Przydatnych linków w stopce
   ========================================================= */

.mdk-footer-links {
    width: 100% !important;
    max-width: none !important;
}

.mdk-footer-links .card-body,
.mdk-footer-links .mod-custom {
    width: 100%;
}

/* Tytuł */
.mdk-footer-links .card-header,
.mdk-footer-links h3 {
    margin-bottom: 0.4rem;
}

/* Zawartość modułu */
.mdk-footer-links .mod-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.5rem;
}

/* Każdy link był osobnym akapitem – teraz układamy je poziomo */
.mdk-footer-links .mod-custom p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Linki */
.mdk-footer-links a {
    display: inline-block;
}
/* =========================================================
   MDK – jasna stopka
   ========================================================= */

/* Całe tło stopki */
.container-footer {
    background: #f5f7fa !important;
    color: #173b6d !important;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Moduł Przydatne linki bez granatowego pudełka */
.container-footer .mdk-footer-links {
    background: transparent !important;
    color: #173b6d !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Jeżeli Joomla tworzy wewnętrzną kartę */
.container-footer .mdk-footer-links .card,
.container-footer .mdk-footer-links .card-body,
.container-footer .mdk-footer-links .card-header {
    background: transparent !important;
    color: #173b6d !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Tytuł Przydatne linki */
.container-footer .mdk-footer-links h3,
.container-footer .mdk-footer-links .card-header {
    color: #173b6d !important;
}

/* Linki */
.container-footer .mdk-footer-links a {
    color: #173b6d !important;
}

.container-footer .mdk-footer-links a:hover,
.container-footer .mdk-footer-links a:focus {
    color: #a61e4d !important;
}
/* MDK – dopracowany poziomy układ linków w stopce */
.container-footer .mdk-footer-links {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.container-footer .mdk-footer-links .mod-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.container-footer .mdk-footer-links .mod-custom p {
    margin: 0 !important;
    padding: 0.35rem 1rem !important;
    border-right: 1px solid #c9d3df;
}

.container-footer .mdk-footer-links .mod-custom p:first-child {
    padding-left: 0 !important;
}

.container-footer .mdk-footer-links .mod-custom p:last-child {
    border-right: 0;
}

.container-footer .mdk-footer-links a,
.container-footer .mdk-footer-links p {
    white-space: nowrap;
}
/* MDK – wyśrodkowanie i ciemne separatory linków w stopce */
.container-footer .mdk-footer-links .mod-custom {
    justify-content: center !important;
}

.container-footer .mdk-footer-links .mod-custom p {
    border-right: 2px solid #173b6d !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.container-footer .mdk-footer-links .mod-custom p:last-child {
    border-right: 0 !important;
}
/* =========================================================
   MDK – konstrukcja stopki: linki + dolny granatowy pasek
   ========================================================= */

/* Moduły stopki układamy jeden POD drugim */
.container-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    padding-bottom: 0 !important;
}

/* Przydatne linki zajmują cały pierwszy wiersz */
.container-footer .mdk-footer-links {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

/* Dolny pasek zajmuje cały drugi wiersz */
.container-footer .mdk-footer-bottom {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 2rem !important;
    margin-bottom: 0 !important;

    padding: 1.25rem 2rem !important;

    background: linear-gradient(90deg, #0b4f8f 0%, #1b3769 100%) !important;
    color: #ffffff !important;

    text-align: center !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* Usuwamy ewentualne tło wewnętrzne modułu */
.container-footer .mdk-footer-bottom .card,
.container-footer .mdk-footer-bottom .card-body,
.container-footer .mdk-footer-bottom .mod-custom {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

/* Usuwamy margines akapitu, żeby napis był idealnie wyśrodkowany */
.container-footer .mdk-footer-bottom p {
    margin: 0 !important;
    color: #ffffff !important;
    text-align: center !important;
}
/* =========================================================
   MDK – FINALNY UKŁAD STOPKI
   ========================================================= */

/* Cała sekcja stopki */
.container-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;

    padding: 2.5rem 0 0 0 !important;
    margin: 0 !important;

    background: #f5f7fa !important;
    color: #173b6d !important;

    border-top: 2px solid #d7e3ee !important;
}


/* ---------------------------------------------------------
   PRZYDATNE LINKI
   --------------------------------------------------------- */

.container-footer .mdk-footer-links {
    display: block !important;

    width: 100% !important;
    max-width: 1600px !important;

    margin: 0 auto !important;
    padding: 0 3rem 2.25rem 3rem !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Usuwamy ewentualne tło karty Joomla */
.container-footer .mdk-footer-links .card,
.container-footer .mdk-footer-links .card-body,
.container-footer .mdk-footer-links .card-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Nagłówek "Przydatne linki" */
.container-footer .mdk-footer-links h3 {
    position: relative;

    margin: 0 0 1.6rem 0 !important;
    padding: 0 0 0.8rem 0 !important;

    color: #173b6d !important;
    font-weight: 700 !important;
}


/* Turkusowa kreska pod nagłówkiem */
.container-footer .mdk-footer-links h3::after {
    content: "";

    display: block;

    width: 55px;
    height: 4px;

    margin-top: 0.65rem;

    background: #258da5;
    border-radius: 2px;
}


/* Kontener wszystkich linków */
.container-footer .mdk-footer-links .mod-custom {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;

    gap: 0 !important;

    width: 100% !important;
}


/* Każdy link */
.container-footer .mdk-footer-links .mod-custom p {
    display: block !important;

    margin: 0.3rem 0 !important;
    padding: 0.2rem 1.15rem !important;

    border-right: 2px solid #173b6d !important;

    line-height: 1.5 !important;
    white-space: nowrap !important;
}


/* Ostatni element bez separatora */
.container-footer .mdk-footer-links .mod-custom p:last-child {
    border-right: 0 !important;
}


/* Kolor linków */
.container-footer .mdk-footer-links a {
    color: #173b6d !important;
    text-decoration: underline !important;
    text-underline-offset: 0.15em;
}


/* Hover i fokus */
.container-footer .mdk-footer-links a:hover,
.container-footer .mdk-footer-links a:focus {
    color: #a61e4d !important;
}


/* ---------------------------------------------------------
   DOLNY GRANATOWY PASEK MDK
   --------------------------------------------------------- */

.container-footer .mdk-footer-bottom {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    flex: none !important;

    margin: 0 !important;
    padding: 1.35rem 2rem !important;

    background: linear-gradient(
        90deg,
        #0b4f8f 0%,
        #1b3769 100%
    ) !important;

    color: #ffffff !important;

    text-align: center !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Usuwamy wygląd karty Joomla z dolnego paska */
.container-footer .mdk-footer-bottom .card,
.container-footer .mdk-footer-bottom .card-body,
.container-footer .mdk-footer-bottom .mod-custom {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    color: #ffffff !important;

    border: 0 !important;
    box-shadow: none !important;

    text-align: center !important;
}


/* Tekst w dolnym pasku */
.container-footer .mdk-footer-bottom p {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    text-align: center !important;
    line-height: 1.5 !important;
}


/* ---------------------------------------------------------
   TELEFONY I MNIEJSZE EKRANY
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .container-footer .mdk-footer-links {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .container-footer .mdk-footer-links .mod-custom p {
        white-space: normal !important;
    }
}


@media (max-width: 600px) {

    .container-footer .mdk-footer-links .mod-custom {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .container-footer .mdk-footer-links .mod-custom p {
        width: 100% !important;

        padding: 0.45rem 0 !important;

        border-right: 0 !important;
        border-bottom: 1px solid #d7e3ee !important;
    }

    .container-footer .mdk-footer-links .mod-custom p:last-child {
        border-bottom: 0 !important;
    }

    .container-footer .mdk-footer-bottom {
        padding: 1.15rem 1rem !important;
    }
}
/* =========================================================
   MDK – NAPRAWA UKŁADU STOPKI CASSIOPEIA
   Ten blok ma być NA SAMYM KOŃCU user.css
   ========================================================= */

/* Wewnętrzny kontener stopki Cassiopeia:
   oba moduły mają być jeden POD drugim */
.container-footer .grid-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   JASNA CZĘŚĆ – PRZYDATNE LINKI
   --------------------------------------------------------- */

.container-footer .mdk-footer-links {
    display: block !important;

    width: 100% !important;
    max-width: 1600px !important;

    margin: 0 auto !important;
    padding: 2.5rem 3rem 2.5rem 3rem !important;

    background: #f5f7fa !important;
    color: #173b6d !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Jeżeli Joomla opakowała moduł w kartę */
.container-footer .mdk-footer-links .card,
.container-footer .mdk-footer-links .card-body,
.container-footer .mdk-footer-links .card-header {
    width: 100% !important;

    margin: 0 !important;

    background: transparent !important;
    color: #173b6d !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Nagłówek Przydatne linki */
.container-footer .mdk-footer-links h3 {
    position: relative;

    margin: 0 0 1.5rem 0 !important;
    padding: 0 0 0.8rem 0 !important;

    color: #173b6d !important;
    font-weight: 700 !important;
}


/* Turkusowa kreska pod nagłówkiem */
.container-footer .mdk-footer-links h3::after {
    content: "";

    display: block;

    width: 55px;
    height: 4px;

    margin-top: 0.65rem;

    background: #258da5;
    border-radius: 2px;
}


/* Wszystkie linki – POZIOMO i wyśrodkowane */
.container-footer .mdk-footer-links .mod-custom {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;
}


/* Każdy element/link */
.container-footer .mdk-footer-links .mod-custom p {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;

    margin: 0.25rem 0 !important;
    padding: 0.25rem 1.1rem !important;

    border-right: 2px solid #173b6d !important;

    white-space: nowrap !important;
}


/* Bez kreski po ostatnim linku */
.container-footer .mdk-footer-links .mod-custom p:last-child {
    border-right: 0 !important;
}


/* Kolor linków */
.container-footer .mdk-footer-links a {
    color: #173b6d !important;
    text-decoration: underline !important;
    text-underline-offset: 0.15em;
}


/* ---------------------------------------------------------
   GRANATOWY PASEK NA SAMYM DOLE
   --------------------------------------------------------- */

.container-footer .mdk-footer-bottom {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 1.35rem 2rem !important;

    background: linear-gradient(
        90deg,
        #0b4f8f 0%,
        #1b3769 100%
    ) !important;

    color: #ffffff !important;

    text-align: center !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Usuwamy wewnętrzne pudełka Joomla */
.container-footer .mdk-footer-bottom .card,
.container-footer .mdk-footer-bottom .card-body,
.container-footer .mdk-footer-bottom .mod-custom {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    color: #ffffff !important;

    border: 0 !important;
    box-shadow: none !important;

    text-align: center !important;
}


/* Tekst w granatowym pasku */
.container-footer .mdk-footer-bottom p {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    text-align: center !important;

    line-height: 1.5 !important;
}


/* Cała stopka – jasne tło */
.container-footer {
    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #f5f7fa !important;

    border-top: 2px solid #d7e3ee !important;
}


/* ---------------------------------------------------------
   MNIEJSZE EKRANY
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .container-footer .mdk-footer-links {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .container-footer .mdk-footer-links .mod-custom p {
        white-space: normal !important;
    }
}


@media (max-width: 600px) {

    .container-footer .mdk-footer-links .mod-custom {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .container-footer .mdk-footer-links .mod-custom p {
        width: 100% !important;

        padding: 0.45rem 0 !important;

        border-right: 0 !important;
        border-bottom: 1px solid #d7e3ee !important;
    }

    .container-footer .mdk-footer-links .mod-custom p:last-child {
        border-bottom: 0 !important;
    }
}
/* MDK – bardziej kompaktowa stopka */
.container-footer .mdk-footer-links {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.container-footer .mdk-footer-links h3 {
    margin-bottom: 0.25rem !important;
    padding-bottom: 0.4rem !important;
}

.container-footer .mdk-footer-links h3::after {
    margin-top: 0.4rem !important;
}

.container-footer .mdk-footer-bottom {
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}
/* =========================================================
   MDK – lista najważniejszych zadań na stronie głównej
   ========================================================= */

main ol {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 1.4rem 2rem 1.4rem 4rem !important;

    background: #f5f7fa !important;
    border-left: 6px solid #287b9b !important;

    border-radius: 0 8px 8px 0;
}
/* MDK – wyrównanie paska "Jesteś tutaj" do szerokości treści */
.container-breadcrumbs {
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
}

.container-breadcrumbs .breadcrumb {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* MDK – ostateczne wyrównanie paska nawigacyjnego do treści */
.container-breadcrumbs {
    width: auto !important;
    max-width: none !important;

    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Sama szara belka */
.container-breadcrumbs .breadcrumb {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

@media (max-width: 700px) {
    .container-breadcrumbs {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
}
/* =========================================================
   MDK – końcowe wyrównanie prawej krawędzi breadcrumb
   ========================================================= */

.container-breadcrumbs {
    width: auto !important;
    max-width: none !important;

    margin-left: 2.5rem !important;
    margin-right: 5rem !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}

.container-breadcrumbs .breadcrumb {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Na mniejszych ekranach wracamy do normalnych marginesów */
@media (max-width: 900px) {
    .container-breadcrumbs {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
}
/* =========================================================
   MDK – wspólna szerokość breadcrumb i treści
   ========================================================= */

.container-breadcrumbs,
.container-component {
    width: 100% !important;
    max-width: 1600px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 2rem !important;
    padding-right: 2rem !important;

    box-sizing: border-box !important;
}

/* Szara belka "Jesteś tutaj" */
.container-breadcrumbs .breadcrumb {
    width: 100% !important;
    margin: 0 !important;

    box-sizing: border-box !important;
}

/* Treść artykułu bez dodatkowego bocznego przesunięcia */
.container-component .item-page {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}

@media (max-width: 700px) {
    .container-breadcrumbs,
    .container-component {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
/* MDK – baner wypełnia cały kafel */
.container-banner .mdk-hero-banner {
    overflow: hidden;
}

.container-banner .mdk-hero-banner .mod-custom {
    width: 100%;
    height: 100%;
}

.container-banner .mdk-hero-banner p {
    margin: 0 !important;
    height: 100%;
}

.container-banner .mdk-hero-banner img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* =========================================================
   MDK – baner bez odstępów z prawej i na dole
   ========================================================= */

.container-banner {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr) !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: stretch !important;
}

/* Lewa część – baner */
.container-banner .mdk-hero-banner {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

/* Wszystkie możliwe opakowania obrazu */
.container-banner .mdk-hero-banner .mod-custom,
.container-banner .mdk-hero-banner p,
.container-banner .mdk-hero-banner figure,
.container-banner .mdk-hero-banner picture {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Sam obraz */
.container-banner .mdk-hero-banner img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;
}

/* Prawa część – kafelki bez odstępu od banera */
.container-banner .mdk-quick-links {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.container-banner .mdk-quick-links .mod-custom,
.container-banner .mdk-quick-grid {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}
/* =========================================================
   MDK – delikatne przycięcie białych marginesów banera
   ========================================================= */

.container-banner .mdk-hero-banner {
    overflow: hidden !important;
}

/* Lekko powiększamy obraz wewnątrz jego pola */
.container-banner .mdk-hero-banner img {
    transform: scale(1.035) !important;
    transform-origin: center center !important;
}
/* =========================================================
   MDK – baner dokładnie tej samej wysokości co kafelki
   ========================================================= */

.container-banner {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
}

/* Oba moduły mają dokładnie tę samą wysokość */
.container-banner > * {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}
/* Lewa kolumna z banerem */
/* Lewa kolumna z banerem */
.container-banner > *:first-child {
    position: relative !important;
    overflow: hidden !important;
    align-self: stretch !important;
}

/* Obraz nie ustala już wysokości wiersza.
   Rozciąga się do wysokości kafelków. */
.container-banner > *:first-child img {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center top !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}
/* =========================================================
   MDK – usunięcie szarego pola pod banerem
   ========================================================= */

.container-banner {
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.container-banner > *:first-child img {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center 12% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}
/* MDK – usunięcie odstępu nad banerem */
.container-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.container-banner > * {
    margin-top: 0 !important;
}

/* MDK – przesunięcie obrazu tylko w górę */
.container-banner > *:first-child img {
    transform: none !important;
}

/* Baner – wypełnienie góry i dołu bez zmiany szerokości */
.container-banner > *:first-child img {
    top: 0px !important;
    bottom: -6px !important;
    height: calc(100% + 6px) !important;

    width: 100% !important;

    object-fit: cover !important;
    object-position: center top !important;

    transform: none !important;
}
/* Pasek narzędzi – linki bez podkreślenia */
.container-topbar .mdk-topbar a {
    text-decoration: none !important;
}

.container-topbar .mdk-topbar a:hover,
.container-topbar .mdk-topbar a:focus {
    text-decoration: none !important;
}
/* MDK – topbar: definitywnie bez podkreślenia linków */
.container-topbar .mdk-topbar .mdk-topbar-links a,
.container-topbar .mdk-topbar .mdk-topbar-links a:link,
.container-topbar .mdk-topbar .mdk-topbar-links a:visited,
.container-topbar .mdk-topbar .mdk-topbar-links a:hover,
.container-topbar .mdk-topbar .mdk-topbar-links a:focus,
.container-topbar .mdk-topbar .mdk-topbar-links a:active {
    text-decoration: none !important;
    border-bottom: 0 !important;
}
/* =========================================================
   MDK – IKONA FACEBOOK W GÓRNYM PASKU
   ========================================================= */

.container-topbar .mdk-facebook {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;
    padding: 0 !important;

    border-radius: 50%;
    background: #ffffff;

    color: #174b82 !important;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700 !important;
    line-height: 1;

    text-decoration: none !important;
}
/* MDK – ikony górnego paska */
.container-topbar .mdk-topbar-links a {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
}

.container-topbar .mdk-icon {
    display: inline-block;
    color: #ffffff !important;
    font-family: Arial, "Segoe UI Symbol", sans-serif;
    font-style: normal;
    line-height: 1;
}

.container-topbar .mdk-icon-mail {
    font-size: 1.35rem;
    font-weight: 700;
}

.container-topbar .mdk-icon-access {
    font-size: 1.2rem;
}

.container-topbar .mdk-facebook {
    color: #ffffff !important;
    font-family: Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: 700 !important;
    text-decoration: none !important;
}
/* MDK – delikatne A-, A, A+ w górnym pasku */
.container-topbar .mdk-font-btn {
    appearance: none !important;
    -webkit-appearance: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #ffffff !important;
    padding: 0 0.18rem !important;
    margin: 0 !important;

    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;

    cursor: pointer;
}

.container-topbar .mdk-font-btn:hover {
    color: #ffffff !important;
    opacity: 0.8;
}

.container-topbar .mdk-font-btn:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 3px;
    border-radius: 2px;
}
/* MDK – Facebook jako zwykłe białe "f" */
.container-topbar .mdk-facebook {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    padding: 0 0.15rem !important;
    margin: 0 !important;

    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-decoration: none !important;
}
/* =========================================================
   MDK – TRYB WYSOKIEGO KONTRASTU
   ========================================================= */

body.mdk-high-contrast,
body.mdk-high-contrast main,
body.mdk-high-contrast .site-grid,
body.mdk-high-contrast .container-component {
    background: #000 !important;
    color: #fff !important;
}

/* Nagłówek, topbar i stopka */
body.mdk-high-contrast .container-topbar,
body.mdk-high-contrast .container-header,
body.mdk-high-contrast .container-footer,
body.mdk-high-contrast footer {
    background: #000 !important;
    color: #fff !important;
}

/* Menu */
body.mdk-high-contrast .container-header .container-nav,
body.mdk-high-contrast .container-header .metismenu.mod-menu .mm-collapse {
    background: #000 !important;
}

body.mdk-high-contrast .container-header a,
body.mdk-high-contrast .container-header button,
body.mdk-high-contrast .container-topbar a,
body.mdk-high-contrast .container-topbar button {
    color: #fff !important;
}

/* Tekst */
body.mdk-high-contrast h1,
body.mdk-high-contrast h2,
body.mdk-high-contrast h3,
body.mdk-high-contrast h4,
body.mdk-high-contrast p,
body.mdk-high-contrast li,
body.mdk-high-contrast span,
body.mdk-high-contrast strong {
    color: #fff !important;
}

/* Linki w treści – żółte dla wyraźnego odróżnienia */
body.mdk-high-contrast main a {
    color: #ffeb3b !important;
    text-decoration: underline !important;
}

/* Breadcrumb */
body.mdk-high-contrast .breadcrumb,
body.mdk-high-contrast .mod-breadcrumbs {
    background: #000 !important;
    color: #fff !important;
}

/* Pola formularzy */
body.mdk-high-contrast input,
body.mdk-high-contrast textarea,
body.mdk-high-contrast select {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

/* Wyraźny fokus klawiatury */
body.mdk-high-contrast a:focus-visible,
body.mdk-high-contrast button:focus-visible,
body.mdk-high-contrast input:focus-visible,
body.mdk-high-contrast select:focus-visible,
body.mdk-high-contrast textarea:focus-visible {
    outline: 3px solid #ffeb3b !important;
    outline-offset: 3px !important;
}

/* Przycisk kontrastu pokazuje, że tryb jest aktywny */
body.mdk-high-contrast .mdk-contrast-btn {
    color: #ffeb3b !important;
}
/* MDK – poprawka menu w trybie wysokiego kontrastu */
body.mdk-high-contrast .container-header .mod-menu a,
body.mdk-high-contrast .container-header .mod-menu button,
body.mdk-high-contrast .container-header .metismenu-item > a,
body.mdk-high-contrast .container-header .metismenu-item > button {
    color: #ffffff !important;
}

/* Aktywna pozycja menu */
body.mdk-high-contrast .container-header .mod-menu .active > a,
body.mdk-high-contrast .container-header .mod-menu .current > a {
    color: #ffeb3b !important;
    border-bottom-color: #ffeb3b !important;
}

/* Strzałki rozwijanych pozycji */
body.mdk-high-contrast .container-header .metismenu-item button::before,
body.mdk-high-contrast .container-header .metismenu-item button::after {
    color: #ffffff !important;
    border-color: #ffffff !important;
}
/* MDK – rozwijane pozycje menu w wysokim kontraście */
body.mdk-high-contrast .container-header .metismenu.mod-menu .metismenu-item > button,
body.mdk-high-contrast .container-header .metismenu.mod-menu .metismenu-item > a {
    color: #ffffff !important;
}

/* Strzałka przy menu rozwijanym */
body.mdk-high-contrast .container-header .metismenu.mod-menu .mm-toggler::after {
    border-color: #ffffff !important;
    background: transparent !important;
}

/* Usunięcie błędnego białego tła przy strzałkach */
body.mdk-high-contrast .container-header .metismenu.mod-menu button {
    background-color: transparent !important;
}
/* =========================================================
   MDK – pełny wysoki kontrast: treść i stopka
   ========================================================= */

/* Wszystkie główne obszary strony */
body.mdk-high-contrast .site-grid,
body.mdk-high-contrast .grid-child,
body.mdk-high-contrast .container-component,
body.mdk-high-contrast .container-bottom-a,
body.mdk-high-contrast .container-bottom-b,
body.mdk-high-contrast .container-footer,
body.mdk-high-contrast footer {
    background: #000 !important;
    color: #fff !important;
}

/* Jasne boksy w treści */
body.mdk-high-contrast main div,
body.mdk-high-contrast main section,
body.mdk-high-contrast main article {
    background-color: transparent !important;
}

/* Nasza jasna ramka/lista na stronie głównej */
body.mdk-high-contrast main ol,
body.mdk-high-contrast main ul {
    background: #000 !important;
    color: #fff !important;
    border-color: #ffeb3b !important;
}

body.mdk-high-contrast main ol li,
body.mdk-high-contrast main ul li {
    color: #fff !important;
}

/* Numery list */
body.mdk-high-contrast main ol li::marker {
    color: #ffeb3b !important;
}

/* Przydatne linki i inne moduły stopki */
body.mdk-high-contrast .container-footer *,
body.mdk-high-contrast footer * {
    color: #fff !important;
    background-color: transparent !important;
}

/* Linki w stopce */
body.mdk-high-contrast .container-footer a,
body.mdk-high-contrast footer a {
    color: #ffeb3b !important;
    text-decoration: underline !important;
}

/* Nagłówki w stopce */
body.mdk-high-contrast .container-footer h2,
body.mdk-high-contrast .container-footer h3,
body.mdk-high-contrast footer h2,
body.mdk-high-contrast footer h3 {
    color: #fff !important;
}
/* MDK – BIP w górnym pasku */
.container-topbar .mdk-bip,
.container-topbar .mdk-bip:visited {
    color: #b51f52 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.container-topbar .mdk-bip:hover,
.container-topbar .mdk-bip:focus {
    color: #e83e6f !important;
    text-decoration: none !important;
}
/* MDK – BIP czerwony – ostateczne nadpisanie */
body:not(.mdk-high-contrast)
.container-topbar
.mdk-topbar
.mdk-topbar-links
a.mdk-bip,
body:not(.mdk-high-contrast)
.container-topbar
.mdk-topbar
.mdk-topbar-links
a.mdk-bip:visited {
    color: #b51f52 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

body:not(.mdk-high-contrast)
.container-topbar
.mdk-topbar
.mdk-topbar-links
a.mdk-bip:hover,
body:not(.mdk-high-contrast)
.container-topbar
.mdk-topbar
.mdk-topbar-links
a.mdk-bip:focus {
    color: #e83e6f !important;
}
/* MDK – układ nazwy placówki w nagłówku */

.container-header .site-title {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.container-header .site-title::after {
    content: "im. dr. H. Jordana\A Siemianowice Śląskie";
    white-space: pre;
    display: block;

    margin-top: 0.35rem;

    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.45;
}
/* =========================================================
   MDK – DOCELOWY NAGŁÓWEK
   nazwa + patron + miasto + sentencja + szkice
   ========================================================= */


/* ---------------------------------------------------------
   CAŁY NIEBIESKI OBSZAR NAGŁÓWKA
   --------------------------------------------------------- */

.container-header .navbar-brand {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;

    min-height: 185px !important;

    padding-top: 1.15rem !important;
    padding-bottom: 3.7rem !important;
}


/* ---------------------------------------------------------
   GŁÓWNA NAZWA MDK
   --------------------------------------------------------- */

.container-header .navbar-brand .brand-logo > span {
    display: block !important;

    position: relative !important;
    z-index: 4 !important;

    color: #ffffff !important;

    font-size: 2.45rem !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
}


/* Patron – druga linia */

.container-header .navbar-brand .brand-logo > span::after {
    content: "im. dr. H. Jordana";

    display: block !important;

    margin-top: 0.2rem !important;

    color: #ffffff !important;

    font-size: 1.55rem !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
}


/* Miasto – trzecia linia */

.container-header .navbar-brand .site-description {
    position: relative !important;
    z-index: 4 !important;

    margin-top: 0.25rem !important;

    color: #ffffff !important;

    font-size: 0.9rem !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
}


/* ---------------------------------------------------------
   SZKICE ZAJĘĆ – PRAWA STRONA
   --------------------------------------------------------- */

.container-header .navbar-brand::after {
    content: "" !important;

    position: absolute !important;

    /* lekko powiększamy grafikę w pionie,
       dzięki czemu będzie też szersza */
    top: -6% !important;
    right: 0 !important;

    width: 70% !important;
    height: 116% !important;

    background-image:
    url("/mdk/images/strona%20glowna/Naglowek/naglowek-szkice-final.png") !important;

    background-repeat: no-repeat !important;
    background-position: calc(100% - 0.5cm) center !important;
    background-size: contain !important;

    /* była 0.18 – dlatego była prawie niewidoczna */
    opacity: 0.31 !important;

    pointer-events: none !important;
    z-index: 1 !important;
}


/* ---------------------------------------------------------
   SENTENCJA
   --------------------------------------------------------- */

.container-header .navbar-brand::before {
    content: "Pasja tworzy lepsze jutro!" !important;

    position: absolute !important;

    left: clamp(7rem, 14vw, 16rem) !important;
    bottom: 0.9rem !important;

    z-index: 5 !important;

    color: #ffffff !important;

    font-family:
        "Segoe Print",
        "Brush Script MT",
        cursive !important;

    font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
    font-weight: 400 !important;
    font-style: italic !important;

    line-height: 1.15 !important;

    padding-bottom: 0.25rem !important;

    border-bottom: none !important;

    opacity: 0.95 !important;
}


/* ---------------------------------------------------------
   TELEFON / TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .container-header .navbar-brand {
        min-height: 160px !important;
        padding-bottom: 3.2rem !important;
    }

    .container-header .navbar-brand::after {
        top: -5% !important;
        right: -2% !important;

        width: 60% !important;
        height: 110% !important;

        opacity: 0.20 !important;
    }

    .container-header .navbar-brand::before {
        left: 1rem !important;
        bottom: 0.75rem !important;

        font-size: 1rem !important;
    }
}


@media (max-width: 600px) {

    .container-header .navbar-brand::after {
        display: none !important;
    }
}
.container-header .navbar-brand::before {
    content: "Pasja tworzy lepsze jutro!" !important;

    position: absolute !important;
    left: clamp(7rem, 14vw, 16rem) !important;
    bottom: 0.9rem !important;

    z-index: 5 !important;

    color: #ffffff !important;

    font-family: "Brush Script MT", "Segoe Script", cursive !important;
    font-size: clamp(1.8rem, 2.5vw, 2.3rem) !important;
    font-weight: 400 !important;
    font-style: normal !important;

    line-height: 1.05 !important;

    padding-bottom: 0.2rem !important;

    border-bottom: 3px solid #c91f50 !important;

    opacity: 0.95 !important;

    transform: rotate(-2deg) !important;
    transform-origin: left center !important;
}
/* =========================================================
   MDK – TELEFON: nagłówek
   ========================================================= */

@media (max-width: 600px) {

    .container-header .navbar-brand {
        min-height: 190px !important;
        padding: 1.25rem 1.25rem 3.6rem !important;
    }

    .container-header .navbar-brand .brand-logo > span {
        font-size: 1.65rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .container-header .navbar-brand .brand-logo > span::after {
        font-size: 1.05rem !important;
        margin-top: 0.3rem !important;
    }

    .container-header .navbar-brand .site-description {
        font-size: 0.9rem !important;
    }

    .container-header .navbar-brand::before {
        left: 1.25rem !important;
        bottom: 1rem !important;
        font-size: 1.35rem !important;
    }

    .container-header .navbar-brand::after {
        display: none !important;
    }
}
/* =========================================================
   MDK – TELEFON: górny pasek narzędzi
   ========================================================= */

@media (max-width: 600px) {

    .container-topbar .mdk-topbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.65rem !important;

        padding: 0.75rem 1rem !important;
    }

    .container-topbar .mdk-topbar-label {
        width: 100% !important;
        margin: 0 !important;
        font-size: 0.95rem !important;
    }

    .container-topbar .mdk-topbar-links {
        width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 0.65rem 1rem !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    .container-topbar .mdk-topbar-links a,
    .container-topbar .mdk-topbar-links button {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
}
/* MDK – telefon: ciaśniejszy pasek narzędzi */
@media (max-width: 600px) {

    .container-topbar .mdk-topbar-links {
        gap: 0.55rem 0.7rem !important;
    }

    .container-topbar .mdk-topbar-links a,
    .container-topbar .mdk-topbar-links button {
        font-size: 0.95rem !important;
    }

    .container-topbar .mdk-facebook {
        font-size: 1.1rem !important;
    }
}
/* =========================================================
   MDK – TELEFON: baner + kafelki jedna pod drugą
   ========================================================= */

@media (max-width: 600px) {

    .container-banner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .container-banner > *:first-child {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .container-banner > *:first-child img {
        position: relative !important;
        inset: auto !important;

        display: block !important;
        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
        object-position: center center !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .container-banner .mdk-quick-links {
        width: 100% !important;
        height: auto !important;
    }

    .mdk-quick-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .mdk-quick-tile {
        min-height: 105px !important;
    }
}
/* =========================================================
   MDK – TELEFON: menu hamburger
   ========================================================= */

@media (max-width: 600px) {

    .container-header .container-nav {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0.45rem 1rem !important;

        align-items: center !important;
        justify-content: flex-end !important;

        background: #ffffff !important;
    }

    .container-header .navbar-toggler {
        display: block !important;
        margin: 0 !important;
    }
}
/* =========================================================
   MDK – TELEFON: kompaktowe menu hamburger
   ========================================================= */

@media (max-width: 600px) {

    .container-header .container-nav {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0.4rem 1rem !important;

        background: #ffffff !important;

        align-items: center !important;
        justify-content: flex-end !important;
    }

    .container-header .container-nav .navbar {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        justify-content: flex-end !important;
    }

    .container-header .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #1b4f86 !important;
        border: 0 !important;
        border-radius: 4px !important;

        color: #ffffff !important;
    }
}
/* =========================================================
   MDK – TABLET 601–900 px
   nagłówek + hamburger + baner + kafelki
   ========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

    /* Na tablecie rysunek nie wchodzi pod nazwę */
    .container-header .navbar-brand::after {
        display: none !important;
    }

    /* Kompaktowy pasek menu */
    .container-header .container-nav {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0.45rem 1rem !important;

        background: #ffffff !important;

        align-items: center !important;
        justify-content: flex-end !important;
    }

    .container-header .container-nav .navbar {
        width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        justify-content: flex-end !important;
    }

    .container-header .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #1b4f86 !important;
        border: 0 !important;
        border-radius: 4px !important;

        color: #ffffff !important;
    }

    /* Baner na całą szerokość */
    .container-banner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .container-banner > *:first-child {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .container-banner > *:first-child img {
        position: relative !important;
        inset: auto !important;

        display: block !important;
        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
        object-position: center center !important;
    }

    /* Kafelki pod banerem – 2 × 2 */
    .container-banner .mdk-quick-links {
        width: 100% !important;
        height: auto !important;
    }

    .mdk-quick-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;

        width: 100% !important;
        height: auto !important;
    }

    .mdk-quick-tile {
        min-height: 120px !important;
    }
}
/* MDK – wysoki kontrast: hamburger */
body.mdk-high-contrast .navbar-toggler {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

body.mdk-high-contrast .navbar-toggler-icon {
    filter: brightness(0) invert(1) !important;
}

/* =========================================================
   MDK – IKONY KAFELKÓW SZYBKIEGO DOSTĘPU – FINAL
   ========================================================= */

.mdk-quick-grid .mdk-quick-tile::before {
    content: "" !important;
    display: block !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 0 0.65rem 0 !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    transform: none !important;
}

/* 1. Aktualności – wiadomości */
.mdk-quick-grid .mdk-quick-tile:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8h6M7 12h10M7 16h10'/%3E%3C/svg%3E") !important;
}

/* 2. Zajęcia stałe – pędzel */
.mdk-quick-grid .mdk-quick-tile:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4l6 6L10 20H4v-6L14 4z'/%3E%3Cpath d='M12 6l6 6M4 20l5-5'/%3E%3C/svg%3E") !important;
}

/* 3. Harmonogram – kalendarz */
.mdk-quick-grid .mdk-quick-tile:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3Cpath d='M7 14h2M11 14h2M15 14h2M7 17h2M11 17h2M15 17h2'/%3E%3C/svg%3E") !important;
}

/* 4. Galeria – aparat */
.mdk-quick-grid .mdk-quick-tile:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l1.5-2h7L17 7h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") !important;
}

/* =========================================================
   MDK – AKTUALNOŚCI: SPOKOJNA LISTA
   tekst po lewej + zdjęcie po prawej
   ========================================================= */

/* Kontener wszystkich aktualności */
.mdk-news-card {
    display: block !important;
}

/* Pojedyncza aktualność */
.mdk-news-card > .blog-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 2rem !important;

    margin: 0 0 2rem 0 !important;
    padding: 1.5rem !important;

    background: #ffffff !important;
    border: 1px solid #d9e2ec !important;
    border-radius: 8px !important;

    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.04) !important;
}

/* Tekst po lewej */
.mdk-news-card > .blog-item > .item-content {
    grid-column: 1 !important;
    grid-row: 1 !important;

    min-width: 0 !important;
}

/* Zdjęcie po prawej */
.mdk-news-card > .blog-item > .item-image {
    grid-column: 2 !important;
    grid-row: 1 !important;

    float: none !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    align-self: start !important;
}

.mdk-news-card > .blog-item > .item-image img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    border-radius: 6px !important;
}

/* Tytuł */
.mdk-news-card .page-header {
    margin: 0 0 0.5rem 0 !important;
}

.mdk-news-card .page-header h2,
.mdk-news-card .page-header h2 a {
    margin: 0 !important;

    color: #173b6d !important;

    font-size: 1.45rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

/* Data */
.mdk-news-card .article-info {
    margin: 0 0 1rem 0 !important;

    color: #5d6875 !important;
    font-size: 0.9rem !important;
}

/* Tekst zapowiedzi */
.mdk-news-card .item-content p {
    margin: 0 0 0.85rem 0 !important;
    line-height: 1.55 !important;
}

/* Czytaj więcej */
.mdk-news-card .readmore {
    margin: 1rem 0 0 0 !important;
}

.mdk-news-card .readmore a {
    display: inline-block !important;

    padding: 0.55rem 0.9rem !important;

    background: #173b6d !important;
    color: #ffffff !important;

    border-radius: 5px !important;

    text-decoration: none !important;
    font-weight: 600 !important;
}

.mdk-news-card .readmore a:hover,
.mdk-news-card .readmore a:focus {
    background: #a61e4d !important;
}

/* Tablet i telefon */
@media (max-width: 800px) {

    .mdk-news-card > .blog-item {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .mdk-news-card > .blog-item > .item-image {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .mdk-news-card > .blog-item > .item-content {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

/* =========================================================
   STOPKA – delikatny portret Henryka Jordana
   ========================================================= */

.container-footer .mdk-footer-links {
    background-color: #f5f7fa !important;
    background-image: url("http://localhost/mdk/images/henryk-jordan-stopka-3.png") !important;
    background-repeat: no-repeat !important;
    background-position: right -5px bottom 5px !important;
    background-size: 190px auto !important;
}

/* Stopka – punkt odniesienia dla podpisu */
.container-footer .mdk-footer-links {
    position: relative !important;
}

/* Podpis dr Henryk Jordan */
.container-footer .mdk-jordan-signature {
    position: absolute !important;

    right: 55px !important;
    bottom: 4px !important;

    font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
    font-size: 1.45rem;
    font-weight: 400;
    font-style: normal;

    color: #16477c;
    opacity: 0.72;

    transform: rotate(-5deg);
    transform-origin: center;

    white-space: nowrap;
    pointer-events: auto;
    z-index: 2;

    left: auto !important;
    top: auto !important;
}
/* Klikalny podpis Henryka Jordana */
.container-footer .mdk-jordan-signature a {
    display: inline-block !important;
    position: relative !important;
    z-index: 10 !important;

    pointer-events: auto !important;
    cursor: pointer !important;

    color: inherit !important;
    text-decoration: none !important;
}

/* Czytelniejsze listy na tabletach i telefonach */
@media (max-width: 800px) {
    .com-content-article__body li {
        line-height: 1.6;
        margin-bottom: 0.65rem;
    }
}

/* Stopka – wersja tablet i telefon */
@media (max-width: 1200px) {

    .container-footer .mdk-footer-links {
        background-image: none !important;
    }

    .container-footer .mdk-jordan-signature {
        display: none !important;
    }
}

/* Nagłówek – mniejsze laptopy i duże tablety */
@media (max-width: 1200px) {

    .container-header {
        margin-bottom: 0 !important;
    }

    .container-banner {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================================
   NAGŁÓWEK – tablet / mniejszy laptop
   ========================================================= */
@media (min-width: 801px) and (max-width: 1200px) {

    .container-header .navbar-brand {
        font-size: 1rem;
    }

    .container-header .navbar-brand .site-title,
    .container-header .navbar-brand a {
        font-size: 0.92em;
    }
}

/* =========================================================
   NAGŁÓWEK – TABLET / MNIEJSZY LAPTOP
   ========================================================= */
@media (min-width: 801px) and (max-width: 1200px) {

    .container-header .navbar-brand .brand-logo span {
        font-size: 2.45rem !important;
        line-height: 1.05 !important;
    }

    .container-header .navbar-brand .site-description {
        font-size: 1rem !important;
        margin-top: 0.25rem !important;
    }
}

/* =========================================================
   TABLET 992–1200 px – hamburger bez pustej przestrzeni
   ========================================================= */
@media (min-width: 992px) and (max-width: 1200px) {

    .container-header {
        position: relative !important;
    }

    .container-header .container-nav {
        position: absolute !important;
        right: 1rem !important;
        bottom: 0.8rem !important;

        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;

        z-index: 50 !important;
    }

    .container-header .container-nav .navbar {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        flex-wrap: wrap !important;
    }

    .container-header .navbar-toggler {
        display: block !important;
        margin: 0 !important;
    }

    .container-header .navbar-collapse {
        display: none !important;
    }

    .container-header .navbar-collapse.show {
        display: block !important;

        position: absolute !important;
        top: calc(100% + 0.4rem) !important;
        right: 0 !important;

        width: 280px !important;
        max-width: calc(100vw - 2rem) !important;

        padding: 0.4rem 0 !important;
        background: #ffffff !important;

        border-radius: 0.4rem !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;

        z-index: 100 !important;
    }

    .container-header .navbar-collapse.show .mod-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .container-header .navbar-collapse.show .mod-menu > li > a,
    .container-header .navbar-collapse.show .mod-menu > li > span {
        display: block !important;
        padding: 0.7rem 1rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }
}

@media (min-width: 801px) and (max-width: 1200px) {
    .container-header .navbar-brand .brand-logo span {
        font-size: 1.55rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }
}

/* Tablet – zwarte menu hamburgera */
@media (min-width: 992px) and (max-width: 1200px) {

    .container-header .navbar-collapse.show .mod-menu {
        gap: 0 !important;
    }

    .container-header .navbar-collapse.show .mod-menu > li {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    .container-header .navbar-collapse.show .mod-menu > li > a,
    .container-header .navbar-collapse.show .mod-menu > li > span {
        padding: 0.65rem 1rem !important;
        margin: 0 !important;
        min-height: 0 !important;
    }
}

/* Tablet – finalne dopracowanie panelu menu */
@media (min-width: 992px) and (max-width: 1200px) {

    .container-header .navbar-collapse.show {
        width: 245px !important;
        padding: 0.25rem 0 !important;
    }

    .container-header .navbar-collapse.show .mod-menu > li > a,
    .container-header .navbar-collapse.show .mod-menu > li > span {
        padding: 0.52rem 0.85rem !important;
        font-size: 1rem !important;
    }
}

/* Tablet – ostatnie dopracowanie menu */
@media (min-width: 992px) and (max-width: 1200px) {

    .container-header .navbar-collapse.show {
        width: 235px !important;
        right: 0.25rem !important;
        padding: 0.2rem 0 !important;
        border-radius: 0.35rem !important;
    }

    .container-header .navbar-collapse.show .mod-menu > li > a,
    .container-header .navbar-collapse.show .mod-menu > li > span {
        padding: 0.46rem 0.8rem !important;
        font-size: 0.98rem !important;
        line-height: 1.25 !important;
    }
}

/* =========================================================
   TABLET 801–1200 px – baner jak na telefonie
   ========================================================= */
@media (min-width: 801px) and (max-width: 1200px) {

    /* Baner i szybki dostęp jeden pod drugim */
    .container-banner {
        display: block !important;
    }

    .container-banner > * {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Moduł z główną grafiką */
    .container-banner #mod-custom111,
    .container-banner #mod-custom111 p {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Najważniejsze: przywracamy naturalną wysokość grafiki */
    .container-banner #mod-custom111 img {
        position: static !important;
        display: block !important;

        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;

        object-fit: contain !important;
        object-position: center !important;

        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* Kafelki pod banerem */
    .mdk-quick-links {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mdk-quick-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        width: 100% !important;
    }

    .mdk-quick-tile {
        min-height: 135px !important;
        height: auto !important;
        padding: 1.25rem !important;
        box-sizing: border-box !important;
    }
}

/* Tablet – biały odstęp między banerem a kafelkami */
@media (min-width: 801px) and (max-width: 1200px) {

    .container-banner {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .mdk-quick-links {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
}

/* Zajęcia stałe – ujednolicenie nagłówków H2 */
.com-content-article h2 {
    color: #163f73 !important;
    font-weight: 600 !important;
}

/* =========================================================
   ZAJĘCIA STAŁE – PROFESJONALNE IKONY LINIOWE
   ========================================================= */

.mdk-class {
    position: relative;
    padding-left: 3.2rem !important;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
}

.mdk-class::before {
    content: "";
    position: absolute;
    left: 0;
    width: 2.25rem;
    height: 2.25rem;
    background-color: #16477c;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* 1. Zajęcia plastyczne – paleta */
.mdk-class-art::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18h1.5a1.5 1.5 0 0 0 0-3H12a2 2 0 0 1 0-4h2.5A6.5 6.5 0 0 0 21 7.5C21 5 17 3 12 3Z'/%3E%3Ccircle cx='7.5' cy='10' r='1'/%3E%3Ccircle cx='9.5' cy='6.5' r='1'/%3E%3Ccircle cx='14' cy='6.5' r='1'/%3E%3Ccircle cx='17' cy='9.5' r='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18h1.5a1.5 1.5 0 0 0 0-3H12a2 2 0 0 1 0-4h2.5A6.5 6.5 0 0 0 21 7.5C21 5 17 3 12 3Z'/%3E%3Ccircle cx='7.5' cy='10' r='1'/%3E%3Ccircle cx='9.5' cy='6.5' r='1'/%3E%3Ccircle cx='14' cy='6.5' r='1'/%3E%3Ccircle cx='17' cy='9.5' r='1'/%3E%3C/svg%3E");
}

/* 2. Zajęcia teatralne – maski */
.mdk-class-theatre::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v6c0 4-1.5 6-3.5 7C5.5 16 4 14 4 10V4Z'/%3E%3Cpath d='M13 7h7v6c0 4-1.5 6-3.5 7-2-1-3.5-3-3.5-7V7Z'/%3E%3Cpath d='M6 8h1M9 8h1M6.5 12c.8.7 1.7.7 2.5 0M15 11h1M18 11h1M15.5 16c.8-.7 1.7-.7 2.5 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v6c0 4-1.5 6-3.5 7C5.5 16 4 14 4 10V4Z'/%3E%3Cpath d='M13 7h7v6c0 4-1.5 6-3.5 7-2-1-3.5-3-3.5-7V7Z'/%3E%3Cpath d='M6 8h1M9 8h1M6.5 12c.8.7 1.7.7 2.5 0M15 11h1M18 11h1M15.5 16c.8-.7 1.7-.7 2.5 0'/%3E%3C/svg%3E");
}

/* 3. Zajęcia muzyczne – nuta */
.mdk-class-music::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l10-2v13'/%3E%3Cpath d='M9 8l10-2'/%3E%3Cellipse cx='6.5' cy='18' rx='2.5' ry='2'/%3E%3Cellipse cx='16.5' cy='16' rx='2.5' ry='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l10-2v13'/%3E%3Cpath d='M9 8l10-2'/%3E%3Cellipse cx='6.5' cy='18' rx='2.5' ry='2'/%3E%3Cellipse cx='16.5' cy='16' rx='2.5' ry='2'/%3E%3C/svg%3E");
}

/* 4. Zajęcia wokalne – mikrofon */
.mdk-class-vocal::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='8' height='12' rx='4'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='8' height='12' rx='4'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6'/%3E%3C/svg%3E");
}

/* 5. Zajęcia taneczne – ruch */
.mdk-class-dance::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='4' r='2'/%3E%3Cpath d='M11 7l-2 5 4 2 2-4 3 3M9 12l-4 3M13 14l-2 7M13 14l5 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='4' r='2'/%3E%3Cpath d='M11 7l-2 5 4 2 2-4 3 3M9 12l-4 3M13 14l-2 7M13 14l5 6'/%3E%3C/svg%3E");
}

/* 6. Zajęcia sportowe – piłka */
.mdk-class-sport::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l3-2 3 2-1 4h-4L9 9ZM12 7V3M10 13l-4 3M14 13l4 3M6 16l1 4M18 16l-1 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l3-2 3 2-1 4h-4L9 9ZM12 7V3M10 13l-4 3M14 13l4 3M6 16l1 4M18 16l-1 4'/%3E%3C/svg%3E");
}

/* 7. Komputer i programowanie – monitor */
.mdk-class-computer::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='1.5'/%3E%3Cpath d='M8 21h8M12 17v4M9 9l-2 2 2 2M15 9l2 2-2 2M13 8l-2 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='1.5'/%3E%3Cpath d='M8 21h8M12 17v4M9 9l-2 2 2 2M15 9l2 2-2 2M13 8l-2 6'/%3E%3C/svg%3E");
}

/* 8. Koło gier – kontroler */
.mdk-class-games::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h8c3 0 5 3 5 7 0 3-1 5-3 5-1.5 0-2.5-2-3.5-3h-5C8.5 17 7.5 19 6 19c-2 0-3-2-3-5 0-4 2-7 5-7Z'/%3E%3Cpath d='M7 11v4M5 13h4M16 12h.01M18 14h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7h8c3 0 5 3 5 7 0 3-1 5-3 5-1.5 0-2.5-2-3.5-3h-5C8.5 17 7.5 19 6 19c-2 0-3-2-3-5 0-4 2-7 5-7Z'/%3E%3Cpath d='M7 11v4M5 13h4M16 12h.01M18 14h.01'/%3E%3C/svg%3E");
}

/* 9. Matematyka – symbole */
.mdk-class-math::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h6M7 4v6M14 5l5 5M19 5l-5 5M4 16h6M14 16h5M16.5 13.5v.01M16.5 18.5v.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h6M7 4v6M14 5l5 5M19 5l-5 5M4 16h6M14 16h5M16.5 13.5v.01M16.5 18.5v.01'/%3E%3C/svg%3E");
}

/* 10. Szycie i projektowanie – igła z nicią */
.mdk-class-sewing::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 3L8 14M17 3h2v2M8 14l-3 5 5-3M10 16c3 1 5 2 7 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 3L8 14M17 3h2v2M8 14l-3 5 5-3M10 16c3 1 5 2 7 5'/%3E%3C/svg%3E");
}

/* 11. Kompetencje kluczowe – współpraca */
.mdk-class-skills::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6' r='2.5'/%3E%3Ccircle cx='5' cy='10' r='2'/%3E%3Ccircle cx='19' cy='10' r='2'/%3E%3Cpath d='M7 18c0-3 2-5 5-5s5 2 5 5M2 18c0-2.5 1-4 3-4 1 0 2 .4 2.7 1.2M22 18c0-2.5-1-4-3-4-1 0-2 .4-2.7 1.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6' r='2.5'/%3E%3Ccircle cx='5' cy='10' r='2'/%3E%3Ccircle cx='19' cy='10' r='2'/%3E%3Cpath d='M7 18c0-3 2-5 5-5s5 2 5 5M2 18c0-2.5 1-4 3-4 1 0 2 .4 2.7 1.2M22 18c0-2.5-1-4-3-4-1 0-2 .4-2.7 1.2'/%3E%3C/svg%3E");
}

/* 12. Klub Dziecięcy – dziecko */
.mdk-class-kids::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M9 7h.01M15 7h.01M10 9c1 .8 3 .8 4 0M6 21c.5-5 2.5-8 6-8s5.5 3 6 8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M9 7h.01M15 7h.01M10 9c1 .8 3 .8 4 0M6 21c.5-5 2.5-8 6-8s5.5 3 6 8'/%3E%3C/svg%3E");
}

/* Telefon – trochę mniejsze ikony */
@media (max-width: 800px) {
    .mdk-class {
        padding-left: 2.7rem !important;
    }

    .mdk-class::before {
        width: 1.9rem;
        height: 1.9rem;
    }
}

/* =========================================================
   ZAJĘCIA STAŁE – korekta ikon
   ========================================================= */

/* Plastyka – ołówek i pędzel */
.mdk-class-art::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.2-1 10.6-10.6-3.2-3.2L5 15.8 4 20Z'/%3E%3Cpath d='M14.5 6.3l3.2 3.2M6 5l13 13M5 4l2.5 1L6 7.5 4 8l.5-2L5 4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.2-1 10.6-10.6-3.2-3.2L5 15.8 4 20Z'/%3E%3Cpath d='M14.5 6.3l3.2 3.2M6 5l13 13M5 4l2.5 1L6 7.5 4 8l.5-2L5 4Z'/%3E%3C/svg%3E");
}

/* Teatr – scena z kurtyną */
.mdk-class-theatre::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18M5 4v16M19 4v16M3 20h18'/%3E%3Cpath d='M5 5c1.2 4 3 6 7 7-4 1-5.8 3-7 7M19 5c-1.2 4-3 6-7 7 4 1 5.8 3 7 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18M5 4v16M19 4v16M3 20h18'/%3E%3Cpath d='M5 5c1.2 4 3 6 7 7-4 1-5.8 3-7 7M19 5c-1.2 4-3 6-7 7 4 1 5.8 3 7 7'/%3E%3C/svg%3E");
}

/* =========================================================
   ZAJĘCIA STAŁE – WYBRANE NOWE IKONY
   ========================================================= */

/* PLASTYCZNE – wariant 5: sztaluga */
.mdk-class-art::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='9' rx='1'/%3E%3Cpath d='M12 4V2M9 2h6M8 13l-3 8M16 13l3 8M12 13v8M5 16h14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='9' rx='1'/%3E%3Cpath d='M12 4V2M9 2h6M8 13l-3 8M16 13l3 8M12 13v8M5 16h14'/%3E%3C/svg%3E");
}

/* TANECZNE – wariant 2: tancerka */
.mdk-class-dance::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cpath d='M10 7c1 2 3 2 4 0M12 7v5M12 9L7 6M12 9l5-3M12 12c-2 1-3 3-4 5 2 1 6 1 8 0-1-2-2-4-4-5ZM12 17v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cpath d='M10 7c1 2 3 2 4 0M12 7v5M12 9L7 6M12 9l5-3M12 12c-2 1-3 3-4 5 2 1 6 1 8 0-1-2-2-4-4-5ZM12 17v4'/%3E%3C/svg%3E");
}

/* SPORTOWE – wariant 2: bieg / aktywność */
.mdk-class-sport::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='4' r='2'/%3E%3Cpath d='M12 8l3 2 3-1M12 8l-2 5 4 2M10 13l-5 3M14 15l-2 6M14 15l5 4M4 9h4M3 12h4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='4' r='2'/%3E%3Cpath d='M12 8l3 2 3-1M12 8l-2 5 4 2M10 13l-5 3M14 15l-2 6M14 15l5 4M4 9h4M3 12h4'/%3E%3C/svg%3E");
}

/* =========================================================
   ZAJĘCIA STAŁE – poprawione ikony
   ========================================================= */

/* TEATRALNE – reflektor sceniczny */
.mdk-class-theatre::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5h9l3 4-3 4H6Z'/%3E%3Cpath d='M6 7H3v4h3M12 13v4M9 21l3-4 3 4M18 9h3M19 5l2-2M19 13l2 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5h9l3 4-3 4H6Z'/%3E%3Cpath d='M6 7H3v4h3M12 13v4M9 21l3-4 3 4M18 9h3M19 5l2-2M19 13l2 2'/%3E%3C/svg%3E");
}

/* TANECZNE – elegancka tancerka */
.mdk-class-dance::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4' r='1.8'/%3E%3Cpath d='M12 6v6M12 8L7 5M12 8l5-4M12 12c-2 1-3.5 3-4.5 5h9c-1-2-2.5-4-4.5-5ZM12 17l-3 4M12 17l3 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4' r='1.8'/%3E%3Cpath d='M12 6v6M12 8L7 5M12 8l5-4M12 12c-2 1-3.5 3-4.5 5h9c-1-2-2.5-4-4.5-5ZM12 17l-3 4M12 17l3 4'/%3E%3C/svg%3E");
}

/* =========================================================
   ZAJĘCIA STAŁE – ujednolicenie nagłówków i odstępów
   ========================================================= */

.com-content-article h2.mdk-class {
    margin-top: 2.2rem !important;
    margin-bottom: 1rem !important;

    padding-left: 3.2rem !important;

    font-family: inherit !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    color: #16477c !important;
}

/* Pierwszy nagłówek zajęć – trochę mniejszy odstęp od wstępu */
.com-content-article h2.mdk-class:first-of-type {
    margin-top: 1.7rem !important;
}

/* Telefon */
@media (max-width: 800px) {
    .com-content-article h2.mdk-class {
        margin-top: 1.8rem !important;
        margin-bottom: 0.8rem !important;

        padding-left: 2.7rem !important;

        font-size: 1.65rem !important;
        line-height: 1.2 !important;
    }
}

/* =========================================================
   WYNAJEM – IKONY SAL
   ========================================================= */

/* Wspólny wygląd nagłówków sal */
.com-content-article h3.mdk-room {
    position: relative !important;
    display: flex !important;
    align-items: center !important;

    min-height: 2.5rem !important;
    padding-left: 3.2rem !important;

    margin-top: 1.8rem !important;
    margin-bottom: 0.5rem !important;

    font-family: inherit !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #16477c !important;
}

/* Wspólne ustawienia ikon */
.mdk-room::before {
    content: "";
    position: absolute;
    left: 0;

    width: 2.25rem;
    height: 2.25rem;

    background-color: #16477c;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


/* ---------------------------------------------------------
   SALA TEATRALNA – reflektor sceniczny
   --------------------------------------------------------- */

.mdk-room-theatre::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5h9l3 4-3 4H6Z'/%3E%3Cpath d='M6 7H3v4h3M12 13v4M9 21l3-4 3 4M18 9h3M19 5l2-2M19 13l2 2'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5h9l3 4-3 4H6Z'/%3E%3Cpath d='M6 7H3v4h3M12 13v4M9 21l3-4 3 4M18 9h3M19 5l2-2M19 13l2 2'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------
   SALA TANECZNA – tancerka
   --------------------------------------------------------- */

.mdk-room-dance::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4' r='1.8'/%3E%3Cpath d='M12 6v6M12 8L7 5M12 8l5-4M12 12c-2 1-3.5 3-4.5 5h9c-1-2-2.5-4-4.5-5ZM12 17l-3 4M12 17l3 4'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4' r='1.8'/%3E%3Cpath d='M12 6v6M12 8L7 5M12 8l5-4M12 12c-2 1-3.5 3-4.5 5h9c-1-2-2.5-4-4.5-5ZM12 17l-3 4M12 17l3 4'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------
   SALA SPORTOWA – bieg / aktywność
   --------------------------------------------------------- */

.mdk-room-sport::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='4' r='2'/%3E%3Cpath d='M12 8l3 2 3-1M12 8l-2 5 4 2M10 13l-5 3M14 15l-2 6M14 15l5 4M4 9h4M3 12h4'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='4' r='2'/%3E%3Cpath d='M12 8l3 2 3-1M12 8l-2 5 4 2M10 13l-5 3M14 15l-2 6M14 15l5 4M4 9h4M3 12h4'/%3E%3C/svg%3E");
}


/* Telefon */
@media (max-width: 800px) {

    .com-content-article h3.mdk-room {
        padding-left: 2.7rem !important;
        margin-top: 1.6rem !important;
    }

    .mdk-room::before {
        width: 1.9rem;
        height: 1.9rem;
    }
}

/* =========================================================
   WYNAJEM – poprawa odstępów między salami
   ========================================================= */

.com-content-article h3.mdk-room {
    margin-top: 1.6rem !important;
    margin-bottom: 0.45rem !important;
}

/* Opis bezpośrednio pod nazwą sali */
.com-content-article h3.mdk-room + p {
    margin-top: 0 !important;
    margin-bottom: 0.9rem !important;
}

/* =========================================================
   WYNAJEM – ostateczne wyrównanie odstępów między salami
   ========================================================= */

/* Akapit bezpośrednio pod nazwą sali */
.com-content-article h3.mdk-room + p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Następna sala po opisie poprzedniej */
.com-content-article h3.mdk-room + p + h3.mdk-room {
    margin-top: 1.4rem !important;
}

/* Odstęp pod nagłówkiem sali */
.com-content-article h3.mdk-room {
    margin-bottom: 0.45rem !important;
}

/* =========================================================
   WYNAJEM – równe odstępy między salami
   ========================================================= */

.com-content-article h3.mdk-room {
    margin-top: 1.4rem !important;
    margin-bottom: 0.35rem !important;
}

.com-content-article h3.mdk-room + p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Każda kolejna sala po opisie poprzedniej */
.com-content-article h3.mdk-room + p + h3.mdk-room {
    margin-top: 1.4rem !important;
}

/* Jeżeli Joomla doda pusty akapit między sekcjami */
.com-content-article h3.mdk-room + p + p:empty {
    display: none !important;
}

/* =========================================================
   WYNAJEM – poprawny, równy układ sal
   ========================================================= */

.com-content-article h3.mdk-room {
    min-height: 0 !important;

    margin-top: 1.5rem !important;
    margin-bottom: 0.35rem !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tekst pod nazwą sali */
.com-content-article h3.mdk-room + p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Każda następna sala */
.com-content-article h3.mdk-room + p + h3.mdk-room {
    margin-top: 1.5rem !important;
}

/* Pierwsza sala pod nagłówkiem "Dostępne sale" */
.com-content-article h2 + h3.mdk-room {
    margin-top: 1.5rem !important;
}

/* Wynajem – Sala sportowa: taki sam odstęp jak pozostałe sale */
.com-content-article h3.mdk-room.mdk-room-sport {
    margin-top: 1.4rem !important;
}

/* =========================================================
   WYNAJEM – równy układ wszystkich sal
   ========================================================= */

.com-content-article .mdk-room-list {
    display: grid !important;
    gap: 1.6rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.com-content-article .mdk-room-item {
    margin: 0 !important;
    padding: 0 !important;
}

.com-content-article .mdk-room-item h3.mdk-room {
    margin: 0 0 0.4rem 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 2.5rem !important;
}

.com-content-article .mdk-room-item p {
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   GALERIA – kafelki albumów
   ========================================================= */

.mdk-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px)) !important;
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
}

.mdk-gallery-card {
    display: block !important;
    overflow: hidden !important;

    background: #ffffff !important;
    border: 1px solid #d9e0e7 !important;
    border-radius: 0.6rem !important;

    text-decoration: none !important;
    color: inherit !important;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.mdk-gallery-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13) !important;
}

.mdk-gallery-card img {
    display: block !important;
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
}

.mdk-gallery-card-content {
    padding: 1rem 1rem 1.1rem !important;
}

.mdk-gallery-card-content h2 {
    margin: 0 0 0.5rem 0 !important;

    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;

    color: #16477c !important;
}

.mdk-gallery-card-content p {
    margin: 0 !important;
    font-size: 0.95rem !important;
    color: #555 !important;
}

/* Widoczny fokus klawiatury */
.mdk-gallery-card:focus-visible {
    outline: 3px solid #0b6e8e !important;
    outline-offset: 3px !important;
}

/* Telefon */
@media (max-width: 600px) {
    .mdk-gallery-grid {
        grid-template-columns: 1fr !important;
    }

    .mdk-gallery-card img {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
    }
}

/* =========================================================
   GALERIA – mniejsze kafelki i odstęp od stopki
   ========================================================= */

/* Mniejsze kafelki albumów */
.mdk-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 290px)) !important;

    /* odstęp całej galerii od stopki */
    margin-bottom: 3rem !important;
}

/* Mniejsze zdjęcie */
.mdk-gallery-card img {
    height: 165px !important;
    object-fit: cover !important;
}

/* Mniejszy tytuł albumu */
.mdk-gallery-card-content h2 {
    font-size: 1.08rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.4rem !important;
}

/* Trochę bardziej kompaktowe wnętrze */
.mdk-gallery-card-content {
    padding: 0.85rem 0.9rem 0.95rem !important;
}

/* Data */
.mdk-gallery-card-content p {
    font-size: 0.9rem !important;
}

/* Telefon – kafelek wykorzystuje dostępną szerokość */
@media (max-width: 600px) {
    .mdk-gallery-grid {
        grid-template-columns: 1fr !important;
        margin-bottom: 2.5rem !important;
    }

    .mdk-gallery-card img {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* Galeria – mały tytuł albumu */
.item-page .mdk-gallery-card .mdk-gallery-card-content h2 {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    margin: 0 0 0.45rem 0 !important;
}

/* =========================================================
   BANER MDK – zabezpieczenie szerokości nowej grafiki
   ========================================================= */

@media (min-width: 1201px) {

    .container-banner > *:first-child {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .container-banner > *:first-child img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .container-banner .mdk-quick-links {
        min-width: 0 !important;
    }
}

/* =========================================================
   TYPOGRAFIA ARTYKUŁÓW – desktop, tablet, telefon
   ========================================================= */

/* Główna treść artykułów */
.item-page,
.com-content-article {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #25384d !important;
}

/* Akapity */
.item-page p,
.com-content-article p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
}

/* Nagłówek H1 */
.item-page h1,
.com-content-article h1 {
    font-size: clamp(1.9rem, 3vw, 2.35rem) !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 1.2rem !important;
    color: #123f73 !important;
    font-weight: 700 !important;
}

/* Nagłówek H2 */
.item-page h2,
.com-content-article h2 {
    font-size: clamp(1.45rem, 2vw, 1.8rem) !important;
    line-height: 1.3 !important;
    margin-top: 1.8rem !important;
    margin-bottom: 0.8rem !important;
    color: #16477c !important;
    font-weight: 600 !important;
}

/* Nagłówek H3 */
.item-page h3,
.com-content-article h3 {
    font-size: clamp(1.2rem, 1.6vw, 1.4rem) !important;
    line-height: 1.35 !important;
    margin-top: 1.4rem !important;
    margin-bottom: 0.6rem !important;
    color: #16477c !important;
    font-weight: 600 !important;
}

/* Listy */
.item-page ul,
.item-page ol,
.com-content-article ul,
.com-content-article ol {
    margin-top: 0.6rem !important;
    margin-bottom: 1rem !important;
    padding-left: 1.4rem !important;
}

.item-page li,
.com-content-article li {
    margin-bottom: 0.35rem !important;
    line-height: 1.6 !important;
}

/* Linki w treści */
.item-page a,
.com-content-article a {
    text-underline-offset: 0.15em !important;
    text-decoration-thickness: 1px !important;
}

/* Tablet */
@media (max-width: 900px) {
    .item-page,
    .com-content-article {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
    }
}

/* Telefon */
@media (max-width: 600px) {
    .item-page,
    .com-content-article {
        font-size: 0.96rem !important;
        line-height: 1.6 !important;
    }

    .item-page h1,
    .com-content-article h1 {
        font-size: 1.75rem !important;
    }

    .item-page h2,
    .com-content-article h2 {
        font-size: 1.35rem !important;
    }

    .item-page h3,
    .com-content-article h3 {
        font-size: 1.15rem !important;
    }
}

/* =========================================================
   DŁUGIE ARTYKUŁY – justowanie na większych ekranach
   ========================================================= */

@media (min-width: 701px) {
    .item-page p,
    .com-content-article p {
        text-align: justify !important;
        text-justify: inter-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
    }
}

/* Telefon – wracamy do wyrównania do lewej */
@media (max-width: 700px) {
    .item-page p,
    .com-content-article p {
        text-align: left !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }
}

/* =========================================================
   KONCEPCJA MDK – ujednolicenie nagłówków
   ========================================================= */

/* wewnętrzne nagłówki artykułu */
.item-page h2,
.item-page h3,
.item-page h4 {
    color: #16477c !important;
}

/* jednakowa grubość nagłówków */
.item-page h2,
.item-page h3,
.item-page h4 {
    font-weight: 600 !important;
}

/* MISJA / WIZJA – spokojniejszy wygląd */
.item-page h2 {
    text-align: left !important;
}

/* czerwone teksty wpisane ręcznie w artykule */
.item-page span[style*="color"],
.item-page p[style*="color"],
.item-page strong[style*="color"] {
    color: #16477c !important;
}

/* =========================================================
   MDK – HARMONOGRAM ZAJĘĆ 2026/2027
   ========================================================= */

.mdk-harmonogram {
    width: 100%;
    max-width: 100%;
    color: #172b3c;
}

.mdk-harmonogram .harmonogram-lead {
    margin: 12px 0 24px !important;
    font-size: 1.12rem !important;
    line-height: 1.5 !important;
    color: #173a60 !important;
}

.mdk-harmonogram > p {
    line-height: 1.65;
}


/* =========================================================
   WAŻNA INFORMACJA
   ========================================================= */

.harmonogram-info {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;

    width: 100% !important;
    box-sizing: border-box !important;

    margin: 24px 0 18px !important;
    padding: 20px 24px !important;

    background: #eef7fd !important;
    border: 1px solid #d5eaf8 !important;
    border-radius: 10px !important;

    color: #173a60 !important;
}

.harmonogram-info-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 52px !important;

    width: 52px !important;
    height: 52px !important;

    border-radius: 50% !important;
    background: #1474b8 !important;
    color: #ffffff !important;

    font-size: 1.8rem !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
}

.harmonogram-info-text {
    flex: 1 1 auto !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

.harmonogram-info-text strong {
    color: #0c4779 !important;
}


/* =========================================================
   INFORMACJA O PRZEWIJANIU
   ========================================================= */

.harmonogram-mobile-info {
    margin: 10px 0 12px !important;
    color: #415b72 !important;
    font-size: 0.92rem !important;
}


/* =========================================================
   ZEWNĘTRZNY BLOK TABELI
   ========================================================= */

.harmonogram-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    background: #ffffff !important;

    border: 1px solid #a9d3ef !important;
    border-radius: 7px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

.harmonogram-title {
    display: block !important;

    margin: 0 !important;
    padding: 15px 18px !important;

    background: #f3f9fd !important;
    color: #0d4f86 !important;

    border-bottom: 1px solid #cce3f3 !important;

    font-size: 1.18rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}


/* =========================================================
   PRZEWIJANIE
   ========================================================= */

.harmonogram-scroll {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    -webkit-overflow-scrolling: touch !important;
}


/* =========================================================
   TABELA
   ========================================================= */

.harmonogram-table {
    display: table !important;

    width: 100% !important;
    min-width: 1160px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-collapse: collapse !important;
    border-spacing: 0 !important;

    table-layout: fixed !important;

    background: #ffffff !important;

    font-size: 0.89rem !important;
    line-height: 1.35 !important;
}


/* =========================================================
   NAGŁÓWEK TABELI
   ========================================================= */

.harmonogram-table thead {
    display: table-header-group !important;
}

.harmonogram-table thead tr {
    display: table-row !important;
}

.harmonogram-table thead th {
    display: table-cell !important;

    padding: 13px 9px !important;

    background: #0e5a94 !important;
    color: #ffffff !important;

    border-right: 1px solid #4c89b6 !important;
    border-bottom: 1px solid #0b4777 !important;

    vertical-align: middle !important;
    text-align: center !important;

    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    white-space: normal !important;
}

.harmonogram-table thead th:last-child {
    border-right: 0 !important;
}


/* =========================================================
   WIERSZE
   ========================================================= */

.harmonogram-table tbody {
    display: table-row-group !important;
}

.harmonogram-table tbody tr {
    display: table-row !important;
    background: #ffffff !important;
}

.harmonogram-table tbody tr:nth-child(even) {
    background: #eef7fc !important;
}

.harmonogram-table tbody tr:hover {
    background: #e2f2fb !important;
}


/* =========================================================
   KOMÓRKI
   ========================================================= */

.harmonogram-table tbody td {
    display: table-cell !important;

    padding: 10px 10px !important;

    border-right: 1px solid #c8e1f1 !important;
    border-bottom: 1px solid #c8e1f1 !important;

    vertical-align: middle !important;

    color: #17324d !important;

    font-size: 0.89rem !important;
    line-height: 1.35 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.harmonogram-table tbody td:last-child {
    border-right: 0 !important;
}


/* =========================================================
   SZEROKOŚCI KOLUMN
   ========================================================= */

.harmonogram-table th:nth-child(1),
.harmonogram-table td:nth-child(1) {
    width: 4% !important;
    text-align: center !important;
}

.harmonogram-table th:nth-child(2),
.harmonogram-table td:nth-child(2) {
    width: 27% !important;
}

.harmonogram-table th:nth-child(3),
.harmonogram-table td:nth-child(3) {
    width: 9% !important;
    text-align: center !important;
}

.harmonogram-table th:nth-child(4),
.harmonogram-table td:nth-child(4),
.harmonogram-table th:nth-child(5),
.harmonogram-table td:nth-child(5),
.harmonogram-table th:nth-child(6),
.harmonogram-table td:nth-child(6),
.harmonogram-table th:nth-child(7),
.harmonogram-table td:nth-child(7),
.harmonogram-table th:nth-child(8),
.harmonogram-table td:nth-child(8) {
    width: 12% !important;
    text-align: center !important;
}


/* =========================================================
   LP., NAZWA, NAUCZYCIEL
   ========================================================= */

.harmonogram-table tbody td:first-child {
    font-weight: 700 !important;
    color: #0d4f86 !important;
}

.harmonogram-table tbody td:nth-child(2) {
    font-weight: 600 !important;
    text-align: left !important;
}

.harmonogram-table tbody td:nth-child(3) {
    font-weight: 600 !important;
}


/* =========================================================
   DODATKOWY OPIS POD NAZWĄ
   ========================================================= */

.harmonogram-sub {
    display: block !important;

    margin-top: 4px !important;

    color: #50687b !important;

    font-size: 0.78rem !important;
    line-height: 1.3 !important;

    font-weight: 400 !important;
}


/* =========================================================
   ZAJĘCIA POZA MDK
   ========================================================= */

.harmonogram-table tbody tr.harmonogram-special {
    background: #e4f4fb !important;
}

.harmonogram-table tbody tr.harmonogram-special:hover {
    background: #d7eef9 !important;
}


/* =========================================================
   INFORMACJA POD TABELĄ
   ========================================================= */

.harmonogram-note {
    margin: 18px 0 0 !important;
    padding: 13px 16px !important;

    background: #f3f8fb !important;

    border-left: 4px solid #0e5a94 !important;

    color: #344d61 !important;

    font-size: 0.92rem !important;
    line-height: 1.5 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .harmonogram-table {
        min-width: 1100px !important;
    }

}


/* =========================================================
   TELEFON
   ========================================================= */

@media (max-width: 768px) {

    .harmonogram-info {
        align-items: flex-start !important;

        gap: 13px !important;

        padding: 15px !important;
        margin: 18px 0 14px !important;
    }

    .harmonogram-info-icon {
        flex-basis: 42px !important;

        width: 42px !important;
        height: 42px !important;

        font-size: 1.45rem !important;
    }

    .harmonogram-info-text {
        font-size: 0.94rem !important;
    }

    .harmonogram-mobile-info {
        display: block !important;
        font-size: 0.86rem !important;
    }

    .harmonogram-title {
        padding: 13px 14px !important;
        font-size: 1.02rem !important;
    }

    .harmonogram-table {
        min-width: 1080px !important;
        font-size: 0.85rem !important;
    }

    .harmonogram-table thead th {
        padding: 11px 8px !important;
        font-size: 0.83rem !important;
    }

    .harmonogram-table tbody td {
        padding: 9px 8px !important;
        font-size: 0.85rem !important;
    }

}


/* =========================================================
   DUŻY EKRAN
   ========================================================= */

@media (min-width: 769px) {

    .harmonogram-mobile-info {
        display: none !important;
    }

}

/* =========================================================
   MDK � grafika w nag��wku
   ========================================================= */

.container-header .navbar-brand::after {
    background-image: url("/images/strona%20glowna/naglowek/naglowek-szkice-final.png") !important;
}


/* =========================================================
   MDK � w�a�ciwy portret dr. Henryka Jordana w stopce
   ========================================================= */

.container-footer .mdk-footer-links {
    background-image: url("/images/henryk-jordan-stopka-3.png") !important;
    background-repeat: no-repeat !important;
    background-position: right -5px bottom -15px !important;
    background-size: 190px auto !important;
}

/* =========================================================
   MDK � podpis dr Henryk Jordan przy portrecie
   ========================================================= */

.container-footer .mdk-jordan-signature {
    position: absolute !important;

    right: 70px !important;
    bottom: 18px !important;

    font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
    font-size: 1.45rem;
    font-weight: 400;
    font-style: normal;

    color: #16477c;
    opacity: 0.72;

    transform: rotate(-14deg) !important;
    transform-origin: center;

    white-space: nowrap;
    pointer-events: auto;
    z-index: 2;

    left: auto !important;
}

/* =========================================================
   OKIENKO INFORMACJI O PLIKACH COOKIES
   ========================================================= */

.mdk-cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 760px;
    z-index: 99999;
    box-sizing: border-box;
}

.mdk-cookie-inner {
    display: flex;
    align-items: center;
    gap: 20px;

    padding: 17px 20px;

    background: #ffffff;
    border: 1px solid #d7e2ea;
    border-left: 5px solid #2b91a8;
    border-radius: 6px;

    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.18);

    color: #18324a;
    font-size: 0.94rem;
    line-height: 1.45;
}

.mdk-cookie-inner p {
    flex: 1;
    margin: 0;
    padding: 0;
    text-align: justify;
}

.mdk-cookie-inner a {
    color: #16477c;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #2b91a8;
    text-underline-offset: 2px;
}

.mdk-cookie-inner a:hover,
.mdk-cookie-inner a:focus {
    color: #0f355f;
}

.mdk-cookie-accept {
    flex: 0 0 auto;

    margin: 0;
    padding: 8px 18px;

    border: 2px solid #16477c;
    border-radius: 4px;

    background: #16477c;
    color: #ffffff;

    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;

    cursor: pointer;
}

.mdk-cookie-accept:hover,
.mdk-cookie-accept:focus {
    background: #ffffff;
    color: #16477c;
}

.mdk-cookie-accept:focus-visible {
    outline: 3px solid #2b91a8;
    outline-offset: 3px;
}


/* TELEFON */
@media (max-width: 700px) {

    .mdk-cookie-banner {
        width: calc(100% - 24px);
        bottom: 12px;
    }

    .mdk-cookie-inner {
        display: block;
        padding: 15px 16px;
        font-size: 0.9rem;
    }

    .mdk-cookie-inner p {
        margin: 0 0 12px 0;
        text-align: left;
    }

    .mdk-cookie-accept {
        width: 100%;
        padding: 9px 14px;
    }
}