.elementor-kit-7{--e-global-color-primary:#082B49;--e-global-color-secondary:#5E6B75;--e-global-color-text:#14212B;--e-global-color-accent:#147B89;--e-global-color-4081b71:#061E34;--e-global-color-4594af9:#3C9EAC;--e-global-color-8f0a807:#F0B400;--e-global-color-7ddc4ac:#F5F8FA;--e-global-color-baa8a53:#DCE6EC;--e-global-color-d73bad3:#FFFFFF;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:800;--e-global-typography-primary-font-style:normal;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-font-style:normal;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-text-font-style:normal;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:700;--e-global-typography-accent-font-style:normal;color:var( --e-global-color-text );font-family:"Inter", Arial, Helvetica, sans-serif;font-size:17px;font-weight:400;font-style:normal;line-height:1.65em;letter-spacing:0px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 p{margin-block-end:1em;}.elementor-kit-7 a{color:#147B89;font-family:"Inter", Arial, Helvetica, sans-serif;font-weight:600;font-style:normal;text-decoration:underline;}.elementor-kit-7 a:hover{color:var( --e-global-color-primary );font-family:"Inter", Arial, Helvetica, sans-serif;font-weight:600;font-style:normal;text-decoration:underline;}.elementor-kit-7 h1{color:var( --e-global-color-primary );font-family:"Inter", Arial, Helvetica, sans-serif;font-size:52px;font-weight:800;font-style:normal;letter-spacing:-1.5px;}.elementor-kit-7 h2{color:var( --e-global-color-primary );font-family:"Inter", Arial, Helvetica, sans-serif;font-size:40px;font-weight:800;font-style:normal;letter-spacing:-1px;}.elementor-kit-7 h3{color:var( --e-global-color-primary );font-family:"Inter", Arial, Helvetica, sans-serif;font-size:26px;font-weight:700;font-style:normal;line-height:1.2em;letter-spacing:-0.4px;}.elementor-kit-7 h4{color:var( --e-global-color-primary );font-family:"Inter", Arial, Helvetica, sans-serif;font-size:22px;font-weight:700;font-style:normal;line-height:1.25em;letter-spacing:0px;}.elementor-kit-7 h5{color:var( --e-global-color-primary );font-family:"Inter", Arial, Helvetica, sans-serif;font-size:19px;font-weight:700;line-height:1.3px;letter-spacing:0px;}.elementor-kit-7 h6{color:var( --e-global-color-primary );font-family:"Inter", Arial, Helvetica, sans-serif;font-size:16px;font-weight:700;font-style:normal;line-height:1.35px;letter-spacing:0.2px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-7{font-size:17px;line-height:1.65em;letter-spacing:0px;}.elementor-kit-7 p{margin-block-end:1em;}.elementor-kit-7 h1{font-size:42px;line-height:1.1em;letter-spacing:-1px;}.elementor-kit-7 h2{font-size:34px;line-height:1.14em;letter-spacing:-0.7px;}.elementor-kit-7 h3{font-size:24px;line-height:1.2em;letter-spacing:-0.2px;}.elementor-kit-7 h4{font-size:21px;line-height:1.25em;letter-spacing:0px;}.elementor-kit-7 h5{font-size:18px;line-height:1.3em;letter-spacing:0px;}.elementor-kit-7 h6{font-size:16px;line-height:1.35em;letter-spacing:0.2px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{font-size:16px;line-height:1.65em;letter-spacing:0px;}.elementor-kit-7 h1{font-size:34px;line-height:1.12em;letter-spacing:-0.5px;}.elementor-kit-7 h2{font-size:28px;line-height:1.16em;letter-spacing:-0.4px;}.elementor-kit-7 h3{font-size:22px;line-height:1.22em;letter-spacing:0px;}.elementor-kit-7 h4{font-size:17px;line-height:1.3em;letter-spacing:0px;}.elementor-kit-7 h5{font-size:17px;line-height:1.3em;letter-spacing:0px;}.elementor-kit-7 h6{font-size:16px;line-height:1.35em;letter-spacing:0.2px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================
   ZSŁ WARSZAWA — DESIGN SYSTEM
   Global CSS Variables
   ========================================================== */

:root {

    /* ======================================================
       1. KOLORY MARKI
       ====================================================== */

    --zsl-navy: #082B49;
    --zsl-navy-dark: #061E34;

    --zsl-teal: #147B89;
    --zsl-teal-light: #3C9EAC;

    --zsl-yellow: #F0B400;

    --zsl-white: #FFFFFF;
    --zsl-black: #000000;


    /* ======================================================
       2. KOLORY INTERFEJSU I TREŚCI
       ====================================================== */

    --zsl-text: #14212B;
    --zsl-text-muted: #5F6E78;

    --zsl-background: #FFFFFF;
    --zsl-background-soft: #F5F5F5;

    --zsl-border: #DCE6EC;

    /* Kolory stanów / komponentów */
    --zsl-info-soft: #F2FAFB;
    --zsl-navy-soft: #F1F5F8;

    --zsl-success: #18864B;
    --zsl-success-soft: #F1FAF5;

    --zsl-warning: #C97A00;
    --zsl-warning-soft: #FFF8E8;

    --zsl-danger: #C63D48;
    --zsl-danger-soft: #FFF3F4;

    --zsl-tech-soft: #F2F7FA;
    --zsl-lo-soft: #FFF9E8;


    /* ======================================================
       3. KOLORY SEMANTYCZNE SZKÓŁ
       ====================================================== */

    /* Technikum */
    --zsl-tech: #082B49;
    --zsl-tech-accent: #3C9EAC;

    /* Liceum */
    --zsl-lo: #F0B400;
    --zsl-lo-dark: #082B49;


    /* ======================================================
       4. TYPOGRAFIA
       ====================================================== */

    --zsl-font-primary: "Inter", Arial, sans-serif;

    --zsl-font-weight-regular: 400;
    --zsl-font-weight-medium: 500;
    --zsl-font-weight-semibold: 600;
    --zsl-font-weight-bold: 700;

    --zsl-line-height-tight: 1.15;
    --zsl-line-height-heading: 1.25;
    --zsl-line-height-body: 1.6;


    /* ======================================================
       5. SZEROKOŚCI
       ====================================================== */

    --zsl-container: 1280px;

    --zsl-content-narrow: 850px;
    --zsl-content-medium: 1000px;


    /* ======================================================
       6. ODSTĘPY
       ====================================================== */

    --zsl-space-1: 4px;
    --zsl-space-2: 8px;
    --zsl-space-3: 12px;
    --zsl-space-4: 16px;
    --zsl-space-5: 20px;
    --zsl-space-6: 24px;
    --zsl-space-7: 28px;
    --zsl-space-8: 32px;
    --zsl-space-9: 40px;
    --zsl-space-10: 48px;
    --zsl-space-11: 64px;
    --zsl-space-12: 80px;


    /* ======================================================
       7. ODSTĘPY SEKCJI
       ====================================================== */

    --zsl-section-sm: 36px;
    --zsl-section-md: 58px;
    --zsl-section-lg: 72px;

    /* Odstęp nagłówek zwykłej strony → pierwsza sekcja treści */
    --zsl-page-content-top-desktop: 32px;
    --zsl-page-content-top-tablet: 28px;
    --zsl-page-content-top-mobile: 24px;


    /* ======================================================
       8. BOCZNE ODSTĘPY STRONY
       ====================================================== */

    --zsl-page-padding-desktop: 32px;
    --zsl-page-padding-tablet: 24px;
    --zsl-page-padding-mobile: 18px;


    /* ======================================================
       9. ZAOKRĄGLENIA
       ====================================================== */

    --zsl-radius-sm: 8px;
    --zsl-radius-md: 14px;
    --zsl-radius-lg: 18px;
    --zsl-radius-xl: 26px;
    --zsl-radius-pill: 999px;


    /* ======================================================
       10. OBRAMOWANIA
       ====================================================== */

    --zsl-border-width: 1px;


    /* ======================================================
       11. CIENIE
       ====================================================== */

    --zsl-shadow-sm:
        0 10px 34px rgba(6, 30, 52, 0.055);

    --zsl-shadow-md:
        0 18px 46px rgba(6, 30, 52, 0.10);

    --zsl-shadow-lg:
        0 28px 78px rgba(6, 30, 52, 0.18);


    /* ======================================================
       12. ANIMACJE / HOVER
       ====================================================== */

    --zsl-transition-fast: 160ms ease;
    --zsl-transition: 250ms ease;
    --zsl-transition-slow: 400ms ease;

    /* Motion system */
    --zsl-ease-emphasized: cubic-bezier(.20, .80, .20, 1);

    --zsl-reveal-scale: .72;
    --zsl-reveal-duration: 1000ms;
    --zsl-reveal-opacity-duration: 550ms;
    --zsl-reveal-stagger: 70ms;

    --zsl-hover-lift: -4px;
    --zsl-focus-color: rgba(60, 158, 172, 0.48);


    /* ======================================================
       13. WARSTWY
       ====================================================== */

    --zsl-z-base: 1;
    --zsl-z-dropdown: 100;
    --zsl-z-sticky: 1000;
    --zsl-z-modal: 2000;

}


/* ==========================================================
   02. BASE / PAGE STRUCTURE
   ========================================================== */

.zsl-page {
    position: relative;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    color: var(--zsl-text);

    font-family: var(--zsl-font-primary);

    box-sizing: border-box;
}

.zsl-page *,
.zsl-page *::before,
.zsl-page *::after {
    box-sizing: border-box;
}


/* ==========================================================
   CONTAINER
   ========================================================== */

.zsl-container {
    width: 100%;
    max-width: var(--zsl-container);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--zsl-page-padding-desktop);
    padding-right: var(--zsl-page-padding-desktop);
}


/* ==========================================================
   SECTIONS
   ========================================================== */

.zsl-section {
    width: 100%;

    padding-top: var(--zsl-section-md);
    padding-bottom: var(--zsl-section-md);
}

.zsl-section--sm {
    padding-top: var(--zsl-section-sm);
    padding-bottom: var(--zsl-section-sm);
}

.zsl-section--lg {
    padding-top: var(--zsl-section-lg);
    padding-bottom: var(--zsl-section-lg);
}


/* ==========================================================
   PIERWSZA SEKCJA TREŚCI PO NAGŁÓWKU STRONY
   Nie zmniejsza odstępów między dalszymi sekcjami.
   ========================================================== */

.zsl-page > .zsl-page-header + .zsl-section {
    padding-top: var(--zsl-page-content-top-desktop);
}


/* ==========================================================
   03. PAGE HEADER
   ========================================================== */

.zsl-page-header {
    width: 100%;

    margin: 0;

    padding-top: 32px;
    padding-bottom: 32px;

    background: var(--zsl-background-soft);

    border-bottom:
        var(--zsl-border-width)
        solid
        var(--zsl-border);
}


/* ==========================================================
   BREADCRUMBS
   ========================================================== */

.zsl-breadcrumbs {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    width: 100%;

    margin: 0 0 12px;
    padding: 0;

    color: var(--zsl-text-muted);

    font-family: var(--zsl-font-primary);
    font-size: 12px;
    line-height: 1.5;

    font-weight: var(--zsl-font-weight-medium);
}


/* Linki breadcrumbs */

.zsl-breadcrumbs a,
.zsl-breadcrumbs a:link,
.zsl-breadcrumbs a:visited,
.zsl-breadcrumbs a:hover,
.zsl-breadcrumbs a:focus,
.zsl-breadcrumbs a:focus-visible,
.zsl-breadcrumbs a:active,
.zsl-breadcrumbs__link,
.zsl-breadcrumbs__link:link,
.zsl-breadcrumbs__link:visited,
.zsl-breadcrumbs__link:hover,
.zsl-breadcrumbs__link:focus,
.zsl-breadcrumbs__link:focus-visible,
.zsl-breadcrumbs__link:active {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.zsl-breadcrumbs a,
.zsl-breadcrumbs a:link,
.zsl-breadcrumbs a:visited,
.zsl-breadcrumbs__link,
.zsl-breadcrumbs__link:link,
.zsl-breadcrumbs__link:visited {
    color: var(--zsl-teal);
    transition: color var(--zsl-transition-fast);
}

.zsl-breadcrumbs a:hover,
.zsl-breadcrumbs a:focus,
.zsl-breadcrumbs a:focus-visible,
.zsl-breadcrumbs a:active,
.zsl-breadcrumbs__link:hover,
.zsl-breadcrumbs__link:focus,
.zsl-breadcrumbs__link:focus-visible,
.zsl-breadcrumbs__link:active {
    color: var(--zsl-navy);
}


/* Aktualnie otwarta strona */

.zsl-breadcrumbs__current {
    color: var(--zsl-text-muted);

    font-weight: var(--zsl-font-weight-regular);
}


/* Separator */

.zsl-breadcrumbs__separator {
    display: inline-block;

    flex: 0 0 auto;

    margin-left: 7px;
    margin-right: 7px;

    color: var(--zsl-text-muted);

    opacity: 0.65;
}


/* ==========================================================
   PAGE TITLE
   Obsługa czystego HTML + widgetu Elementora
   ========================================================== */

.zsl-page-title {
    width: 100%;
    max-width: 1000px;

    margin: 0;
    padding: 0;
}

.zsl-page-title,
.zsl-page-title .elementor-heading-title {
    color: var(--zsl-navy);

    font-family: var(--zsl-font-primary);

    font-size: 40px;
    line-height: 1.12;

    font-weight: var(--zsl-font-weight-bold);

    letter-spacing: -0.025em;
}

.zsl-page-title .elementor-heading-title {
    margin: 0;
    padding: 0;
}


/* ==========================================================
   PAGE LEAD
   ========================================================== */

.zsl-page-lead {
    max-width: 800px;

    margin: 16px 0 0;

    color: var(--zsl-text-muted);

    font-size: 17px;
    line-height: 1.55;

    font-weight: var(--zsl-font-weight-regular);
}


/* ==========================================================
   04. CONTENT
   ========================================================== */

.zsl-content {
    width: 100%;

    color: var(--zsl-text);

    font-size: 15.5px;
    line-height: var(--zsl-line-height-body);
}


/* ==========================================================
   FONT W TREŚCI
   Elementor / Gutenberg
   ========================================================== */

.zsl-content,
.zsl-content p,
.zsl-content li,
.zsl-content td,
.zsl-content th,
.zsl-content h2,
.zsl-content h3,
.zsl-content h4 {
    font-family: var(--zsl-font-primary);
}


/* ==========================================================
   CONTENT — H2
   ========================================================== */

.zsl-content h2 {
    margin:
        36px
        0
        16px;

    color: var(--zsl-navy);

    font-size: 28px;
    line-height: 1.25;

    font-weight: var(--zsl-font-weight-bold);

    letter-spacing: -0.02em;
}


/* ==========================================================
   CONTENT — H3
   ========================================================== */

.zsl-content h3 {
    margin:
        28px
        0
        12px;

    color: var(--zsl-navy);

    font-size: 21px;
    line-height: 1.3;

    font-weight: var(--zsl-font-weight-semibold);
}


/* ==========================================================
   CONTENT — H4
   ========================================================== */

.zsl-content h4 {
    margin:
        24px
        0
        10px;

    color: var(--zsl-navy);

    font-size: 18px;
    line-height: 1.35;

    font-weight: var(--zsl-font-weight-semibold);
}


/* ==========================================================
   PIERWSZY NAGŁÓWEK TREŚCI
   ========================================================== */

.zsl-content > h2:first-child,
.zsl-content > h3:first-child,
.zsl-content > h4:first-child,
.zsl-content .elementor-widget-container > h2:first-child,
.zsl-content .elementor-widget-container > h3:first-child,
.zsl-content .elementor-widget-container > h4:first-child {
    margin-top: 0;
}


/* ==========================================================
   AKAPITY
   ========================================================== */

.zsl-content p {
    margin: 0 0 16px;
}


/* ==========================================================
   LISTY
   ========================================================== */

.zsl-content ul,
.zsl-content ol {
    margin: 0 0 16px;

    padding-left: 1.4em;
}

.zsl-content li {
    margin-bottom: 6px;
}

.zsl-content li:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   LINKI
   ========================================================== */

.zsl-content a {
    color: var(--zsl-teal);

    text-decoration: none;

    transition: color var(--zsl-transition-fast);
}

.zsl-content a:hover,
.zsl-content a:focus-visible {
    color: var(--zsl-navy);

    text-decoration: none;
}


/* ==========================================================
   OBRAZY
   ========================================================== */

.zsl-content img {
    display: block;

    max-width: 100%;
    height: auto;

    margin-top: 28px;
    margin-bottom: 28px;

    border-radius: var(--zsl-radius-md);
}

/* Logotypy, herby i inne grafiki, które mają zachować prostokątny kształt. */
.zsl-content img.zsl-image--square,
.zsl-content .zsl-image--square img,
.zsl-content img.zsl-logo,
.zsl-content .zsl-logo img {
    border-radius: 0 !important;
}


/* ==========================================================
   BLOCKQUOTE
   ========================================================== */

.zsl-content blockquote {
    margin: 24px 0;

    padding:
        16px
        20px;

    background: var(--zsl-background-soft);

    border-left: 4px solid var(--zsl-teal);

    border-radius:
        0
        var(--zsl-radius-md)
        var(--zsl-radius-md)
        0;

    color: var(--zsl-text);
}


/* ==========================================================
   TABELE
   ========================================================== */

.zsl-content table {
    width: 100%;

    margin-top: 28px;
    margin-bottom: 28px;

    border-collapse: collapse;
}

.zsl-content th,
.zsl-content td {
    padding: 12px;

    border:
        var(--zsl-border-width)
        solid
        var(--zsl-border);

    text-align: left;
    vertical-align: top;
}

.zsl-content th {
    background: var(--zsl-background-soft);

    color: var(--zsl-navy);

    font-weight: var(--zsl-font-weight-semibold);
}


/* ==========================================================
   CONTENT WIDTH
   ========================================================== */


/* ==========================================================
   FULL
   Domyślna szerokość zwykłych podstron
   ========================================================== */

.zsl-content-full {
    width: 100%;
    max-width: 100%;

    margin-left: 0;
    margin-right: 0;
}


/* ==========================================================
   MEDIUM
   Strony głównie tekstowe
   ========================================================== */

.zsl-content-medium {
    width: 100%;
    max-width: var(--zsl-content-medium);

    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   NARROW
   Długie treści artykułowe
   ========================================================== */

.zsl-content-narrow {
    width: 100%;
    max-width: var(--zsl-content-narrow);

    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   05. SECTION HEADINGS
   ========================================================== */

.zsl-section-heading {
    max-width: 820px;

    margin-bottom: 24px;
}

.zsl-section-heading h2 {
    margin: 0;

    color: var(--zsl-navy);

    font-size: 30px;
    line-height: 1.22;

    font-weight: var(--zsl-font-weight-bold);

    letter-spacing: -0.02em;
}

.zsl-section-heading p {
    margin: 10px 0 0;

    color: var(--zsl-text-muted);

    font-size: 15px;
    line-height: var(--zsl-line-height-body);
}


/* ==========================================================
   EYEBROW
   ========================================================== */

.zsl-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--zsl-teal);

    font-size: 11px;
    line-height: 1.4;

    font-weight: var(--zsl-font-weight-bold);

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


/* ==========================================================
   06. GRID
   ========================================================== */

.zsl-grid {
    display: grid;

    width: 100%;

    gap: 20px;
}

.zsl-grid > * {
    min-width: 0;
}

.zsl-grid--2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.zsl-grid--3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.zsl-grid--4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* ==========================================================
   07. CARD
   ========================================================== */

.zsl-card {
    width: 100%;
    height: 100%;

    padding: 28px;

    background: var(--zsl-white);

    border:
        var(--zsl-border-width)
        solid
        var(--zsl-border);

    border-radius: var(--zsl-radius-md);

    box-shadow: var(--zsl-shadow-sm);
}


/* Nagłówki kart */

.zsl-card h2,
.zsl-card h3 {
    margin: 0 0 12px;

    color: var(--zsl-navy);

    font-size: 20px;
    line-height: 1.3;

    font-weight: var(--zsl-font-weight-bold);
}


/* Tekst kart */

.zsl-card p {
    margin: 0;

    color: var(--zsl-text);

    font-size: 14.5px;
    line-height: 1.55;
}


/* ==========================================================
   08. PAGE CTA
   ========================================================== */

.zsl-page-cta {
    width: 100%;

    padding: 32px;

    background: var(--zsl-navy);

    color: var(--zsl-white);

    border-radius: var(--zsl-radius-lg);
}


/* Nagłówek CTA */

.zsl-page-cta h2,
.zsl-page-cta h3 {
    margin: 0 0 12px;

    color: var(--zsl-white);

    font-size: 27px;
    line-height: 1.25;

    font-weight: var(--zsl-font-weight-bold);
}


/* Tekst CTA */

.zsl-page-cta p {
    margin: 0;

    color: var(--zsl-white);

    font-size: 15px;
    line-height: 1.55;
}


/* ==========================================================
   09. RELATED CONTENT
   ========================================================== */

.zsl-related {
    width: 100%;

    padding-top: var(--zsl-section-sm);
    padding-bottom: var(--zsl-section-sm);

    background: var(--zsl-background-soft);

    border-top:
        var(--zsl-border-width)
        solid
        var(--zsl-border);
}


/* ==========================================================
   10. INFO-BOX / KOMUNIKATY
   ========================================================== */

.zsl-info {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    margin: 20px 0;
    padding: 20px 22px;
    background: var(--zsl-info-soft);
    color: var(--zsl-text);
    border: var(--zsl-border-width) solid rgba(20, 123, 137, 0.30);
    border-left: 4px solid var(--zsl-teal);
    border-radius: var(--zsl-radius-md);
}

.zsl-info__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--zsl-teal);
    color: var(--zsl-white);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    font-weight: var(--zsl-font-weight-bold);
}

.zsl-info__content {
    min-width: 0;
}

.zsl-info__title,
.zsl-info h2,
.zsl-info h3,
.zsl-info h4 {
    margin: 0 0 6px;
    color: var(--zsl-navy);
    font-family: var(--zsl-font-primary);
    font-size: 17px;
    line-height: 1.35;
    font-weight: var(--zsl-font-weight-bold);
}

.zsl-info p {
    margin: 0;
    color: var(--zsl-text);
    font-size: 14.5px;
    line-height: 1.6;
}

.zsl-info p + p,
.zsl-info ul,
.zsl-info ol {
    margin-top: 10px;
}

.zsl-info--teal,
.zsl-info--info {
    background: var(--zsl-info-soft);
    border-color: rgba(20, 123, 137, 0.30);
    border-left-color: var(--zsl-teal);
}

.zsl-info--teal .zsl-info__icon,
.zsl-info--info .zsl-info__icon {
    background: var(--zsl-teal);
}

.zsl-info--yellow,
.zsl-info--important {
    background: var(--zsl-warning-soft);
    border-color: rgba(240, 180, 0, 0.42);
    border-left-color: var(--zsl-yellow);
}

.zsl-info--yellow .zsl-info__icon,
.zsl-info--important .zsl-info__icon {
    background: var(--zsl-yellow);
    color: var(--zsl-navy);
}

.zsl-info--navy {
    background: var(--zsl-navy-soft);
    border-color: rgba(8, 43, 73, 0.26);
    border-left-color: var(--zsl-navy);
}

.zsl-info--navy .zsl-info__icon {
    background: var(--zsl-navy);
}

.zsl-info--warning {
    background: var(--zsl-danger-soft);
    border-color: rgba(198, 61, 72, 0.30);
    border-left-color: var(--zsl-danger);
}

.zsl-info--warning .zsl-info__icon {
    background: var(--zsl-danger);
}

.zsl-info--warning .zsl-info__title,
.zsl-info--warning h2,
.zsl-info--warning h3,
.zsl-info--warning h4 {
    color: var(--zsl-danger);
}

.zsl-info--success {
    background: var(--zsl-success-soft);
    border-color: rgba(24, 134, 75, 0.28);
    border-left-color: var(--zsl-success);
}

.zsl-info--success .zsl-info__icon {
    background: var(--zsl-success);
}

.zsl-info--success .zsl-info__title,
.zsl-info--success h2,
.zsl-info--success h3,
.zsl-info--success h4 {
    color: var(--zsl-success);
}

.zsl-info--tech {
    background: var(--zsl-tech-soft);
    border-color: rgba(60, 158, 172, 0.34);
    border-left-color: var(--zsl-tech-accent);
}

.zsl-info--tech .zsl-info__icon {
    background: var(--zsl-tech);
}

.zsl-info--lo {
    background: var(--zsl-lo-soft);
    border-color: rgba(240, 180, 0, 0.38);
    border-left-color: var(--zsl-lo);
}

.zsl-info--lo .zsl-info__icon {
    background: var(--zsl-lo);
    color: var(--zsl-lo-dark);
}


/* ==========================================================
   11. TIMELINE — PIONOWY I POZIOMY
   ========================================================== */

.zsl-timeline {
    position: relative;
    width: 100%;
    margin: 24px 0;
}

.zsl-timeline__item {
    position: relative;
    min-width: 0;
    padding: 0 0 30px 52px;
}

.zsl-timeline__item:last-child {
    padding-bottom: 0;
}

.zsl-timeline__item::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: var(--zsl-border);
}

.zsl-timeline__item:last-child::after {
    display: none;
}

.zsl-timeline__marker {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    background: var(--zsl-white);
    color: var(--zsl-teal);

    border: 3px solid var(--zsl-teal);
    border-radius: 50%;

    font-size: 13px;
    line-height: 1;
    font-weight: var(--zsl-font-weight-bold);
}

.zsl-timeline__icon {
    font-size: 14px;
    line-height: 1;
}

.zsl-timeline__date {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    margin-bottom: 8px;
    padding: 0 10px;

    background: var(--zsl-navy);
    color: var(--zsl-white);

    border-radius: var(--zsl-radius-pill);

    font-size: 11.5px;
    line-height: 1;
    font-weight: var(--zsl-font-weight-bold);
}

.zsl-timeline__content {
    min-width: 0;
}

.zsl-timeline__content h2,
.zsl-timeline__content h3,
.zsl-timeline__content h4 {
    margin: 0 0 8px;
    color: var(--zsl-navy);
}

.zsl-timeline__content p {
    margin: 0;
}

.zsl-timeline__content p + p {
    margin-top: 10px;
}

.zsl-timeline--teal .zsl-timeline__date {
    background: var(--zsl-teal);
}

.zsl-timeline--horizontal {
    display: grid;

    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 32%);

    gap: 18px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 4px 2px 16px;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    overscroll-behavior-x: contain;

    scrollbar-width: thin;
    scrollbar-color: var(--zsl-teal) var(--zsl-background-soft);
}

.zsl-timeline--horizontal::-webkit-scrollbar {
    height: 8px;
}

.zsl-timeline--horizontal::-webkit-scrollbar-track {
    background: var(--zsl-background-soft);
    border-radius: var(--zsl-radius-pill);
}

.zsl-timeline--horizontal::-webkit-scrollbar-thumb {
    background: var(--zsl-teal);
    border-radius: var(--zsl-radius-pill);
}

.zsl-timeline--horizontal .zsl-timeline__item {
    min-height: 100%;

    padding: 24px;

    background: var(--zsl-white);

    border: var(--zsl-border-width) solid var(--zsl-border);
    border-top: 4px solid var(--zsl-teal);

    border-radius: var(--zsl-radius-lg);

    box-shadow: var(--zsl-shadow-sm);

    scroll-snap-align: start;
}

.zsl-timeline--horizontal .zsl-timeline__item::after {
    display: none;
}

.zsl-timeline--horizontal .zsl-timeline__marker {
    position: static;
    margin-bottom: 14px;
}


/* ==========================================================
   12. DOKUMENTY / PLIKI DO POBRANIA
   ========================================================== */

.zsl-documents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

    width: 100%;

    margin: 24px 0;
}

.zsl-document {
    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;

    gap: 16px;

    align-items: center;

    width: 100%;
    min-width: 0;

    padding: 16px 18px;

    background: var(--zsl-white);
    color: var(--zsl-text);

    border: var(--zsl-border-width) solid var(--zsl-border);

    border-radius: var(--zsl-radius-md);

    box-shadow: var(--zsl-shadow-sm);

    text-decoration: none !important;

    transition:
        border-color var(--zsl-transition-fast),
        box-shadow var(--zsl-transition-fast),
        transform var(--zsl-transition-fast);
}

.zsl-document:hover,
.zsl-document:focus-visible {
    color: var(--zsl-text);

    border-color: var(--zsl-teal-light);

    box-shadow: var(--zsl-shadow-md);

    transform: translateY(-2px);

    text-decoration: none !important;
}

.zsl-document__icon {
    display: inline-flex;

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

    width: 48px;
    height: 48px;

    background: var(--zsl-navy-soft);
    color: var(--zsl-navy);

    border-radius: 12px;

    font-size: 11px;
    line-height: 1;

    font-weight: var(--zsl-font-weight-bold);

    letter-spacing: 0.03em;

    text-transform: uppercase;
}

.zsl-document__body {
    min-width: 0;
}

.zsl-document__title {
    display: block;

    margin-bottom: 4px;

    color: var(--zsl-navy);

    font-size: 14.5px;
    line-height: 1.4;

    font-weight: var(--zsl-font-weight-semibold);
}

.zsl-document__meta {
    display: block;

    color: var(--zsl-text-muted);

    font-size: 11.5px;
    line-height: 1.4;
}

.zsl-document__action {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: var(--zsl-teal);

    font-size: 12.5px;

    font-weight: var(--zsl-font-weight-semibold);

    white-space: nowrap;
}

.zsl-document:hover .zsl-document__action,
.zsl-document:focus-visible .zsl-document__action {
    color: var(--zsl-navy);
}

.zsl-document--pdf .zsl-document__icon {
    background: var(--zsl-danger-soft);
    color: var(--zsl-danger);
}

.zsl-document--doc .zsl-document__icon {
    background: var(--zsl-navy-soft);
    color: var(--zsl-navy);
}

.zsl-document--xls .zsl-document__icon {
    background: var(--zsl-success-soft);
    color: var(--zsl-success);
}

.zsl-document--link .zsl-document__icon {
    background: var(--zsl-info-soft);
    color: var(--zsl-teal);
}


/* ==========================================================
   13. OSOBY / PERSON CARDS
   ========================================================== */

.zsl-person-grid {
    display: grid;

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

    gap: 20px;

    width: 100%;

    margin: 24px 0;
}

.zsl-person {
    overflow: hidden;

    width: 100%;
    min-width: 0;

    background: var(--zsl-white);

    border: var(--zsl-border-width) solid var(--zsl-border);

    border-radius: var(--zsl-radius-lg);

    box-shadow: var(--zsl-shadow-sm);
}

.zsl-person__photo {
    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: var(--zsl-background-soft);
}

.zsl-person__photo img,
.zsl-content .zsl-person__photo img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;

    border-radius: 0;
}

.zsl-person__content {
    padding: 20px;
}

.zsl-person__name {
    margin: 0 0 5px;

    color: var(--zsl-navy);

    font-size: 18px;
    line-height: 1.3;

    font-weight: var(--zsl-font-weight-bold);
}

.zsl-person__role {
    display: block;

    margin-bottom: 14px;

    color: var(--zsl-teal);

    font-size: 12.5px;
    line-height: 1.4;

    font-weight: var(--zsl-font-weight-semibold);
}

.zsl-person__description {
    margin: 0 0 14px;

    color: var(--zsl-text-muted);

    font-size: 13.5px;
    line-height: 1.55;
}

.zsl-person__contact {
    display: flex;
    flex-direction: column;

    gap: 7px;

    padding-top: 14px;

    border-top:
        var(--zsl-border-width)
        solid
        var(--zsl-border);
}

.zsl-person__contact a,
.zsl-person__contact span {
    color: var(--zsl-text);

    font-size: 12.5px;
    line-height: 1.45;

    text-decoration: none !important;
}

.zsl-person__contact a:hover,
.zsl-person__contact a:focus-visible {
    color: var(--zsl-teal);
}

.zsl-person--horizontal {
    display: grid;

    grid-template-columns:
        minmax(180px, 32%)
        minmax(0, 1fr);
}

.zsl-person--horizontal .zsl-person__photo {
    height: 100%;

    aspect-ratio: auto;
}


/* ==========================================================
   14. ACCORDION / DETAILS
   ========================================================== */

.zsl-accordion {
    display: flex;
    flex-direction: column;

    gap: 10px;

    width: 100%;

    margin: 24px 0;
}

.zsl-accordion__item {
    overflow: hidden;

    background: var(--zsl-white);

    border: var(--zsl-border-width) solid var(--zsl-border);

    border-radius: var(--zsl-radius-lg);

    transition:
        border-color var(--zsl-transition-fast),
        box-shadow var(--zsl-transition-fast);
}

.zsl-accordion__item[open] {
    border-color: rgba(20, 123, 137, 0.42);

    box-shadow: var(--zsl-shadow-sm);
}

.zsl-accordion__item summary {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 58px;

    padding:
        16px
        52px
        16px
        20px;

    color: var(--zsl-navy);

    font-size: 15px;
    line-height: 1.45;

    font-weight: var(--zsl-font-weight-semibold);

    list-style: none;

    cursor: pointer;

    transition:
        background var(--zsl-transition-fast);
}

.zsl-accordion__item summary::-webkit-details-marker {
    display: none;
}

.zsl-accordion__item summary::after {
    content: "+";

    position: absolute;

    right: 18px;
    top: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    color: var(--zsl-teal);

    font-size: 24px;
    line-height: 1;

    font-weight: var(--zsl-font-weight-medium);

    transform: translateY(-50%) rotate(0deg);
    transform-origin: center;

    transition:
        transform var(--zsl-transition-fast),
        color var(--zsl-transition-fast);
}

.zsl-accordion__item summary:hover,
.zsl-accordion__item summary:focus-visible {
    background: var(--zsl-background-soft);
}

.zsl-accordion__item[open] summary::after {
    color: var(--zsl-navy);

    transform: translateY(-50%) rotate(45deg);
}

.zsl-accordion__content {
    padding:
        0
        20px
        20px;

    color: var(--zsl-text);

    font-size: 14px;
    line-height: 1.6;
}

.zsl-accordion__content > *:first-child {
    margin-top: 0;
}

.zsl-accordion__content > *:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   15. CTA / LINK-BOX
   ========================================================== */

.zsl-link-box {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto;

    gap: 16px;

    align-items: center;

    width: 100%;

    padding: 18px 20px;

    background: var(--zsl-white);
    color: var(--zsl-text);

    border: var(--zsl-border-width) solid var(--zsl-border);

    border-radius: var(--zsl-radius-md);

    box-shadow: var(--zsl-shadow-sm);

    text-decoration: none !important;

    transition:
        transform var(--zsl-transition-fast),
        border-color var(--zsl-transition-fast),
        box-shadow var(--zsl-transition-fast),
        background var(--zsl-transition-fast);
}

.zsl-link-box:hover,
.zsl-link-box:focus-visible {
    color: var(--zsl-text);

    border-color: var(--zsl-teal-light);

    box-shadow: var(--zsl-shadow-md);

    transform: translateY(-2px);

    text-decoration: none !important;
}

.zsl-link-box__icon {
    display: inline-flex;

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

    width: 40px;
    height: 40px;

    background: var(--zsl-info-soft);
    color: var(--zsl-teal);

    border-radius: 12px;

    font-size: 18px;
}

.zsl-link-box__content {
    min-width: 0;
}

.zsl-link-box__title {
    display: block;

    margin-bottom: 3px;

    color: var(--zsl-navy);

    font-size: 15px;
    line-height: 1.4;

    font-weight: var(--zsl-font-weight-semibold);
}

.zsl-link-box__text {
    display: block;

    color: var(--zsl-text-muted);

    font-size: 12.5px;
    line-height: 1.45;
}

.zsl-link-box__arrow {
    color: var(--zsl-teal);

    font-size: 20px;
    line-height: 1;

    transition:
        transform var(--zsl-transition-fast);
}

.zsl-link-box:hover .zsl-link-box__arrow,
.zsl-link-box:focus-visible .zsl-link-box__arrow {
    transform: translateX(4px);
}

.zsl-link-box--navy {
    background: var(--zsl-navy);
    color: var(--zsl-white);
    border-color: var(--zsl-navy);
}

.zsl-link-box--navy .zsl-link-box__title,
.zsl-link-box--navy .zsl-link-box__text,
.zsl-link-box--navy .zsl-link-box__arrow {
    color: var(--zsl-white);
}

.zsl-link-box--navy .zsl-link-box__text {
    opacity: 0.82;
}

.zsl-link-box--yellow {
    background: var(--zsl-yellow);
    color: var(--zsl-navy);
    border-color: var(--zsl-yellow);
}

.zsl-link-box--yellow .zsl-link-box__title,
.zsl-link-box--yellow .zsl-link-box__text,
.zsl-link-box--yellow .zsl-link-box__arrow {
    color: var(--zsl-navy);
}


/* ==========================================================
   16. LINK-LIST / SZYBKIE LINKI
   ========================================================== */

.zsl-link-list {
    display: grid;

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

    gap: 10px;

    width: 100%;

    margin: 20px 0;
}

.zsl-link-list--3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.zsl-link-list__item {
    display: grid;

    grid-template-columns:
        30px
        minmax(0, 1fr)
        auto;

    gap: 10px;

    align-items: center;

    min-width: 0;

    padding: 13px 15px;

    background: var(--zsl-white);
    color: var(--zsl-navy);

    border: var(--zsl-border-width) solid var(--zsl-border);

    border-radius: var(--zsl-radius-sm);

    text-decoration: none !important;

    transition:
        background var(--zsl-transition-fast),
        border-color var(--zsl-transition-fast),
        transform var(--zsl-transition-fast);
}

.zsl-link-list__item:hover,
.zsl-link-list__item:focus-visible {
    background: var(--zsl-info-soft);
    color: var(--zsl-navy);

    border-color: var(--zsl-teal-light);

    transform: translateY(-1px);

    text-decoration: none !important;
}

.zsl-link-list__icon {
    display: inline-flex;

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

    width: 28px;
    height: 28px;

    background: var(--zsl-info-soft);
    color: var(--zsl-teal);

    border-radius: 8px;

    font-size: 13px;
}

.zsl-link-list__label {
    min-width: 0;

    font-size: 13.5px;
    line-height: 1.4;

    font-weight: var(--zsl-font-weight-medium);
}

.zsl-link-list__arrow {
    color: var(--zsl-teal);

    font-size: 16px;
}


/* ==========================================================
   17. KARTY KONTAKTOWE
   ========================================================== */

.zsl-contact-grid {
    display: grid;

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

    gap: 18px;

    width: 100%;

    margin: 24px 0;
}

.zsl-contact-card {
    width: 100%;
    min-width: 0;

    padding: 22px;

    background: var(--zsl-white);

    border: var(--zsl-border-width) solid var(--zsl-border);

    border-radius: var(--zsl-radius-md);

    box-shadow: var(--zsl-shadow-sm);
}

.zsl-contact-card__icon {
    display: inline-flex;

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

    width: 40px;
    height: 40px;

    margin-bottom: 16px;

    background: var(--zsl-info-soft);
    color: var(--zsl-teal);

    border-radius: 12px;

    font-size: 18px;
}

.zsl-contact-card__title {
    margin: 0 0 14px;

    color: var(--zsl-navy);

    font-size: 18px;
    line-height: 1.3;

    font-weight: var(--zsl-font-weight-bold);
}

.zsl-contact-card__row {
    display: grid;

    grid-template-columns:
        78px
        minmax(0, 1fr);

    gap: 8px;

    padding: 7px 0;

    border-top:
        var(--zsl-border-width)
        solid
        var(--zsl-border);
}

.zsl-contact-card__row:first-of-type {
    border-top: 0;
}

.zsl-contact-card__label {
    color: var(--zsl-text-muted);

    font-size: 11.5px;
    line-height: 1.45;

    font-weight: var(--zsl-font-weight-medium);
}

.zsl-contact-card__value,
.zsl-contact-card__value a {
    min-width: 0;

    color: var(--zsl-text);

    font-size: 12.5px;
    line-height: 1.45;

    overflow-wrap: anywhere;

    text-decoration: none !important;
}

.zsl-contact-card__value a:hover,
.zsl-contact-card__value a:focus-visible {
    color: var(--zsl-teal);
}

.zsl-contact-card--primary {
    border-top: 4px solid var(--zsl-teal);
}


/* ==========================================================
   18. TABELA RESPONSYWNA
   ========================================================== */

.zsl-table-wrap {
    width: 100%;
    max-width: 100%;

    margin: 24px 0;

    overflow-x: auto;

    border: var(--zsl-border-width) solid var(--zsl-border);

    border-radius: var(--zsl-radius-md);

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: var(--zsl-teal) var(--zsl-background-soft);
}

.zsl-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.zsl-table-wrap::-webkit-scrollbar-track {
    background: var(--zsl-background-soft);
}

.zsl-table-wrap::-webkit-scrollbar-thumb {
    background: var(--zsl-teal);

    border-radius: var(--zsl-radius-pill);
}

.zsl-table-wrap table,
.zsl-content .zsl-table-wrap table {
    width: 100%;
    min-width: 720px;

    margin: 0;

    border: 0;

    border-collapse: collapse;
}

.zsl-table-wrap th,
.zsl-table-wrap td {
    padding: 12px 14px;

    border-top: 0;
    border-left: 0;
    border-right: 0;

    border-bottom:
        var(--zsl-border-width)
        solid
        var(--zsl-border);
}

.zsl-table-wrap tr:last-child td {
    border-bottom: 0;
}

.zsl-table-wrap--compact table {
    min-width: 560px;
}


/* ==========================================================
   19. GALERIA
   ========================================================== */

.zsl-gallery {
    display: grid;

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

    gap: 16px;

    width: 100%;

    margin: 24px 0;
}

.zsl-gallery--2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.zsl-gallery--3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.zsl-gallery--4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.zsl-gallery__item {
    min-width: 0;

    margin: 0;
}

.zsl-gallery__link {
    display: block;

    overflow: hidden;

    background: var(--zsl-background-soft);

    border-radius: var(--zsl-radius-md);

    text-decoration: none !important;
}

.zsl-gallery__item img,
.zsl-content .zsl-gallery__item img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    margin: 0;

    object-fit: cover;

    border-radius: 0;

    transition:
        transform 720ms var(--zsl-ease-emphasized),
        filter 720ms var(--zsl-ease-emphasized);
}

.zsl-gallery__link:hover img,
.zsl-gallery__link:focus-visible img {
    transform: scale(1.045);

    filter: saturate(1.035) contrast(1.015);
}

.zsl-gallery__caption {
    display: block;

    padding: 9px 2px 0;

    color: var(--zsl-text-muted);

    font-size: 11.5px;
    line-height: 1.45;
}


/* ==========================================================
   20. RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 1024px) {

    /* ======================================================
       CONTAINER
       ====================================================== */

    .zsl-container {
        padding-left: var(--zsl-page-padding-tablet);
        padding-right: var(--zsl-page-padding-tablet);
    }


    /* ======================================================
       PAGE HEADER
       ====================================================== */

    .zsl-page-header {
        padding-top: 28px;
        padding-bottom: 28px;
    }


    /* ======================================================
       PAGE TITLE
       ====================================================== */

    .zsl-page-title,
    .zsl-page-title .elementor-heading-title {
        font-size: 34px;
    }


    /* ======================================================
       PAGE LEAD
       ====================================================== */

    .zsl-page-lead {
        max-width: 720px;

        margin-top: 14px;

        font-size: 16px;
    }


    /* ======================================================
       SECTIONS
       ====================================================== */

    .zsl-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .zsl-page > .zsl-page-header + .zsl-section {
        padding-top: var(--zsl-page-content-top-tablet);
    }

    .zsl-section--sm {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .zsl-section--lg {
        padding-top: 60px;
        padding-bottom: 60px;
    }


    /* ======================================================
       CONTENT
       ====================================================== */

    .zsl-content {
        font-size: 15.5px;
    }

    .zsl-content h2 {
        margin-top: 32px;

        font-size: 26px;
    }

    .zsl-content h3 {
        margin-top: 26px;

        font-size: 20px;
    }

    .zsl-content h4 {
        font-size: 17px;
    }


    /* ======================================================
       SECTION HEADING
       ====================================================== */

    .zsl-section-heading {
        margin-bottom: 22px;
    }

    .zsl-section-heading h2 {
        font-size: 27px;
    }

    .zsl-section-heading p {
        font-size: 15px;
    }


    /* ======================================================
       GRID
       ====================================================== */

    .zsl-grid {
        gap: 18px;
    }

    .zsl-grid--3,
    .zsl-grid--4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* ======================================================
       CARD
       ====================================================== */

    .zsl-card {
        padding: 24px;
    }

    .zsl-card h2,
    .zsl-card h3 {
        font-size: 19px;
    }


    /* ======================================================
       CTA
       ====================================================== */

    .zsl-page-cta {
        padding: 28px;
    }

    .zsl-page-cta h2,
    .zsl-page-cta h3 {
        font-size: 24px;
    }


    /* ======================================================
       KOMPONENTY — TABLET
       ====================================================== */

    .zsl-info {
        padding: 18px 20px;
    }

    .zsl-timeline--horizontal {
        grid-auto-columns:
            minmax(280px, 46%);
    }

    .zsl-documents {
        grid-template-columns: 1fr;
    }

    .zsl-person-grid,
    .zsl-contact-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .zsl-link-list--3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .zsl-gallery--3,
    .zsl-gallery--4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   21. RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 767px) {

    /* ======================================================
       CONTAINER
       ====================================================== */

    .zsl-container {
        padding-left: var(--zsl-page-padding-mobile);
        padding-right: var(--zsl-page-padding-mobile);
    }


    /* ======================================================
       PAGE HEADER
       ====================================================== */

    .zsl-page-header {
        padding-top: 24px;
        padding-bottom: 24px;
    }


    /* ======================================================
       BREADCRUMBS
       ====================================================== */

    .zsl-breadcrumbs {
        margin-bottom: 10px;

        font-size: 11px;
        line-height: 1.45;
    }

    .zsl-breadcrumbs__separator {
        margin-left: 5px;
        margin-right: 5px;
    }


    /* ======================================================
       PAGE TITLE
       ====================================================== */

    .zsl-page-title,
    .zsl-page-title .elementor-heading-title {
        font-size: 29px;
        line-height: 1.15;
    }


    /* ======================================================
       PAGE LEAD
       ====================================================== */

    .zsl-page-lead {
        margin-top: 12px;

        font-size: 15px;
        line-height: 1.5;
    }


    /* ======================================================
       SECTIONS
       ====================================================== */

    .zsl-section {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    .zsl-page > .zsl-page-header + .zsl-section {
        padding-top: var(--zsl-page-content-top-mobile);
    }

    .zsl-section--sm {
        padding-top: 26px;
        padding-bottom: 26px;
    }

    .zsl-section--lg {
        padding-top: 48px;
        padding-bottom: 48px;
    }


    /* ======================================================
       CONTENT
       ====================================================== */

    .zsl-content {
        font-size: 15px;
        line-height: 1.55;
    }

    .zsl-content p {
        margin-bottom: 14px;
    }

    .zsl-content h2 {
        margin-top: 28px;
        margin-bottom: 14px;

        font-size: 23px;
        line-height: 1.25;
    }

    .zsl-content h3 {
        margin-top: 24px;
        margin-bottom: 10px;

        font-size: 19px;
    }

    .zsl-content h4 {
        margin-top: 20px;

        font-size: 17px;
    }


    /* ======================================================
       BLOCKQUOTE
       ====================================================== */

    .zsl-content blockquote {
        margin-top: 20px;
        margin-bottom: 20px;

        padding: 14px 16px;
    }


    /* ======================================================
       SECTION HEADER
       ====================================================== */

    .zsl-section-heading {
        margin-bottom: 20px;
    }

    .zsl-section-heading h2 {
        font-size: 24px;
    }

    .zsl-section-heading p {
        margin-top: 8px;

        font-size: 14.5px;
    }


    /* ======================================================
       EYEBROW
       ====================================================== */

    .zsl-eyebrow {
        margin-bottom: 8px;

        font-size: 10.5px;
    }


    /* ======================================================
       GRID
       ====================================================== */

    .zsl-grid {
        gap: 16px;
    }

    .zsl-grid--2,
    .zsl-grid--3,
    .zsl-grid--4 {
        grid-template-columns: 1fr;
    }


    /* ======================================================
       CARDS
       ====================================================== */

    .zsl-card {
        padding: 20px;
    }

    .zsl-card h2,
    .zsl-card h3 {
        margin-bottom: 10px;

        font-size: 18px;
    }

    .zsl-card p {
        font-size: 14px;
    }


    /* ======================================================
       CTA
       ====================================================== */

    .zsl-page-cta {
        padding: 24px 20px;
    }

    .zsl-page-cta h2,
    .zsl-page-cta h3 {
        margin-bottom: 10px;

        font-size: 22px;
    }

    .zsl-page-cta p {
        font-size: 14.5px;
    }


    /* ======================================================
       KOMPONENTY — MOBILE
       ====================================================== */

    .zsl-info {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 12px;

        margin-top: 16px;
        margin-bottom: 16px;

        padding: 16px;
    }

    .zsl-info__icon {
        width: 36px;
        height: 36px;

        font-size: 16px;
    }

    .zsl-info__title,
    .zsl-info h2,
    .zsl-info h3,
    .zsl-info h4 {
        margin-bottom: 5px;

        font-size: 15.5px;
    }

    .zsl-info p {
        font-size: 13.5px;
    }


    .zsl-timeline__item {
        padding-left: 46px;
        padding-bottom: 24px;
    }

    .zsl-timeline__marker {
        width: 30px;
        height: 30px;
    }

    .zsl-timeline__item::after {
        left: 14px;
        top: 32px;
    }

    .zsl-timeline--horizontal {
        grid-auto-columns:
            minmax(260px, 88%);

        gap: 13px;
    }

    .zsl-timeline--horizontal .zsl-timeline__item {
        padding: 20px;
    }


    .zsl-documents,
    .zsl-person-grid,
    .zsl-contact-grid,
    .zsl-link-list,
    .zsl-link-list--3,
    .zsl-gallery,
    .zsl-gallery--2,
    .zsl-gallery--3,
    .zsl-gallery--4 {
        grid-template-columns: 1fr;
    }


    .zsl-document {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        gap: 12px;

        padding: 14px;
    }

    .zsl-document__icon {
        width: 44px;
        height: 44px;
    }

    .zsl-document__action {
        grid-column: 2;

        justify-self: start;

        margin-top: 2px;
    }


    .zsl-person--horizontal {
        grid-template-columns: 1fr;
    }

    .zsl-person--horizontal .zsl-person__photo {
        aspect-ratio: 4 / 3;
    }

    .zsl-person__content {
        padding: 18px;
    }


    .zsl-accordion__item summary {
        padding:
            16px
            48px
            16px
            16px;

        font-size: 14px;
    }

    .zsl-accordion__content {
        padding:
            0
            16px
            16px;

        font-size: 13.5px;
    }

    .zsl-accordion__item summary::after {
        right: 14px;

        width: 26px;
        height: 26px;

        font-size: 22px;
    }


    .zsl-link-box {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            auto;

        gap: 12px;

        padding: 15px 16px;
    }

    .zsl-link-box__icon {
        width: 36px;
        height: 36px;
    }

    .zsl-link-box__text {
        font-size: 11.5px;
    }

    .zsl-link-list__item {
        padding: 12px 13px;
    }


    .zsl-contact-card {
        padding: 18px;
    }

    .zsl-contact-card__row {
        grid-template-columns:
            70px
            minmax(0, 1fr);
    }


    .zsl-table-wrap {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .zsl-table-wrap table,
    .zsl-content .zsl-table-wrap table {
        min-width: 640px;
    }

    .zsl-table-wrap--compact table {
        min-width: 520px;
    }


    .zsl-gallery__caption {
        font-size: 11px;
    }

}


/* ==========================================================
   22. MOTION / INTERACTIVE UI / SAFETY
   ========================================================== */


/* ==========================================================
   TYPOGRAFIA — BEZ DZIELENIA SŁÓW W ŚRODKU
   ========================================================== */

.zsl-page h1,
.zsl-page h2,
.zsl-page h3,
.zsl-page h4,
.zsl-page-title,
.zsl-section-heading h2 {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
    text-wrap: balance;
}


/* ==========================================================
   GRID / FLEX — OCHRONA PRZED WYCHODZENIEM TREŚCI
   ========================================================== */

.zsl-page .zsl-grid > *,
.zsl-page .zsl-info > *,
.zsl-page .zsl-document > *,
.zsl-page .zsl-link-box > *,
.zsl-page .zsl-link-list__item > *,
.zsl-page .zsl-contact-card__row > *,
.zsl-page .zsl-person > *,
.zsl-page .zsl-card > * {
    min-width: 0;
}

.zsl-text-safe {
    min-width: 0;

    overflow-wrap: anywhere;
}


/* ==========================================================
   UNIWERSALNY BOX IKONY
   ========================================================== */

.zsl-icon-box {
    display: inline-flex;

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

    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    background: var(--zsl-info-soft);
    color: var(--zsl-teal);

    border-radius: 14px;
}

.zsl-icon-box svg {
    display: block;

    width: 26px;
    height: 26px;

    margin: auto;

    stroke: currentColor;
}

.zsl-icon-box--lg {
    width: 64px;
    height: 64px;

    border-radius: 18px;
}

.zsl-icon-box--lg svg {
    width: 32px;
    height: 32px;
}


/* ==========================================================
   MEDIA WRAPPER
   Resetuje globalne .zsl-content img wewnątrz komponentów
   ========================================================== */

.zsl-media {
    position: relative;

    overflow: hidden;

    min-width: 0;

    background: var(--zsl-background-soft);

    border-radius: var(--zsl-radius-lg);
}

.zsl-content .zsl-media img,
.zsl-media img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;

    object-fit: cover;

    border-radius: 0 !important;
}


/* ==========================================================
   STANDARDOWY HOVER ZDJĘCIA
   ========================================================== */

.zsl-media--interactive img {
    transition:
        transform 720ms var(--zsl-ease-emphasized),
        filter 720ms var(--zsl-ease-emphasized);
}

@media (hover: hover) and (pointer: fine) {

    .zsl-media--interactive:hover img {
        transform: scale(1.045);

        filter: saturate(1.035) contrast(1.015);
    }

}


/* ==========================================================
   INTERACTIVE CARD
   ========================================================== */

.zsl-interactive-card {
    transition:
        transform var(--zsl-transition),
        border-color var(--zsl-transition),
        box-shadow var(--zsl-transition),
        background var(--zsl-transition);
}

@media (hover: hover) and (pointer: fine) {

    .zsl-interactive-card:hover {
        transform:
            translateY(
                var(--zsl-hover-lift)
            );

        border-color:
            var(--zsl-teal-light);

        box-shadow:
            var(--zsl-shadow-md);
    }

}


/* ==========================================================
   ZOOM IN — STANDARD ZSŁ
   Treść pozostaje widoczna do momentu uruchomienia JS.

   JS dodaje:
   .zsl-motion-ready do .zsl-page

   oraz:
   .is-visible do elementu [data-zsl-reveal]
   ========================================================== */

[data-zsl-reveal] {
    opacity: 1;

    transform: none;
}

.zsl-motion-ready [data-zsl-reveal] {
    opacity: 0;

    transform:
        scale(
            var(--zsl-reveal-scale)
        );

    transform-origin:
        center center;

    will-change:
        transform,
        opacity;
}

.zsl-motion-ready [data-zsl-reveal].is-visible {
    opacity: 1;

    transform:
        scale(1);

    transition:
        transform
        var(--zsl-reveal-duration)
        var(--zsl-ease-emphasized)
        var(--zsl-reveal-delay, 0ms),

        opacity
        var(--zsl-reveal-opacity-duration)
        ease-out
        var(--zsl-reveal-delay, 0ms);
}


/* ==========================================================
   AUTOMATYCZNY STAGGER 70 MS
   Maksymalnie 280 ms
   ========================================================== */

[data-zsl-stagger] > [data-zsl-reveal]:nth-child(1) {
    --zsl-reveal-delay: 0ms;
}

[data-zsl-stagger] > [data-zsl-reveal]:nth-child(2) {
    --zsl-reveal-delay:
        calc(
            var(--zsl-reveal-stagger)
            * 1
        );
}

[data-zsl-stagger] > [data-zsl-reveal]:nth-child(3) {
    --zsl-reveal-delay:
        calc(
            var(--zsl-reveal-stagger)
            * 2
        );
}

[data-zsl-stagger] > [data-zsl-reveal]:nth-child(4) {
    --zsl-reveal-delay:
        calc(
            var(--zsl-reveal-stagger)
            * 3
        );
}

[data-zsl-stagger] > [data-zsl-reveal]:nth-child(5) {
    --zsl-reveal-delay:
        calc(
            var(--zsl-reveal-stagger)
            * 4
        );
}

[data-zsl-stagger] > [data-zsl-reveal]:nth-child(n + 6) {
    --zsl-reveal-delay: 280ms;
}


/* ==========================================================
   STABILNY PANEL INTERAKTYWNY
   Desktop utrzymuje przestrzeń,
   żeby zmiana zakładki nie przesuwała strony.
   ========================================================== */

.zsl-interactive-stage {
    position: relative;

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

    overflow: hidden;

    border-radius:
        var(--zsl-radius-lg);
}


/* ==========================================================
   FOCUS — JEDEN STANDARD DLA CAŁEJ STRONY
   ========================================================== */

.zsl-page :where(
    a,
    button,
    summary,
    [role="button"],
    [tabindex]
):focus-visible {

    outline:
        3px
        solid
        var(--zsl-focus-color);

    outline-offset: 3px;
}


/* ==========================================================
   TOUCH
   Brak „przyklejonych” efektów hover
   na ekranach dotykowych.
   ========================================================== */

@media (hover: none) {

    .zsl-interactive-card:hover {
        transform: none;
    }

    .zsl-media--interactive:hover img {
        transform: none;
        filter: none;
    }

}


/* ==========================================================
   23. RESPONSIVE — INTERACTIVE UI
   ========================================================== */

@media (max-width: 1024px) {

    /*
     * Na tablecie i mobile interaktywne stage
     * nie powinny mieć sztywnej wysokości.
     *
     * To eliminuje problemy typu:
     * - ucięta Klasa 2,
     * - ucięte 75% egzaminu,
     * - opisy wychodzące poza panel.
     */

    .zsl-interactive-stage {
        min-height: 0;

        height: auto;
    }

}


@media (max-width: 767px) {

    .zsl-icon-box--lg {
        width: 56px;
        height: 56px;
    }

    .zsl-icon-box--lg svg {
        width: 28px;
        height: 28px;
    }

}


/* ==========================================================
   24. DOSTĘPNOŚĆ — OGRANICZENIE ANIMACJI
   Globalne dla całej przestrzeni .zsl-page
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .zsl-page *,
    .zsl-page *::before,
    .zsl-page *::after {

        animation-duration:
            0.01ms
            !important;

        animation-delay:
            0ms
            !important;

        animation-iteration-count:
            1
            !important;

        transition-duration:
            0.01ms
            !important;

        transition-delay:
            0ms
            !important;

        scroll-behavior:
            auto
            !important;
    }


    .zsl-page [data-zsl-reveal],
    .zsl-motion-ready [data-zsl-reveal],
    .zsl-motion-ready [data-zsl-reveal].is-visible {

        opacity:
            1
            !important;

        transform:
            none
            !important;
    }


    .zsl-interactive-card:hover,
    .zsl-media--interactive:hover img {

        transform:
            none
            !important;
    }


    .zsl-timeline--horizontal {
        scroll-behavior:
            auto;
    }

}/* End custom CSS */